@cocreate/element-prototype 1.22.3 → 1.24.0

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/docs/index.html +9 -23
  3. package/package.json +2 -4
  4. package/src/getAttribute.js +39 -11
  5. package/src/getValue.js +7 -0
  6. package/src/setValue.js +14 -9
package/CHANGELOG.md CHANGED
@@ -1,3 +1,29 @@
1
+ # [1.24.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.23.0...v1.24.0) (2024-06-12)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * bump cocreate dependencies ([96ec548](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/96ec548571909ded9e59fdba8be52164538a6696))
7
+ * svg icon class ([549313d](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/549313d1b874189bb7a32660059943fce4177cdf))
8
+
9
+
10
+ ### Features
11
+
12
+ * improved handling of valueType outerHtml ([de39d50](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/de39d502e2fcd1f910826433109c466184cc5b83))
13
+
14
+ # [1.23.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.22.3...v1.23.0) (2024-05-08)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * removed utils ([71a5003](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/71a5003bf7ca85b704140e10b132d8728600f518))
20
+
21
+
22
+ ### Features
23
+
24
+ * update attibutes using keyObperators on storage change or event updateAttributes ([5a33bbd](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/5a33bbd90ba6564a8ee9583935e5e0c1663d5d39))
25
+ * valueType boolean ([7f6777f](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/7f6777fb8ab6417d8b920cfbd2135c402423b6d6))
26
+
1
27
  ## [1.22.3](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.22.2...v1.22.3) (2024-04-29)
2
28
 
3
29
 
package/docs/index.html CHANGED
@@ -39,41 +39,31 @@
39
39
  href="https://github.com/CoCreate-app/CoCreate-element-prototype"
40
40
  target="_blank"
41
41
  class="margin-right:15px"
42
- ><i
43
- class="height:20px fill:#505050"
44
- src="/assets/svg/github.svg"></i
42
+ ><i src="/assets/svg/github.svg"></i
45
43
  ></a>
46
44
  <a
47
45
  class="margin-right:15px share"
48
46
  share-network="twitter"
49
47
  title="Share on twitter"
50
- ><i
51
- class="height:20px fill:#505050"
52
- src="/assets/svg/twitter.svg"></i
48
+ ><i src="/assets/svg/twitter.svg"></i
53
49
  ></a>
54
50
  <a
55
51
  class="margin-right:15px share"
56
52
  share-network="facebook"
57
53
  title="Share on Facebook"
58
- ><i
59
- class="height:20px fill:#505050"
60
- src="/assets/svg/facebook.svg"></i
54
+ ><i src="/assets/svg/facebook.svg"></i
61
55
  ></a>
62
56
  <a
63
57
  class="margin-right:15px share"
64
58
  share-network="instagram"
65
59
  title="Share on instagram"
66
- ><i
67
- class="height:20px fill:#505050"
68
- src="/assets/svg/instagram.svg"></i
60
+ ><i src="/assets/svg/instagram.svg"></i
69
61
  ></a>
70
62
  <a
71
63
  class="margin-right:15px share"
72
64
  share-network="share"
73
65
  title="Share on share"
74
- ><i
75
- class="height:20px fill:#505050"
76
- src="/assets/svg/share-alt.svg"></i
66
+ ><i src="/assets/svg/share-alt.svg"></i
77
67
  ></a>
78
68
  </div>
79
69
  </div>
@@ -196,7 +186,7 @@
196
186
  toggle="code-height"
197
187
  toggle-selector="#demo-code"
198
188
  ><i
199
- class="height:18px fill:#505050"
189
+ class="height:18px"
200
190
  src="/assets/svg/eye.svg"></i
201
191
  ></a>
202
192
  <a
@@ -207,18 +197,14 @@
207
197
  hide="#eye-slash"
208
198
  toggle="code-height"
209
199
  toggle-selector="#demo-code"
210
- ><i
211
- class="height:20px fill:#505050"
212
- src="/assets/svg/eye-slash.svg"></i
200
+ ><i src="/assets/svg/eye-slash.svg"></i
213
201
  ></a>
214
202
  <a
215
203
  class="margin-right:10px"
216
204
  id="code"
217
205
  show="#code-slash"
218
206
  hide="#code, #demo-code"
219
- ><i
220
- class="height:20px fill:#505050"
221
- src="/assets/svg/code.svg"></i
207
+ ><i src="/assets/svg/code.svg"></i
222
208
  ></a>
223
209
  <a
224
210
  class="margin-right:10px"
@@ -227,7 +213,7 @@
227
213
  show="#code, #demo-code"
228
214
  hide="#code-slash"
229
215
  ><i
230
- class="display:flex height:18px fill:#505050"
216
+ class="height:18px"
231
217
  src="/assets/svg/code.svg"></i
232
218
  ></a>
233
219
  <a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/element-prototype",
3
- "version": "1.22.3",
3
+ "version": "1.24.0",
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",
@@ -57,7 +57,5 @@
57
57
  "webpack-cli": "^4.5.0",
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
- "dependencies": {
61
- "@cocreate/utils": "^1.33.6"
62
- }
60
+ "dependencies": {}
63
61
  }
package/src/getAttribute.js CHANGED
@@ -1,23 +1,51 @@
1
1
  // Store a reference to the original getAttribute function
