@cocreate/events 1.2.0 → 1.4.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 +14 -0
  2. package/demo/index.html +17 -2
  3. package/demo/selected.html +54 -0
  4. package/demo/set-value.html +18 -0
  5. package/package.json +1 -1
  6. package/src/index.js +139 -89
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [1.4.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.3.0...v1.4.0) (2023-02-19)
2
+
3
+
4
+ ### Features
5
+
6
+ * debonce ([43748c4](https://github.com/CoCreate-app/CoCreate-events/commit/43748c45b9e76f58aaf1ad11d16964422c028bbc))
7
+
8
+ # [1.3.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.2.0...v1.3.0) (2023-02-11)
9
+
10
+
11
+ ### Features
12
+
13
+ * define and replace a key ([f321bba](https://github.com/CoCreate-app/CoCreate-events/commit/f321bbad58ed361b5d7185cf5fe33e6c4ed79d2b))
14
+
1
15
  # [1.2.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.1.0...v1.2.0) (2023-02-02)
2
16
 
3
17
 
package/demo/index.html CHANGED
@@ -57,9 +57,24 @@
57
57
  some content
58
58
  </div>
59
59
 
60
+ <!-- custom event example -->
61
+ <div test-value="active" test-events="click" event>
62
+ other content
63
+ </div>
64
+ <!-- defining key example -->
65
+ <!-- <div click-target="#testing" click-value="hello, bye" click-key="ty">
66
+ <span id="testing" class="{{ty}}">other content</span>
67
+ </div> -->
68
+
69
+ <!-- defining key example -->
70
+ <div >
71
+ <input input-target="#testing" input-value="" input-key="ty">
72
+ <span id="testing" class="{{ty}}">other content</span>
73
+ </div>
60
74
 
61
-
62
75
  <!--<script src="../dist/CoCreate-events.js"></script>-->
63
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
76
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
77
+ <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
78
+
64
79
  </body>
65
80
  </html>
package/demo/selected.html ADDED
@@ -0,0 +1,54 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Selected | CoCreateJS</title>
5
+
6
+ <!-- CoCreate Favicon -->
7
+ <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
+ <!-- Custom CSS -->
9
+ <style type="text/css">
10
+ .test{background:red}
11
+ .green{background:green}
12
+ .yellow{background:yellow}
13
+ .blue{background:blue}
14
+ .red{background:red}
15
+ .active{
16
+ background-color:blue;
17
+
18
+ }
19
+ .hfhfh[selected]{}
20
+
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <!--<article>-->
26
+
27
+
28
+
29
+
30
+ <div id="yyy" selected-target=".tester" selected-value="active," selected-attribute="data-test" selected-group="uno" data-test="" class="test">1 tab</div>
31
+ <div selected-value="active" selected-group="uno" class="test">2 tab</div>
32
+ <div selected-value="active" selected-group="uno" class="test">3 tab</div>
33
+
34
+ <hr/>
35
+
36
+ <div selected-value="yellow" selected-group="2" class="green">1 tab</div>
37
+ <div selected-value="blue" selected-group="2" class="green">2 tab</div>
38
+ <div selected-value="red" selected-group="2" class="green">3 tab</div>
39
+
40
+ <hr/>
41
+ <div class="tester">
42
+ <div selected-value="active" selected-closest="div.tester" class="test">4 tab</div>
43
+ <div selected-value="active" class="test">4 tab</div>
44
+
45
+ <div selected-value="color:black; background:grey" selected-attribute="style" style="">color tab</div>
46
+
47
+ <div id="yyyy" data-test="" class="test">1 tab</div>
48
+ </div>
49
+
50
+ <!-- <script src="../dist/CoCreate-selected.js"></script> -->
51
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
52
+ <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
53
+ </body>
54
+ </html>
package/demo/set-value.html ADDED
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html>
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
+ </head>
9
+ <body>
10
+ <div click-target="#testing" click-value="hello, bye" click-key="ty">
11
+ <span id="testing" class="{{ty}}">other content</span>
12
+ </div>
13
+
14
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
15
+ <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
16
+
17
+ </body>
18
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/events",
3
- "version": "1.2.0",
3
+ "version": "1.4.0",
4
4
  "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "events",
package/src/index.js CHANGED
@@ -2,56 +2,58 @@ import {queryDocumentSelectorAll} from '@cocreate/utils';
2
2
  import action from '@cocreate/actions';
3
3
 
4
4
  const CoCreateEvents = {
5
- // ToDo update to support config, ability to add custom prefix, for loop each deafualt and custom prefix to support action
6
- init: function() {
7
- this.initElement(document, 'events');
8
- this.initElement(document, 'click');
9
- this.initElement(document, 'hover');
10
- this.initElement(document, 'mouseover');
11
- this.initElement(document, 'mouseout');
12
- this.initElement(document, 'input');
13
- this.initElement(document, 'change');
5
+ // ToDo update to support config, ability to add custom prefix, for loop each defualt and custom prefix to support action
6
+ init: function(prefix, events) {
7
+ if (prefix && events)
8
+ this.initElement(document, prefix, events);
9
+ else {
10
+ this.initElement(document, 'toggle', ['click']);
11
+ this.initElement(document, 'click', ['click']);
12
+ // this.initElement(document, 'hover', ['mouseover', 'mouseout');
13
+ // this.initElement(document, 'mouseover', ['mouseover');
14
+ // this.initElement(document, 'mouseout', ['mouseout');
15
+ this.initElement(document, 'input', ['input']);
16
+ this.initElement(document, 'change', ['change']);
17
+ this.initElement(document, 'selected', ['click']);
18
+ }
14
19
  },
15
20
 
16
- initElement: function(container, prefix) {
17
- this.__initElementEvent(container || document, prefix);
21
+ initElement: function(element, prefix, events) {
22
+ this.__initElementEvent(element || document, prefix, events);
18
23
  },
19
24
 
20
- __initElementEvent: function(mainContainer, prefix) {
25
+ __initElementEvent: function(element, prefix, events) {
21
26
  const self = this;
22
- let eventNames = [];
23
-
24
- if (prefix === 'toggle') eventNames = ['click'];
25
- if (prefix === 'click') eventNames = ['click'];
26
- if (prefix === 'hover') eventNames = ['mouseover', 'mouseout'];
27
- if (prefix === 'mouseover') eventNames = ['mouseover'];
28
- if (prefix === 'mouseout') eventNames = ['mouseout'];
29
- if (prefix === 'input') eventNames = ['input'];
30
- if (prefix === 'change') eventNames = ['change'];
27
+
28
+ events.forEach((eventName) => {
29
+ let debounce;
30
+ element.addEventListener(eventName, function(event) {
31
+ // ToDo: apply debounce
32
+ clearTimeout(debounce);
33
+ debounce = setTimeout(function() {
34
+ const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
35
+ if (target) {
36
+ let attribute = target.getAttribute('actions') || ""
37
+ if (attribute.includes(prefix))
38
+ return;
39
+ // if (target.closest(`[actions*="${prefix}"]`))
40
+ // return;
41
+ self.__updateElements(target, prefix);
42
+
43
+ let parentElement = target.parentElement;
44
+ if (parentElement) {
45
+ do {
46
+ parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
47
+ if (parentElement)
48
+ self.__updateElements(parentElement, prefix);
49
+ }
50
+ while (parentElement)
31
51
 
32
- eventNames.forEach((event_name) => {
33
- mainContainer.addEventListener(event_name, function(event) {
34
- const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
35
- if (target) {
36
- let attribute = target.getAttribute('actions') || ""
37
- if (attribute.includes(prefix))
38
- return;
39
- // if (target.closest(`[actions*="${prefix}"]`))
40
- // return;
41
- self.__updateElements(target, prefix);
42
-
43
- let parentElement = target.parentElement;
44
- if (parentElement) {
45
- do {
46
- parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
47
- if (parentElement)
48
- self.__updateElements(parentElement, prefix);
49
52
  }
50
- while (parentElement)
51
-
53
+
52
54
  }
55
+ }, 500);
53
56
 
54
- }
55
57
  });
56
58
  });
57
59
 
@@ -68,6 +70,8 @@ const CoCreateEvents = {
68
70
  __updateElements: function(element, prefix) {
69
71
  const self = this;
70
72
  let targetValue = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
73
+ if (!targetValue && element.value)
74
+ targetValue = element.getValue()
71
75
  if (!targetValue) return
72
76
 
73
77
  let values = targetValue.split(',');
@@ -75,10 +79,11 @@ const CoCreateEvents = {
75
79
  return;
76
80
  }
77
81
 
78
-
79
82
  let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
80
83
  let targetSelector = element.getAttribute(`${prefix}-target`);
81
84
  let targetClosest = element.getAttribute(`${prefix}-closest`);
85
+ let targetKey = element.getAttribute(`${prefix}-key`);
86
+
82
87
  let targetGroup = element.getAttribute(`${prefix}-group`);
83
88
  if (targetGroup) {
84
89
  document.querySelectorAll(`[${prefix}-group="${targetGroup}"]`).forEach((el) => {
@@ -87,22 +92,24 @@ const CoCreateEvents = {
87
92
  if (!groupValues || groupValues.length == 0) {
88
93
  return;
89
94
  }
95
+
90
96
  groupValues = groupValues.map(x => x.trim());
91
97
 
92
98
  let groupTarget = el.getAttribute(`${prefix}-target`);
93
99
  let groupClosest = el.getAttribute(`${prefix}-closest`);
94
100
  let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';
101
+ let groupKey = el.getAttribute(`${prefix}-key`)
95
102
 
96
103
  // el.removeAttribute(prefix)
97
- self.setValue(el, groupAttribute, groupValue, 'deactivate')
104
+ self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
98
105
  if (groupTarget)
99
106
  document.querySelectorAll(groupTarget).forEach((el) =>
100
- self.setValue(el, groupAttribute, groupValue, 'deactivate')
107
+ self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
101
108
  );
102
109
  else if (groupClosest) {
103
110
  let element = el.closest(groupClosest)
104
111
  if (element)
105
- self.setValue(element, groupAttribute, groupValue, 'deactivate');
112
+ self.setValue(prefix, element, groupAttribute, groupValues, groupKey, 'deactivate');
106
113
  }
107
114
  });
108
115
  }
@@ -115,9 +122,9 @@ const CoCreateEvents = {
115
122
  if (targetSelector) {
116
123
  if (/{{\s*([\w\W]+)\s*}}/g.test(targetSelector)) return;
117
124
  targetElements = queryDocumentSelectorAll(targetSelector);
118
- targetElements.forEach((el) => self.setValue(el, targetAttribute, values));
125
+ targetElements.forEach((el) => self.setValue(prefix, el, targetAttribute, values, targetKey));
119
126
  } else
120
- self.setValue(element, targetAttribute, values);
127
+ self.setValue(prefix, element, targetAttribute, values, targetKey);
121
128
 
122
129
  document.dispatchEvent(new CustomEvent(`${prefix}End`, {
123
130
  detail: {}
@@ -125,56 +132,63 @@ const CoCreateEvents = {
125
132
 
126
133
  },
127
134
 
128
- setValue: function(element, attrName, values, deactivate) {
135
+ setValue: function(prefix, element, attrName, values, key, deactivate) {
129
136
  let attrValues, oldValue;
130
-
131
- if (attrName === 'style') {
132
- if (element.getAttribute(attrName)) {
133
- attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
134
- attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
135
- attrValues = attrValues.map(function(item, index){
136
- return item.replace(' ','');
137
- });
138
- oldValue = values.filter(x => attrValues.includes(x))[0] || '';
139
- }
140
- let newValue = this.__getNextValue(values, oldValue);
141
-
142
- if (oldValue) {
143
- let [property, value] = oldValue.split(":");
144
- element.style[property] = '';
145
- }
146
-
147
- if (newValue != '') {
148
- let [property, value] = newValue.split(":");
149
- element.style[property] = value;
150
- }
137
+ if (key) {
138
+ key = `{{${key}}}`;
139
+ // let value = values[0]
140
+ replaceKey(prefix, element, key, values)
151
141
  } else {
152
- if (attrName === 'value') {
153
- oldValue = element.getValue()
154
- } else if (element.getAttribute(attrName)) {
155
- attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
142
+ if (attrName === 'style') {
143
+ if (element.getAttribute(attrName)) {
144
+ attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
145
+ attrValues = attrValues.map(function(item, index){
146
+ return item.replace(' ','');
147
+ });
156
148
  oldValue = values.filter(x => attrValues.includes(x))[0] || '';
157
- }
158
-
159
- let newValue = this.__getNextValue(values, oldValue);
160
- if (deactivate)
161
- newValue = ""
162
-
163
- if (attrName === 'class') {
164
- if (oldValue != '') {
165
- element.classList.remove(oldValue);
166
- if (values.length === 1) {
167
- return;
168
- }
149
+ }
150
+ let newValue = this.__getNextValue(values, oldValue);
151
+
152
+ if (oldValue) {
153
+ let [property, value] = oldValue.split(":");
154
+ element.style[property] = '';
169
155
  }
170
156
 
171
157
  if (newValue != '') {
172
- element.classList.add(newValue);
158
+ newValue = newValue.split(';').map(x => x.trim())
159
+ for (let style of newValue) {
160
+ let [property, value] = style.split(":");
161
+ element.style[property] = value;
162
+ }
173
163
  }
174
- } else if (attrName === 'value') {
175
- element.setValue(newValue);
176
164
  } else {
177
- element.setAttribute(attrName, newValue);
165
+ if (attrName === 'value') {
166
+ oldValue = element.getValue()
167
+ } else if (element.getAttribute(attrName)) {
168
+ attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
169
+ oldValue = values.filter(x => attrValues.includes(x))[0] || '';
170
+ }
171
+
172
+ let newValue = this.__getNextValue(values, oldValue);
173
+ if (deactivate)
174
+ newValue = ""
175
+
176
+ if (attrName === 'class') {
177
+ if (oldValue != '') {
178
+ element.classList.remove(oldValue);
179
+ if (values.length === 1) {
180
+ return;
181
+ }
182
+ }
183
+
184
+ if (newValue != '') {
185
+ element.classList.add(newValue);
186
+ }
187
+ } else if (attrName === 'value') {
188
+ element.setValue(newValue);
189
+ } else {
190
+ element.setAttribute(attrName, newValue);
191
+ }
178
192
  }
179
193
  }
180
194
  },
@@ -190,6 +204,42 @@ const CoCreateEvents = {
190
204
  }
191
205
  };
192
206
 
207
+ const eventElements = new Map();
208
+ const elementPrefix = new Map();
209
+ function replaceKey(prefix, element, key, values) {
210
+ // ToDo: improve updating key to prevent unwanted match by storing each attribute that originally had a key to know which attributes to update
211
+ if (eventElements.has(element)) {
212
+ key = eventElements.get(element).get(prefix);
213
+ }
214
+ let oldValue = key
215
+ let value = CoCreateEvents.__getNextValue(values, oldValue);
216
+
217
+ const regex = new RegExp(key, "g");
218
+ for (let attribute of element.attributes){
219
+ let attrName = attribute.name;
220
+ let attrValue = attribute.value;
221
+ let setAttr = false;
222
+ if (attrValue.includes(key)){
223
+ attrValue = attrValue.replace(regex, value);
224
+ setAttr = true;
225
+ }
226
+ if (attrName.includes(key)){
227
+ element.removeAttribute(key);
228
+ attrName = attrName.replace(regex, value);
229
+ setAttr = true;
230
+ }
231
+ if (setAttr)
232
+ element.setAttribute(attrName, attrValue);
233
+ }
234
+ let html = element.innerHTML;
235
+ if (html.indexOf(key) !== -1){
236
+ html = html.replace(regex, value);
237
+ element.innerHTML = html;
238
+ }
239
+ elementPrefix.set(prefix, value)
240
+ eventElements.set(element, elementPrefix)
241
+
242
+ }
193
243
 
194
244
  CoCreateEvents.init();
195
245