@cocreate/element-prototype 1.8.12 → 1.8.14

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/src/getValue.js CHANGED
@@ -1,101 +1,101 @@
1
- HTMLElement.prototype.getValue = function() {
2
- let value = getValue(this)
3
- return value;
4
- };
5
-
6
- HTMLInputElement.prototype.getValue = function() {
7
- let value = getValue(this)
8
- return value;
9
- };
10
-
11
- HTMLHeadingElement.prototype.getValue = function() {
12
- let value = getValue(this)
13
- return value;
14
- };
15
-
16
-
17
- // TODO: replace esle if with switch case
18
- const getValue = (element) => {
19
- let value = element.value;
20
- let prefix = element.getAttribute('value-prefix') || "";
21
- let suffix = element.getAttribute('value-suffix') || "";
22
-
23
- if (element.type === "checkbox") {
24
- let inputs = [element]
25
- let name = element.getAttribute('name');
26
- if (name)
27
- inputs = document.querySelectorAll(`input[type="${element.type}"][name="${name}"]`);
28
-
29
-
30
- if (inputs.length > 1) {
31
- value = [];
32
- inputs.forEach(el => {
33
- if (el.checked) {
34
- let checkedValue = el.value
35
- if (prefix || suffix)
36
- checkedValue = prefix + checkedValue + suffix;
37
-
38
- value.push(checkedValue);
39
- }
40
- });
41
- } else {
42
- if (element.checked)
43
- value = element.value || 'true'
44
- else if (!element.value)
45
- value = 'false'
46
-
47
- }
48
- } else if (element.type === 'radio') {
49
- let name = element.getAttribute('name');
50
- value = document.querySelector(`input[name="${name}"]:checked`).value
51
- }
52
- else if (element.type === "number") {
53
- value = Number(value);
54
- }
55
- else if (element.type === 'range') {
56
- value = [Number(element.min), Number(element.value)];
57
- }
58
- else if (element.type === "password") {
59
- value = btoa(value);
60
- }
61
- else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
62
- let options = element.selectedOptions;
63
- value = [];
64
- for (let i = 0; i < options.length; i++) {
65
- let optionValue = options[i].value
66
- if (prefix || suffix)
67
- optionValue = prefix + optionValue + suffix;
68
- value.push(optionValue);
69
- }
70
- }
71
- else if (element.tagName == 'INPUT' || element.tagName == 'SELECT') {
72
- value = element.value;
73
- }
74
- else if (element.tagName == 'TEXTAREA') {
75
- if (element.hasAttribute('value'))
76
- value = element.getAttribute('value');
77
- else
78
- value = element.value;
79
- }
80
- else if (element.t1agName === 'IFRAME') {
81
- value = element.srcdoc;
82
- }
83
- else if (element.hasAttribute('value')){
84
- value = element.getAttribute('value');
85
- }
86
- else {
87
- value = element.innerHTML;
88
- }
89
- if (!Array.isArray(value)) {
90
- if (prefix || suffix)
91
- value = prefix + value + suffix;
92
-
93
- if (element.getAttribute('value-type') == 'array')
94
- value = [value];
95
- }
96
-
97
-
98
- return value;
99
- };
100
-
101
- export { getValue };
1
+ HTMLElement.prototype.getValue = function() {
2
+ let value = getValue(this)
3
+ return value;
4
+ };
5
+
6
+ HTMLInputElement.prototype.getValue = function() {
7
+ let value = getValue(this)
8
+ return value;
9
+ };
10
+
11
+ HTMLHeadingElement.prototype.getValue = function() {
12
+ let value = getValue(this)
13
+ return value;
14
+ };
15
+
16
+
17
+ // TODO: replace esle if with switch case
18
+ const getValue = (element) => {
19
+ let value = element.value;
20
+ let prefix = element.getAttribute('value-prefix') || "";
21
+ let suffix = element.getAttribute('value-suffix') || "";
22
+
23
+ if (element.type === "checkbox") {
24
+ let inputs = [element]
25
+ let name = element.getAttribute('name');
26
+ if (name)
27
+ inputs = document.querySelectorAll(`input[type="${element.type}"][name="${name}"]`);
28
+
29
+
30
+ if (inputs.length > 1) {
31
+ value = [];
32
+ inputs.forEach(el => {
33
+ if (el.checked) {
34
+ let checkedValue = el.value
35
+ if (prefix || suffix)
36
+ checkedValue = prefix + checkedValue + suffix;
37
+
38
+ value.push(checkedValue);
39
+ }
40
+ });
41
+ } else {
42
+ if (element.checked)
43
+ value = element.value || 'true'
44
+ else if (!element.value)
45
+ value = 'false'
46
+
47
+ }
48
+ } else if (element.type === 'radio') {
49
+ let name = element.getAttribute('name');
50
+ value = document.querySelector(`input[name="${name}"]:checked`).value
51
+ }
52
+ else if (element.type === "number") {
53
+ value = Number(value);
54
+ }
55
+ else if (element.type === 'range') {
56
+ value = [Number(element.min), Number(element.value)];
57
+ }
58
+ else if (element.type === "password") {
59
+ value = btoa(value);
60
+ }
61
+ else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
62
+ let options = element.selectedOptions;
63
+ value = [];
64
+ for (let i = 0; i < options.length; i++) {
65
+ let optionValue = options[i].value
66
+ if (prefix || suffix)
67
+ optionValue = prefix + optionValue + suffix;
68
+ value.push(optionValue);
69
+ }
70
+ }
71
+ else if (element.tagName == 'INPUT' || element.tagName == 'SELECT') {
72
+ value = element.value;
73
+ }
74
+ else if (element.tagName == 'TEXTAREA') {
75
+ if (element.hasAttribute('value'))
76
+ value = element.getAttribute('value');
77
+ else
78
+ value = element.value;
79
+ }
80
+ else if (element.t1agName === 'IFRAME') {
81
+ value = element.srcdoc;
82
+ }
83
+ else if (element.hasAttribute('value')){
84
+ value = element.getAttribute('value');
85
+ }
86
+ else {
87
+ value = element.innerHTML;
88
+ }
89
+ if (!Array.isArray(value)) {
90
+ if (prefix || suffix)
91
+ value = prefix + value + suffix;
92
+
93
+ if (element.getAttribute('value-type') == 'array')
94
+ value = [value];
95
+ }
96
+
97
+
98
+ return value;
99
+ };
100
+
101
+ export { getValue };
package/src/index.js CHANGED
@@ -1,12 +1,12 @@
1
- /********************************************************************************
2
- * Copyright (C) 2020 CoCreate LLC and others.
3
- *
4
- *
5
- * SPDX-License-Identifier: MIT
6
- ********************************************************************************/
7
-
8
- import { setValue } from './setValue';
9
- import { getValue } from './getValue';
10
-
11
-
1
+ /********************************************************************************
2
+ * Copyright (C) 2020 CoCreate LLC and others.
3
+ *
4
+ *
5
+ * SPDX-License-Identifier: MIT
6
+ ********************************************************************************/
7
+
8
+ import { setValue } from './setValue';
9
+ import { getValue } from './getValue';
10
+
11
+
12
12
  export default {getValue, setValue}
