Current Path : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/landing/explorer/src/ |
Current File : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/landing/explorer/src/ui.js |
import { Loc, Tag, Text} from 'main.core'; export type DataType = { ID: number, TITLE: string, TYPE: string }; export type FolderType = { ID: number, TITLE: string, PARENT_ID: ?number }; import 'ui.icons.disk'; export class ExplorerUI { static getLoader(): HTMLElement { return Tag.render`<div class="landing-explorer-loader"> <div class="main-ui-loader"> <svg class="main-ui-loader-svg" viewBox="25 25 50 50"> <circle class="main-ui-loader-svg-circle" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/> </svg> </div> </div>`; } static getActionButton(title: string, hadnler: () => {}): BX.UI.Button { return new BX.UI.Button({ id: 'landing-explorer-action', size: BX.UI.Button.Size.MEDIUM, color: BX.UI.Button.Color.SUCCESS, text: title, events: { click: hadnler } }); } static getCancelButton(hadnler: () => {}): BX.UI.Button { return new BX.UI.Button({ id: 'landing-explorer-cancel', size: BX.UI.Button.Size.MEDIUM, color: BX.UI.Button.Color.LINK, text: Loc.getMessage('LANDING_EXT_EXPLORER_BUTTON_CANCEL'), events: { click: hadnler } }); } static getSiteList(data: Array<DataType>, onClick: () => {}, siteType: string): HTMLElement { return Tag.render` <ul class="landing-site-selector-list"> ${data.map(item => { if (siteType !== 'SMN' && item.TYPE !== siteType) { return; } return Tag.render` <li class="landing-site-selector-item" data-explorer-depth="0" data-explorer-siteId="${item.ID}" onclick="${() => onClick(item.ID)}"> <span class="ui-icon ui-icon-file-folder"><i></i></span> <span class="landing-site-selector-item-value"> ${Text.encode(item.TITLE)} </span> </li> `; })} </ul> `; } static getFolderItem(item: DataType, depth: number, onClick: () => {}): HTMLElement { return Tag.render` <li style="padding-left: ${30 * depth}px" class="landing-site-selector-item landing-site-selector-item-lower" data-explorer-depth="${depth}" data-explorer-folderId="${item.ID}" onclick="${() => onClick(item.ID)}"> <span class="ui-icon ui-icon-file-folder"><i></i></span> <span class="landing-site-selector-item-value"> ${Text.encode(item.TITLE)} </span> </li> `; } }