@cocreate/events 1.20.1 → 1.22.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.
- package/CHANGELOG.md +20 -0
- package/demo/click.html +1 -3
- package/demo/hover.html +1 -1
- package/demo/index.html +1 -1
- package/docs/index.html +13 -35
- package/package.json +5 -5
- package/src/index.js +21 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
# [1.22.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.21.0...v1.22.0) (2024-06-19)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* $template condition checks for {{}} ([bd7219a](https://github.com/CoCreate-app/CoCreate-events/commit/bd7219a03b5d1b04772596872af15351bfd5f999))
|
|
7
|
+
|
|
8
|
+
# [1.21.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.20.1...v1.21.0) (2024-06-12)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* bump cocreate dependencies ([c4ae1f6](https://github.com/CoCreate-app/CoCreate-events/commit/c4ae1f6fd54fc9de71ffd039014c86d2b490d985))
|
|
14
|
+
* svg icon class ([26265ec](https://github.com/CoCreate-app/CoCreate-events/commit/26265ece8a975bb0901f3243baddf9d0e4bb35ff))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* send event details to setValue to process mouseout logic ([9b5b499](https://github.com/CoCreate-app/CoCreate-events/commit/9b5b4998c3a24f68df41c6fabd69fa2fec80b8fc))
|
|
20
|
+
|
|
1
21
|
## [1.20.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.20.0...v1.20.1) (2024-05-19)
|
|
2
22
|
|
|
3
23
|
|
package/demo/click.html
CHANGED
|
@@ -43,9 +43,7 @@
|
|
|
43
43
|
<div>
|
|
44
44
|
<div class="vdom-item">some content1</div>
|
|
45
45
|
<span click="test" click-closest=".vdom-item"
|
|
46
|
-
><i
|
|
47
|
-
class="height:16px fill:#505050"
|
|
48
|
-
src="/assets/svg/caret-down.svg"
|
|
46
|
+
><i class="height:16px" src="/assets/svg/caret-down.svg"
|
|
49
47
|
>test</i
|
|
50
48
|
></span
|
|
51
49
|
>
|
package/demo/hover.html
CHANGED
package/demo/index.html
CHANGED
package/docs/index.html
CHANGED
|
@@ -81,43 +81,33 @@
|
|
|
81
81
|
class="margin-right:15px"
|
|
82
82
|
share-network="twitter"
|
|
83
83
|
title="Share on twitter"
|
|
84
|
-
><i
|
|
85
|
-
class="height:20px fill:#505050"
|
|
86
|
-
src="/assets/svg/twitter.svg"></i
|
|
84
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
87
85
|
></a>
|
|
88
86
|
<a
|
|
89
87
|
class="margin-right:15px"
|
|
90
88
|
share-network="facebook"
|
|
91
89
|
title="Share on Facebook"
|
|
92
|
-
><i
|
|
93
|
-
class="height:20px fill:#505050"
|
|
94
|
-
src="/assets/svg/facebook.svg"></i
|
|
90
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
95
91
|
></a>
|
|
96
92
|
<a
|
|
97
93
|
class="margin-right:15px"
|
|
98
94
|
share-network="instagram"
|
|
99
95
|
title="Share on instagram"
|
|
100
|
-
><i
|
|
101
|
-
class="height:20px fill:#505050"
|
|
102
|
-
src="/assets/svg/instagram.svg"></i
|
|
96
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
103
97
|
></a>
|
|
104
98
|
</div>
|
|
105
99
|
<a
|
|
106
100
|
class="margin-right:15px"
|
|
107
101
|
share-network="share"
|
|
108
102
|
title="Share on share"
|
|
109
|
-
><i
|
|
110
|
-
class="height:20px fill:#505050"
|
|
111
|
-
src="/assets/svg/share-alt.svg"></i
|
|
103
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
112
104
|
></a>
|
|
113
105
|
</div>
|
|
114
106
|
<a
|
|
115
107
|
href="https://github.com/CoCreate-app/CoCreate-events"
|
|
116
108
|
target="_blank"
|
|
117
109
|
class="margin-right:15px"
|
|
118
|
-
><i
|
|
119
|
-
class="height:20px fill:#505050"
|
|
120
|
-
src="/assets/svg/github.svg"></i
|
|
110
|
+
><i src="/assets/svg/github.svg"></i
|
|
121
111
|
></a>
|
|
122
112
|
</div>
|
|
123
113
|
</div>
|
|
@@ -143,9 +133,7 @@
|
|
|
143
133
|
<a
|
|
144
134
|
class="margin-left:10px display:none"
|
|
145
135
|
href="#events-install"
|
|
146
|
-
><i
|
|
147
|
-
class="height:20px fill:#505050"
|
|
148
|
-
src="/assets/svg/link.svg"></i
|
|
136
|
+
><i src="/assets/svg/link.svg"></i
|
|
149
137
|
></a>
|
|
150
138
|
</span>
|
|
151
139
|
</div>
|
|
@@ -169,9 +157,7 @@
|
|
|
169
157
|
<a
|
|
170
158
|
class="margin-left:10px display:none"
|
|
171
159
|
href="#events-usage"
|
|
172
|
-
><i
|
|
173
|
-
class="height:20px fill:#505050"
|
|
174
|
-
src="/assets/svg/link.svg"></i
|
|
160
|
+
><i src="/assets/svg/link.svg"></i
|
|
175
161
|
></a>
|
|
176
162
|
</span>
|
|
177
163
|
</div>
|
|
@@ -224,9 +210,7 @@
|
|
|
224
210
|
<a
|
|
225
211
|
class="margin-left:10px display:none"
|
|
226
212
|
href="#events-attributes"
|
|
227
|
-
><i
|
|
228
|
-
class="height:20px fill:#505050"
|
|
229
|
-
src="/assets/svg/link.svg"></i
|
|
213
|
+
><i src="/assets/svg/link.svg"></i
|
|
230
214
|
></a>
|
|
231
215
|
</span>
|
|
232
216
|
</div>
|
|
@@ -315,9 +299,7 @@
|
|
|
315
299
|
<a
|
|
316
300
|
class="margin-left:10px display:none"
|
|
317
301
|
href="#events-demo"
|
|
318
|
-
><i
|
|
319
|
-
class="height:20px fill:#505050"
|
|
320
|
-
src="/assets/svg/link.svg"></i
|
|
302
|
+
><i src="/assets/svg/link.svg"></i
|
|
321
303
|
></a>
|
|
322
304
|
</span>
|
|
323
305
|
</div>
|
|
@@ -361,7 +343,7 @@
|
|
|
361
343
|
events="code-height"
|
|
362
344
|
events-selector="#demo-code"
|
|
363
345
|
><i
|
|
364
|
-
class="height:18px
|
|
346
|
+
class="height:18px"
|
|
365
347
|
src="/assets/svg/eye.svg"></i
|
|
366
348
|
></a>
|
|
367
349
|
<a
|
|
@@ -372,18 +354,14 @@
|
|
|
372
354
|
hide="#eye-slash"
|
|
373
355
|
events="code-height"
|
|
374
356
|
events-selector="#demo-code"
|
|
375
|
-
><i
|
|
376
|
-
class="height:20px fill:#505050"
|
|
377
|
-
src="/assets/svg/eye-slash.svg"></i
|
|
357
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
378
358
|
></a>
|
|
379
359
|
<a
|
|
380
360
|
class="margin-right:10px"
|
|
381
361
|
id="code"
|
|
382
362
|
show="#code-slash"
|
|
383
363
|
hide="#code, #demo-code"
|
|
384
|
-
><i
|
|
385
|
-
class="height:20px fill:#505050"
|
|
386
|
-
src="/assets/svg/code.svg"></i
|
|
364
|
+
><i src="/assets/svg/code.svg"></i
|
|
387
365
|
></a>
|
|
388
366
|
<a
|
|
389
367
|
class="margin-right:10px"
|
|
@@ -392,7 +370,7 @@
|
|
|
392
370
|
show="#code, #demo-code"
|
|
393
371
|
hide="#code-slash"
|
|
394
372
|
><i
|
|
395
|
-
class="
|
|
373
|
+
class="height:18px"
|
|
396
374
|
src="/assets/svg/code.svg"></i
|
|
397
375
|
></a>
|
|
398
376
|
<a
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/events",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.22.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",
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"webpack-log": "^3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@cocreate/actions": "^1.18.
|
|
62
|
-
"@cocreate/element-prototype": "^1.
|
|
63
|
-
"@cocreate/observer": "^1.16.
|
|
64
|
-
"@cocreate/utils": "^1.33.
|
|
61
|
+
"@cocreate/actions": "^1.18.2",
|
|
62
|
+
"@cocreate/element-prototype": "^1.23.0",
|
|
63
|
+
"@cocreate/observer": "^1.16.1",
|
|
64
|
+
"@cocreate/utils": "^1.33.7"
|
|
65
65
|
}
|
|
66
66
|
}
|
package/src/index.js
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
// you must obtain a commercial license from CoCreate LLC.
|
|
21
21
|
// For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
|
|
22
22
|
|
|
23
|
-
import { queryElements,
|
|
23
|
+
import { queryElements, queryData } from '@cocreate/utils';
|
|
24
24
|
import action from '@cocreate/actions';
|
|
25
25
|
import observer from '@cocreate/observer';
|
|
26
26
|
import '@cocreate/element-prototype';
|
|
@@ -196,7 +196,7 @@ const CoCreateEvents = {
|
|
|
196
196
|
return;
|
|
197
197
|
// if (target.closest(`[actions*="${prefix}"]`))
|
|
198
198
|
// return;
|
|
199
|
-
self.__updateElements(target, prefix);
|
|
199
|
+
self.__updateElements(target, prefix, null, prefixes[prefix].events);
|
|
200
200
|
|
|
201
201
|
let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
|
|
202
202
|
|
|
@@ -205,7 +205,7 @@ const CoCreateEvents = {
|
|
|
205
205
|
do {
|
|
206
206
|
parentElement = parentElement.closest(selector)
|
|
207
207
|
if (parentElement) {
|
|
208
|
-
self.__updateElements(parentElement, prefix);
|
|
208
|
+
self.__updateElements(parentElement, prefix, null, prefixes[prefix].events);
|
|
209
209
|
parentElement = parentElement.parentElement
|
|
210
210
|
}
|
|
211
211
|
}
|
|
@@ -221,7 +221,7 @@ const CoCreateEvents = {
|
|
|
221
221
|
}
|
|
222
222
|
},
|
|
223
223
|
|
|
224
|
-
__updateElements: async function (element, prefix, target) {
|
|
224
|
+
__updateElements: async function (element, prefix, target, events) {
|
|
225
225
|
const self = this;
|
|
226
226
|
// TODO: support empty value when prefix-attribute defined, add and remove the attribute
|
|
227
227
|
let targetAttribute = element.getAttribute(`${prefix}-attribute`);
|
|
@@ -289,6 +289,7 @@ const CoCreateEvents = {
|
|
|
289
289
|
//TODO: improved resize toggling of values
|
|
290
290
|
// let hasCondition = this.elements2.get(element)
|
|
291
291
|
if (ifCondition && evaluateCondition(ifCondition, ifValue)) {
|
|
292
|
+
|
|
292
293
|
// if (hasCondition && hasCondition.condition === ifCondition) {
|
|
293
294
|
// return
|
|
294
295
|
// } else
|
|
@@ -324,10 +325,10 @@ const CoCreateEvents = {
|
|
|
324
325
|
let groupKey = el.getAttribute(`${prefix}-key`)
|
|
325
326
|
|
|
326
327
|
// el.removeAttribute(prefix)
|
|
327
|
-
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
328
|
+
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate', events)
|
|
328
329
|
let targetElements = queryElements({ el, prefix });
|
|
329
330
|
for (let i = 0; i < targetElements.length; i++)
|
|
330
|
-
self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate')
|
|
331
|
+
self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate', events)
|
|
331
332
|
|
|
332
333
|
});
|
|
333
334
|
}
|
|
@@ -352,7 +353,7 @@ const CoCreateEvents = {
|
|
|
352
353
|
if (!targetAttribute && targetAttribute !== '' && ['click', 'focus', 'blur'].includes(prefix)) {
|
|
353
354
|
targetElements[i][prefix]()
|
|
354
355
|
} else
|
|
355
|
-
this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey)
|
|
356
|
+
this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey, null, events)
|
|
356
357
|
}
|
|
357
358
|
|
|
358
359
|
document.dispatchEvent(new CustomEvent(`${prefix}End`, {
|
|
@@ -361,7 +362,16 @@ const CoCreateEvents = {
|
|
|
361
362
|
|
|
362
363
|
},
|
|
363
364
|
|
|
364
|
-
setValue: async function (prefix, element, attrName, values, key, deactivate) {
|
|
365
|
+
setValue: async function (prefix, element, attrName, values, key, deactivate, events) {
|
|
366
|
+
if (events && events.includes('mouseout')) {
|
|
367
|
+
if (element.matches(':hover')) {
|
|
368
|
+
element.addEventListener('mouseout', () => {
|
|
369
|
+
this.setValue(prefix, element, attrName, values, key, deactivate, events);
|
|
370
|
+
}, { once: true });
|
|
371
|
+
return;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
|
|
365
375
|
let attrValues, oldValue;
|
|
366
376
|
if (key) {
|
|
367
377
|
key = `{{${key}}}`;
|
|
@@ -579,7 +589,9 @@ function checkCondition(condition, value) {
|
|
|
579
589
|
condition = parseCondition(condition);
|
|
580
590
|
let result;
|
|
581
591
|
|
|
582
|
-
if (
|
|
592
|
+
if (condition === '$template') {
|
|
593
|
+
result = (/{{\s*([\w\W]+)\s*}}/g.test(value[0]))
|
|
594
|
+
} else if (Array.isArray(value) && !(typeof condition === 'object')) {
|
|
583
595
|
if (operatorMatch) {
|
|
584
596
|
condition = parseFloat(condition)
|
|
585
597
|
result = value.some(v => {
|