• 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 {info} from "../../../log/Log.js";
18
19@element('trace-command')
20export class SpTraceCommand extends BaseElement {
21    private codeHl: HTMLTextAreaElement | undefined | null;
22    private copyEl: HTMLElement | undefined | null;
23    private codeCopyText: HTMLInputElement | undefined;
24
25    set show(show: boolean) {
26        if (show) {
27            this.setAttribute("show", '')
28        } else {
29            this.removeAttribute("show")
30        }
31    }
32
33    get show() {
34        return this.hasAttribute("show")
35    }
36
37    get hdcCommon(): string {
38        return this.codeHl!.textContent + "";
39    }
40
41    set hdcCommon(value: string) {
42        info("hdc Common is:", value)
43        this.codeHl!.textContent = value;
44    }
45
46    //当 custom element首次被插入文档DOM时，被调用。
47    public connectedCallback() {
48        this.codeHl = this.shadowRoot?.querySelector('#code-text') as HTMLTextAreaElement;
49        this.copyEl = this.shadowRoot?.querySelector('#copy-image') as HTMLElement;
50        this.codeHl.textContent = ""
51        this.copyEl?.addEventListener('click', this.codeCopyEvent)
52        this.codeHl.addEventListener('selectionchange', this.textSelectEvent)
53    }
54
55    public disconnectedCallback() {
56        this.copyEl?.removeEventListener('click', this.codeCopyEvent)
57    }
58
59    codeCopyEvent = (event: any) => {
60        this.codeHl?.select();
61        navigator.clipboard.writeText(this.codeHl?.textContent!).then(() => {})
62    }
63
64    textSelectEvent = (event: any) => {
65        this.copyEl!.style.backgroundColor = '#FFFFFF';
66    }
67
68    initElements(): void {
69    }
70
71    initHtml(): string {
72        return `
73        <style>
74        :host{
75            width: 100%;
76            position: relative;
77            background: var(--dark-background3,#FFFFFF);
78            border-radius: 0px 16px 16px 0px;
79        }
80
81        #code-text{
82            -webkit-appearance:none;
83            opacity: 0.6;
84            font-family: Helvetica;
85            color: var(--dark-color,#000000);
86            padding: 20px 56px 5px 56px;
87            font-size:1em;
88            margin-left: 10px;
89            line-height: 20px;
90            font-weight: 400;
91            border: none;
92            outline:none;
93            resize:none;
94            /*overflow:auto;*/
95            z-index: 2;
96            min-height: 500px;
97            background: var(--dark-background3,#FFFFFF);
98        }
99
100        #copy-image{
101            display: table-cell;
102            white-space: nowrap;
103            outline:0;
104            float:right;
105            z-index: 66;
106            position: relative;
107            top: 56px;
108            right: 40px;
109        }
110
111        #copy-button{
112            -webkit-appearance:none;
113            outline:0;
114            border: 0;
115            background: var(--dark-background3,#FFFFFF);
116            justify-content: end;
117            z-index: 55;
118            border-radius: 0px 16px 0px 0px;
119        }
120
121        #text-cmd{
122            /*overflow-y:auto;*/
123            display: grid;
124            justify-content: stretch;
125            align-content:  stretch;
126            font-size:16px;
127            background: var(--dark-background3,#FFFFFF);
128            border-radius: 0px 16px 0px 0px;
129
130        }
131
132        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
133        ::-webkit-scrollbar
134        {
135          width: 6px;
136          height: 10px;
137          background-color: var(--dark-background3,#FFFFFF);
138        }
139
140        /*定义滚动条轨道 内阴影+圆角*/
141        ::-webkit-scrollbar-track
142        {
143          background-color: var(--dark-background3,#FFFFFF);
144        }
145
146        /*定义滑块 内阴影+圆角*/
147        ::-webkit-scrollbar-thumb
148        {
149          border-radius: 6px;
150          background-color: var(--dark-background7,#e7c9c9);
151        }
152
153        #stop-button{
154            display: none;
155           border-radius: 15px;
156           background-color: #0A59F7;
157           width: 120px;
158           height: 32px;
159           font-family: Helvetica-Bold;
160           font-size: 14px;
161           color: #FFFFFF;
162           text-align: center;
163           line-height: 20px;
164           margin-left: 80%;
165           border: 1px solid #FFFFFF;
166        }
167
168        :host([show]) #stop-button {
169            display: block
170        }
171        </style>
172        <div id="text-cmd">
173            <button id="copy-button">
174                <img id="copy-image" src="img/copy.png">
175            </button>
176            <textarea id="code-text" readonly></textarea>
177            <button id="stop-button">Stop Cmd</button>
178        </div>
179        `;
180    }
181}