@cocreate/events 1.10.20 → 1.11.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 +17 -0
- package/CoCreate.config.js +2 -2
- package/LICENSE +683 -21
- package/demo/click.html +8 -6
- package/demo/hover.html +2 -2
- package/demo/index.html +6 -6
- package/demo/selected.html +1 -1
- package/demo/set-value.html +2 -2
- package/docs/index.html +29 -29
- package/package.json +7 -7
- package/src/index.js +46 -67
- package/webpack.config.js +79 -73
package/demo/click.html
CHANGED
|
@@ -45,8 +45,10 @@
|
|
|
45
45
|
<span click="test" click-closest=".vdom-item"
|
|
46
46
|
><i
|
|
47
47
|
class="height:16px fill:#505050"
|
|
48
|
-
src="/assets/svg/caret-down.svg"
|
|
49
|
-
|
|
48
|
+
src="/assets/svg/caret-down.svg"
|
|
49
|
+
>test</i
|
|
50
|
+
></span
|
|
51
|
+
>
|
|
50
52
|
</div>
|
|
51
53
|
<div class="vdom-item">some content2</div>
|
|
52
54
|
</div>
|
|
@@ -55,7 +57,7 @@
|
|
|
55
57
|
</article>
|
|
56
58
|
<br />
|
|
57
59
|
<hr />
|
|
58
|
-
<div class="vdom-item" click="active" click-
|
|
60
|
+
<div class="vdom-item" click="active" click-selector="article > div">
|
|
59
61
|
some content
|
|
60
62
|
</div>
|
|
61
63
|
<br />
|
|
@@ -64,7 +66,7 @@
|
|
|
64
66
|
class="vdom-item"
|
|
65
67
|
click-attribute="class"
|
|
66
68
|
click="active"
|
|
67
|
-
click-
|
|
69
|
+
click-selector=".vdom-item">
|
|
68
70
|
click for active
|
|
69
71
|
</div>
|
|
70
72
|
<br />
|
|
@@ -75,7 +77,7 @@
|
|
|
75
77
|
id="hey"
|
|
76
78
|
data-test=""
|
|
77
79
|
click-attribute="value"
|
|
78
|
-
click-
|
|
80
|
+
click-selector="#tester"
|
|
79
81
|
click-value="active, other, hi, jean">
|
|
80
82
|
some content
|
|
81
83
|
</div>
|
|
@@ -85,7 +87,7 @@
|
|
|
85
87
|
</form>
|
|
86
88
|
|
|
87
89
|
<!-- <script src="../dist/CoCreate-events.js"></script> -->
|
|
90
|
+
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
88
91
|
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
89
|
-
<!-- <script src="https://cdn.cocreate.app/1.50.6/CoCreate.min.js" ></script> -->
|
|
90
92
|
</body>
|
|
91
93
|
</html>
|
package/demo/hover.html
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
</article>
|
|
45
45
|
<br />
|
|
46
46
|
<hr />
|
|
47
|
-
<div class="vdom-item" hover="active" hover-
|
|
47
|
+
<div class="vdom-item" hover="active" hover-selector="article > div">
|
|
48
48
|
some content
|
|
49
49
|
</div>
|
|
50
50
|
<br />
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
class="vdom-item"
|
|
54
54
|
hover-attribute="class"
|
|
55
55
|
hover="active"
|
|
56
|
-
hover-
|
|
56
|
+
hover-selector=".vdom-item">
|
|
57
57
|
click for active
|
|
58
58
|
</div>
|
|
59
59
|
|
package/demo/index.html
CHANGED
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
</article>
|
|
56
56
|
<br />
|
|
57
57
|
<hr />
|
|
58
|
-
<div class="vdom-item" toggle="active" toggle-
|
|
58
|
+
<div class="vdom-item" toggle="active" toggle-selector="article > div">
|
|
59
59
|
some content
|
|
60
60
|
</div>
|
|
61
61
|
<br />
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
class="vdom-item"
|
|
65
65
|
toggle-attribute="class"
|
|
66
66
|
toggle="active"
|
|
67
|
-
toggle-
|
|
67
|
+
toggle-selector=".vdom-item">
|
|
68
68
|
click for active
|
|
69
69
|
</div>
|
|
70
70
|
<br />
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
<!-- custom event example -->
|
|
83
83
|
<div test-value="active" test-events="click" event>other content</div>
|
|
84
84
|
<!-- defining key example -->
|
|
85
|
-
<div click-
|
|
85
|
+
<div click-selector="#testing" click-value="hello, bye" click-key="ty">
|
|
86
86
|
click here
|
|
87
87
|
</div>
|
|
88
88
|
<div id="testing" class="{{ty}}">
|
|
@@ -92,11 +92,11 @@
|
|
|
92
92
|
|
|
93
93
|
<!-- defining key example -->
|
|
94
94
|
<div>
|
|
95
|
-
<div observe-
|
|
95
|
+
<div observe-selector=".testing" observe-attribute="value">
|
|
96
96
|
testing this new value
|
|
97
97
|
</div>
|
|
98
98
|
<input
|
|
99
|
-
input-
|
|
99
|
+
input-selector=".testing"
|
|
100
100
|
input-attribute="value"
|
|
101
101
|
input-events="input, onload"
|
|
102
102
|
value="great test" />
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
placeholder="Search all attributes"
|
|
128
128
|
input-value
|
|
129
129
|
input-key="keyname"
|
|
130
|
-
input-
|
|
130
|
+
input-selector="#keyname" />
|
|
131
131
|
|
|
132
132
|
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
133
133
|
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
package/demo/selected.html
CHANGED
package/demo/set-value.html
CHANGED
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<div click-
|
|
15
|
+
<div click-selector="#testing" click-value="hello, bye" click-key="ty">
|
|
16
16
|
<span id="testing" class="{{ty}}">other content</span>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
19
|
<form realtime="false">
|
|
20
20
|
<input
|
|
21
|
-
input-
|
|
21
|
+
input-selector="#testing2"
|
|
22
22
|
input-attribute="value"
|
|
23
23
|
value-type="array" />
|
|
24
24
|
|
package/docs/index.html
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
sizes="32x32"
|
|
12
12
|
href="https://cocreate.app/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
|
-
|
|
14
|
+
key="description"
|
|
15
15
|
content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
|
|
16
16
|
<meta
|
|
17
|
-
|
|
17
|
+
key="keywords"
|
|
18
18
|
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
19
|
<meta name="robots" content="index,follow" />
|
|
20
20
|
<meta
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
<link
|
|
30
30
|
rel="stylesheet"
|
|
31
31
|
href="/docs/index.css"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
array="files"
|
|
33
|
+
object="60888216117c640e7596303f"
|
|
34
|
+
key="src"
|
|
35
35
|
type="text/css"
|
|
36
36
|
save="true" />
|
|
37
37
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
@@ -44,20 +44,20 @@
|
|
|
44
44
|
scroll="sticky-nav,hide-nav"
|
|
45
45
|
scroll-up="10"
|
|
46
46
|
scroll-down="10"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
array="files"
|
|
48
|
+
object="60395ef42b3ac232657040fd"
|
|
49
|
+
key="src"></nav>
|
|
50
50
|
<sidenav
|
|
51
51
|
id="menuL"
|
|
52
52
|
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
53
53
|
resizable
|
|
54
|
-
resize-
|
|
54
|
+
resize-selector="[content_id='content']"
|
|
55
55
|
resize-property="margin-left"
|
|
56
56
|
resize-value="width">
|
|
57
57
|
<menu
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
array="files"
|
|
59
|
+
object="603717b07de7fb350ae9fec8"
|
|
60
|
+
key="src"></menu>
|
|
61
61
|
<div resize="right"></div>
|
|
62
62
|
</sidenav>
|
|
63
63
|
<main
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
share-width="700"
|
|
81
81
|
share-media="https://cdn.cocreate.app/docs/events.png"
|
|
82
82
|
hover="display:block!important"
|
|
83
|
-
hover-
|
|
83
|
+
hover-selector=".social-networks">
|
|
84
84
|
<div class="display:none social-networks">
|
|
85
85
|
<a
|
|
86
86
|
class="margin-right:15px"
|
|
@@ -139,11 +139,11 @@
|
|
|
139
139
|
class="border-bottom:1px_solid_lightgrey"
|
|
140
140
|
scroll
|
|
141
141
|
scroll-intersect="color:dodgerblue"
|
|
142
|
-
scroll-
|
|
142
|
+
scroll-selector="#events-install-section">
|
|
143
143
|
<span
|
|
144
144
|
class="display:flex align-items:center width:fit-content"
|
|
145
145
|
hover="display:block!important"
|
|
146
|
-
hover-
|
|
146
|
+
hover-selector="[href='#events-install']">
|
|
147
147
|
<h2 class="padding:5px_0px">Install</h2>
|
|
148
148
|
<a
|
|
149
149
|
class="margin-left:10px display:none"
|
|
@@ -165,11 +165,11 @@
|
|
|
165
165
|
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
166
166
|
scroll
|
|
167
167
|
scroll-intersect="color:dodgerblue"
|
|
168
|
-
scroll-
|
|
168
|
+
scroll-selector="#events-usage-section">
|
|
169
169
|
<span
|
|
170
170
|
class="display:flex align-items:center width:fit-content"
|
|
171
171
|
hover="display:block!important"
|
|
172
|
-
hover-
|
|
172
|
+
hover-selector="[href='#events-usage']">
|
|
173
173
|
<h2 class="padding:5px_0px">Usage</h2>
|
|
174
174
|
<a
|
|
175
175
|
class="margin-left:10px display:none"
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
<div class="vdom-item" events-attribute='class' events="active" events-closest="article > div">some content</div>
|
|
205
205
|
<br>
|
|
206
206
|
<hr>
|
|
207
|
-
<div class="vdom-item" events-attribute='class' events="active" events-
|
|
207
|
+
<div class="vdom-item" events-attribute='class' events="active" events-selector=".vdom-item">click for active</div>
|
|
208
208
|
<br>
|
|
209
209
|
<hr>
|
|
210
210
|
<div class="vdom-item" id="hey" data-test="" events-attribute='data-test' events="active, other, hi, jean" >some content</div>
|
|
@@ -220,11 +220,11 @@
|
|
|
220
220
|
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
221
221
|
scroll
|
|
222
222
|
scroll-intersect="color:dodgerblue"
|
|
223
|
-
scroll-
|
|
223
|
+
scroll-selector="#events-attributes-section">
|
|
224
224
|
<span
|
|
225
225
|
class="display:flex align-items:center width:fit-content"
|
|
226
226
|
hover="display:block!important"
|
|
227
|
-
hover-
|
|
227
|
+
hover-selector="[href='#events-attributes']">
|
|
228
228
|
<h2 class="padding:5px_0px">Attributes</h2>
|
|
229
229
|
<a
|
|
230
230
|
class="margin-left:10px display:none"
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
<li
|
|
274
274
|
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
275
275
|
<h4>
|
|
276
|
-
<span>events-
|
|
276
|
+
<span>events-selector</span>
|
|
277
277
|
<span class="cocreate-badge success"
|
|
278
278
|
>string</span
|
|
279
279
|
>
|
|
@@ -311,11 +311,11 @@
|
|
|
311
311
|
class="border-bottom:1px_solid_lightgrey"
|
|
312
312
|
scroll
|
|
313
313
|
scroll-intersect="color:dodgerblue"
|
|
314
|
-
scroll-
|
|
314
|
+
scroll-selector="#events-demo-section">
|
|
315
315
|
<span
|
|
316
316
|
class="display:flex align-items:center width:fit-content"
|
|
317
317
|
hover="display:block!important"
|
|
318
|
-
hover-
|
|
318
|
+
hover-selector="[href='#events-demo']">
|
|
319
319
|
<h2 class="padding:5px_0px">Demo</h2>
|
|
320
320
|
<a
|
|
321
321
|
class="margin-left:10px display:none"
|
|
@@ -339,9 +339,9 @@
|
|
|
339
339
|
<textarea
|
|
340
340
|
type="code"
|
|
341
341
|
lang="html"
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
342
|
+
array="demos"
|
|
343
|
+
object=""
|
|
344
|
+
key="demo"
|
|
345
345
|
save="false"
|
|
346
346
|
id="demo"
|
|
347
347
|
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
@@ -364,7 +364,7 @@
|
|
|
364
364
|
show="#eye-slash"
|
|
365
365
|
hide="#eye, #demo-preview"
|
|
366
366
|
events="code-height"
|
|
367
|
-
events-
|
|
367
|
+
events-selector="#demo-code"
|
|
368
368
|
><i
|
|
369
369
|
class="height:18px fill:#505050"
|
|
370
370
|
src="/assets/svg/eye.svg"></i
|
|
@@ -376,7 +376,7 @@
|
|
|
376
376
|
show="#eye, #demo-preview"
|
|
377
377
|
hide="#eye-slash"
|
|
378
378
|
events="code-height"
|
|
379
|
-
events-
|
|
379
|
+
events-selector="#demo-code"
|
|
380
380
|
><i
|
|
381
381
|
class="height:20px fill:#505050"
|
|
382
382
|
src="/assets/svg/eye-slash.svg"></i
|
|
@@ -403,7 +403,7 @@
|
|
|
403
403
|
<a
|
|
404
404
|
class="margin-right:5px"
|
|
405
405
|
fullscreen
|
|
406
|
-
fullscreen-
|
|
406
|
+
fullscreen-selector="#playground"></a>
|
|
407
407
|
</div>
|
|
408
408
|
</div>
|
|
409
409
|
<!-- End SandBox -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/events",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.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",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"start": "npx webpack --config webpack.config.js",
|
|
28
|
-
"build": "
|
|
28
|
+
"build": "npx webpack --mode=production --config webpack.config.js",
|
|
29
29
|
"dev": "npx webpack --config webpack.config.js --watch",
|
|
30
30
|
"postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
|
|
31
31
|
},
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"url": "git+https://github.com/CoCreate-app/CoCreate-events.git"
|
|
35
35
|
},
|
|
36
36
|
"author": "CoCreate LLC",
|
|
37
|
-
"license": "
|
|
37
|
+
"license": "AGPL-3.0",
|
|
38
38
|
"bugs": {
|
|
39
39
|
"url": "https://github.com/CoCreate-app/CoCreate-events/issues"
|
|
40
40
|
},
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"webpack-log": "^3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@cocreate/actions": "^1.8.
|
|
62
|
-
"@cocreate/element-prototype": "^1.8.
|
|
63
|
-
"@cocreate/observer": "^1.8.
|
|
64
|
-
"@cocreate/utils": "^1.21.
|
|
61
|
+
"@cocreate/actions": "^1.8.32",
|
|
62
|
+
"@cocreate/element-prototype": "^1.8.30",
|
|
63
|
+
"@cocreate/observer": "^1.8.19",
|
|
64
|
+
"@cocreate/utils": "^1.21.16"
|
|
65
65
|
}
|
|
66
66
|
}
|
package/src/index.js
CHANGED
|
@@ -1,4 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
/********************************************************************************
|
|
2
|
+
* Copyright (C) 2023 CoCreate and Contributors.
|
|
3
|
+
*
|
|
4
|
+
* This program is free software: you can redistribute it and/or modify
|
|
5
|
+
* it under the terms of the GNU Affero General Public License as published
|
|
6
|
+
* by the Free Software Foundation, either version 3 of the License, or
|
|
7
|
+
* (at your option) any later version.
|
|
8
|
+
*
|
|
9
|
+
* This program is distributed in the hope that it will be useful,
|
|
10
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
11
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
12
|
+
* GNU Affero General Public License for more details.
|
|
13
|
+
*
|
|
14
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
15
|
+
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
16
|
+
********************************************************************************/
|
|
17
|
+
|
|
18
|
+
// Commercial Licensing Information:
|
|
19
|
+
// For commercial use of this software without the copyleft provisions of the AGPLv3,
|
|
20
|
+
// you must obtain a commercial license from CoCreate LLC.
|
|
21
|
+
// For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
|
|
22
|
+
|
|
23
|
+
import { queryElements } from '@cocreate/utils';
|
|
2
24
|
import action from '@cocreate/actions';
|
|
3
25
|
import observer from '@cocreate/observer';
|
|
4
26
|
import '@cocreate/element-prototype';
|
|
@@ -27,9 +49,13 @@ const CoCreateEvents = {
|
|
|
27
49
|
let names = {}
|
|
28
50
|
for (let customEventEl of customEventEls) {
|
|
29
51
|
let name = customEventEl.getAttribute('event-name')
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
52
|
+
name = name.split(',')
|
|
53
|
+
for (let i = 0; i < name.length; i++) {
|
|
54
|
+
name[i].trim()
|
|
55
|
+
if (!names[name]) {
|
|
56
|
+
names[name] = name
|
|
57
|
+
this.initPrefix(name);
|
|
58
|
+
}
|
|
33
59
|
}
|
|
34
60
|
}
|
|
35
61
|
|
|
@@ -52,12 +78,12 @@ const CoCreateEvents = {
|
|
|
52
78
|
action.init({
|
|
53
79
|
name: prefix,
|
|
54
80
|
endEvent: `${prefix}End`,
|
|
55
|
-
callback: (
|
|
56
|
-
this.__updateElements(
|
|
81
|
+
callback: (data) => {
|
|
82
|
+
this.__updateElements(data.element, prefix)
|
|
57
83
|
}
|
|
58
84
|
});
|
|
59
85
|
|
|
60
|
-
let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-
|
|
86
|
+
let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
|
|
61
87
|
|
|
62
88
|
observer.init({
|
|
63
89
|
name: 'CoCreateEventattributes',
|
|
@@ -73,7 +99,7 @@ const CoCreateEvents = {
|
|
|
73
99
|
observer.init({
|
|
74
100
|
name: 'observerAttributes',
|
|
75
101
|
observe: ['attributes'],
|
|
76
|
-
attributeName: [`${prefix}-key`, `${prefix}-value`, `${prefix}-
|
|
102
|
+
attributeName: [`${prefix}-key`, `${prefix}-value`, `${prefix}-selector`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
|
|
77
103
|
callback: function (mutation) {
|
|
78
104
|
// remove previous observer
|
|
79
105
|
self.initElements([mutation.target], prefix, events)
|
|
@@ -122,7 +148,7 @@ const CoCreateEvents = {
|
|
|
122
148
|
if (events.includes('observer')) {
|
|
123
149
|
let target;
|
|
124
150
|
for (let attribute of el.attributes) {
|
|
125
|
-
if ([`${prefix}-
|
|
151
|
+
if ([`${prefix}-selector`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`].includes(attribute.name)) {
|
|
126
152
|
target = attribute.value
|
|
127
153
|
break;
|
|
128
154
|
}
|
|
@@ -164,7 +190,7 @@ const CoCreateEvents = {
|
|
|
164
190
|
// return;
|
|
165
191
|
self.__updateElements(target, prefix);
|
|
166
192
|
|
|
167
|
-
let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-
|
|
193
|
+
let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
|
|
168
194
|
|
|
169
195
|
let parentElement = target.parentElement;
|
|
170
196
|
if (parentElement) {
|
|
@@ -214,12 +240,6 @@ const CoCreateEvents = {
|
|
|
214
240
|
let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
|
|
215
241
|
let targetText = element.getAttribute(`${prefix}-text`);
|
|
216
242
|
let targetHtml = element.getAttribute(`${prefix}-html`);
|
|
217
|
-
let targetSelector = element.getAttribute(`${prefix}-target`);
|
|
218
|
-
let targetClosest = element.getAttribute(`${prefix}-closest`);
|
|
219
|
-
let targetParent = element.getAttribute(`${prefix}-parent`);
|
|
220
|
-
let targetNext = element.getAttribute(`${prefix}-next`);
|
|
221
|
-
let targetPrevious = element.getAttribute(`${prefix}-previous`);
|
|
222
|
-
|
|
223
243
|
let targetKey = element.getAttribute(`${prefix}-key`);
|
|
224
244
|
|
|
225
245
|
let targetGroup = element.getAttribute(`${prefix}-group`);
|
|
@@ -232,67 +252,26 @@ const CoCreateEvents = {
|
|
|
232
252
|
}
|
|
233
253
|
|
|
234
254
|
groupValues = groupValues.map(x => x.trim());
|
|
235
|
-
|
|
236
|
-
let groupTarget = el.getAttribute(`${prefix}-target`);
|
|
237
|
-
let groupClosest = el.getAttribute(`${prefix}-closest`);
|
|
238
|
-
let groupParent = el.getAttribute(`${prefix}-parent`);
|
|
239
|
-
let groupNext = el.getAttribute(`${prefix}-next`);
|
|
240
|
-
let groupPrevious = el.getAttribute(`${prefix}-previous`);
|
|
241
255
|
let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';
|
|
242
256
|
let groupKey = el.getAttribute(`${prefix}-key`)
|
|
243
257
|
|
|
244
258
|
// el.removeAttribute(prefix)
|
|
245
259
|
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
);
|
|
250
|
-
else if (groupClosest) {
|
|
251
|
-
let element = el.closest(groupClosest)
|
|
252
|
-
if (element)
|
|
253
|
-
self.setValue(prefix, element, groupAttribute, groupValues, groupKey, 'deactivate');
|
|
254
|
-
}
|
|
255
|
-
else if (groupParent)
|
|
256
|
-
el.parentElement.querySelectorAll(groupParent).forEach((el) =>
|
|
257
|
-
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
258
|
-
);
|
|
259
|
-
else if (groupNext)
|
|
260
|
-
el.nextElementSibling.querySelectorAll(groupNext).forEach((el) =>
|
|
261
|
-
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
262
|
-
);
|
|
263
|
-
else if (groupPrevious)
|
|
264
|
-
el.previousElementSibling.querySelectorAll(groupPrevious).forEach((el) =>
|
|
265
|
-
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
266
|
-
);
|
|
260
|
+
let targetElements = queryElements({ el, prefix });
|
|
261
|
+
for (let i = 0; i < targetElements.length; i++)
|
|
262
|
+
self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate')
|
|
267
263
|
|
|
268
264
|
});
|
|
269
265
|
}
|
|
270
266
|
|
|
271
267
|
values = values.map(x => x.trim());
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
} else if (targetClosest) {
|
|
280
|
-
element = element.closest(targetClosest);
|
|
281
|
-
self.setValue(prefix, element, targetAttribute, values, targetKey);
|
|
282
|
-
} else if (targetParent) {
|
|
283
|
-
element.parentElement.querySelectorAll(targetParent).forEach((el) =>
|
|
284
|
-
self.setValue(prefix, el, targetAttribute, values, targetKey)
|
|
285
|
-
);
|
|
286
|
-
} else if (targetNext) {
|
|
287
|
-
element.nextElementSibling.querySelectorAll(targetNext).forEach((el) =>
|
|
288
|
-
self.setValue(prefix, el, targetAttribute, values, targetKey)
|
|
289
|
-
);
|
|
290
|
-
} else if (targetPrevious) {
|
|
291
|
-
element.previousElementSibling.querySelectorAll(targetPrevious).forEach((el) =>
|
|
292
|
-
self.setValue(prefix, el, targetAttribute, values, targetKey)
|
|
293
|
-
);
|
|
294
|
-
} else
|
|
295
|
-
self.setValue(prefix, element, targetAttribute, values, targetKey);
|
|
268
|
+
|
|
269
|
+
let targetElements = queryElements({ element, prefix });
|
|
270
|
+
if (targetElements === false)
|
|
271
|
+
targetElements = [element]
|
|
272
|
+
|
|
273
|
+
for (let i = 0; i < targetElements.length; i++)
|
|
274
|
+
this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey)
|
|
296
275
|
|
|
297
276
|
document.dispatchEvent(new CustomEvent(`${prefix}End`, {
|
|
298
277
|
detail: {}
|