Current Path : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/landing/ui/field/icon/src/ |
Current File : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/landing/ui/field/icon/src/icon.js |
import {Dom, Runtime, Type} from 'main.core'; import {IconPanel} from 'landing.ui.panel.iconpanel'; import {Image} from 'landing.ui.field.image' import {IconOptionsCard} from 'landing.ui.card.iconoptionscard'; import './css/style.css'; /** * @memberOf BX.Landing.UI.Field */ export class Icon extends Image { constructor(data) { super(data); this.uploadButton.layout.innerText = BX.Landing.Loc.getMessage("LANDING_ICONS_FIELD_BUTTON_REPLACE"); this.editButton.layout.hidden = true; this.clearButton.layout.hidden = true; this.dropzone.removeEventListener("dragover", this.onDragOver); this.dropzone.removeEventListener("dragleave", this.onDragLeave); this.dropzone.removeEventListener("drop", this.onDrop); this.preview.removeEventListener("dragenter", this.onImageDragEnter); this.options = new IconOptionsCard(); Dom.append(this.options.getLayout(), this.right); this.onOptionClick = this.onOptionClick.bind(this); this.options.subscribe('onChange', this.onOptionClick); const sourceClassList = this.content.classList; const newClassList = []; IconPanel .getLibraries() .then(function (libraries) { if (libraries.length === 0) { this.uploadButton.disable(); } else { libraries.forEach(library => { library.categories.forEach(category => { category.items.forEach(item => { let itemClasses = ''; if (Type.isObject(item)) { itemClasses = item.options.join(' '); } else { itemClasses = item; } const iconClasses = itemClasses.split(" "); iconClasses.forEach(iconClass => { if ( sourceClassList.indexOf(iconClass) !== -1 && newClassList.indexOf(iconClass) === -1 ) { newClassList.push(iconClass); } }); }); }); }); this.icon.innerHTML = "<span class=\"test " + newClassList.join(" ") + "\"></span>"; } this.options.setOptionsByItem(newClassList); }.bind(this)); } onUploadClick(event) { event.preventDefault(); IconPanel .getInstance() .show() .then(result => { this.options.setOptions(result.iconOptions, result.iconClassName); this.setValue({ type: "icon", classList: result.iconClassName.split(" ") }); }); } onOptionClick(event) { const classList = event.getData().option.split(' '); this.setValue({ type: 'icon', classList }); } isChanged() { return this.getValue().classList.some(function (className) { return this.content.classList.indexOf(className) === -1; }, this); } getValue() { var classList = this.classList; if (this.selector) { var selectorClassname = this.selector.split("@")[0].replace(".", ""); classList = Runtime.clone(this.classList).concat([selectorClassname]); classList = BX.Landing.Utils.arrayUnique(classList); } return { type: "icon", src: "", id: -1, alt: "", classList: classList, url: Object.assign({}, this.url.getValue(), {enabled: true}), }; } reset() { this.setValue({ type: "icon", src: "", id: -1, alt: "", classList: [], url: '', }); } }