@cocreate/elements 1.6.14 → 1.6.15

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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/demo/input-and-fetch.html +16 -102
  3. package/package.json +1 -1
  4. package/src/index.js +20 -16
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.6.15](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.6.14...v1.6.15) (2022-03-07)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * check if element already has input event before adding ([923adc6](https://github.com/CoCreate-app/CoCreate-elements/commit/923adc677b3379fb5948b4aa0553731cba393036))
7
+
1
8
  ## [1.6.14](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.6.13...v1.6.14) (2022-03-06)
2
9
 
3
10
 
package/demo/input-and-fetch.html CHANGED
@@ -6,113 +6,27 @@
6
6
  <!-- CoCreate Favicon -->
7
7
  <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
8
  </head>
9
-
9
+
10
10
  <body class="padding:20px">
11
- <!--<form collection="apples" document_id="60e26c13b979b400174462a4">-->
12
- <!--<input type="text" placeholder="name" collection="apples" document_id="616c5c387f9eea0011ba0240" name="name">-->
13
- <form collection="apples1" document_id="" crdt="false">
14
- <h5 name="name" contenteditable crdt="false">get value from db</h5>
15
- <input type="text" placeholder="name" document_id="" name="name">
16
- <!--<input type="text" placeholder="description" name="module_id" value="123" crdt="false">-->
17
- <!--<input type="text" placeholder="name" collection="apples1" document_id="" name="name1.firstname">-->
18
- <!--<input type="text" placeholder="name" collection="apples2" document_id="" name="name1">-->
19
- <!--<div class="domEditor" type="text" placeholder="name" name="name">div</div>-->
20
- <!--<textarea type="text" placeholder="description" name="description"></textarea>-->
21
- <!-- <cocreate-select class="floating-label" collection="apples3" name="industry" placeholder="Industry">-->
22
- <!-- <input placeholder="Search" template_id="industries">-->
23
- <!--<cc-options fetch-collection="apples3" template_id="industries" class="options overflow:auto">-->
24
- <!-- <cc-option class="template" template_id="industries" value="{{data._id}}">-->
25
- <!-- <h4 collection="apples3" document_id="{{data._id}}" name="name">industry name</h4>-->
26
- <!-- </cc-option>-->
27
- <!--</cc-options>-->
28
- <!-- </cocreate-select>-->
29
-
30
- <!--<select type="text" placeholder="name" name="name">select</select>-->
31
- <!--<cocreate-select type="text" placeholder="name" name="name"></cocreate-select>-->
32
- <!--<input type="text" name="name" class="floating-label" placeholder="org name" collection="organizations" document_id="5de0387b12e200ea63204d6c"> -->
33
- <!--<input type="text" name="name" class="floating-label" placeholder="org name" collection="organizations" document_id="5de0387b12e200ea63204d6c"> -->
34
- <!--<cocreate-select class="sortable floating-label" name="type" placeholder="Type">-->
35
- <!-- <input placeholder="Search" template_id="type">-->
36
- <!-- <cc-options fetch-collection="apples" template_id="type" class="overflow:auto">-->
37
- <!-- <cc-option class="template" template_id="type" value="{{data._id}}">-->
38
- <!-- <h3 collection="{{collection}}" document_id="{{data._id}}" name="name">Type Name</h3>-->
39
- <!-- </cc-option>-->
40
- <!-- </cc-options>-->
41
- <!--</cocreate-select>-->
42
- <button class="position:fixed bottom:15px right:15px bg-blue grow-hover round opacity-08" actions="save"><i class="far fa-save"></i></button>
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>
43
15
  </form>
44
- <!--<cocreate-select id="margin-right-unit" class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee" collection="builder" document_id="null" attributes="attributes_unit" attributes_target="#margin-right">-->
45
- <!-- <ul class="options overflow:auto padding:0px z-index:7" fetch-collection="modules" filter-value="5ff747727005da1c27274193" filter-name="_id" filter-operator="$eq" fetch-name="units" template_id="units2">-->
46
- <!-- <cc-option class="template option margin:0px padding:3px border-radius:4px" template_id="units2" value="{{units[]}}"><span value="{{units[]}}">{{units[]}}</span></cc-option>-->
47
- <!-- </ul>-->
48
- <!--</cocreate-select>-->
49
-
50
- <!--<table class="width:100% border-collapse:collapse">-->
51
- <!-- <tr class="border-bottom:1px_solid_darkgray">-->
52
- <!-- <td class="position:sticky top:0 background:white padding-top:0 padding:10px ">-->
53
- <!-- <input type="text" class="floating-label" filter-name="name" template_id="datatable" placeholder="Name">-->
54
- <!-- <span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
55
- <!-- <a order-by="name" toggle-order="asc" template_id="datatable"></a>-->
56
- <!-- </span>-->
57
- <!-- </td>-->
58
- <!-- <td class="position:sticky top:0 background:white padding:10px padding-top:0">-->
59
- <!-- <input type="text" class="floating-label" filter-name="Document Id" template_id="datatable" placeholder="Type" />-->
60
- <!-- <span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
61
- <!-- <a order-by="_id" toggle-order="asc" template_id="datatable"></a>-->
62
- <!-- </span>-->
63
- <!-- </td>-->
64
- <!-- </tr>-->
65
-
66
- <!--<div template_id="datatable" filter-name="name" filter-value="r" ></div>-->
67
- <!-- <tbody template_id="datatable" fetch-collection="apples1" order-by="name" order-type="asc" pass_id="datatable">-->
68
16
 
69
- <!-- <tr class="template background:gainsboro:hover border-bottom:1px_solid_darkgray" template_id="datatable" document_id="{{data._id}}" toggle="selected">-->
70
- <!-- <td class="padding:10px">-->
71
- <!-- <div class="display:flex">-->
72
- <!-- <div class="display:flex justify-content:center width:25px">-->
73
- <!-- <span collection="modules" document_id="{{data.module_id}}" name="icon"></span>-->
74
- <!-- </div>-->
75
- <!-- <div class="display:flex align-items:center margin-left:10px">-->
76
- <!-- <a target="modal" href="./form.html" modal-width="320px" modal-color="#229954">-->
77
- <!-- <h4 collection="{{collection}}" document_id="{{data._id}}" name="name">Name</h4>-->
78
- <!-- <h4 collection="{{collection}}" document_id="{{data._id}}" name="organization_id">organization_id</h4>-->
79
- <!-- <div pass-collection="{{collection}}" pass-document_id="{{data._id}}" pass_to="form-fields"></div>-->
80
- <!-- <div pass-filter-value="{{data.module_id}}" pass_to="module_id"></div>-->
81
- <!-- </a>-->
82
- <!-- <a target="modal" href="../modules/form.html" modal-width="320px" modal-color="#229954" class="cocreate-badge margin-left:5px success">-->
83
- <!-- <span collection="modules" document_id="{{data.module_id}}" name="name"></span>-->
84
- <!-- <div pass-collection="{{collection}}" pass-document_id="{{data._id}}" pass_to="form-fields"></div>-->
85
- <!-- <div pass-filter-value="{{data.module_id}}" pass_to="module_id"></div>-->
86
- <!-- </a>-->
87
- <!-- </div>-->
88
- <!-- </div>-->
89
- <!-- </td>-->
90
- <!-- <td class="padding:10px">-->
91
- <!-- <a target="modal" href="./form.html" modal-width="320px" modal-color="#229954">-->
92
- <!-- <b collection="{{collection}}" document_id="{{data.type}}" name="name"></b>-->
93
- <!-- <div pass-collection="{{collection}}" pass-document_id="{{data._id}}" pass_to="form-fields"></div>-->
94
- <!-- </a>-->
95
- <!-- </td>-->
96
- <!-- <td class="padding:10px">-->
97
- <!-- <a target="modal" href="./form.html" modal-width="320px" modal-color="#229954">-->
98
- <!-- <b>{{data._id}}</b>-->
99
- <!-- <div pass-collection="{{collection}}" pass-document_id="{{data._id}}" pass_to="form-fields"></div>-->
100
- <!-- </a>-->
101
- <!-- </td>-->
102
- <!-- </tr>-->
17
+ <div class="display:flex flex-wrap:wrap" fetch-collection="contacts" template_id="grid">
103
18
 
104
- <!-- </tbody>-->
105
- <!--</table>-->
106
- <!--<script>-->
107
- <!-- var config = {-->
108
- <!-- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',-->
109
- <!-- organization_Id: '5de0387b12e200ea63204d6c',-->
110
- <!-- host: 'ws.cocreate.app'-->
111
- <!-- }-->
112
- <!--</script>-->
19
+ <div template_id="grid" class="template card margin:10px padding:20px background:gainsboro:hover">
20
+ <a pass_to="form-fields" pass-document_id="{{data._id}}">
21
+ <h4 collection="contacts" document_id="{{data._id}}" name="fullname">Name</h4>
22
+ <h4>{{data._id}}</h4>
23
+ </a>
24
+ </div>
113
25
 
114
- <!--<script src="../dist/CoCreate-input.js"></script>-->
115
- <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
26
+ </div>
27
+
28
+ <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
29
+ <script src="http://127.0.0.1:4000/CoCreateJS/dist/CoCreate.js" ></script>
116
30
  </body>
117
31
 
118
32
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/elements",
3
- "version": "1.6.14",
3
+ "version": "1.6.15",
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",
package/src/index.js CHANGED
@@ -113,24 +113,28 @@ function __initSocket() {
113
113
  setData(null, data);
114
114
  });
115
115
  }
