@cocreate/element-prototype 1.8.9 → 1.8.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/CoCreate.config.js +1 -1
- package/docs/index.html +1 -1
- package/package.json +1 -1
- package/src/getValue.js +1 -1
- package/src/setValue.js +172 -172
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [1.8.10](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.8.9...v1.8.10) (2023-05-18)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* apikey renamed to key ([5cdfd7a](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/5cdfd7a7f3da80bd63ac08446561f7aa15e1e59e))
|
|
7
|
+
* apikey renamed to key ([4d7173c](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/4d7173ccff79604c74dbee736dee8d0c72696781))
|
|
8
|
+
* refactor: Format `setValue.js` and refactor setValue function ([41814a6](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/41814a6b6ed477596e6eebaa1bf4c4ba968f2897))
|
|
9
|
+
|
|
1
10
|
## [1.8.9](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.8.8...v1.8.9) (2023-05-10)
|
|
2
11
|
|
|
3
12
|
|
package/CoCreate.config.js
CHANGED
package/docs/index.html
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/element-prototype",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.10",
|
|
4
4
|
"description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"element-prototype",
|
package/src/getValue.js
CHANGED
|
@@ -14,7 +14,7 @@ HTMLHeadingElement.prototype.getValue = function() {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
//
|
|
17
|
+
// TODO: replace esle if with switch case
|
|
18
18
|
const getValue = (element) => {
|
|
19
19
|
let value = element.value;
|
|
20
20
|
let prefix = element.getAttribute('value-prefix') || "";
|
package/src/setValue.js
CHANGED
|
@@ -1,198 +1,198 @@
|
|
|
1
|
-
import {getAttributes} from '@cocreate/utils';
|
|
1
|
+
import { getAttributes } from '@cocreate/utils';
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
HTMLElement.prototype.setValue = function(value) {
|
|
5
|
-
|
|
4
|
+
HTMLElement.prototype.setValue = function (value) {
|
|
5
|
+
setValue(this, value)
|
|
6
6
|
};
|
|
7
7
|
|
|
8
|
-
HTMLInputElement.prototype.setValue = function(value) {
|
|
9
|
-
|
|
8
|
+
HTMLInputElement.prototype.setValue = function (value) {
|
|
9
|
+
setValue(this, value)
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
HTMLHeadingElement.prototype.setValue = function(value) {
|
|
14
|
-
|
|
13
|
+
HTMLHeadingElement.prototype.setValue = function (value) {
|
|
14
|
+
setValue(this, value)
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
const setValue = (el, value) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
19
|
+
if (value === null || value === undefined) return;
|
|
20
|
+
let valueType = el.getAttribute('value-type');
|
|
21
|
+
let prefix = el.getAttribute('value-prefix') || "";
|
|
22
|
+
let suffix = el.getAttribute('value-suffix') || "";
|
|
23
|
+
if (prefix)
|
|
24
|
+
value = value.replace(prefix, "");
|
|
25
|
+
if (suffix)
|
|
26
|
+
value = value.replace(suffix, "");
|
|
27
|
+
|
|
28
|
+
if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT') {
|
|
29
|
+
let { isCrdt } = getAttributes(el)
|
|
30
|
+
if (isCrdt == null || isCrdt == undefined)
|
|
31
|
+
isCrdt = el.getAttribute('crdt')
|
|
32
|
+
if (isCrdt == "true" || el.type === 'file') return;
|
|
33
|
+
|
|
34
|
+
if (el.type == 'checkbox') {
|
|
35
|
+
let inputs = [el]
|
|
36
|
+
let name = el.getAttribute('name');
|
|
37
|
+
if (name)
|
|
38
|
+
inputs = document.querySelectorAll(`input[type="${el.type}"][name="${name}"]`);
|
|
39
|
+
|
|
40
|
+
for (let i = 0; i < inputs.length; i++) {
|
|
41
|
+
if (inputs[i].value) {
|
|
42
|
+
if (value.includes(inputs[i].value))
|
|
43
|
+
inputs[i].checked = true;
|
|
44
|
+
else
|
|
45
|
+
inputs[i].checked = false;
|
|
46
|
+
} else {
|
|
47
|
+
if (value === 'true' || value === true || value === 'checked')
|
|
48
|
+
inputs[i].checked = true;
|
|
49
|
+
else
|
|
50
|
+
inputs[i].checked = false;
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
else if (el.type === 'radio') {
|
|
56
|
+
el.value == value ? el.checked = true : el.checked = false;
|
|
57
|
+
}
|
|
58
|
+
else if (el.type === 'password') {
|
|
59
|
+
el.value = __decryptPassword(value);
|
|
60
|
+
}
|
|
61
|
+
else if (el.tagName == "SELECT" && el.hasAttribute('multiple') && Array.isArray(value)) {
|
|
62
|
+
let options = el.options;
|
|
63
|
+
for (let i = 0; i < options.length; i++) {
|
|
64
|
+
if (value.includes(options[i].value)) {
|
|
65
|
+
options[i].selected = "selected";
|
|
66
|
+
} else {
|
|
67
|
+
options[i].selected = "";
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else
|
|
72
|
+
el.value = value;
|
|
73
|
+
dispatchEvents(el)
|
|
74
|
+
}
|
|
75
|
+
else if (el.tagName === 'IMG' || el.tagName === 'SOURCE')
|
|
76
|
+
el.src = value;
|
|
77
|
+
|
|
78
|
+
else if (el.tagName === 'IFRAME')
|
|
79
|
+
el.srcdoc = value;
|
|
80
|
+
|
|
81
|
+
else if (el.tagName === 'SCRIPT')
|
|
82
|
+
setScript(el, value);
|
|
83
|
+
|
|
84
|
+
else {
|
|
85
|
+
if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
|
|
86
|
+
// if (el.tagName === 'DIV') {
|
|
87
|
+
// if (!el.classList.contains('domEditor')
|
|
88
|
+
// return
|
|
89
|
+
// }
|
|
90
|
+
|
|
91
|
+
if (valueType == 'string' || valueType == 'text')
|
|
92
|
+
el.textContent = value;
|
|
93
|
+
else {
|
|
94
|
+
let newElement = document.createElement("div");
|
|
95
|
+
newElement.innerHTML = value;
|
|
96
|
+
setPass(newElement)
|
|
97
|
+
|
|
98
|
+
let CoCreateJS = newElement.querySelector('script[src*="CoCreate.js"], script[src*="CoCreate.min.js"]')
|
|
99
|
+
if (CoCreateJS)
|
|
100
|
+
CoCreateJS.remove()
|
|
101
|
+
|
|
102
|
+
let CoCreateCSS = newElement.querySelector('link[href*="CoCreate.css"], link[href*="CoCreate.min.css"]')
|
|
103
|
+
if (CoCreateCSS)
|
|
104
|
+
CoCreateCSS.remove()
|
|
105
|
+
|
|
106
|
+
let css = newElement.querySelector('link[collection], link[document]')
|
|
107
|
+
if (css)
|
|
108
|
+
css.remove()
|
|
109
|
+
|
|
110
|
+
if (el.getAttribute('domEditor') == "replace") {
|
|
111
|
+
let parentNode = el.parentNode;
|
|
112
|
+
if (parentNode) {
|
|
113
|
+
if (newElement.children[0]) {
|
|
114
|
+
parentNode.replaceChild(newElement.children[0], el);
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
parentNode.replaceChild(newElement, el);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
} else {
|
|
121
|
+
el.innerHTML = newElement.innerHTML;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if (el.hasAttribute("value")) {
|
|
126
|
+
el.setAttribute("value", value);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
if (el.getAttribute('contenteditable'))
|
|
131
|
+
dispatchEvents(el);
|
|
132
|
+
|
|
133
|
+
if (el.tagName == 'HEAD' || el.tagName == 'BODY') {
|
|
134
|
+
el.removeAttribute('collection');
|
|
135
|
+
el.removeAttribute('document_id');
|
|
136
|
+
el.removeAttribute('pass_id');
|
|
137
|
+
|
|
138
|
+
let scripts = el.querySelectorAll('script');
|
|
139
|
+
for (let script of scripts) {
|
|
140
|
+
setScript(script)
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
143
|
};
|
|
144
144
|
|
|
145
145
|
function setPass(el) {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
146
|
+
if (CoCreate.pass) {
|
|
147
|
+
let passElements = el.querySelectorAll('[pass_id]');
|
|
148
|
+
if (passElements)
|
|
149
|
+
CoCreate.pass.initElements(passElements)
|
|
150
|
+
}
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
function setScript(script, value) {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
154
|
+
let newScript = document.createElement('script');
|
|
155
|
+
newScript.attributes = script.attributes;
|
|
156
|
+
newScript.innerHTML = script.innerHTML;
|
|
157
|
+
if (value) {
|
|
158
|
+
if (script.hasAttribute("src"))
|
|
159
|
+
newScript.src = value;
|
|
160
|
+
else
|
|
161
|
+
newScript.innerHTML = value;
|
|
162
|
+
}
|
|
163
|
+
script.replaceWith(newScript);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
function __decryptPassword(str) {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
167
|
+
if (!str) return "";
|
|
168
|
+
let decode_str = atob(str);
|
|
169
|
+
return decode_str;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
function dispatchEvents(el) {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
173
|
+
let inputEvent = new CustomEvent('input', {
|
|
174
|
+
bubbles: true,
|
|
175
|
+
detail: {
|
|
176
|
+
skip: true
|
|
177
|
+
},
|
|
178
|
+
});
|
|
179
|
+
Object.defineProperty(inputEvent, 'target', {
|
|
180
|
+
writable: false,
|
|
181
|
+
value: el
|
|
182
|
+
});
|
|
183
|
+
el.dispatchEvent(inputEvent);
|
|
184
|
+
|
|
185
|
+
let changeEvent = new CustomEvent('change', {
|
|
186
|
+
bubbles: true,
|
|
187
|
+
detail: {
|
|
188
|
+
skip: true
|
|
189
|
+
},
|
|
190
|
+
});
|
|
191
|
+
Object.defineProperty(changeEvent, 'target', {
|
|
192
|
+
writable: false,
|
|
193
|
+
value: el
|
|
194
|
+
});
|
|
195
|
+
el.dispatchEvent(changeEvent);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
|