1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16 17import {BaseElement, element} from "../BaseElement.js"; 18import './LitMainMenuItem.js' 19import './LitMainMenuGroup.js' 20import {LitMainMenuGroup} from "./LitMainMenuGroup.js"; 21import {LitMainMenuItem} from "./LitMainMenuItem.js"; 22 23@element('lit-main-menu') 24export class LitMainMenu extends BaseElement { 25 private slotElements: Element[] | undefined; 26 private _menus: Array<MenuGroup> | undefined 27 28 static get observedAttributes() { 29 return [] 30 } 31 32 get menus(): Array<MenuGroup> | undefined { 33 return this._menus; 34 } 35 36 set menus(value: Array<MenuGroup> | undefined) { 37 this._menus = value; 38 this.shadowRoot?.querySelectorAll('lit-main-menu-group').forEach(a => a.remove()); 39 let menuBody = this.shadowRoot?.querySelector('.menu-body'); 40 value?.forEach(it => { 41 let group = new LitMainMenuGroup(); 42 group.setAttribute('title', it.title || ""); 43 group.setAttribute('describe', it.describe || ""); 44 if (it.collapsed) { 45 group.setAttribute('collapsed', ''); 46 } else { 47 group.removeAttribute('collapsed'); 48 } 49 menuBody?.appendChild(group); 50 it.children?.forEach((item: any) => { 51 let th = new LitMainMenuItem(); 52 th.setAttribute('icon', item.icon || ""); 53 th.setAttribute('title', item.title || ""); 54 if (item.fileChoose) { 55 th.setAttribute('file', ""); 56 th.addEventListener('file-change', e => { 57 if (item.fileHandler && !th.disabled) { 58 item.fileHandler(e) 59 } 60 }) 61 } else { 62 th.removeAttribute('file'); 63 th.addEventListener('click', e => { 64 if (item.clickHandler && !th.disabled) { 65 item.clickHandler(item) 66 } 67 }) 68 } 69 if (item.disabled != undefined) { 70 th.disabled = item.disabled 71 } 72 group?.appendChild(th); 73 }) 74 }) 75 } 76 77 initElements(): void { 78 let st: HTMLSlotElement | null | undefined = this.shadowRoot?.querySelector('#st'); 79 st?.addEventListener('slotchange', e => { 80 this.slotElements = st?.assignedElements(); 81 this.slotElements?.forEach(it => { 82 it.querySelectorAll("lit-main-menu-item").forEach(cell => { 83 }) 84 }) 85 }) 86 let versionDiv: HTMLElement | null | undefined = this.shadowRoot?.querySelector<HTMLElement>('.version'); 87 versionDiv!.innerText = (window as any).version || "" 88 } 89 90 initHtml(): string { 91 return ` 92 <style> 93 :host{ 94 display: flex; 95 flex-direction: column; 96 width: 248px; 97 background-color: var(--dark-background,#FFFFFF); 98 height: 100vh; 99 } 100 .menu-body ::-webkit-scrollbar-track 101 { 102 border-radius:10px; 103 background-color:#F5F5F5; 104 } 105 .menu-body ::-webkit-scrollbar-thumb 106 { 107 border-radius:10px; 108 background-color: var(--dark-background,#FFFFFF); 109 110 } 111 .header{ 112 display: grid; 113 background-color: var(--dark-background1,#FFFFFF); 114 border-bottom: 1px solid var(--dark-background1,#EFEFEF); 115 color: #47A7E0; 116 font-size: 1.4rem; 117 padding-left: 20px; 118 /*padding-right: 10px;*/ 119 gap: 0 20px; 120 box-sizing: border-box; 121 width: 100%; 122 height: 56px; 123 grid-template-columns: min-content 1fr min-content; 124 grid-template-rows: auto; 125 } 126 .header *{ 127 align-self: center; 128 user-select: none; 129 } 130 .version{ 131 color: #94979d; 132 padding: 20px; 133 font-size: 0.6rem; 134 width: 100%; 135 text-align: right; 136 } 137 *{ 138 box-sizing: border-box; 139 } 140 .menu-button{ 141 height: 47px; 142 width: 48px; 143 display: flex; 144 align-content: center; 145 justify-content: right; 146 cursor: pointer; 147 } 148 </style> 149 <div name="header" class="header"> 150 <img src="img/logo.png"/> 151 <div class="menu-button"> 152 <lit-icon name="menu" size="20" color="var(--dark-color1,#4D4D4D)"></lit-icon> 153 </div> 154 </div> 155 <div class="menu-body" style="overflow: auto;overflow-x:hidden;height: 100%"> 156 <slot id="st" ></slot> 157 </div> 158 <div class="version" style=""> 159 </div> 160 `; 161 } 162} 163 164export interface MenuGroup { 165 title: string 166 describe: string 167 collapsed: boolean 168 children: Array<MenuItem> 169} 170 171export interface MenuItem { 172 icon: string 173 title: string 174 fileChoose?: boolean 175 clickHandler?: Function 176 fileHandler?: Function 177} 178
