• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// @ts-nocheck
2/*
3 * Copyright (C) 2022 Huawei Device Co., Ltd.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *     http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
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
27    static get observedAttributes() {
28        return []
29    }
30
31    private _menus: Array<MenuGroup> | undefined
32
33    get menus(): Array<MenuGroup> | undefined {
34        return this._menus;
35    }
36
37    set menus(value: Array<MenuGroup> | undefined) {
38        this._menus = value;
39        this.shadowRoot?.querySelectorAll('lit-main-menu-group').forEach(a => a.remove());
40        let menuBody = this.shadowRoot?.querySelector('.menu-body');
41        value?.forEach(it => {
42            let group = new LitMainMenuGroup();
43            group.setAttribute('title', it.title || "");
44            group.setAttribute('describe', it.describe || "");
45            if (it.collapsed) {
46                group.setAttribute('collapsed', '');
47            } else {
48                group.removeAttribute('collapsed');
49            }
50            menuBody?.appendChild(group);
51            it.children?.forEach(item => {
52                let th = new LitMainMenuItem();
53                th.setAttribute('icon', item.icon || "");
54                th.setAttribute('title', item.title || "");
55                if (item.fileChoose) {
56                    th.setAttribute('file', "");
57                    th.addEventListener('file-change', e => {
58                        if (item.fileHandler) {
59                            item.fileHandler(e)
60                        }
61                    })
62                } else {
63                    th.removeAttribute('file');
64                    th.addEventListener('click', e => {
65                        if (item.clickHandler) {
66                            item.clickHandler(item)
67                        }
68                    })
69                }
70                if (item.disabled != undefined) {
71                    th.disabled = item.disabled
72                }
73                group?.appendChild(th);
74            })
75        })
76    }
77
78    initElements(): void {
79        let st: HTMLSlotElement | null | undefined = this.shadowRoot?.querySelector('#st');
80        st?.addEventListener('slotchange', e => {
81            this.slotElements = st?.assignedElements();
82            this.slotElements?.forEach(it => {
83                it.querySelectorAll("lit-main-menu-item").forEach(cell => {
84                })
85            })
86        })
87        let versionDiv: HTMLSlotElement = this.shadowRoot?.querySelector('.version');
88        versionDiv.innerText = window.version || ""
89    }
90
91    initHtml(): string {
92        return `
93<style>
94:host{
95    display: flex;
96    flex-direction: column;
97    width: 248px;
98    background-color: var(--dark-background,#FFFFFF);
99    height: 100vh;
100}
101.menu-body ::-webkit-scrollbar-track
102{
103    border-radius:10px;
104    background-color:#F5F5F5;
105}
106.menu-body ::-webkit-scrollbar-thumb
107{
108    border-radius:10px;
109    background-color: var(--dark-background,#FFFFFF);
110
111}
112.header{
113    display: grid;
114    background-color: var(--dark-background1,#FFFFFF);
115    border-bottom: 1px solid var(--dark-background1,#EFEFEF);
116    color: #47A7E0;
117    font-size: 1.4rem;
118    padding-left: 20px;
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=""></div>
159        `;
160    }
161}
162
163export interface MenuGroup {
164    title: string
165    describe: string
166    collapsed: boolean
167    children: Array<MenuItem>
168}
169
170export interface MenuItem {
171    icon: string
172    title: string
173    fileChoose?: boolean
174    clickHandler?: Function
175    fileHandler?: Function
176}
177