2
2
  const originalGetAttribute = Element.prototype.getAttribute;
3
+ const attributes = new Map()
4
+
5
+ window.addEventListener('storage', updateAttributes);
6
+ window.addEventListener('updateAttributes', function (e) {
7
+ updateAttributes(e.detail);
8
+ });
9
+
10
+ function updateAttributes(e) {
11
+ const keys = ['organization_id', 'user_id', 'clientId', 'session_id'];
12
+ if (keys.includes(e.key)) {
13
+ let attr = attributes.get(e.key) || []
14
+ for (let attribute of attr) {
15
+ attribute.element.setAttribute(attribute.name, e.newValue)
16
+ }
17
+ }
18
+ }
3
19
 
4
20
  // Override the getAttribute function
5
21
  Element.prototype.getAttribute = function (name) {
6
22
  let value = originalGetAttribute.call(this, name);
7
23
 
8
- if (value === '$organization_id')
9
- value = localStorage.getItem('organization_id')
10
- else if (value === '$user_id')
11
- value = localStorage.getItem('user_id')
12
- else if (value === '$clientId')
13
- value = localStorage.getItem('clientId')
14
- else if (value === '$session_id')
15
- value = localStorage.getItem('session_id')
16
- else if (value === '$innerWidth')
24
+ const localKeys = {
25
+ '$organization_id': 'organization_id',
26
+ '$user_id': 'user_id',
27
+ '$clientId': 'clientId',
28
+ '$session_id': 'session_id'
29
+ };
30
+
31
+ if (localKeys[value]) {
32
+ let newValue = localStorage.getItem(localKeys[value]);
33
+
34
+ if (!attributes.has(localKeys[value])) {
35
+ attributes.set(localKeys[value], []);
36
+ }
37
+
38
+ attributes.get(localKeys[value]).push({
39
+ element: this,
40
+ name,
41
+ value: newValue
42
+ });
43
+ value = newValue
44
+ } else if (value === '$innerWidth') {
17
45
  value = window.innerWidth
18
- else if (value === '$innerHeight')
46
+ } else if (value === '$innerHeight') {
19
47
  value = window.innerHeight
20
- else if (typeof value === 'string') {
48
+ } else if (typeof value === 'string') {
21
49
  if (value.startsWith('$search')) {
22
50
  const searchParams = new URLSearchParams(window.location.search);
23
51
  if (value.includes('.')) {
package/src/getValue.js CHANGED
@@ -146,6 +146,13 @@ const getValue = (element) => {
146
146
  }
147
147
  }
148
148
 
149
+ if (valueType === 'boolean') {
150
+ if (!value || value === 'fasle')
151
+ return false
152
+ else
153
+ return true
154
+ }
155
+
149
156
  if (value === '$organization_id')
150
157
  value = localStorage.getItem('organization_id')
151
158
  else if (value === '$user_id')
package/src/setValue.js CHANGED
@@ -1,4 +1,3 @@
1
- import { getAttributes } from '@cocreate/utils';
2
1
  import { storage } from './getValue';
3
2
 
4
3
  HTMLElement.prototype.setValue = function (value, dispatch) {
@@ -15,6 +14,10 @@ HTMLHeadingElement.prototype.setValue = function (value, dispatch) {
15
14
 
16
15
  // TODO: check if using a a switch case will provide better performance
17
16
  const setValue = (el, value, dispatch) => {
17
+ if (value === '$false') {
18
+ return dispatchEvents(el, dispatch)
19
+ };
20
+
18
21
  if (value === null || value === undefined) return;
19
22
  if (el.hasAttribute('component') || el.hasAttribute('plugin'))
20
23
  return storage.set(el, value)
@@ -36,10 +39,9 @@ const setValue = (el, value, dispatch) => {
36
39
  // TODO: el.options vs rendenring options from src
37
40
  if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' && el.options.length) {
38
41
  // TODO: attribute config undefined when used with onload-value
39
- let isCrdt = el.getAttribute('crdt') // getAttributes(el)
40
- // if (isCrdt == null || isCrdt == undefined)
41
- // isCrdt = el.getAttribute('crdt')
42
- if (isCrdt == "true" || el.type === 'file') return;
42
+ let isCrdt = el.getAttribute('crdt')
43
+ if (isCrdt == "true" || el.type === 'file')
44
+ return;
43
45
 
44
46
  if (el.type == 'checkbox') {
45
47
  let inputs = [el]
@@ -114,10 +116,13 @@ const setValue = (el, value, dispatch) => {
114
116
  if (valueType == 'outerHTML') {
115
117
  let parentNode = el.parentNode;
116
118
  if (parentNode) {
117
- if (newElement.children[0]) {
118
- parentNode.replaceChild(newElement.children[0], el);
119
- }
120
- else {
119
+ if (newElement.children.length > 0) {
120
+ let fragment = document.createDocumentFragment();
121
+ while (newElement.firstChild) {
122
+ fragment.appendChild(newElement.firstChild);
123
+ }
124
+ parentNode.replaceChild(fragment, el);
125
+ } else {
121
126
  parentNode.replaceChild(newElement, el);
122
127
  }
123
128
  }