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 "../../../../base-ui/BaseElement.js"; 17import {Flag} from "./Flag.js"; 18import {ns2s} from "../TimerShaftElement.js"; 19 20@element('tabpane-flag') 21export class TabPaneFlag extends BaseElement { 22 private flagListIdx: number | null = null; 23 private flag: Flag | null = null; 24 25 initElements(): void { 26 this.shadowRoot?.querySelector("#color-input")?.addEventListener("change", (event: any) => { 27 if (this.flag) { 28 this.flag.color = event?.target.value 29 document.dispatchEvent(new CustomEvent('flag-change', {detail: this.flag})); 30 } 31 }); 32 this.shadowRoot?.querySelector("#text-input")?.addEventListener("keyup", (event: any) => { 33 event.stopPropagation(); 34 if (event.keyCode == "13") { 35 if (this.flag) { 36 (window as any).flagInputFocus = false; 37 this.flag.text = event?.target.value 38 document.dispatchEvent(new CustomEvent('flag-change', {detail: this.flag})); 39 } 40 } 41 }); 42 this.shadowRoot?.querySelector("#text-input")?.addEventListener("blur", (event: any) => { 43 (window as any).flagInputFocus = false; 44 }); 45 this.shadowRoot?.querySelector("#text-input")?.addEventListener("focus", (event: any) => { 46 (window as any).flagInputFocus = true; 47 }); 48 this.shadowRoot?.querySelector("#remove-flag")?.addEventListener("click", (event: any) => { 49 if (this.flag) { 50 this.flag.hidden = true; 51 document.dispatchEvent(new CustomEvent('flag-change', {detail: this.flag})); 52 } 53 }); 54 } 55 56 setFlagObj(flagObj: Flag) { 57 this.flag = flagObj; 58 this.shadowRoot!.querySelector<HTMLInputElement>("#color-input")!.value = flagObj.color; 59 this.shadowRoot!.querySelector<HTMLInputElement>("#text-input")!.value = flagObj.text; 60 this.shadowRoot!.querySelector<HTMLDivElement>("#flag-time")!.innerHTML = ns2s(flagObj.time) 61 } 62 63 initHtml(): string { 64 return ` 65 <style> 66 :host{ 67 display: flex; 68 flex-direction: column; 69 padding: 10px 10px; 70 } 71 .notes-editor-panel{ 72 display: flex;align-items: center 73 } 74 .flag-text{ 75 font-size: 14px;color: var(--dark-color1,#363636c7);font-weight: 300; 76 } 77 .flag-input{ 78 border-radius: 4px; 79 border: 1px solid var(--dark-border,#dcdcdc); 80 color: var(--dark-color1,#212121); 81 background: var(--dark-background5,#FFFFFF); 82 padding: 3px; 83 margin: 0 10px; 84 } 85 .flag-input:focus{ 86 outline: none; 87 box-shadow: 1px 1px 1px var(--bark-prompt,#bebebe); 88 } 89 .notes-editor-panel button { 90 background: var(--dark-border1,#262f3c); 91 color: white; 92 border-radius: 10px; 93 font-size: 10px; 94 height: 22px; 95 line-height: 18px; 96 min-width: 7em; 97 margin: auto 0 auto 1rem; 98 99 border: none; 100 cursor: pointer; 101 outline: inherit; 102 </style> 103 <div class="notes-editor-panel"> 104 <div class="flag-text">Annotation at <span id="flag-time"></span></div> 105 <input style="flex: 1" class="flag-input" type="text" id="text-input"/> 106 <span class="flag-text">Change color: <input style="background: var(--dark-background5,#FFFFFF);" type="color" id="color-input"/></span> 107 <button id="remove-flag">Remove</button> 108 </div> 109 `; 110 } 111 112} 113