package/src/setValue.js CHANGED
@@ -1,199 +1,199 @@
1
- import { getAttributes } from '@cocreate/utils';
2
-
3
-
4
- HTMLElement.prototype.setValue = function (value) {
5
- setValue(this, value)
6
- };
7
-
8
- HTMLInputElement.prototype.setValue = function (value) {
9
- setValue(this, value)
10
- };
11
-
12
-
13
- HTMLHeadingElement.prototype.setValue = function (value) {
14
- setValue(this, value)
15
- };
16
-
17
-
18
- const setValue = (el, value) => {
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
- };
144
-
145
- function setPass(el) {
146
- if (CoCreate.pass) {
147
- let passElements = el.querySelectorAll('[pass_id]');
148
- if (passElements)
149
- CoCreate.pass.initElements(passElements)
150
- }
151
- }
152
-
153
- function setScript(script, value) {
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
- }
165
-
166
- function __decryptPassword(str) {
167
- if (!str) return "";
168
- let decode_str = atob(str);
169
- return decode_str;
170
- }
171
-
172
- function dispatchEvents(el) {
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
- }
197
-
198
-
199
- export { setValue };
1
+ import { getAttributes } from '@cocreate/utils';
2
+
3
+
4
+ HTMLElement.prototype.setValue = function (value) {
5
+ setValue(this, value)
6
+ };
7
+
8
+ HTMLInputElement.prototype.setValue = function (value) {
9
+ setValue(this, value)
10
+ };
11
+
12
+
13
+ HTMLHeadingElement.prototype.setValue = function (value) {
14
+ setValue(this, value)
15
+ };
16
+
17
+
18
+ const setValue = (el, value) => {
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
+ };
144
+
145
+ function setPass(el) {
146
+ if (CoCreate.pass) {
147
+ let passElements = el.querySelectorAll('[pass_id]');
148
+ if (passElements)
149
+ CoCreate.pass.initElements(passElements)
150
+ }
151
+ }
152
+
153
+ function setScript(script, value) {
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
+ }
165
+
166
+ function __decryptPassword(str) {
167
+ if (!str) return "";
168
+ let decode_str = atob(str);
169
+ return decode_str;
170
+ }
171
+
172
+ function dispatchEvents(el) {
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
+ }
197
+
198
+
199
+ export { setValue };