116
-
116
+
117
+ const elementEvents = new Map();
117
118
  function __initEvents(el) {
118
- if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' || el.hasAttribute('contenteditable')) {
119
- el.addEventListener('input', function(e) {
120
- const {document_id, isRealtime, isCrdt} = crud.getAttr(el);
121
- if (isCrdt == "true" && document_id || isRealtime == "false") return;
122
- if (document_id && e.detail && e.detail.skip == true) return;
123
- save(el);
124
- });
119
+ if (!elementEvents.has(el)) {
120
+ if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' || el.hasAttribute('contenteditable')) {
121
+ el.addEventListener('input', function(e) {
122
+ const {document_id, isRealtime, isCrdt} = crud.getAttr(el);
123
+ if (isCrdt == "true" && document_id || isRealtime == "false") return;
124
+ if (document_id && e.detail && e.detail.skip == true) return;
125
+ save(el);
126
+ });
125
127
 
126
- // el.addEventListener('change', function(e) {
127
- // if (el.tagName == 'SELECT') {
128
- // const {isRealtime, isSave, isUpdate} = crud.getAttr(el);
129
- // if (isRealtime == "false" || isSave == "false" || isUpdate == "false") return;
130
- // if (e.detail && e.detail.skip == true) return;
131
- // save(el);
132
- // }
133
- // });
128
+ // el.addEventListener('change', function(e) {
129
+ // if (el.tagName == 'SELECT') {
130
+ // const {isRealtime, isSave, isUpdate} = crud.getAttr(el);
131
+ // if (isRealtime == "false" || isSave == "false" || isUpdate == "false") return;
132
+ // if (e.detail && e.detail.skip == true) return;
133
+ // save(el);
134
+ // }
135
+ // });
136
+ elementEvents.set(el, true)
137
+ }
134
138
  }
135
139
  }
136
140