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 16import { BaseElement, element } from '../BaseElement.js'; 17let textColor = ''; 18 19@element('lit-main-menu-group') 20export class LitMainMenuGroup extends BaseElement { 21 protected _collapsed: boolean | undefined; 22 private groupNameEl: HTMLElement | null | undefined; 23 private groupDescEl: HTMLElement | null | undefined; 24 private group: HTMLElement | null | undefined; 25 26 static get observedAttributes() { 27 return ['title', 'describe', 'collapsed', 'nocollapse', 'radius']; 28 } 29 30 get collapsed(): boolean { 31 return this.hasAttribute('collapsed'); 32 } 33 34 set collapsed(value: boolean) { 35 if (value) { 36 this.setAttribute('collapsed', ''); 37 } else { 38 this.removeAttribute('collapsed'); 39 } 40 } 41 42 get nocollapsed() { 43 return this.hasAttribute('nocollapsed'); 44 } 45 46 set nocollapsed(value: boolean) { 47 if (value) { 48 this.setAttribute('nocollapsed', ''); 49 } else { 50 this.removeAttribute('nocollapsed'); 51 } 52 } 53 54 get radius() { 55 return this.hasAttribute('radius'); 56 } 57 58 initElements(): void { 59 this.groupNameEl = this.shadowRoot?.querySelector('.group-name'); 60 this.groupDescEl = this.shadowRoot?.querySelector('.group-describe'); 61 this.group = this.shadowRoot?.querySelector('#group'); 62 this.group!.addEventListener('click', (e) => { 63 if (this.nocollapsed) { 64 return; 65 } 66 this.collapsed = !this.collapsed; 67 }); 68 let backgroundColor = sessionStorage.getItem('backgroundColor'); 69 if (backgroundColor == 'rgb(38, 47, 60)') { 70 textColor = 'white'; 71 this.groupNameEl!.style.color = 'white'; 72 this.groupDescEl!.style.color = 'white'; 73 } else { 74 textColor = 'black'; 75 this.groupNameEl!.style.color = 'black'; 76 this.groupDescEl!.style.color = 'black'; 77 } 78 } 79 80 initHtml(): string { 81 return ` 82 <style> 83 :host(:not([collapsed])){ 84 width: 248px; 85 display: flex; 86 background-color: var(--dark-background); 87 cursor: pointer; 88 flex-direction: column; 89 } 90 :host{ 91 user-select: none; 92 transition: background-color .3s; 93 } 94 :host(:not([collapsed])) ::slotted(lit-main-menu-item){ 95 display: flex; 96 } 97 :host(:not([collapsed])) .group-describe{ 98 height: 0; 99 visibility: hidden; 100 } 101 :host([collapsed]):hover){ 102 background-color: #FFFFFF; 103 } 104 :host([collapsed]){ 105 width: 248px; 106 display: flex; 107 flex-direction: column; 108 cursor: pointer; 109 background-color: var(--dark-background); 110 } 111 :host([collapsed]) .group-describe{ 112 height: auto; 113 visibility: visible; 114 } 115 :host([radius]) { 116 border-radius: 16px 0px 0px 16px ; 117 } 118 :host([collapsed]) ::slotted(lit-main-menu-item){ 119 display: none; 120 } 121 .group-name{ 122 font-size: 14px; 123 font-family: Helvetica; 124 color: ${textColor}; 125 padding: 20px 24px 0px 24px; 126 line-height: 16px; 127 font-weight: 400; 128 text-align: left; 129 } 130 .group-describe{ 131 color: ${textColor}; 132 font-size: 0.6rem; 133 padding: 4px 24px 20px 24px; 134 } 135 136 </style> 137 <div id="group"> 138 <div class="group-name"></div> 139 <div class="group-describe"></div> 140 </div> 141 <slot></slot> 142 `; 143 } 144 145 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 146 switch (name) { 147 case 'title': 148 if (this.groupNameEl) this.groupNameEl.textContent = newValue; 149 break; 150 case 'describe': 151 if (this.groupDescEl) this.groupDescEl.textContent = newValue; 152 break; 153 } 154 } 155} 156