1/*
2 * Copyright (c) 2022-2023 Shenzhen Kaihong Digital Industry Development 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
16const MAX_LABEL_LENGTH = 40;
17
18class AttributeArea {
19  constructor() {
20    document.attrCallback = this;
21    this.area = document.getElementById('attribute_area');
22    this.htmlStr = '';
23    this.callbackFunc = null;
24    this.freshInputValue_ = [];
25  }
26  clear() {
27    this.htmlStr = '';
28  }
29  flush() {
30    this.area.innerHTML = this.htmlStr;
31    while (this.freshInputValue_.length > 0) {
32      let v = this.freshInputValue_.shift();
33      let e = document.getElementById(v[0]);
34      e.value = v[1];
35    }
36  }
37  addTitle(name) {
38    this.htmlStr +=
39      '<div class="div_title"><span class="att_title" style="font-size:16px;">' +
40      name +
41      '</span></div>';
42  }
43  addImage(path) {
44    this.htmlStr += '<img src="' + path + '">' + '</img>';
45  }
46  addDotLine() {}
47  addTopInput(searchId, label, default_, disable) {
48    let ret =
49      '<label class="input_text_readonly_top">' + label + '</label></br>';
50    ret += '<input id="' + searchId + '"';
51    ret += ' class="input_text"';
52    ret = this.addInputFunc(default_, ret, searchId, disable);
53    ret += ' oninput="document.attrCallback.Event(' + "'input', " +
54      "'" + searchId + "'" + ')" /><br>';
55    this.htmlStr += ret;
56  }
57
58  addInputFunc(default_, ret, searchId, disable) {
59    if (default_.indexOf('"') >= 0) {
60      ret += ' value=""';
61      this.freshInputValue_.push([searchId, default_]);
62    } else {
63      ret += ' value="' + default_ + '"';
64    }
65    if (disable) {
66      ret += ' disabled="disabled"';
67    }
68    return ret;
69  }
70
71  addInput(searchId, label, default_, disable) {
72    let ret = '<label class="input_text_readonly">' + label + '</label></br>';
73    ret += '<input id="' + searchId + '"';
74    ret += ' class="input_text"';
75    ret = this.addInputFunc(default_, ret, searchId, disable);
76    ret += ' oninput="document.attrCallback.Event(' + "'input', " + "'" +
77      searchId + "'" + ')" /><br>';
78    this.htmlStr += ret;
79  }
80
81  addValidatorInput(
82    searchId,
83    label,
84    default_,
85    disable = false,
86    defaultTxt = ''
87  ) {
88    let validatorId = 'valid_' + searchId;
89    let ret = '<label class="input_text_readonly">' + label + '</label></br>';
90    ret += '<input id="' + searchId + '"';
91    ret += ' class="input_text" maxlength="40" placeholder="' + defaultTxt + '"';
92    ret = this.addInputFunc(default_, ret, searchId, disable);
93    ret +=
94      ' autofocus="autofocus" onFocus="document.attrCallback.Event(' +
95      "'input', " +
96      "'" +
97      searchId +
98      "'" +
99      ');"';
100    ret +=
101      ' oninput="document.attrCallback.Event(' +
102      "'input', " +
103      "'" +
104      searchId +
105      "'" +
106      ')" /><br>';
107    ret +=
108      '<label id="' +
109      validatorId +
110      '" class="validator_label" display="none"></label></br>';
111    this.htmlStr += ret;
112  }
113
114  addTextArea(searchId, label, default_) {
115    let ret = '<label class="input_text_readonly">' + label + '</label><br>';
116    ret += '<textarea id="' + searchId + '"';
117    ret += ' class="text_area"';
118    ret +=
119      ' oninput="document.attrCallback.Event(' +
120      "'input', " +
121      "'" +
122      searchId +
123      "'" +
124      ')">';
125    ret += default_;
126    ret += '</textarea><br>';
127    this.htmlStr += ret;
128  }
129  addButton(searchId, label) {
130    if (label.length > MAX_LABEL_LENGTH) {
131      label = label.substring(0, MAX_LABEL_LENGTH) + '...';
132    }
133    let text =
134      '" class="button_click" type="button" onclick="document.attrCallback.Event(';
135    let htmlString = this.getStrText(searchId, text, label);
136    this.htmlStr += '<button id="' + htmlString;
137  }
138  getStrText(searchId, text, label) {
139    return searchId + text + "'button', " + "'" + searchId + "'" + ')">' + label + '</button><br>';
140  }
141
142  addLabelButton(searchId, label, title) {
143    if (label.length > MAX_LABEL_LENGTH) {
144      label = label.substring(0, MAX_LABEL_LENGTH) + '...';
145    }
146    let text =
147      '" class="label_button_click" type="button" onclick="document.attrCallback.Event(';
148    let htmlString = this.getStrText(searchId, text, label);
149    this.htmlStr += '<label class="input_text_readonly">' + title + '</label></br><button id="' + htmlString;
150  }
151
152  addButtonDelete(searchId, label) {
153    if (label.length > MAX_LABEL_LENGTH) {
154      label = label.substring(0, MAX_LABEL_LENGTH) + '...';
155    }
156    let text = '" class="button_click_delete" type="button" onclick="document.attrCallback.Event(';
157    this.htmlStr += '<button id="' + searchId + text + "'button', " + "'" +
158      searchId + "'" + ')">' + label + '</button><br>';
159  }
160  addSelect(searchId, label, selectList, default_, disable) {
161    let ret = '<label class="input_text_readonly">' + label + '</label></br>';
162    ret += '<div class="ul-select"><span></span>';
163    ret +=
164      '<input type="text" id="' +
165      searchId +
166      '" value="' +
167      default_ +
168      '"  class="input_text" readonly="readonly" ';
169    if (disable) {
170      ret += ' disabled="true" />';
171    } else {
172      ret += 'onfocus="selectFocus(this);"';
173      ret += 'onblur="selectBlur(this);" />';
174      ret += '<ul>';
175      for (let i in selectList) {
176        ret += '<li onclick="liClick(this, \'' + searchId + '\');">';
177        ret += '<a href="javascript:;">' + selectList[i] + '</a>';
178        ret += '</li>';
179      }
180      ret += '</ul>';
181    }
182
183    ret += '</div>';
184    this.htmlStr += ret;
185  }
186  addGap(type) {
187    if (type === 0) {
188      this.htmlStr += '<br>';
189    }
190  }
191  Event(type, value) {
192    let cbv = '';
193    if (type === 'input') {
194      cbv = document.getElementById(value).value;
195    } else if (type === 'select') {
196      cbv = document.getElementById(value).value;
197    }
198    if (this.callbackFunc !== null) {
199      this.callbackFunc(value, type, cbv);
200    }
201  }
202  registRecvCallback(func) {
203    this.callbackFunc = func;
204  }
205}
206AttributeArea.pInstance_ = null;
207AttributeArea.gi = function () {
208  if (AttributeArea.pInstance_ === null) {
209    AttributeArea.pInstance_ = new AttributeArea();
210  }
211  return AttributeArea.pInstance_;
212};
213
214module.exports = {
215  AttributeArea,
216};
217