@cocreate/events 1.0.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/.github/FUNDING.yml +3 -0
- package/.github/workflows/automated.yml +83 -0
- package/.github/workflows/manual.yml +44 -0
- package/CHANGELOG.md +6 -0
- package/CONTRIBUTING.md +97 -0
- package/CoCreate.config.js +26 -0
- package/LICENSE +21 -0
- package/README.md +85 -0
- package/demo/click.html +69 -0
- package/demo/hover.html +55 -0
- package/demo/index.html +65 -0
- package/docs/index.html +163 -0
- package/package.json +66 -0
- package/release.config.js +22 -0
- package/src/index.js +160 -0
- package/webpack.config.js +84 -0
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
name: Automated
|
|
2
|
+
"on":
|
|
3
|
+
push:
|
|
4
|
+
branches:
|
|
5
|
+
- master
|
|
6
|
+
jobs:
|
|
7
|
+
about:
|
|
8
|
+
runs-on: ubuntu-latest
|
|
9
|
+
steps:
|
|
10
|
+
- name: Checkout
|
|
11
|
+
uses: actions/checkout@v2
|
|
12
|
+
- name: Jaid/action-sync-node-meta
|
|
13
|
+
uses: jaid/action-sync-node-meta@v1.4.0
|
|
14
|
+
with:
|
|
15
|
+
direction: overwrite-github
|
|
16
|
+
githubToken: "${{ secrets.GITHUB }}"
|
|
17
|
+
release:
|
|
18
|
+
runs-on: ubuntu-latest
|
|
19
|
+
steps:
|
|
20
|
+
- name: Checkout
|
|
21
|
+
uses: actions/checkout@v3
|
|
22
|
+
- name: Semantic Release
|
|
23
|
+
uses: cycjimmy/semantic-release-action@v3
|
|
24
|
+
id: semantic
|
|
25
|
+
with:
|
|
26
|
+
extra_plugins: |
|
|
27
|
+
@semantic-release/changelog
|
|
28
|
+
@semantic-release/git
|
|
29
|
+
@semantic-release/github
|
|
30
|
+
env:
|
|
31
|
+
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
|
|
32
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
33
|
+
outputs:
|
|
34
|
+
new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
|
|
35
|
+
new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
|
|
36
|
+
cdn:
|
|
37
|
+
runs-on: ubuntu-latest
|
|
38
|
+
needs: release
|
|
39
|
+
if: needs.release.outputs.new_release_published == 'true'
|
|
40
|
+
env:
|
|
41
|
+
VERSION: "${{ needs.release.outputs.new_release_version }}"
|
|
42
|
+
steps:
|
|
43
|
+
- name: Checkout
|
|
44
|
+
uses: actions/checkout@v2
|
|
45
|
+
- name: setup nodejs
|
|
46
|
+
uses: actions/setup-node@v2
|
|
47
|
+
with:
|
|
48
|
+
node-version: 14.15.4
|
|
49
|
+
- name: yarn install
|
|
50
|
+
run: >
|
|
51
|
+
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
|
|
52
|
+
.npmrc
|
|
53
|
+
|
|
54
|
+
yarn install
|
|
55
|
+
- name: yarn build
|
|
56
|
+
run: yarn build
|
|
57
|
+
- name: upload bundle as version
|
|
58
|
+
uses: CoCreate-app/CoCreate-s3@master
|
|
59
|
+
with:
|
|
60
|
+
aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
|
|
61
|
+
aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
|
|
62
|
+
bucket: testcrudbucket
|
|
63
|
+
source: ./dist
|
|
64
|
+
destination: "/events/${{env.VERSION}}"
|
|
65
|
+
acl: public-read
|
|
66
|
+
- name: upload bundle as latest
|
|
67
|
+
uses: CoCreate-app/CoCreate-s3@master
|
|
68
|
+
with:
|
|
69
|
+
aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
|
|
70
|
+
aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
|
|
71
|
+
bucket: testcrudbucket
|
|
72
|
+
source: ./dist
|
|
73
|
+
destination: /events/latest
|
|
74
|
+
acl: public-read
|
|
75
|
+
invalidations: true
|
|
76
|
+
docs:
|
|
77
|
+
runs-on: ubuntu-latest
|
|
78
|
+
steps:
|
|
79
|
+
- name: Checkout
|
|
80
|
+
uses: actions/checkout@v2
|
|
81
|
+
|
|
82
|
+
- name: update documentation
|
|
83
|
+
uses: CoCreate-app/CoCreate-docs@master
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
name: Manual Workflow
|
|
2
|
+
on:
|
|
3
|
+
workflow_dispatch:
|
|
4
|
+
inputs:
|
|
5
|
+
invalidations:
|
|
6
|
+
description: |
|
|
7
|
+
If set to 'true', invalidates previous upload.
|
|
8
|
+
default: "true"
|
|
9
|
+
required: true
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
cdn:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
env:
|
|
15
|
+
DRY_RUN: ${{ github.event.inputs.dry_run }}
|
|
16
|
+
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
|
|
17
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
18
|
+
|
|
19
|
+
steps:
|
|
20
|
+
- name: Checkout
|
|
21
|
+
uses: actions/checkout@v2
|
|
22
|
+
- name: setup nodejs
|
|
23
|
+
uses: actions/setup-node@v2
|
|
24
|
+
with:
|
|
25
|
+
node-version: 14.15.4
|
|
26
|
+
- name: yarn install
|
|
27
|
+
run: >
|
|
28
|
+
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
|
|
29
|
+
.npmrc
|
|
30
|
+
|
|
31
|
+
yarn install
|
|
32
|
+
- name: yarn build
|
|
33
|
+
run: yarn build
|
|
34
|
+
- name: upload latest bundle
|
|
35
|
+
uses: CoCreate-app/CoCreate-s3@master
|
|
36
|
+
with:
|
|
37
|
+
aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
|
|
38
|
+
aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
|
|
39
|
+
distributionId: "${{ secrets.DISTRIBUTION_ID }}"
|
|
40
|
+
bucket: testcrudbucket
|
|
41
|
+
source: ./dist
|
|
42
|
+
destination: /events/latest
|
|
43
|
+
acl: public-read
|
|
44
|
+
invalidations: ${{ github.event.inputs.invalidations }}
|
package/CHANGELOG.md
ADDED
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Contributing to CoCreate-toggle
|
|
2
|
+
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-toggle/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-toggle/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-toggle/issues).
|
|
6
|
+
|
|
7
|
+
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
|
+
|
|
9
|
+
## Fork the Project
|
|
10
|
+
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-toggle) and check out your copy.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
git toggle https://github.com/contributor/CoCreate-toggle.git
|
|
15
|
+
cd CoCreate-toggle
|
|
16
|
+
git remote add upstream https://github.com/CoCreate-app/CoCreate-toggle.git
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Create a Topic Branch
|
|
20
|
+
|
|
21
|
+
Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
git checkout dev
|
|
25
|
+
git pull upstream dev
|
|
26
|
+
git checkout -b my-feature-branch
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Write Tests
|
|
30
|
+
|
|
31
|
+
Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
|
|
32
|
+
|
|
33
|
+
We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
|
|
34
|
+
|
|
35
|
+
## Write Code
|
|
36
|
+
|
|
37
|
+
Implement your feature or bug fix.
|
|
38
|
+
|
|
39
|
+
## Write Documentation
|
|
40
|
+
|
|
41
|
+
Document any external behavior in the [README](README.md).
|
|
42
|
+
|
|
43
|
+
## Commit Changes
|
|
44
|
+
|
|
45
|
+
Make sure git knows your name and email address:
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
git config --global user.name "Your Name"
|
|
49
|
+
git config --global user.email "contributor@example.com"
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog
|
|
53
|
+
and to release. Write meaningful commits according to
|
|
54
|
+
[Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important.
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
git add ...
|
|
58
|
+
git commit -am "commit-type(optional topic): a meaningful message"
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release):
|
|
62
|
+
|
|
63
|
+
| Commit message | Release type |
|
|
64
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
|
|
65
|
+
| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
|
|
66
|
+
| `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release |
|
|
67
|
+
| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
## Push
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
git push origin my-feature-branch
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Make a Pull Request
|
|
77
|
+
|
|
78
|
+
Go to [https://github.com/CoCreate-app/CoCreate-toggle](https://github.com/CoCreate-app/CoCreate-toggle) and select your feature branch.
|
|
79
|
+
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
80
|
+
|
|
81
|
+
## Rebase
|
|
82
|
+
|
|
83
|
+
If you've been working on a change for a while, rebase with upstream/dev.
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
git fetch upstream
|
|
87
|
+
git rebase upstream/dev
|
|
88
|
+
git push origin my-feature-branch -f
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Be Patient
|
|
92
|
+
|
|
93
|
+
It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there!
|
|
94
|
+
|
|
95
|
+
## Thank You
|
|
96
|
+
|
|
97
|
+
Please do know that we really appreciate and value your time and work. We love you, really.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
"config": {
|
|
3
|
+
"apiKey": "2061acef-0451-4545-f754-60cf8160",
|
|
4
|
+
"organization_id": "5ff747727005da1c272740ab",
|
|
5
|
+
"host": "general.cocreate.app"
|
|
6
|
+
},
|
|
7
|
+
"sources": [
|
|
8
|
+
{
|
|
9
|
+
"collection": "files",
|
|
10
|
+
"document": {
|
|
11
|
+
"_id": "",
|
|
12
|
+
"name": "index.html",
|
|
13
|
+
"path": "/docs/events/index.html",
|
|
14
|
+
"src": "{{./docs/index.html}}",
|
|
15
|
+
"domains": [
|
|
16
|
+
"*",
|
|
17
|
+
"general.cocreate.app"
|
|
18
|
+
],
|
|
19
|
+
"directory": "/docs/events",
|
|
20
|
+
"content-type": "text/html",
|
|
21
|
+
"public": "true",
|
|
22
|
+
"website_id": "5ffbceb7f11d2d00103c4535"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
}
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 CoCreate LLC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# CoCreate-toggle
|
|
2
|
+
|
|
3
|
+
A simple toggle component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/toggle)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [Docs & Demo](https://cocreate.app/docs/toggle)
|
|
15
|
+
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/toggle)
|
|
17
|
+
|
|
18
|
+
## CDN
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script src="https://cdn.cocreate.app/toggle/latest/CoCreate-toggle.min.js"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="https://cdn.cocreate.app/toggle/latest/CoCreate-toggle.min.css"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## NPM
|
|
29
|
+
|
|
30
|
+
```shell
|
|
31
|
+
$ npm i @cocreate/toggle
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## yarn
|
|
35
|
+
|
|
36
|
+
```shell
|
|
37
|
+
$ yarn install @cocreate/toggle
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
# Table of Contents
|
|
41
|
+
|
|
42
|
+
- [Table of Contents](#table-of-contents)
|
|
43
|
+
- [Announcements](#announcements)
|
|
44
|
+
- [Roadmap](#roadmap)
|
|
45
|
+
- [How to Contribute](#how-to-contribute)
|
|
46
|
+
- [About](#about)
|
|
47
|
+
- [License](#license)
|
|
48
|
+
|
|
49
|
+
<a name="announcements"></a>
|
|
50
|
+
|
|
51
|
+
# Announcements
|
|
52
|
+
|
|
53
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-toggle/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-toggle/releases). You may also subscribe to email for releases and breaking changes.
|
|
54
|
+
|
|
55
|
+
<a name="roadmap"></a>
|
|
56
|
+
|
|
57
|
+
# Roadmap
|
|
58
|
+
|
|
59
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-toggle/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-toggle/pulls). We would love to hear your feedback.
|
|
60
|
+
|
|
61
|
+
<a name="about"></a>
|
|
62
|
+
|
|
63
|
+
# About
|
|
64
|
+
|
|
65
|
+
CoCreate-toggle is guided and supported by the CoCreate Developer Experience Team.
|
|
66
|
+
|
|
67
|
+
Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
|
|
68
|
+
|
|
69
|
+
CoCreate-toggle is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
70
|
+
|
|
71
|
+
<a name="contribute"></a>
|
|
72
|
+
|
|
73
|
+
# How to Contribute
|
|
74
|
+
|
|
75
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-toggle/blob/master/CONTRIBUTING.md) guide for details.
|
|
76
|
+
|
|
77
|
+
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/CoCreate-app/CoCreate-toggle/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-toggle/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
|
+
|
|
79
|
+
We appreciate your continued support, thank you!
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
<a name="license"></a>
|
|
83
|
+
# License
|
|
84
|
+
|
|
85
|
+
[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-toggle/blob/master/LICENSE)
|
package/demo/click.html
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Events | CoCreateJS</title>
|
|
5
|
+
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<!-- Custom CSS -->
|
|
11
|
+
<style type="text/css">
|
|
12
|
+
.test{background:red}
|
|
13
|
+
.new{background:yellow}
|
|
14
|
+
.active{
|
|
15
|
+
background-color:blue;
|
|
16
|
+
}
|
|
17
|
+
.hidden {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
|
|
24
|
+
<div click="active" class="test">hhh
|
|
25
|
+
<!--<div class="test">click me</div><br/>-->
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
<i class="fas fa-plus-circle" click="fa-minus-circle, fa-plus-circle"></i>
|
|
32
|
+
|
|
33
|
+
<article>
|
|
34
|
+
<div id="div-01" class="vdom-item">
|
|
35
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
36
|
+
<div>
|
|
37
|
+
<div class="vdom-item" >some content1</div>
|
|
38
|
+
<span click="test" click-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="vdom-item" >some content2</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="vdom-item" >some content3</div>
|
|
43
|
+
<div id="div-03">Here is div-03</div>
|
|
44
|
+
</article>
|
|
45
|
+
<br>
|
|
46
|
+
<hr>
|
|
47
|
+
<div class="vdom-item" click="active" click-target="article > div">some content</div>
|
|
48
|
+
<br>
|
|
49
|
+
<hr>
|
|
50
|
+
<div class="vdom-item" click-attribute='class' click="active" click-target=".vdom-item">
|
|
51
|
+
click for active
|
|
52
|
+
</div>
|
|
53
|
+
<br>
|
|
54
|
+
<hr>
|
|
55
|
+
TEST HERE
|
|
56
|
+
<div class="vdom-item" id="hey" data-test="" click-attribute='value' click-target="#tester" click-value="active, other, hi, jean">
|
|
57
|
+
some content
|
|
58
|
+
</div>
|
|
59
|
+
<form>
|
|
60
|
+
<input id="tester">
|
|
61
|
+
<a actions="reset">reset</a>
|
|
62
|
+
</form>
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
<!-- <script src="../dist/CoCreate-events.js"></script> -->
|
|
66
|
+
<!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
|
|
67
|
+
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
package/demo/hover.html
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Hover | CoCreateJS</title>
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
<!-- Custom CSS -->
|
|
9
|
+
<style type="text/css">
|
|
10
|
+
.test{background:red}
|
|
11
|
+
.new{background:yellow}
|
|
12
|
+
.active{
|
|
13
|
+
background-color:blue;
|
|
14
|
+
}
|
|
15
|
+
.hidden {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
|
|
22
|
+
<div hover="active" class="test">hhh
|
|
23
|
+
<!--<div class="test">click me</div><br/>-->
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<article>
|
|
28
|
+
<div id="div-01" class="vdom-item">
|
|
29
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
30
|
+
<div>
|
|
31
|
+
<div class="vdom-item" >some content1</div>
|
|
32
|
+
<span hover="test" hover-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="vdom-item" >some content2</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="vdom-item" >some content3</div>
|
|
37
|
+
<div id="div-03">Here is div-03</div>
|
|
38
|
+
</article>
|
|
39
|
+
<br>
|
|
40
|
+
<hr>
|
|
41
|
+
<div class="vdom-item" hover="active" hover-target="article > div">some content</div>
|
|
42
|
+
<br>
|
|
43
|
+
<hr>
|
|
44
|
+
<div class="vdom-item" hover-attribute='class' hover="active" hover-target=".vdom-item">
|
|
45
|
+
click for active
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="vdom-item" id="hey" data-test="" hover-attribute='data-test' hover="active, other, hi, jean">
|
|
49
|
+
some content
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
53
|
+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Events | CoCreateJS</title>
|
|
5
|
+
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<!-- Custom CSS -->
|
|
11
|
+
<style type="text/css">
|
|
12
|
+
.test{background:red}
|
|
13
|
+
.new{background:yellow}
|
|
14
|
+
.active{
|
|
15
|
+
background-color:blue;
|
|
16
|
+
}
|
|
17
|
+
.hidden {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
|
|
24
|
+
<div toggle="active" class="test">hhh
|
|
25
|
+
<!--<div class="test">click me</div><br/>-->
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
<i class="fas fa-plus-circle" toggle="fa-minus-circle, fa-plus-circle"></i>
|
|
32
|
+
|
|
33
|
+
<article>
|
|
34
|
+
<div id="div-01" class="vdom-item">
|
|
35
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
36
|
+
<div>
|
|
37
|
+
<div class="vdom-item" >some content1</div>
|
|
38
|
+
<span toggle="test" toggle-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="vdom-item" >some content2</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="vdom-item" >some content3</div>
|
|
43
|
+
<div id="div-03">Here is div-03</div>
|
|
44
|
+
</article>
|
|
45
|
+
<br>
|
|
46
|
+
<hr>
|
|
47
|
+
<div class="vdom-item" toggle="active" toggle-target="article > div">some content</div>
|
|
48
|
+
<br>
|
|
49
|
+
<hr>
|
|
50
|
+
<div class="vdom-item" toggle-attribute='class' toggle="active" toggle-target=".vdom-item">
|
|
51
|
+
click for active
|
|
52
|
+
</div>
|
|
53
|
+
<br>
|
|
54
|
+
<hr>
|
|
55
|
+
TEST HERE
|
|
56
|
+
<div class="vdom-item" id="hey" data-test="" toggle-attribute='id' toggle="active, other, hi, jean">
|
|
57
|
+
some content
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
63
|
+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<title>CoCreate-events Documentation | CoCreateJS </title>
|
|
8
|
+
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
|
|
9
|
+
<meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
|
|
10
|
+
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
11
|
+
<meta name="robots" content="index,follow" />
|
|
12
|
+
<meta property="og:image" content="https://cdn.cocreate.app/docs/events.png">
|
|
13
|
+
|
|
14
|
+
<!-- CoCreate CSS -->
|
|
15
|
+
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
|
|
16
|
+
<link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true"/>
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body>
|
|
20
|
+
<nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
|
|
21
|
+
</nav>
|
|
22
|
+
<sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
|
|
23
|
+
<menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
|
|
24
|
+
<div resize="right"></div>
|
|
25
|
+
</sidenav>
|
|
26
|
+
<main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-events">
|
|
27
|
+
<div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
|
|
28
|
+
<div class="display:flex align-items:center">
|
|
29
|
+
<h2>CoCreate-events</h2>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
32
|
+
<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/events.png" hover="display:block!important" hover-target=".social-networks">
|
|
33
|
+
<div class="display:none social-networks">
|
|
34
|
+
<a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
|
|
35
|
+
<a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
|
|
36
|
+
<a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
|
|
37
|
+
</div>
|
|
38
|
+
<a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
|
|
39
|
+
</div>
|
|
40
|
+
<a href="https://github.com/CoCreate-app/CoCreate-events" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">It is used to change values in classes or specific attributes, its name describes its functionality events.</h1>
|
|
44
|
+
<div id="events-section" class="display:flex flex-wrap:wrap">
|
|
45
|
+
<div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
46
|
+
<div id="events-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-install-section">
|
|
47
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-install"]'>
|
|
48
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
49
|
+
<a class="margin-left:10px display:none" href="#events-install"><i class="fas fa-link"></i></a>
|
|
50
|
+
</span>
|
|
51
|
+
</div>
|
|
52
|
+
<pre><code class="language-bash">npm i @cocreate/events</code></pre>
|
|
53
|
+
<p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
|
|
54
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/events/latest/CoCreate-events.min.js</script></code></pre>
|
|
55
|
+
|
|
56
|
+
<div id="events-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-usage-section">
|
|
57
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-usage"]'>
|
|
58
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
59
|
+
<a class="margin-left:10px display:none" href="#events-usage"><i class="fas fa-link"></i></a>
|
|
60
|
+
</span>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="">
|
|
63
|
+
<p class="padding:10px_0px line-height:1.5">This is events usage</p>
|
|
64
|
+
|
|
65
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
66
|
+
<pre>
|
|
67
|
+
<code class="language-js">
|
|
68
|
+
<article>
|
|
69
|
+
<div id="div-01" class="vdom-item">Here is div-01 i should get class hidden
|
|
70
|
+
<div>
|
|
71
|
+
<div class="vdom-item" >some content1</div>
|
|
72
|
+
<span events="test" events-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="vdom-item" >some content2</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="vdom-item" >some content3</div>
|
|
77
|
+
<div id="div-03">Here is div-03</div>
|
|
78
|
+
</article>
|
|
79
|
+
<br>
|
|
80
|
+
<hr>
|
|
81
|
+
<div class="vdom-item" events-attribute='class' events="active" events-closest="article > div">some content</div>
|
|
82
|
+
<br>
|
|
83
|
+
<hr>
|
|
84
|
+
<div class="vdom-item" events-attribute='class' events="active" events-target=".vdom-item">click for active</div>
|
|
85
|
+
<br>
|
|
86
|
+
<hr>
|
|
87
|
+
<div class="vdom-item" id="hey" data-test="" events-attribute='data-test' events="active, other, hi, jean" >some content</div>
|
|
88
|
+
</code>
|
|
89
|
+
</pre>
|
|
90
|
+
</div>
|
|
91
|
+
<p class="padding:10px_0px line-height:1.5">This is events usage</p>
|
|
92
|
+
</div>
|
|
93
|
+
<div id="events-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-attributes-section">
|
|
94
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-attributes"]'>
|
|
95
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
96
|
+
<a class="margin-left:10px display:none" href="#events-attributes"><i class="fas fa-link"></i></a>
|
|
97
|
+
</span>
|
|
98
|
+
</div>
|
|
99
|
+
<ul class="list-style-type:none ">
|
|
100
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
101
|
+
<h4><span>events</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
|
|
102
|
+
<p>It is used to initialize the element, and this attribute is added to the specific attribute if it is defined, by default the class attribute is used</p>
|
|
103
|
+
</li>
|
|
104
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
105
|
+
<h4><span>events-attribute</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
106
|
+
<p>Add or remove values, by default the class attribute is used</p>
|
|
107
|
+
</li>
|
|
108
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
109
|
+
<h4><span>events-target</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
110
|
+
<p>Apply events functionality to a specific element</p>
|
|
111
|
+
</li>
|
|
112
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
113
|
+
<h4><span>events-closest</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
114
|
+
<p>Apply events functionality to a closset element</p>
|
|
115
|
+
</li>
|
|
116
|
+
</ul>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
120
|
+
<!-- SandBox -->
|
|
121
|
+
<div id="events-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-demo-section">
|
|
122
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-demo"]'>
|
|
123
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
124
|
+
<a class="margin-left:10px display:none" href="#events-demo"><i class="fas fa-link"></i></a>
|
|
125
|
+
</span>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
128
|
+
<!-- SandBox -->
|
|
129
|
+
<div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
|
|
130
|
+
|
|
131
|
+
<div id="demo-code" resizable class="position:relative height:50%">
|
|
132
|
+
<textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
133
|
+
<div resize="bottom" class="background:lightgrey"></div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div id="demo-preview" class="position:relative overflow:auto background-color:white">
|
|
137
|
+
<div get-value="#demo" class="padding:20px"></div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
141
|
+
<a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" events="code-height" events-target="#demo-code"><i class="far fa-eye"></i></a>
|
|
142
|
+
<a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" events="code-height" events-target="#demo-code"><i class="fas fa-eye-slash"></i></a>
|
|
143
|
+
<a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
|
|
144
|
+
<a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
|
|
145
|
+
<a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
<!-- End SandBox -->
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
</div>
|
|
154
|
+
<button href="https://github.com/CoCreate-app/CoCreate-events/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
155
|
+
<i class="fas fa-pencil-alt"></i>
|
|
156
|
+
</button>
|
|
157
|
+
</main>
|
|
158
|
+
|
|
159
|
+
<script src="./apikey.js"></script>
|
|
160
|
+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
161
|
+
|
|
162
|
+
</body>
|
|
163
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cocreate/events",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"events",
|
|
7
|
+
"cocreate",
|
|
8
|
+
"low-code-framework",
|
|
9
|
+
"no-code-framework",
|
|
10
|
+
"cocreatejs",
|
|
11
|
+
"cocreatejs-component",
|
|
12
|
+
"cocreate-framework",
|
|
13
|
+
"no-code",
|
|
14
|
+
"low-code",
|
|
15
|
+
"collaborative-framework",
|
|
16
|
+
"realtime",
|
|
17
|
+
"realtime-framework",
|
|
18
|
+
"collaboration",
|
|
19
|
+
"shared-editing",
|
|
20
|
+
"html5-framework",
|
|
21
|
+
"javascript-framework"
|
|
22
|
+
],
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"start": "npx webpack --config webpack.config.js",
|
|
28
|
+
"build": "NODE_ENV=production npx webpack --config webpack.config.js",
|
|
29
|
+
"dev": "npx webpack --config webpack.config.js --watch",
|
|
30
|
+
"docs": "node ./node_modules/@cocreate/docs/src/index.js",
|
|
31
|
+
"hosting": "node ./node_modules/@cocreate/hosting/src/index.js"
|
|
32
|
+
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/CoCreate-app/CoCreate-events.git"
|
|
36
|
+
},
|
|
37
|
+
"author": "CoCreate LLC",
|
|
38
|
+
"license": "MIT",
|
|
39
|
+
"bugs": {
|
|
40
|
+
"url": "https://github.com/CoCreate-app/CoCreate-events/issues"
|
|
41
|
+
},
|
|
42
|
+
"homepage": "https://cocreate.app/docs/events",
|
|
43
|
+
"funding": {
|
|
44
|
+
"type": "GitHub Sponsors ❤",
|
|
45
|
+
"url": "https://github.com/sponsors/CoCreate-app"
|
|
46
|
+
},
|
|
47
|
+
"main": "./src/index.js",
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@babel/core": "^7.9.6",
|
|
50
|
+
"@babel/preset-env": "^7.9.6",
|
|
51
|
+
"babel-loader": "^8.1.0",
|
|
52
|
+
"clean-webpack-plugin": "^3.0.0",
|
|
53
|
+
"file-loader": "^6.2.0",
|
|
54
|
+
"mini-css-extract-plugin": "^1.5.0",
|
|
55
|
+
"style-loader": "^3.3.1",
|
|
56
|
+
"terser-webpack-plugin": "^5.1.1",
|
|
57
|
+
"uglifyjs-webpack-plugin": "^2.2.0",
|
|
58
|
+
"webpack": "^5.24.4",
|
|
59
|
+
"webpack-cli": "^4.5.0",
|
|
60
|
+
"webpack-log": "^3.0.1"
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"@cocreate/docs": "^1.5.12",
|
|
64
|
+
"@cocreate/utils": "^1.18.0"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
dryRun: false,
|
|
3
|
+
branches: ["master"],
|
|
4
|
+
plugins: [
|
|
5
|
+
"@semantic-release/commit-analyzer",
|
|
6
|
+
"@semantic-release/release-notes-generator",
|
|
7
|
+
[
|
|
8
|
+
"@semantic-release/changelog",
|
|
9
|
+
{
|
|
10
|
+
changelogFile: "CHANGELOG.md",
|
|
11
|
+
},
|
|
12
|
+
],
|
|
13
|
+
"@semantic-release/npm",
|
|
14
|
+
"@semantic-release/github",
|
|
15
|
+
[
|
|
16
|
+
"@semantic-release/git",
|
|
17
|
+
{
|
|
18
|
+
assets: ["CHANGELOG.md", "package.json"],
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
],
|
|
22
|
+
};
|
package/src/index.js
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import {queryDocumentSelectorAll} from '@cocreate/utils';
|
|
2
|
+
|
|
3
|
+
const CoCreateEvents = {
|
|
4
|
+
|
|
5
|
+
init: function() {
|
|
6
|
+
this.initElement(document, 'events');
|
|
7
|
+
this.initElement(document, 'click');
|
|
8
|
+
this.initElement(document, 'hover');
|
|
9
|
+
this.initElement(document, 'mouseover');
|
|
10
|
+
this.initElement(document, 'mouseout');
|
|
11
|
+
this.initElement(document, 'input');
|
|
12
|
+
this.initElement(document, 'change');
|
|
13
|
+
},
|
|
14
|
+
|
|
15
|
+
initElement: function(container, prefix) {
|
|
16
|
+
this.__initElementEvent(container || document, prefix);
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
__initElementEvent: function(mainContainer, prefix) {
|
|
20
|
+
const self = this;
|
|
21
|
+
let eventNames = [];
|
|
22
|
+
|
|
23
|
+
if (prefix === 'toggle') eventNames = ['click'];
|
|
24
|
+
if (prefix === 'click') eventNames = ['click'];
|
|
25
|
+
if (prefix === 'hover') eventNames = ['mouseover', 'mouseout'];
|
|
26
|
+
if (prefix === 'mouseover') eventNames = ['mouseover'];
|
|
27
|
+
if (prefix === 'mouseout') eventNames = ['mouseout'];
|
|
28
|
+
if (prefix === 'input') eventNames = ['input'];
|
|
29
|
+
if (prefix === 'change') eventNames = ['change'];
|
|
30
|
+
|
|
31
|
+
eventNames.forEach((event_name) => {
|
|
32
|
+
mainContainer.addEventListener(event_name, function(event) {
|
|
33
|
+
const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
|
|
34
|
+
if (target) {
|
|
35
|
+
self.__updateElements(target, prefix);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
__updateElements: function(element, prefix) {
|
|
42
|
+
const self = this;
|
|
43
|
+
let targetValue = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
|
|
44
|
+
let values = targetValue.split(',');
|
|
45
|
+
if (!values || values.length == 0) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
|
|
50
|
+
let targetSelector = element.getAttribute(`${prefix}-target`);
|
|
51
|
+
let targetClosest = element.getAttribute(`${prefix}-closest`);
|
|
52
|
+
let targetGroup = element.getAttribute(`${prefix}-group`);
|
|
53
|
+
if (targetGroup) {
|
|
54
|
+
document.querySelectorAll(`[${prefix}-group="${targetGroup}"]`).forEach((el) => {
|
|
55
|
+
let groupValue = el.getAttribute(`${prefix}-value`) || el.getAttribute(prefix);
|
|
56
|
+
let groupValues = groupValue.split(',');
|
|
57
|
+
if (!groupValues || groupValues.length == 0) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
groupValues = groupValues.map(x => x.trim());
|
|
61
|
+
|
|
62
|
+
let groupTarget = el.getAttribute(`${prefix}-target`);
|
|
63
|
+
let groupClosest = el.getAttribute(`${prefix}-closest`);
|
|
64
|
+
let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';
|
|
65
|
+
|
|
66
|
+
// el.removeAttribute(prefix)
|
|
67
|
+
self.setValue(el, groupAttribute, groupValue, 'deactivate')
|
|
68
|
+
if (groupTarget)
|
|
69
|
+
document.querySelectorAll(groupTarget).forEach((el) =>
|
|
70
|
+
self.setValue(el, groupAttribute, groupValue, 'deactivate')
|
|
71
|
+
);
|
|
72
|
+
else if (groupClosest) {
|
|
73
|
+
let element = el.closest(groupClosest)
|
|
74
|
+
if (element)
|
|
75
|
+
self.setValue(element, groupAttribute, groupValue, 'deactivate');
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
let targetElements = [element];
|
|
81
|
+
if (targetClosest) {
|
|
82
|
+
element = element.closest(targetClosest);
|
|
83
|
+
}
|
|
84
|
+
values = values.map(x => x.trim());
|
|
85
|
+
if (targetSelector) {
|
|
86
|
+
if (/{{\s*([\w\W]+)\s*}}/g.test(targetSelector)) return;
|
|
87
|
+
targetElements = queryDocumentSelectorAll(targetSelector);
|
|
88
|
+
targetElements.forEach((el) => self.setValue(el, targetAttribute, values));
|
|
89
|
+
} else
|
|
90
|
+
self.setValue(element, targetAttribute, values);
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
setValue: function(element, attrName, values, deactivate) {
|
|
94
|
+
let attrValues, oldValue;
|
|
95
|
+
|
|
96
|
+
if (attrName === 'style') {
|
|
97
|
+
if (element.getAttribute(attrName)) {
|
|
98
|
+
attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
|
|
99
|
+
attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
|
|
100
|
+
attrValues = attrValues.map(function(item, index){
|
|
101
|
+
return item.replace(' ','');
|
|
102
|
+
});
|
|
103
|
+
oldValue = values.filter(x => attrValues.includes(x))[0] || '';
|
|
104
|
+
}
|
|
105
|
+
let newValue = this.__getNextValue(values, oldValue);
|
|
106
|
+
|
|
107
|
+
if (oldValue) {
|
|
108
|
+
let [property, value] = oldValue.split(":");
|
|
109
|
+
element.style[property] = '';
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (newValue != '') {
|
|
113
|
+
let [property, value] = newValue.split(":");
|
|
114
|
+
element.style[property] = value;
|
|
115
|
+
}
|
|
116
|
+
} else {
|
|
117
|
+
if (attrName === 'value') {
|
|
118
|
+
oldValue = element.getValue()
|
|
119
|
+
} else if (element.getAttribute(attrName)) {
|
|
120
|
+
attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
|
|
121
|
+
oldValue = values.filter(x => attrValues.includes(x))[0] || '';
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
let newValue = this.__getNextValue(values, oldValue);
|
|
125
|
+
if (deactivate)
|
|
126
|
+
newValue = ""
|
|
127
|
+
|
|
128
|
+
if (attrName === 'class') {
|
|
129
|
+
if (oldValue != '') {
|
|
130
|
+
element.classList.remove(oldValue);
|
|
131
|
+
if (values.length === 1) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
if (newValue != '') {
|
|
137
|
+
element.classList.add(newValue);
|
|
138
|
+
}
|
|
139
|
+
} else if (attrName === 'value') {
|
|
140
|
+
element.setValue(newValue);
|
|
141
|
+
} else {
|
|
142
|
+
element.setAttribute(attrName, newValue);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
|
|
147
|
+
__getNextValue: function(values, val) {
|
|
148
|
+
let size = values.length;
|
|
149
|
+
let nn = values.indexOf(val);
|
|
150
|
+
if (nn == -1) {
|
|
151
|
+
return values[0];
|
|
152
|
+
} else {
|
|
153
|
+
return values[(nn + 1) % size];
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
CoCreateEvents.init();
|
|
159
|
+
|
|
160
|
+
export default CoCreateEvents;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
const path = require("path")
|
|
2
|
+
const TerserPlugin = require("terser-webpack-plugin")
|
|
3
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
|
4
|
+
let isProduction = process.env.NODE_ENV === "production"
|
|
5
|
+
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
|
|
6
|
+
|
|
7
|
+
module.exports = {
|
|
8
|
+
entry: {
|
|
9
|
+
"CoCreate-events": "./src/index.js",
|
|
10
|
+
},
|
|
11
|
+
output: {
|
|
12
|
+
path: path.resolve(__dirname, "dist"),
|
|
13
|
+
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
14
|
+
libraryTarget: "umd",
|
|
15
|
+
libraryExport: "default",
|
|
16
|
+
library: ["CoCreate", "events"],
|
|
17
|
+
globalObject: "this",
|
|
18
|
+
},
|
|
19
|
+
|
|
20
|
+
plugins: [
|
|
21
|
+
new CleanWebpackPlugin(),
|
|
22
|
+
new MiniCssExtractPlugin({
|
|
23
|
+
filename: "[name].css",
|
|
24
|
+
}),
|
|
25
|
+
],
|
|
26
|
+
// Default mode for Webpack is production.
|
|
27
|
+
// Depending on mode Webpack will apply different things
|
|
28
|
+
// on final bundle. For now we don't need production's JavaScript
|
|
29
|
+
// minifying and other thing so let's set mode to development
|
|
30
|
+
mode: isProduction ? "production" : "development",
|
|
31
|
+
module: {
|
|
32
|
+
rules: [
|
|
33
|
+
{
|
|
34
|
+
test: /.js$/,
|
|
35
|
+
exclude: /(node_modules)/,
|
|
36
|
+
use: {
|
|
37
|
+
loader: "babel-loader",
|
|
38
|
+
options: {
|
|
39
|
+
plugins: ["@babel/plugin-transform-modules-commonjs"],
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
test: /.css$/i,
|
|
45
|
+
use: [
|
|
46
|
+
{ loader: "style-loader", options: { injectType: "linkTag" } },
|
|
47
|
+
"file-loader",
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
],
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
// add source map
|
|
54
|
+
...(isProduction ? {} : { devtool: "eval-source-map" }),
|
|
55
|
+
|
|
56
|
+
optimization: {
|
|
57
|
+
minimize: true,
|
|
58
|
+
minimizer: [
|
|
59
|
+
new TerserPlugin({
|
|
60
|
+
extractComments: true,
|
|
61
|
+
// cache: true,
|
|
62
|
+
parallel: true,
|
|
63
|
+
// sourceMap: true, // Must be set to true if using source-maps in production
|
|
64
|
+
terserOptions: {
|
|
65
|
+
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
|
|
66
|
+
// extractComments: 'all',
|
|
67
|
+
compress: {
|
|
68
|
+
drop_console: true,
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
}),
|
|
72
|
+
],
|
|
73
|
+
splitChunks: {
|
|
74
|
+
chunks: "all",
|
|
75
|
+
minSize: 200,
|
|
76
|
+
// maxSize: 99999,
|
|
77
|
+
//minChunks: 1,
|
|
78
|
+
|
|
79
|
+
cacheGroups: {
|
|
80
|
+
defaultVendors: false,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
}
|