@cocreate/elements 1.13.31 → 1.14.1

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 (7) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/demo/get-value.html +21 -23
  3. package/package.json +7 -7
  4. package/src/fetchSrc.js +19 -3
  5. package/src/getValue.js +29 -35
  6. package/src/setValue.js +2 -4
  7. package/demo/input-and-fetch.html +0 -32
package/CHANGELOG.md CHANGED
@@ -1,3 +1,25 @@
1
+ ## [1.14.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.14.0...v1.14.1) (2022-12-29)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * bump dependencies ([d4637fa](https://github.com/CoCreate-app/CoCreate-elements/commit/d4637fa2089fbee92e3191704bcd65c9ac4d12fa))
7
+ * exclusively use element-prototype getValue and setValue ([5d4bc05](https://github.com/CoCreate-app/CoCreate-elements/commit/5d4bc05c27e5f83275547d2f32e6de363a6c744e))
8
+
9
+ # [1.14.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.13.31...v1.14.0) (2022-12-27)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * bump dependecies ([cd95cd1](https://github.com/CoCreate-app/CoCreate-elements/commit/cd95cd1c12582086f7776e880eb3e6b6c4f5b6fb))
15
+ * bump dependencies ([03b8e18](https://github.com/CoCreate-app/CoCreate-elements/commit/03b8e18f658ca84a2d274c112d4f0e983b8862e1))
16
+ * observer target setValue and setValue-closest ([85dec0d](https://github.com/CoCreate-app/CoCreate-elements/commit/85dec0d291164d70f6f0d4618757710a4f9fb1e4))
17
+
18
+
19
+ ### Features
20
+
21
+ * fetch src will remove CoCreatejs, CoCreateCSS, and css-parser link as it already exists ([d4893f4](https://github.com/CoCreate-app/CoCreate-elements/commit/d4893f41d7ee34d76f5f57d24922e97b15938145))
22
+
1
23
  ## [1.13.31](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.13.30...v1.13.31) (2022-12-25)
2
24
 
3
25
 
package/demo/get-value.html CHANGED
@@ -1,28 +1,26 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
- <head>
4
- <title>Value | CoCreateJS</title>
5
-
6
- <!-- CoCreate Favicon -->
7
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
- <!-- CoCreate CSS CDN -->
9
- <link rel="stylesheet" href="https://cdn.cocreate.app/logic/latest/CoCreate-logic.min.css" type="text/css"/>
10
- </head>
11
- <body>
12
- <!--<ul get-value="#a123"> </ul>-->
13
- <!--<ul id="a123"> hello </ul>-->
14
-
15
- <input id="testing" value="new">
16
- <h1 get-value="#testing" get-value-key="ty" class="{{ty}}" test="{{ty}}">{{ty}}</h1>
3
+ <head>
4
+ <title>Value | CoCreateJS</title>
5
+
6
+ <!-- CoCreate Favicon -->
7
+ <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
+ <!-- CoCreate CSS CDN -->
9
+ <link rel="stylesheet" href="https://cdn.cocreate.app/logic/latest/CoCreate-logic.min.css" type="text/css"/>
10
+ </head>
11
+ <body>
17
12
 
18
- <hr/>
13
+ <input id="testing" value="new">
14
+ <h1 get-value="#testing" get-value-key="ty" class="{{ty}}" test="{{ty}}">{{ty}}</h1>
19
15
 
20
- <input id="testing1" value="new1" />
21
- <input get-value="#testing1" />
22
- <input get-value="#testing1" />
23
-
24
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
25
- <!--<script src="../dist/CoCreate-form.js"></script>-->
26
-
27
- </body>
16
+ <hr/>
17
+
18
+ <input id="testing1" value="new1" />
19
+ <input get-value="#testing1" />
20
+ <input get-value="#testing1" />
21
+
22
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
23
+ <!--<script src="../dist/CoCreate-form.js"></script>-->
24
+
25
+ </body>
28
26
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/elements",
3
- "version": "1.13.31",
3
+ "version": "1.14.1",
4
4
  "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
5
5
  "keywords": [
6
6
  "elements",
@@ -60,11 +60,11 @@
60
60
  "webpack-log": "^3.0.1"
61
61
  },
62
62
  "dependencies": {
63
- "@cocreate/actions": "^1.5.43",
64
- "@cocreate/crud-client": "^1.17.0",
65
- "@cocreate/docs": "^1.4.25",
66
- "@cocreate/element-prototype": "^1.2.12",
67
- "@cocreate/observer": "^1.5.47",
68
- "@cocreate/utils": "^1.17.6"
63
+ "@cocreate/actions": "^1.5.45",
64
+ "@cocreate/crud-client": "^1.17.5",
65
+ "@cocreate/docs": "^1.4.27",
66
+ "@cocreate/element-prototype": "^1.2.17",
67
+ "@cocreate/observer": "^1.5.49",
68
+ "@cocreate/utils": "^1.17.9"
69
69
  }
70
70
  }
package/src/fetchSrc.js CHANGED
@@ -19,17 +19,33 @@ async function initElement(element) {
19
19
  let initialize = initializing.get(element)
20
20
  if (!initialize || initialize.src != src){
21
21
  initializing.set(element, {src});
22
- if (src)
22
+ if (src) {
23
23
  try {
24
24
  let response = await fetch(src); // Gets a promise
25
25
  let text = await response.text(); // Replaces body with response
26
- if (text){
27
- element.innerHTML = text; // Replaces body with response
26
+ if (text) {
27
+ let dom = document.createElement('dom')
28
+ dom.innerHTML = text;
29
+
30
+ let CoCreateJS = dom.querySelector('script[src*="CoCreate.js"], script[src*="CoCreate.min.js"]')
31
+ if (CoCreateJS)
32
+ CoCreateJS.remove()
33
+
34
+ let CoCreateCSS = dom.querySelector('link[src*="CoCreate.css"], link[src*="CoCreate.min.css"]')
35
+ if (CoCreateCSS)
36
+ CoCreateCSS.remove()
37
+
38
+ let css = dom.querySelector('link[collection], link[document]')
39
+ if (css)
40
+ css.remove()
41
+
42
+ element.innerHTML = dom.innerHTML; // Replaces body with response
28
43
  initializing.delete(element)
29
44
  }
30
45
  } catch (err) {
31
46
  console.log('FetchSrc error:' + err); // Error handling
32
47
  }
48
+ }
33
49
  }
34
50
  };
35
51
 
package/src/getValue.js CHANGED
@@ -57,47 +57,41 @@ function initEvents(valueEl, element, mutation){
57
57
  }
58
58
 
59
59
  function setValueByFind(valueEl, mutation) {
60
- let value;
61
- // todo can be removed if all elements have getValue using prototype
62
- if (valueEl.hasAttribute('value'))
63
- value = valueEl.getAttribute('value');
64
- else if (valueEl.getValue)
65
- value = valueEl.getValue();
66
- // else
67
- // value = getValue(valueEl);
60
+ let value = valueEl.getValue();
68
61
  if (!value) return;
62
+
69
63
  let elements = mutation || valueEls.get(valueEl);
70
-
71
- if (elements)
72
- for(let element of elements){
73
- let key = element.getAttribute('get-value-key');
74
- if (key){
75
- key = `{{${key}}}`;
76
- const regex = new RegExp(key, "g");
77
- for (let attribute of element.attributes){
78
- let attrName = attribute.name;
79
- let attrValue = attribute.value;
80
- let setAttr = false;
81
- if (attrValue.includes(key)){
82
- attrValue = attrValue.replace(regex, value);
83
- setAttr = true;
64
+ if (elements) {
65
+ for(let element of elements){
66
+ let key = element.getAttribute('get-value-key');
67
+ if (key){
68
+ key = `{{${key}}}`;
69
+ const regex = new RegExp(key, "g");
70
+ for (let attribute of element.attributes){
71
+ let attrName = attribute.name;
72
+ let attrValue = attribute.value;
73
+ let setAttr = false;
74
+ if (attrValue.includes(key)){
75
+ attrValue = attrValue.replace(regex, value);
76
+ setAttr = true;
77
+ }
78
+ if (attrName.includes(key)){
79
+ element.removeAttribute(key);
80
+ attrName = attrName.replace(regex, value);
81
+ setAttr = true;
82
+ }
83
+ if (setAttr)
84
+ element.setAttribute(attrName, attrValue);
84
85
  }
85
- if (attrName.includes(key)){
86
- element.removeAttribute(key);
87
- attrName = attrName.replace(regex, value);
88
- setAttr = true;
86
+ let html = element.innerHTML;
87
+ if (html.indexOf(key) !== -1){
88
+ html = html.replace(regex, value);
89
+ element.innerHTML = html;
89
90
  }
90
- if (setAttr)
91
- element.setAttribute(attrName, attrValue);
92
- }
93
- let html = element.innerHTML;
94
- if (html.indexOf(key) !== -1){
95
- html = html.replace(regex, value);
96
- element.innerHTML = html;
97
91
  }
92
+ else
93
+ element.setValue(value);
98
94
  }
99
- else
100
- element.setValue(value);
101
95
  }
102
96
  }
103
97
 
package/src/setValue.js CHANGED
@@ -35,9 +35,7 @@ function setValueByFind(element){
35
35
  if (key)
36
36
  key = `{{${key}}}`;
37
37
 
38
- let value
39
- if (element.getValue)
40
- value = element.getValue();
38
+ let value = element.getValue();
41
39
  if (!value) return;
42
40
 
43
41
  let selector = element.getAttribute('set-value');
@@ -85,7 +83,7 @@ function setValueByFind(element){
85
83
  observer.init({
86
84
  name: 'set-value',
87
85
  observe: ['addedNodes'],
88
- target: '[get-value], [get-value-closest]',
86
+ target: '[set-value], [set-value-closest]',
89
87
  callback: function(mutation) {
90
88
  initElement(mutation.target);
91
89
  }
package/demo/input-and-fetch.html DELETED
@@ -1,32 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <title>Inputs | CoCreateJS</title>
6
- <!-- CoCreate Favicon -->
7
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
- </head>
9
-
10
- <body class="padding:20px">
11
-
12
- <form collection="contacts" document_id="">
13
- <input name="fullname" pass_id="form-fields" pass-refresh>
14
- <button actions="save, reset" class="display:inline margin:10px">Save</button>
15
- </form>
16
-
17
- <div class="display:flex flex-wrap:wrap" fetch-collection="contacts" template_id="grid">
18
-
19
- <div template_id="grid" class="template card margin:10px padding:20px background:gainsboro:hover">
20
- <a pass_to="form-fields" pass-document_id="{{document._id}}">
21
- <h4 collection="contacts" document_id="{{document._id}}" name="fullname">Name</h4>
22
- <h4>{{document._id}}</h4>
23
- </a>
24
- </div>
25
-
26
- </div>
27
-
28
- <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
29
-
30
- </body>
31
-
32
- </html>