%PDF- %PDF-
Server IP : 37.220.80.31 / Your IP : 13.58.16.120 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/landing/settingsform/designpreview/src/ |
Upload File : |
import { Dom, Event, Tag } from 'main.core'; import { Control } from './internal/control'; import { BaseEvent, EventEmitter } from 'main.core.events'; import './css/style.css'; type Controls = { theme: { use: ?Control, baseColors: ?Control, corporateColor: ?Control, }, typo: { use: ?Control, textColor: ?Control, textSize: ?Control, textFont: ?Control, textWeight: ?Control, textLineHeight: ?Control, hColor: ?Control, hFont: ?Control, hWeight: ?Control, }, background: { use: ?Control, useSite: ?Control, field: ?Control, image: ?Control, position: ?Control, color: ?Control, }, } export class DesignPreview extends EventEmitter { static DEFAULT_FONT_SIZE = 14; static HEIGHT_PAGE_TITLE_WRAP = 74; controls: Controls; constructor(form: HTMLElement, options: Object = {}, phrase: Object = {}) { super(); this.setEventNamespace('BX.Landing.SettingsForm.DesignPreview'); this.form = form; this.phrase = phrase; this.initControls(options); this.initLayout(); this.applyStyles(); this.onApplyStyles = this.applyStyles.bind(this); } initLayout() { this.layout = DesignPreview.createLayout(this.phrase); this.styleNode = document.createElement("style"); Dom.append(this.styleNode, this.layout); Dom.append(this.layout, this.form); const paramsObserver = { threshold: 1 } const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { const availableHeight = document.documentElement.clientHeight - DesignPreview.HEIGHT_PAGE_TITLE_WRAP; if (entry.target.getBoundingClientRect().height <= availableHeight) { if (entry.isIntersecting) { if (!this.hasOwnProperty('defaultIntersecting')) { this.defaultIntersecting = true; } if (this.defaultIntersecting) { this.unFixElement(); } } else { if (!this.hasOwnProperty('defaultIntersecting')) { this.defaultIntersecting = false; } if (this.defaultIntersecting) { this.fixElement(); } } } }) }, paramsObserver) let elementDesignPreview = document.querySelector('.landing-design-preview-wrap'); observer.observe(elementDesignPreview); } initControls(options: Object) { this.controls = {}; for (let group in options) { if (!options.hasOwnProperty(group)) { continue; } for (let key in options[group]) { if (!options[group].hasOwnProperty(key)) { continue; } if (!this.controls[group]) { this.controls[group] = {}; } const control = new Control(options[group][key]['control']); control.setChangeHandler(this.applyStyles.bind(this)); if (group === 'theme' && key !== 'use') { control.setClickHandler(this.applyStyles.bind(this)); } if (group === 'background' && key === 'field') { control.setClickHandler(this.applyStyles.bind(this)); } this.controls[group][key] = control; } } // parents and default for (let group in this.controls) { if (!this.controls.hasOwnProperty(group)) { continue; } for (let key in this.controls[group]) { if (!this.controls[group].hasOwnProperty(key)) { continue; } if (key !== 'use' && this.controls[group]['use']) { this.controls[group][key].setParent(this.controls[group]['use']); if (options[group][key]['defaultValue']) { this.controls[group][key].setDefaultValue(options[group][key]['defaultValue']); } } } } if (this.controls.theme.corporateColor.node) { this.controls.theme.corporateColor.node.subscribe('onSelectColor', this.onApplyStyles.bind(this)); } if (this.controls.background.image.node) { this.controls.background.image.node.subscribe('change', this.onApplyStyles.bind(this)); } if (this.controls.typo.textColor.node) { EventEmitter.subscribe(this.controls.typo.textColor.node, 'BX.Landing.ColorPicker:onSelectColor', this.onApplyStyles.bind(this)); EventEmitter.subscribe(this.controls.typo.textColor.node, 'BX.Landing.ColorPicker:onClearColorPicker', this.onApplyStyles.bind(this)); } if (this.controls.typo.hColor.node) { EventEmitter.subscribe(this.controls.typo.hColor.node, 'BX.Landing.ColorPicker:onSelectColor', this.onApplyStyles.bind(this)); EventEmitter.subscribe(this.controls.typo.hColor.node, 'BX.Landing.ColorPicker:onClearColorPicker', this.onApplyStyles.bind(this)); } if (this.controls.background.color.node) { EventEmitter.subscribe(this.controls.background.color.node, 'BX.Landing.ColorPicker:onSelectColor', this.onApplyStyles.bind(this)); EventEmitter.subscribe(this.controls.background.color.node, 'BX.Landing.ColorPicker:onClearColorPicker', this.onApplyStyles.bind(this)); } this.panel = BX.Landing.UI.Panel.GoogleFonts.getInstance(); Dom.append(this.panel.layout, document.body); const fieldCode = this.controls.typo.textFont.node; const fieldCodeH = this.controls.typo.hFont.node; if (fieldCode && fieldCodeH) { fieldCode.setAttribute("value", this.convertFont(fieldCode.value)); fieldCodeH.setAttribute("value", this.convertFont(fieldCodeH.value)); Event.bind(fieldCode, 'click', this.onCodeClick.bind(this)); Event.bind(fieldCodeH, 'click', this.onCodeClick.bind(this)); } } onCodeClick(event: BaseEvent) { this.panel.show({ hideOverlay: true, context: window, }).then((font) => { const element = event.target; element.setAttribute("value", font.family); this.onApplyStyles(); }); } onApplyStyles() { this.applyStyles(); } applyStyles() { this.styleNode.innerHTML = this.generateCss(); } generateSelectorStart(className) { return '.' + className + ' {'; } generateSelectorEnd(selector) { return selector + ' }'; } getCSSPart1(css) { let colorPrimary; let setColors = this.controls.theme.baseColors.node; let colorPickerElement; if (this.controls.theme.corporateColor.node) { colorPickerElement = this.controls.theme.corporateColor.node.element; } let activeColorNode; if (setColors) { activeColorNode = setColors.querySelector('.active'); } let isActiveColorPickerElement; if (colorPickerElement) { isActiveColorPickerElement = colorPickerElement.classList.contains('active'); } if (activeColorNode) { colorPrimary = activeColorNode.dataset.value; } if (isActiveColorPickerElement) { colorPrimary = colorPickerElement.dataset.value; } //for 'design page', if use not checked, use color from 'design site' if (this.controls.theme.use.node) { if (this.controls.theme.use.node.checked === false) { colorPrimary = this.controls.theme.corporateColor.defaultValue; } } if (colorPrimary) { if (colorPrimary[0] !== '#') { colorPrimary = '#' + colorPrimary; } css += `--design-preview-primary: ${colorPrimary};`; } return css; } getCSSPart2(css) { let textColor; let textFont; let hFont; let textSize; let fontWeight; let fontLineHeight; let hColor; let hWeight; if (this.controls.typo.textColor.node) { textColor = this.controls.typo.textColor.node.input.value; } if (this.controls.typo.textFont.node) { textFont = this.controls.typo.textFont.node.value; } if (this.controls.typo.hFont.node) { hFont = this.controls.typo.hFont.node.value; } if (this.controls.typo.textSize.node) { textSize = Math.round(this.controls.typo.textSize.node.value * DesignPreview.DEFAULT_FONT_SIZE) + 'px'; } if (this.controls.typo.textWeight.node) { fontWeight = this.controls.typo.textWeight.node.value; } if (this.controls.typo.textLineHeight.node) { fontLineHeight = this.controls.typo.textLineHeight.node.value; } if (this.controls.typo.hColor.node) { hColor = this.controls.typo.hColor.node.input.value; } if (this.controls.typo.hWeight.node) { hWeight = this.controls.typo.hWeight.node.value; } if (this.controls.typo.use.node) { if (this.controls.typo.use.node.checked === false) { textColor = this.controls.typo.textColor.defaultValue; textFont = this.controls.typo.textFont.defaultValue; hFont = this.controls.typo.hFont.defaultValue; textSize = Math.round(this.controls.typo.textSize.defaultValue * DesignPreview.DEFAULT_FONT_SIZE) + 'px'; fontWeight = this.controls.typo.textWeight.defaultValue; fontLineHeight = this.controls.typo.textLineHeight.defaultValue; hColor = this.controls.typo.hColor.defaultValue; hWeight = this.controls.typo.hWeight.defaultValue; } } let link; let linkH; if (textFont) { link = this.createLink(textFont); Dom.append(link, this.form); } if (hFont) { linkH = this.createLink(hFont); Dom.append(linkH, this.form); } css += `--design-preview-color: ${textColor};`; css += `--design-preview-font-theme: ${textFont};`; css += `--design-preview-font-size: ${textSize};`; css += `--design-preview-font-weight: ${fontWeight};`; css += `--design-preview-line-height: ${fontLineHeight};`; if (hColor) { css += `--design-preview-color-h: ${hColor};`; } else { css += `--design-preview-color-h: ${textColor};`; } if (hWeight) { css += `--design-preview-font-weight-h: ${hWeight};`; } else { css += `--design-preview-font-weight-h: ${fontWeight};`; } if (this.controls.typo.hFont.node) { css += `--design-preview-font-h-theme: ${hFont};`; } else { css += `--design-preview-font-h-theme: ${textFont};`; } return css; } createLink(font) { let link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css2?family='; link.href += font.replace(' ', '+'); link.href += ':wght@100;200;300;400;500;600;700;800;900'; return link; } getCSSPart3(css) { let bgColor = this.controls.background.color.node.input.value; let bgFieldNode = this.controls.background.field.node; let bgPictureElement = bgFieldNode.getElementsByClassName('landing-ui-field-image-hidden'); let bgPicture = bgPictureElement[0].getAttribute('src'); let bgPosition = this.controls.background.position.node.value; if (this.controls.background.use.node.checked === true) { css += `--design-preview-bg: ${bgColor};`; } else { bgPicture = ''; if (this.controls.background.useSite) { if (this.controls.background.useSite.defaultValue === 'Y') { bgColor = this.controls.background.color.defaultValue; bgPicture = this.controls.background.field.defaultValue; bgPosition = this.controls.background.position.defaultValue; css += `--design-preview-bg: ${bgColor};`; } } } if (this.controls.background.position) { if (bgPosition === 'center') { css += `background-image: url(${bgPicture});`; css += `background-attachment: scroll;`; css += `background-position: center;`; css += `background-repeat: no-repeat;`; css += `background-size: cover;`; } if (bgPosition === 'repeat') { css += `background-image: url(${bgPicture});`; css += `background-attachment: scroll;`; css += `background-position: center;`; css += `background-repeat: repeat;`; css += `background-size: 50%;`; } if (bgPosition === 'center_repeat_y') { css += `background-image: url(${bgPicture});`; css += `background-attachment: scroll;`; css += `background-position: top;`; css += `background-repeat: repeat-y;`; css += `background-size: 100%;`; } } return css; } generateCss() { let css; css = this.generateSelectorStart('landing-design-preview'); css = this.getCSSPart1(css); css = this.getCSSPart2(css); css = this.getCSSPart3(css); css = this.generateSelectorEnd(css); return css; } static createLayout(phrase): HTMLDivElement { return Tag.render` <div class="landing-design-preview-wrap"> <div class="landing-design-preview"> <h2 class="landing-design-preview-title">${phrase.title}</h2> <h4 class="landing-design-preview-subtitle">${phrase.subtitle}</h4> <p class="landing-design-preview-text"> ${phrase.text1} </p> <p class="landing-design-preview-text"> ${phrase.text2} </p> <div class=""> <a href="#" class="landing-design-preview-button">${phrase.button}</a> </div> </div> </div> `; } fixElement() { const paddingDesignForm = 20; const designForm = document.querySelector('.landing-design-form'); const designFormPosition = designForm.getBoundingClientRect(); const designPreview = document.querySelector('.landing-design-preview'); const designPreviewPosition = designPreview.getBoundingClientRect(); const bodyWidth = document.body.clientWidth; const positionFixedRight = bodyWidth - designFormPosition.right + paddingDesignForm; const paddingDesignPreview = 25; const designPreviewWrap = document.querySelector('.landing-design-preview-wrap'); const designPreviewWrapPosition = designPreviewWrap.getBoundingClientRect(); const maxWidth = designPreviewWrapPosition.width - (paddingDesignPreview * 2); if (designFormPosition.height > designPreviewPosition.height) { let fixedStyle; fixedStyle = 'position: fixed; '; fixedStyle += 'top: 20px; '; fixedStyle += 'margin-top: 0; '; fixedStyle += 'right: '+ positionFixedRight + 'px;'; fixedStyle += 'max-width: '+ maxWidth + 'px;'; designPreview.setAttribute("style", fixedStyle); } } unFixElement() { let designPreview = document.querySelector('.landing-design-preview'); designPreview.setAttribute("style", ''); } convertFont(font) { font = font.replace('g-font-', ''); font = font.replaceAll('-', ' '); font = font.replace('ibm ', 'IBM '); font = font.replace('pt ', 'PT '); font = font.replace(/sc(?:(?![a-z]))/i, 'SC'); font = font.replace(/jp(?:(?![a-z]))/i, 'JP'); font = font.replace(/kr(?:(?![a-z]))/i, 'KR'); font = font.replace(/tc(?:(?![a-z]))/i, 'TC'); font = font.replace(/(^|\s)\S/g, function(firstSymbol) { return firstSymbol.toUpperCase() }) return font; } }