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