@cocreate/events 1.36.0 → 2.0.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.
- package/.github/FUNDING.yml +1 -1
- package/.github/workflows/automated.yml +18 -7
- package/CHANGELOG.md +324 -274
- package/CONTRIBUTING.md +6 -6
- package/README.md +67 -11
- package/demo/click.html +1 -1
- package/demo/hover.html +1 -1
- package/demo/index.html +1 -1
- package/demo/observer.html +1 -1
- package/demo/selected.html +2 -2
- package/demo/set-value.html +1 -1
- package/docs/index.html +7 -7
- package/package.json +10 -10
- package/src/index.js +307 -104
- package/test/method-invocation.test.cjs +331 -1
package/CONTRIBUTING.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Contributing to CoCreate-toggle
|
|
2
2
|
|
|
3
|
-
This project is work of [many contributors](https://github.com/
|
|
4
|
-
You're encouraged to submit [pull requests](https://github.com/
|
|
5
|
-
[propose features and discuss issues](https://github.com/
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreateJS/toggle/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreateJS/toggle/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreateJS/toggle/issues).
|
|
6
6
|
|
|
7
7
|
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
8
|
|
|
9
9
|
## Fork the Project
|
|
10
10
|
|
|
11
|
-
Fork the [project on Github](https://github.com/
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreateJS/toggle) and check out your copy.
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
git toggle https://github.com/contributor/CoCreate-toggle.git
|
|
15
15
|
cd CoCreate-toggle
|
|
16
|
-
git remote add upstream https://
|
|
16
|
+
git remote add upstream https://github.com/CoCreateJS/toggle.git
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Create a Topic Branch
|
|
@@ -75,7 +75,7 @@ git push origin my-feature-branch
|
|
|
75
75
|
|
|
76
76
|
## Make a Pull Request
|
|
77
77
|
|
|
78
|
-
Go to [https://github.com/
|
|
78
|
+
Go to [https://github.com/CoCreateJS/toggle](https://github.com/CoCreateJS/toggle) and select your feature branch.
|
|
79
79
|
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
80
80
|
|
|
81
81
|
## Rebase
|
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ A declarative, event-driven DOM engine configured entirely through HTML5 attribu
|
|
|
6
6
|
|
|
7
7
|
## Documentation
|
|
8
8
|
|
|
9
|
-
For a complete guide, live playground, and working demos refer to the [documentation](https://
|
|
9
|
+
For a complete guide, live playground, and working demos refer to the [documentation](https://CoCreateJS.com/docs/events).
|
|
10
10
|
|
|
11
11
|
## Table of Contents
|
|
12
12
|
|
|
@@ -60,7 +60,7 @@ yarn add @cocreate/events
|
|
|
60
60
|
### CDN
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
-
<script src="https://cdn.
|
|
63
|
+
<script src="https://cdn.CoCreateJS.com/events/latest/CoCreate-events.min.js"></script>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
---
|
|
@@ -181,6 +181,43 @@ Override the events for any prefix with `-events`:
|
|
|
181
181
|
|
|
182
182
|
---
|
|
183
183
|
|
|
184
|
+
## Prefix Objects
|
|
185
|
+
|
|
186
|
+
The standalone prefix accepts a JSON object of assignments. Keys name the same
|
|
187
|
+
targets as dot bindings; use `$` for explicit JavaScript properties and methods:
|
|
188
|
+
|
|
189
|
+
```html
|
|
190
|
+
<input
|
|
191
|
+
input-query="$document #preview"
|
|
192
|
+
input='{"$textContent": "$value"}' />
|
|
193
|
+
<span id="preview"></span>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
The object is read from the raw attribute value. Its keys are not executed as
|
|
197
|
+
AST operators on the source element. Each value is evaluated through AST when
|
|
198
|
+
its assignment executes, using the source element as `$this` and the value
|
|
199
|
+
source for `$value`.
|
|
200
|
+
|
|
201
|
+
Assignments execute in DOM attribute order. Object entries expand at the
|
|
202
|
+
position of the prefix attribute, in JavaScript object enumeration order.
|
|
203
|
+
Earlier dotted attributes run before them; later dotted attributes run after
|
|
204
|
+
them. Repeated targets are preserved and run sequentially. For example:
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<button
|
|
208
|
+
click-query="$document #preview"
|
|
209
|
+
click.$record="before"
|
|
210
|
+
click='{"$record": "inside", "$finish": "next"}'
|
|
211
|
+
click.$record="after">Run</button>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Both forms use the existing assignment handlers, including value rotation.
|
|
215
|
+
Arrays retain their existing rotation behavior. An empty prefix remains an
|
|
216
|
+
initialization marker. Object keys retain their casing. Prefix JSON must be
|
|
217
|
+
valid JSON; malformed object JSON throws during parsing.
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
184
221
|
## Assignment Targets
|
|
185
222
|
|
|
186
223
|
The name after the dot determines what is written.
|
|
@@ -193,9 +230,17 @@ The name after the dot determines what is written.
|
|
|
193
230
|
| `prefix.insertAdjacentHTML` | Inserts the source value at the given position, integrating with CoCreate rich text when inside `[contenteditable]` |
|
|
194
231
|
| `prefix.insertAdjacentText` | Same as above, as plain text |
|
|
195
232
|
| `prefix.<property>` | Any existing DOM property, for example `hidden`, `readonly`, `disabled`, `checked`, `textContent` |
|
|
196
|
-
| `prefix.$<
|
|
233
|
+
| `prefix.$<member>` | Always targets a JavaScript property: invokes an existing function or assigns the resolved value, creating the property if needed; use `focus.$focus="$undefined"` for an optional argument |
|
|
197
234
|
| `prefix.<attribute>` | Any attribute when no matching property exists, for example `click.data-state` or `click.aria-expanded` |
|
|
198
235
|
|
|
236
|
+
Property and method names in dot bindings are matched without case sensitivity,
|
|
237
|
+
including inherited members: `click.textcontent` resolves to `textContent`, and
|
|
238
|
+
`click.$custommethod` resolves to `customMethod`. Members must have unique names
|
|
239
|
+
ignoring case; ambiguous bindings throw a `TypeError`. A leading `$` always
|
|
240
|
+
selects a JavaScript property: existing functions are called, other members are
|
|
241
|
+
assigned, and missing members are created using the name after `$`. Ordinary
|
|
242
|
+
bindings with no matching property continue to write an HTML attribute.
|
|
243
|
+
|
|
199
244
|
Valid positions for the insert assignments are `beforebegin`, `afterbegin`, `beforeend`, and `afterend`.
|
|
200
245
|
|
|
201
246
|
```html
|
|
@@ -270,7 +315,8 @@ Available ranges are `xs`, `sm`, `md`, `lg`, and `xl`.
|
|
|
270
315
|
| Option | Description |
|
|
271
316
|
| ------ | ----------- |
|
|
272
317
|
| `prefix-query` | Selector resolving the target elements |
|
|
273
|
-
| `prefix-element` | Selector resolving the element to move
|
|
318
|
+
| `prefix-element` | Selector resolving the element to move, or the value source for HTML/text insertion |
|
|
319
|
+
| `prefix-value` | Evaluated content for HTML/text insertion; takes precedence over `prefix-element` |
|
|
274
320
|
| `prefix-selector` | Selector observed by `observe`, keeping `-query` free for targets |
|
|
275
321
|
| `prefix-group` | Links elements so activating one deactivates its peers |
|
|
276
322
|
| `prefix-events` | Comma separated DOM events replacing the prefix defaults |
|
|
@@ -293,6 +339,16 @@ Available ranges are `xs`, `sm`, `md`, `lg`, and `xl`.
|
|
|
293
339
|
|
|
294
340
|
The module also writes status attributes you can bind against: `prefix-is-visible` during intersection changes and `prefix-if-value` carrying the observed width during resizes.
|
|
295
341
|
|
|
342
|
+
HTML/text insertion reads `prefix-value` when present (including an empty string), otherwise the first `prefix-element` match's `getValue()`, otherwise the event source's `getValue()`. A missing explicit source inserts nothing. These options do not change the separate `prefix.value` action.
|
|
343
|
+
|
|
344
|
+
```html
|
|
345
|
+
<input
|
|
346
|
+
type="checkbox"
|
|
347
|
+
input-query="$this:checked $closest form #selected-skills"
|
|
348
|
+
input-value="$query($this:checked $parent $next).getValue()"
|
|
349
|
+
input.insertAdjacentHTML="beforeend" />
|
|
350
|
+
```
|
|
351
|
+
|
|
296
352
|
`prefix.insertAdjacentElement` moves the first element matched by `prefix-element` to the requested position on the `prefix-query` target. Unlike the HTML/text variants, it passes the element itself rather than reading its value:
|
|
297
353
|
|
|
298
354
|
```html
|
|
@@ -425,7 +481,7 @@ Actions may also pass a selector as a parameter, which is used when the element
|
|
|
425
481
|
|
|
426
482
|
## Announcements
|
|
427
483
|
|
|
428
|
-
All updates to this library are documented in our [CHANGELOG](https://github.com/
|
|
484
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/events/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/events/releases). You may also subscribe to email for releases and breaking changes.
|
|
429
485
|
|
|
430
486
|
---
|
|
431
487
|
|
|
@@ -439,15 +495,15 @@ Upcoming enhancements include:
|
|
|
439
495
|
* Expanded observer configuration
|
|
440
496
|
* Devtools inspection of bindings attached to an element
|
|
441
497
|
|
|
442
|
-
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/
|
|
498
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/events/issues) and [pull requests](https://github.com/CoCreateJS/events/pulls). We would love to hear your feedback.
|
|
443
499
|
|
|
444
500
|
---
|
|
445
501
|
|
|
446
502
|
## How to Contribute
|
|
447
503
|
|
|
448
|
-
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/
|
|
504
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/events/blob/master/CONTRIBUTING.md) guide for details.
|
|
449
505
|
|
|
450
|
-
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/
|
|
506
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreateJS/events/issues) and [pull requests](https://github.com/CoCreateJS/events/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
451
507
|
|
|
452
508
|
We appreciate your continued support, thank you!
|
|
453
509
|
|
|
@@ -457,7 +513,7 @@ We appreciate your continued support, thank you!
|
|
|
457
513
|
|
|
458
514
|
CoCreate-events is guided and supported by the CoCreate Developer Experience Team.
|
|
459
515
|
|
|
460
|
-
Please Email the Developer Experience Team [here](mailto:develop@
|
|
516
|
+
Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
|
|
461
517
|
|
|
462
518
|
CoCreate-events is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
463
519
|
|
|
@@ -467,8 +523,8 @@ CoCreate-events is maintained and funded by CoCreate. The names and logos for Co
|
|
|
467
523
|
|
|
468
524
|
This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
|
|
469
525
|
|
|
470
|
-
* **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/
|
|
526
|
+
* **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreateJS/events/blob/master/LICENSE).
|
|
471
527
|
|
|
472
|
-
* **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://
|
|
528
|
+
* **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://CoCreateJS.com). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
|
|
473
529
|
|
|
474
530
|
If you have not purchased a commercial license and intend to use this software for commercial purposes, you are required to sign up for an API key on our website.
|
package/demo/click.html
CHANGED
|
@@ -86,6 +86,6 @@
|
|
|
86
86
|
|
|
87
87
|
<!-- <script src="../dist/CoCreate-events.js"></script> -->
|
|
88
88
|
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
89
|
-
<script src="https://
|
|
89
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
90
90
|
</body>
|
|
91
91
|
</html>
|
package/demo/hover.html
CHANGED
package/demo/index.html
CHANGED
package/demo/observer.html
CHANGED
package/demo/selected.html
CHANGED
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
</div>
|
|
84
84
|
|
|
85
85
|
<!-- <script src="../dist/CoCreate-selected.js"></script> -->
|
|
86
|
-
<script src="https://
|
|
87
|
-
<!-- <script src="https://
|
|
86
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
87
|
+
<!-- <script src="https://CoCreateJS.com/dist/CoCreate.js"></script> -->
|
|
88
88
|
</body>
|
|
89
89
|
</html>
|
package/demo/set-value.html
CHANGED
package/docs/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
rel="icon"
|
|
10
10
|
type="image/png"
|
|
11
11
|
sizes="32x32"
|
|
12
|
-
href="https://
|
|
12
|
+
href="https://CoCreateJS.com/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
14
|
name="description"
|
|
15
15
|
content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<meta name="robots" content="index,follow" />
|
|
20
20
|
<meta
|
|
21
21
|
property="og:image"
|
|
22
|
-
content="https://cdn.
|
|
22
|
+
content="https://cdn.CoCreateJS.com/docs/events.png" />
|
|
23
23
|
|
|
24
24
|
<link
|
|
25
25
|
rel="stylesheet"
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
share-title="testing im a title"
|
|
74
74
|
share-height="600"
|
|
75
75
|
share-width="700"
|
|
76
|
-
share-media="https://cdn.
|
|
76
|
+
share-media="https://cdn.CoCreateJS.com/docs/events.png"
|
|
77
77
|
hover="display:block!important"
|
|
78
78
|
hover-query=".social-networks">
|
|
79
79
|
<div class="display:none social-networks">
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
></a>
|
|
105
105
|
</div>
|
|
106
106
|
<a
|
|
107
|
-
href="https://github.com/
|
|
107
|
+
href="https://github.com/CoCreateJS/CoCreate-events"
|
|
108
108
|
target="_blank"
|
|
109
109
|
class="margin-right:15px"
|
|
110
110
|
><i src="/assets/svg/github.svg"></i
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
<p class="padding:10px_0px line-height:1.5">
|
|
142
142
|
Or you can use cdn link:
|
|
143
143
|
</p>
|
|
144
|
-
<pre><code class="language-html"><script>https://cdn.
|
|
144
|
+
<pre><code class="language-html"><script>https://cdn.CoCreateJS.com/events/latest/CoCreate-events.min.js</script></code></pre>
|
|
145
145
|
|
|
146
146
|
<div
|
|
147
147
|
id="events-usage"
|
|
@@ -369,13 +369,13 @@
|
|
|
369
369
|
</div>
|
|
370
370
|
</div>
|
|
371
371
|
<button
|
|
372
|
-
href="https://github.com/
|
|
372
|
+
href="https://github.com/CoCreateJS/CoCreate-events/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
373
373
|
target="_blank"
|
|
374
374
|
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
375
375
|
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
376
376
|
</button>
|
|
377
377
|
</main>
|
|
378
378
|
|
|
379
|
-
<script src="https://
|
|
379
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
380
380
|
</body>
|
|
381
381
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/events",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
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",
|
|
@@ -22,27 +22,27 @@
|
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "git+https://
|
|
25
|
+
"url": "git+https://github.com/CoCreateJS/events.git"
|
|
26
26
|
},
|
|
27
27
|
"author": "CoCreate LLC",
|
|
28
28
|
"license": "AGPL-3.0",
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/
|
|
30
|
+
"url": "https://github.com/CoCreateJS/events/issues"
|
|
31
31
|
},
|
|
32
|
-
"homepage": "https://
|
|
32
|
+
"homepage": "https://CoCreateJS.com/docs/events",
|
|
33
33
|
"funding": {
|
|
34
34
|
"type": "GitHub Sponsors ❤",
|
|
35
|
-
"url": "https://github.com/sponsors/
|
|
35
|
+
"url": "https://github.com/sponsors/CoCreateJS"
|
|
36
36
|
},
|
|
37
37
|
"main": "./src/index.js",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@cocreate/actions": "^
|
|
40
|
-
"@cocreate/element-prototype": "^
|
|
41
|
-
"@cocreate/observer": "^
|
|
42
|
-
"@cocreate/utils": "^
|
|
39
|
+
"@cocreate/actions": "^2.0.0",
|
|
40
|
+
"@cocreate/element-prototype": "^2.0.0",
|
|
41
|
+
"@cocreate/observer": "^2.0.0",
|
|
42
|
+
"@cocreate/utils": "^2.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@cocreate/webpack": "^
|
|
45
|
+
"@cocreate/webpack": "^2.0.0"
|
|
46
46
|
},
|
|
47
47
|
"allowScripts": {
|
|
48
48
|
"@cocreate/actions@1.21.4": true,
|