• 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";
17
18@element('trace-command')
19export class SpTraceCommand extends BaseElement {
20    private codeHl: HTMLTextAreaElement | undefined | null;
21    private copyEl: HTMLElement | undefined | null;
22    private codeCopyText: HTMLInputElement | undefined;
23
24    get hdcCommon(): string {
25        return this.codeHl!.textContent + "";
26    }
27
28    set hdcCommon(value: string) {
29        this.codeHl!.textContent = value;
30    }
31
32    public connectedCallback() {
33        this.codeHl = this.shadowRoot?.querySelector('#code-text') as HTMLTextAreaElement;
34        this.copyEl = this.shadowRoot?.querySelector('#copy-image') as HTMLElement;
35        this.codeHl.textContent = ""
36        this.copyEl?.addEventListener('click', this.codeCopyEvent)
37        this.codeHl.addEventListener('selectionchange', this.textSelectEvent)
38    }
39
40    public disconnectedCallback() {
41        this.copyEl?.removeEventListener('click', this.codeCopyEvent)
42    }
43
44    codeCopyEvent = (event: any) => {
45        this.codeHl?.select();
46        document.execCommand('copy');
47    }
48
49    textSelectEvent = (event: any) => {
50        this.copyEl!.style.backgroundColor = '#FFFFFF';
51    }
52
53    initElements(): void {
54    }
55
56    initHtml(): string {
57        return `
58<style>
59:host{
60    width: 100%;
61    position: relative;
62    background: var(--dark-background3,#FFFFFF);
63    border-radius: 0px 16px 16px 0px;
64}
65
66#code-text{
67    -webkit-appearance:none;
68    opacity: 0.6;
69    font-family: Helvetica;
70    color: var(--dark-color,#000000);
71    padding: 56px;
72    font-size:1em;
73    margin-left: 10px;
74    line-height: 20px;
75    font-weight: 400;
76    border: none;
77    outline:none;
78    resize:none;
79    z-index: 2;
80    min-height: 560px;
81    background: var(--dark-background3,#FFFFFF);
82}
83
84#copy-image{
85    display: table-cell;
86    white-space: nowrap;
87    outline:0;
88    float:right;
89    z-index: 66;
90    position: relative;
91    top: 56px;
92    right: 40px;
93}
94
95#copy-button{
96    -webkit-appearance:none;
97    outline:0;
98    border: 0;
99    background: var(--dark-background3,#FFFFFF);
100    justify-content: end;
101    z-index: 55;
102    border-radius: 0px 16px 0px 0px;
103}
104
105#text-cmd{
106    display: grid;
107    justify-content: stretch;
108    align-content:  stretch;
109    font-size:16px;
110    background: var(--dark-background3,#FFFFFF);
111    border-radius: 0px 16px 0px 0px;
112
113}
114
115::-webkit-scrollbar
116{
117  width: 6px;
118  height: 10px;
119  background-color: var(--dark-background3,#FFFFFF);
120}
121
122::-webkit-scrollbar-track
123{
124  background-color: var(--dark-background3,#FFFFFF);
125}
126
127::-webkit-scrollbar-thumb
128{
129  border-radius: 6px;
130  background-color: var(--dark-background7,#e7c9c9);
131}
132</style>
133<div id="text-cmd">
134    <button id="copy-button">
135        <img id="copy-image" src="img/copy.png">
136    </button>
137    <textarea id="code-text" readonly></textarea>
138</div>`;
139    }
140}
141