@cocreate/aria 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 +44 -0
- package/.github/workflows/manual.yml +44 -0
- package/CHANGELOG.md +6 -0
- package/CONTRIBUTING.md +111 -0
- package/CoCreate.config.js +21 -0
- package/LICENSE +21 -0
- package/README.md +85 -0
- package/demo/index.html +57 -0
- package/docs/index.html +347 -0
- package/package.json +54 -0
- package/prettier.config.js +16 -0
- package/release.config.js +22 -0
- package/src/index.js +203 -0
- package/webpack.config.js +65 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
name: Automated Workflow
|
|
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@v3
|
|
12
|
+
- name: Setup Node.js
|
|
13
|
+
uses: actions/setup-node@v3
|
|
14
|
+
with:
|
|
15
|
+
node-version: 16
|
|
16
|
+
- name: Jaid/action-sync-node-meta
|
|
17
|
+
uses: jaid/action-sync-node-meta@v1.4.0
|
|
18
|
+
with:
|
|
19
|
+
direction: overwrite-github
|
|
20
|
+
githubToken: "${{ secrets.GITHUB }}"
|
|
21
|
+
release:
|
|
22
|
+
runs-on: ubuntu-latest
|
|
23
|
+
steps:
|
|
24
|
+
- name: Checkout
|
|
25
|
+
uses: actions/checkout@v3
|
|
26
|
+
- name: Setup Node.js
|
|
27
|
+
uses: actions/setup-node@v3
|
|
28
|
+
with:
|
|
29
|
+
node-version: 14
|
|
30
|
+
- name: Semantic Release
|
|
31
|
+
uses: cycjimmy/semantic-release-action@v3
|
|
32
|
+
id: semantic
|
|
33
|
+
with:
|
|
34
|
+
extra_plugins: |
|
|
35
|
+
@semantic-release/changelog
|
|
36
|
+
@semantic-release/git
|
|
37
|
+
@semantic-release/github
|
|
38
|
+
env:
|
|
39
|
+
GITHUB_TOKEN: "${{ secrets.GITHUB }}"
|
|
40
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
41
|
+
outputs:
|
|
42
|
+
new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
|
|
43
|
+
new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
|
|
44
|
+
|
|
@@ -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 }}"
|
|
17
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
18
|
+
|
|
19
|
+
steps:
|
|
20
|
+
- name: Checkout
|
|
21
|
+
uses: actions/checkout@v3
|
|
22
|
+
- name: setup nodejs
|
|
23
|
+
uses: actions/setup-node@v3
|
|
24
|
+
with:
|
|
25
|
+
node-version: 16
|
|
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: /actions/latest
|
|
43
|
+
acl: public-read
|
|
44
|
+
invalidations: ${{ github.event.inputs.invalidations }}
|
package/CHANGELOG.md
ADDED
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# Contributing to CoCreate-aria
|
|
2
|
+
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-aria/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-aria/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-aria/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-aria) and check out your copy.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
git clone https://github.com/contributor/CoCreate-aria.git
|
|
15
|
+
cd CoCreate-aria
|
|
16
|
+
git remote add upstream https://github.com/CoCreate-app/CoCreate-aria.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.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
git checkout master
|
|
25
|
+
git pull upstream master
|
|
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
|
+
Add to [spec](spec).
|
|
33
|
+
|
|
34
|
+
We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
|
|
35
|
+
|
|
36
|
+
## Write Code
|
|
37
|
+
|
|
38
|
+
Implement your feature or bug fix.
|
|
39
|
+
|
|
40
|
+
## Write Documentation
|
|
41
|
+
|
|
42
|
+
Document any external behavior in the [README](README.md).
|
|
43
|
+
|
|
44
|
+
## Update Changelog
|
|
45
|
+
|
|
46
|
+
Add a line to [CHANGELOG](CHANGELOG.md) under _Next Release_.
|
|
47
|
+
Make it look like every other line, including your name and link to your Github account.
|
|
48
|
+
|
|
49
|
+
## Commit Changes
|
|
50
|
+
|
|
51
|
+
Make sure git knows your name and email address:
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
git config --global user.name "Your Name"
|
|
55
|
+
git config --global user.email "contributor@example.com"
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Writing good commit logs is important. A commit log should describe what changed and why.
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
git add ...
|
|
62
|
+
git commit
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Push
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
git push origin my-feature-branch
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Make a Pull Request
|
|
72
|
+
|
|
73
|
+
Go to [https://github.com/CoCreate-app/CoCreate-aria](https://github.com/CoCreate-app/CoCreate-aria) and select your feature branch.
|
|
74
|
+
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
75
|
+
|
|
76
|
+
## Rebase
|
|
77
|
+
|
|
78
|
+
If you've been working on a change for a while, rebase with upstream/master.
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
git fetch upstream
|
|
82
|
+
git rebase upstream/master
|
|
83
|
+
git push origin my-feature-branch -f
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Update CHANGELOG Again
|
|
87
|
+
|
|
88
|
+
Update the [CHANGELOG](CHANGELOG.md) with the pull request number. A typical entry looks as follows.
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
* [#123](https://github.com/CoCreate-app/CoCreate-industry/pull/123): Reticulated splines - [@contributor](https://github.com/contributor).
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Amend your previous commit and force push the changes.
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
git commit --amend
|
|
98
|
+
git push origin my-feature-branch -f
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Check on Your Pull Request
|
|
102
|
+
|
|
103
|
+
Go back to your pull request after a few minutes and see whether it passed muster with Travis-CI. Everything should look green, otherwise fix issues and amend your commit as described above.
|
|
104
|
+
|
|
105
|
+
## Be Patient
|
|
106
|
+
|
|
107
|
+
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 on there!
|
|
108
|
+
|
|
109
|
+
## Thank You
|
|
110
|
+
|
|
111
|
+
Please do know that we really appreciate and value your time and work. We love you, really.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
organization_id: "",
|
|
3
|
+
key: "",
|
|
4
|
+
host: "",
|
|
5
|
+
sources: [
|
|
6
|
+
{
|
|
7
|
+
array: "files",
|
|
8
|
+
object: {
|
|
9
|
+
_id: "61a12db2a8b6b4001a9f5a2e",
|
|
10
|
+
name: "index.html",
|
|
11
|
+
path: "/docs/aria",
|
|
12
|
+
pathname: "/docs/aria/index.html",
|
|
13
|
+
src: "{{./docs/index.html}}",
|
|
14
|
+
host: ["*"],
|
|
15
|
+
directory: "aria",
|
|
16
|
+
"content-type": "{{content-type}}",
|
|
17
|
+
public: "true"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
};
|
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-aria
|
|
2
|
+
|
|
3
|
+
Chain multiple component executions to generate your desired logic, when one action is complete next one will start. The sequence goes until all aria have been completed. Vanilla javascript, easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/aria)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [Docs & Demo](https://cocreate.app/docs/aria)
|
|
15
|
+
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/aria)
|
|
17
|
+
|
|
18
|
+
## CDN
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script src="https://cdn.cocreate.app/aria/latest/CoCreate-aria.min.js"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="https://cdn.cocreate.app/aria/latest/CoCreate-aria.min.css"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## NPM
|
|
29
|
+
|
|
30
|
+
```shell
|
|
31
|
+
$ npm i @cocreate/aria
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## yarn
|
|
35
|
+
|
|
36
|
+
```shell
|
|
37
|
+
$ yarn install @cocreate/aria
|
|
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-aria/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-aria/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-aria/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-aria/pulls). We would love to hear your feedback.
|
|
60
|
+
|
|
61
|
+
<a name="about"></a>
|
|
62
|
+
|
|
63
|
+
# About
|
|
64
|
+
|
|
65
|
+
CoCreate-aria 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-aria 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-aria/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-aria/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-aria/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
|
+
|
|
79
|
+
We appreciate your continued support, thank you!
|
|
80
|
+
|
|
81
|
+
<a name="license"></a>
|
|
82
|
+
|
|
83
|
+
# License
|
|
84
|
+
|
|
85
|
+
[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-aria/blob/master/LICENSE)
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Aria | CoCreateJS</title>
|
|
5
|
+
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<form>
|
|
16
|
+
<button
|
|
17
|
+
type="button"
|
|
18
|
+
id="id-one"
|
|
19
|
+
aria="timeout(12000), action($document #id-two)">
|
|
20
|
+
click
|
|
21
|
+
</button>
|
|
22
|
+
</form>
|
|
23
|
+
<form>
|
|
24
|
+
<button
|
|
25
|
+
type="button"
|
|
26
|
+
aria="timeout(1000), timeout(2000), timeout(5000)">
|
|
27
|
+
click
|
|
28
|
+
</button>
|
|
29
|
+
</form>
|
|
30
|
+
|
|
31
|
+
<form>
|
|
32
|
+
<input render-key="render.company" value="Paper Company" />
|
|
33
|
+
<button
|
|
34
|
+
id="id-two"
|
|
35
|
+
type="button"
|
|
36
|
+
aria="timeout(1000), action($document #id-three)"
|
|
37
|
+
hidden>
|
|
38
|
+
click
|
|
39
|
+
</button>
|
|
40
|
+
</form>
|
|
41
|
+
|
|
42
|
+
<form>
|
|
43
|
+
<input render-key="render.name" value="Micheal Scott" />
|
|
44
|
+
<button
|
|
45
|
+
id="id-three"
|
|
46
|
+
type="button"
|
|
47
|
+
aria="timeout(4000), renderKey"
|
|
48
|
+
hidden>
|
|
49
|
+
click
|
|
50
|
+
</button>
|
|
51
|
+
</form>
|
|
52
|
+
|
|
53
|
+
<!--<script src="../dist/CoCreate-aria.js" ></script>-->
|
|
54
|
+
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
55
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,347 @@
|
|
|
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-aria Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico" />
|
|
13
|
+
<meta
|
|
14
|
+
name="description"
|
|
15
|
+
content="A convenient chain handler allows user to chain multiple components together. When one aria is complete next one will start untill all aria completed." />
|
|
16
|
+
<meta
|
|
17
|
+
name="keywords"
|
|
18
|
+
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
|
+
<meta name="robots" content="index,follow" />
|
|
20
|
+
<meta
|
|
21
|
+
property="og:image"
|
|
22
|
+
content="https://cdn.cocreate.app/docs/aria.png" />
|
|
23
|
+
|
|
24
|
+
<link
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
href="../../index.css"
|
|
27
|
+
array="files"
|
|
28
|
+
object="60888216117c640e7596303f"
|
|
29
|
+
key="src"
|
|
30
|
+
type="text/css"
|
|
31
|
+
save="true" />
|
|
32
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
33
|
+
</head>
|
|
34
|
+
|
|
35
|
+
<body>
|
|
36
|
+
<!-- Navbar -->
|
|
37
|
+
<nav
|
|
38
|
+
content_id="content"
|
|
39
|
+
scroll="sticky-nav, hide"
|
|
40
|
+
scroll-up="5"
|
|
41
|
+
scroll-down="5"
|
|
42
|
+
path="../../"
|
|
43
|
+
src="../../components/navbar.html"></nav>
|
|
44
|
+
<sidenav
|
|
45
|
+
id="menuL"
|
|
46
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
47
|
+
resizable
|
|
48
|
+
resize-query="[content_id='content']"
|
|
49
|
+
resize-property="margin-left"
|
|
50
|
+
resize-value="width">
|
|
51
|
+
<menu
|
|
52
|
+
array="files"
|
|
53
|
+
object="603717b07de7fb350ae9fec8"
|
|
54
|
+
key="src"></menu>
|
|
55
|
+
<div resize="right"></div>
|
|
56
|
+
</sidenav>
|
|
57
|
+
<main content_id="content" id="cocreate-aria">
|
|
58
|
+
<div
|
|
59
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px padding-top:70px">
|
|
60
|
+
<div class="display:flex align-items:center">
|
|
61
|
+
<h2>CoCreate-aria</h2>
|
|
62
|
+
</div>
|
|
63
|
+
<div
|
|
64
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
65
|
+
<div
|
|
66
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
67
|
+
share-network="true"
|
|
68
|
+
share-text="A convenient chain handler allows user to chain multiple components together. When one aria is complete next one will start untill all aria completed."
|
|
69
|
+
share-title="CoCreate aria"
|
|
70
|
+
share-height="600"
|
|
71
|
+
share-width="700"
|
|
72
|
+
share-media="https://cdn.cocreate.app/docs/aria.png"
|
|
73
|
+
hover="display:block!important"
|
|
74
|
+
hover-query=".social-networks">
|
|
75
|
+
<div class="display:none social-networks">
|
|
76
|
+
<a
|
|
77
|
+
class="margin-right:15px"
|
|
78
|
+
share-network="twitter"
|
|
79
|
+
title="Share on twitter"
|
|
80
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
81
|
+
></a>
|
|
82
|
+
<a
|
|
83
|
+
class="margin-right:15px"
|
|
84
|
+
share-network="facebook"
|
|
85
|
+
title="Share on Facebook"
|
|
86
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
87
|
+
></a>
|
|
88
|
+
<a
|
|
89
|
+
class="margin-right:15px"
|
|
90
|
+
share-network="instagram"
|
|
91
|
+
title="Share on instagram"
|
|
92
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
93
|
+
></a>
|
|
94
|
+
</div>
|
|
95
|
+
<a
|
|
96
|
+
class="margin-right:15px"
|
|
97
|
+
share-network="share"
|
|
98
|
+
title="Share on share"
|
|
99
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
100
|
+
></a>
|
|
101
|
+
</div>
|
|
102
|
+
<a
|
|
103
|
+
class="margin-right:15px"
|
|
104
|
+
share-network="share"
|
|
105
|
+
title="Share on share"
|
|
106
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
107
|
+
></a>
|
|
108
|
+
</div>
|
|
109
|
+
<a
|
|
110
|
+
href="https://github.com/CoCreate-app/CoCreate-aria"
|
|
111
|
+
target="_blank"
|
|
112
|
+
class=""
|
|
113
|
+
><i src="/assets/svg/github.svg"></i
|
|
114
|
+
></a>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<h1
|
|
118
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
|
|
119
|
+
Chain multiple component executions to generate your desired
|
|
120
|
+
logic, when one action is complete next one will start. The
|
|
121
|
+
sequence goes until all aria have been completed. Vanilla
|
|
122
|
+
javascript, easily configured using HTML5 attributes and/or
|
|
123
|
+
JavaScript API.
|
|
124
|
+
</h1>
|
|
125
|
+
<div id="aria-section" class="display:flex flex-wrap:wrap">
|
|
126
|
+
<div
|
|
127
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
128
|
+
<div
|
|
129
|
+
id="aria-install"
|
|
130
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
131
|
+
scroll
|
|
132
|
+
scroll-intersect="color:dodgerblue"
|
|
133
|
+
scroll-query="#aria-install-section">
|
|
134
|
+
<span
|
|
135
|
+
class="display:flex align-items:center width:fit-content"
|
|
136
|
+
hover="display:block!important"
|
|
137
|
+
hover-query="[href='#aria-install']">
|
|
138
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
139
|
+
<a
|
|
140
|
+
class="margin-left:10px display:none"
|
|
141
|
+
href="#aria-install"
|
|
142
|
+
><i src="/assets/svg/link.svg"></i
|
|
143
|
+
></a>
|
|
144
|
+
</span>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<pre><code class="language-bash">npm i @cocreate/aria</code></pre>
|
|
148
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
149
|
+
Or you can use cdn link:
|
|
150
|
+
</p>
|
|
151
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/aria/latest/CoCreate-aria.min.js</script></code></pre>
|
|
152
|
+
|
|
153
|
+
<div
|
|
154
|
+
id="aria-usage"
|
|
155
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
156
|
+
scroll
|
|
157
|
+
scroll-intersect="color:dodgerblue"
|
|
158
|
+
scroll-query="#aria-usage-section">
|
|
159
|
+
<span
|
|
160
|
+
class="display:flex align-items:center width:fit-content"
|
|
161
|
+
hover="display:block!important"
|
|
162
|
+
hover-query="[href='#aria-usage']">
|
|
163
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
164
|
+
<a
|
|
165
|
+
class="margin-left:10px display:none"
|
|
166
|
+
href="#aria-usage"
|
|
167
|
+
><i src="/assets/svg/link.svg"></i
|
|
168
|
+
></a>
|
|
169
|
+
</span>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="">
|
|
172
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
173
|
+
This is aria usage
|
|
174
|
+
</p>
|
|
175
|
+
|
|
176
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
177
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
178
|
+
</div>
|
|
179
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
180
|
+
This is aria usage
|
|
181
|
+
</p>
|
|
182
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
183
|
+
This is aria usage
|
|
184
|
+
</p>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div
|
|
188
|
+
id="aria-attributes"
|
|
189
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
190
|
+
scroll
|
|
191
|
+
scroll-intersect="color:dodgerblue"
|
|
192
|
+
scroll-query="#aria-attributes-section">
|
|
193
|
+
<span
|
|
194
|
+
class="display:flex align-items:center width:fit-content"
|
|
195
|
+
hover="display:block!important"
|
|
196
|
+
hover-query="[href='#aria-attributes']">
|
|
197
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
198
|
+
<a
|
|
199
|
+
class="margin-left:10px display:none"
|
|
200
|
+
href="#aria-attributes"
|
|
201
|
+
><i src="/assets/svg/link.svg"></i
|
|
202
|
+
></a>
|
|
203
|
+
</span>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<ul class="list-style-type:none">
|
|
207
|
+
<li
|
|
208
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
209
|
+
<h4>
|
|
210
|
+
<span>aria</span>
|
|
211
|
+
<span class="cocreate-badge success"
|
|
212
|
+
>string</span
|
|
213
|
+
>
|
|
214
|
+
<span class="cocreate-badge warning"
|
|
215
|
+
>optional</span
|
|
216
|
+
>
|
|
217
|
+
</h4>
|
|
218
|
+
<p>aria-attribute</p>
|
|
219
|
+
</li>
|
|
220
|
+
<li
|
|
221
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
222
|
+
<h4>
|
|
223
|
+
<span>aria</span>
|
|
224
|
+
<span class="cocreate-badge success"
|
|
225
|
+
>string</span
|
|
226
|
+
>
|
|
227
|
+
<span class="cocreate-badge warning"
|
|
228
|
+
>optional</span
|
|
229
|
+
>
|
|
230
|
+
</h4>
|
|
231
|
+
<p>aria-attribute</p>
|
|
232
|
+
</li>
|
|
233
|
+
</ul>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div
|
|
237
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
238
|
+
<!-- SandBox -->
|
|
239
|
+
<div
|
|
240
|
+
id="aria-demo"
|
|
241
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
242
|
+
scroll
|
|
243
|
+
scroll-intersect="color:dodgerblue"
|
|
244
|
+
scroll-query="#aria-demo-section">
|
|
245
|
+
<span
|
|
246
|
+
class="display:flex align-items:center width:fit-content"
|
|
247
|
+
hover="display:block!important"
|
|
248
|
+
hover-query="[href='#aria-demo']">
|
|
249
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
250
|
+
<a
|
|
251
|
+
class="margin-left:10px display:none"
|
|
252
|
+
href="#aria-demo"
|
|
253
|
+
><i src="/assets/svg/link.svg"></i
|
|
254
|
+
></a>
|
|
255
|
+
</span>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<div
|
|
259
|
+
class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
260
|
+
<!-- SandBox -->
|
|
261
|
+
<div
|
|
262
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
263
|
+
id="playground">
|
|
264
|
+
<div
|
|
265
|
+
id="demo-code"
|
|
266
|
+
resizable
|
|
267
|
+
class="position:relative height:50%">
|
|
268
|
+
<textarea
|
|
269
|
+
type="code"
|
|
270
|
+
lang="html"
|
|
271
|
+
array="demos"
|
|
272
|
+
object=""
|
|
273
|
+
key="demo"
|
|
274
|
+
save="false"
|
|
275
|
+
id="demo"
|
|
276
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
277
|
+
<div
|
|
278
|
+
resize="bottom"
|
|
279
|
+
class="background:lightgrey"></div>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div
|
|
283
|
+
id="demo-preview"
|
|
284
|
+
class="position:relative overflow:auto background-color:white">
|
|
285
|
+
<div class="demopreview padding:20px"></div>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<div
|
|
289
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
290
|
+
<a
|
|
291
|
+
class="margin-right:10px"
|
|
292
|
+
id="eye"
|
|
293
|
+
show="#eye-slash"
|
|
294
|
+
hide="#eye, #demo-preview"
|
|
295
|
+
toggle="code-height"
|
|
296
|
+
toggle-query="#demo-code"
|
|
297
|
+
><i
|
|
298
|
+
class="height:18px"
|
|
299
|
+
src="/assets/svg/eye.svg"></i
|
|
300
|
+
></a>
|
|
301
|
+
<a
|
|
302
|
+
class="margin-right:10px"
|
|
303
|
+
hidden
|
|
304
|
+
id="eye-slash"
|
|
305
|
+
show="#eye, #demo-preview"
|
|
306
|
+
hide="#eye-slash"
|
|
307
|
+
toggle="code-height"
|
|
308
|
+
toggle-query="#demo-code"
|
|
309
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
310
|
+
></a>
|
|
311
|
+
<a
|
|
312
|
+
class="margin-right:10px"
|
|
313
|
+
id="code"
|
|
314
|
+
show="#code-slash"
|
|
315
|
+
hide="#code, #demo-code"
|
|
316
|
+
><i src="/assets/svg/code.svg"></i
|
|
317
|
+
></a>
|
|
318
|
+
<a
|
|
319
|
+
class="margin-right:10px"
|
|
320
|
+
hidden
|
|
321
|
+
id="code-slash"
|
|
322
|
+
show="#code, #demo-code"
|
|
323
|
+
hide="#code-slash"
|
|
324
|
+
><i
|
|
325
|
+
class="height:18px"
|
|
326
|
+
src="/assets/svg/code.svg"></i
|
|
327
|
+
></a>
|
|
328
|
+
<a
|
|
329
|
+
class="margin-right:5px"
|
|
330
|
+
fullscreen
|
|
331
|
+
fullscreen-query="#playground"></a>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<!-- End SandBox -->
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<button
|
|
339
|
+
href="https://github.com/CoCreate-app/CoCreate-aria/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
340
|
+
target="_blank"
|
|
341
|
+
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)">
|
|
342
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
343
|
+
</button>
|
|
344
|
+
</main>
|
|
345
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
346
|
+
</body>
|
|
347
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cocreate/aria",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Chain multiple component executions to generate your desired logic, when one action is complete next one will start. The sequence goes until all aria have been completed. Vanilla javascript, easily configured using HTML5 attributes and/or JavaScript API.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"aria",
|
|
7
|
+
"chain-functions",
|
|
8
|
+
"low-code",
|
|
9
|
+
"realtime",
|
|
10
|
+
"realtime-framework",
|
|
11
|
+
"collaboration",
|
|
12
|
+
"shared-editing",
|
|
13
|
+
"html5-framework",
|
|
14
|
+
"javascript-framework"
|
|
15
|
+
],
|
|
16
|
+
"publishConfig": {
|
|
17
|
+
"access": "public"
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"start": "npx webpack --config webpack.config.js",
|
|
21
|
+
"build": "npx webpack --mode=production --config webpack.config.js",
|
|
22
|
+
"dev": "npx webpack --config webpack.config.js --watch",
|
|
23
|
+
"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); } }\""
|
|
24
|
+
},
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git+https://github.com/CoCreate-app/CoCreate-aria.git"
|
|
28
|
+
},
|
|
29
|
+
"author": "CoCreate LLC",
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/CoCreate-app/CoCreate-aria/issues"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://cocreate.app/docs/aria",
|
|
35
|
+
"funding": {
|
|
36
|
+
"type": "GitHub Sponsors ❤",
|
|
37
|
+
"url": "https://github.com/sponsors/CoCreate-app"
|
|
38
|
+
},
|
|
39
|
+
"main": "./src/index.js",
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"css-loader": "^5.1.3",
|
|
42
|
+
"esbuild": "^0.25.2",
|
|
43
|
+
"esbuild-loader": "^4.3.0",
|
|
44
|
+
"mini-css-extract-plugin": "^1.5.0",
|
|
45
|
+
"webpack": "^5.24.4",
|
|
46
|
+
"webpack-cli": "^4.5.0",
|
|
47
|
+
"webpack-log": "^3.0.1"
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@cocreate/observer": "^1.18.1",
|
|
51
|
+
"@cocreate/uuid": "^1.12.1",
|
|
52
|
+
"@cocreate/utils": "^1.39.0"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -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,203 @@
|
|
|
1
|
+
function init(elements) {
|
|
2
|
+
if (!elements) {
|
|
3
|
+
elements = document.querySelectorAll("[aria-controls]");
|
|
4
|
+
// initDocument();
|
|
5
|
+
}
|
|
6
|
+
initElement(elements);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let popupListener = null;
|
|
10
|
+
|
|
11
|
+
function addPopupListener() {
|
|
12
|
+
if (!popupListener) {
|
|
13
|
+
popupListener = function (event) {
|
|
14
|
+
const hasPopUps = document.querySelectorAll(
|
|
15
|
+
'[aria-controls][aria-haspopup][aria-expanded="true"]'
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
let skipControlledId = null;
|
|
19
|
+
for (let hasPopUp of hasPopUps) {
|
|
20
|
+
const controlledId = hasPopUp.getAttribute("aria-controls");
|
|
21
|
+
if (skipControlledId === controlledId) {
|
|
22
|
+
continue; // Skip this controlledId if it was already processed
|
|
23
|
+
}
|
|
24
|
+
if (hasPopUp.contains(event.target)) {
|
|
25
|
+
skipControlledId = controlledId;
|
|
26
|
+
continue; // Ignore clicks inside the popup
|
|
27
|
+
}
|
|
28
|
+
const controlledElement = document.getElementById(controlledId);
|
|
29
|
+
let closeOn = controlledElement.getAttribute("aria-close-on");
|
|
30
|
+
let closeOnEl = controlledElement;
|
|
31
|
+
if (!closeOn) {
|
|
32
|
+
closeOnEl = event.target.closest(
|
|
33
|
+
`#${controlledId} [aria-close-on]`
|
|
34
|
+
);
|
|
35
|
+
if (closeOnEl) {
|
|
36
|
+
closeOn = closeOnEl.getAttribute("aria-close-on");
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (closeOn === "outside") {
|
|
41
|
+
if (closeOnEl.contains(event.target)) continue;
|
|
42
|
+
} else if (closeOn === "button" || closeOn === "btn") {
|
|
43
|
+
continue;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
controlledElement.classList.remove("show");
|
|
47
|
+
updateAllControls(controlledId, "false");
|
|
48
|
+
}
|
|
49
|
+
// Remove listener if no popups remain open
|
|
50
|
+
if (
|
|
51
|
+
!document.querySelector(
|
|
52
|
+
'[aria-controls][aria-haspopup][aria-expanded="true"]'
|
|
53
|
+
)
|
|
54
|
+
) {
|
|
55
|
+
document.removeEventListener("click", popupListener, true);
|
|
56
|
+
popupListener = null;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
document.addEventListener("click", popupListener, true);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function removePopupListener() {
|
|
64
|
+
if (popupListener) {
|
|
65
|
+
document.removeEventListener("click", popupListener, true);
|
|
66
|
+
popupListener = null;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const initialized = new Set();
|
|
71
|
+
function initElement(elements) {
|
|
72
|
+
if (
|
|
73
|
+
!Array.isArray(elements) &&
|
|
74
|
+
!(elements instanceof NodeList) &&
|
|
75
|
+
!(elements instanceof HTMLCollection)
|
|
76
|
+
) {
|
|
77
|
+
elements = [elements];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (elements.length === 0) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
for (let control of elements) {
|
|
85
|
+
if (initialized.has(control)) continue;
|
|
86
|
+
initialized.add(control);
|
|
87
|
+
initEscapeKey(control);
|
|
88
|
+
control.addEventListener("click", function (event) {
|
|
89
|
+
event.preventDefault(); // Prevent default link behavior for <a> tags
|
|
90
|
+
|
|
91
|
+
const controlledId = this.getAttribute("aria-controls");
|
|
92
|
+
const controlledElement = document.getElementById(controlledId);
|
|
93
|
+
|
|
94
|
+
if (!controlledElement) {
|
|
95
|
+
console.warn(
|
|
96
|
+
`ARIA Controls: No element found with ID "${controlledId}" controlled by`,
|
|
97
|
+
this
|
|
98
|
+
);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
const closeOn = controlledElement.getAttribute("aria-close-on");
|
|
103
|
+
const role = this.getAttribute("role");
|
|
104
|
+
const hasAriaOpen = this.hasAttribute("aria-open");
|
|
105
|
+
const hasAriaClose = this.hasAttribute("aria-close");
|
|
106
|
+
const expanded = this.getAttribute("aria-expanded");
|
|
107
|
+
|
|
108
|
+
// Apply aria-open and aria-close logic globally, before any role-specific logic
|
|
109
|
+
if (hasAriaOpen && expanded === "true") {
|
|
110
|
+
// Do nothing if already open and aria-open is set
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
if (hasAriaClose && expanded !== "true") {
|
|
114
|
+
// Do nothing if already closed and aria-close is set
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
if (role === "tab") {
|
|
119
|
+
const tablist = this.closest("[role='tablist']");
|
|
120
|
+
const tabs = tablist.querySelectorAll('[role="tab"]');
|
|
121
|
+
for (let tab of tabs) {
|
|
122
|
+
const tabControlledId = tab.getAttribute("aria-controls");
|
|
123
|
+
const tabControlledEl =
|
|
124
|
+
document.getElementById(tabControlledId);
|
|
125
|
+
if (this === tab) {
|
|
126
|
+
tab.setAttribute("aria-selected", "true");
|
|
127
|
+
tabControlledEl.classList.add("show");
|
|
128
|
+
} else {
|
|
129
|
+
tab.setAttribute("aria-selected", "false");
|
|
130
|
+
tabControlledEl.classList.remove("show");
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
} else {
|
|
134
|
+
// Default toggle logic
|
|
135
|
+
if (expanded === "true") {
|
|
136
|
+
controlledElement.classList.remove("show");
|
|
137
|
+
updateAllControls(controlledId, "false");
|
|
138
|
+
removePopupListener();
|
|
139
|
+
} else {
|
|
140
|
+
controlledElement.classList.add("show");
|
|
141
|
+
updateAllControls(controlledId, "true");
|
|
142
|
+
if (closeOn !== "btn" && closeOn !== "button") {
|
|
143
|
+
addPopupListener();
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
function updateAllControls(controlledId, state) {
|
|
152
|
+
const allControls = document.querySelectorAll(
|
|
153
|
+
`[aria-controls="${controlledId}"]`
|
|
154
|
+
);
|
|
155
|
+
allControls.forEach((ctrl) => ctrl.setAttribute("aria-expanded", state));
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function initEscapeKey(control) {
|
|
159
|
+
const controlledId = control.getAttribute("aria-controls");
|
|
160
|
+
const controlledElement = document.getElementById(controlledId);
|
|
161
|
+
if (controlledElement) {
|
|
162
|
+
control.addEventListener("keydown", handleEscapeKey);
|
|
163
|
+
controlledElement.addEventListener("keydown", handleEscapeKey);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function handleEscapeKey(event) {
|
|
168
|
+
if (event.key === "Escape") {
|
|
169
|
+
// Use currentTarget to reference the element the listener is attached to
|
|
170
|
+
const toggleButton = event.currentTarget.matches("[aria-controls]")
|
|
171
|
+
? event.currentTarget
|
|
172
|
+
: document.querySelector(
|
|
173
|
+
`[aria-controls="${event.currentTarget.id}"]`
|
|
174
|
+
);
|
|
175
|
+
|
|
176
|
+
if (toggleButton) {
|
|
177
|
+
toggleButton.click();
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Attach Escape key handler globally
|
|
183
|
+
document.addEventListener("keydown", handleEscapeKey);
|
|
184
|
+
|
|
185
|
+
CoCreate.observer.init({
|
|
186
|
+
name: "aria",
|
|
187
|
+
types: ["addedNodes"],
|
|
188
|
+
selector: "[aria-controls]",
|
|
189
|
+
callback: function (mutation) {
|
|
190
|
+
initElement(mutation.target);
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
// CoCreate.observer.init({
|
|
195
|
+
// name: "aria-attributes",
|
|
196
|
+
// types: ["attributes"],
|
|
197
|
+
// attributeFilters: ["aria-selected"],
|
|
198
|
+
// callback: function (mutation) {
|
|
199
|
+
// initElement(mutation.target);
|
|
200
|
+
// }
|
|
201
|
+
// });
|
|
202
|
+
|
|
203
|
+
init();
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
3
|
+
const { EsbuildPlugin } = require("esbuild-loader");
|
|
4
|
+
const { FileUploader } = require("@cocreate/webpack");
|
|
5
|
+
|
|
6
|
+
module.exports = async (env, argv) => {
|
|
7
|
+
const isProduction = argv && argv.mode === "production";
|
|
8
|
+
const config = {
|
|
9
|
+
entry: {
|
|
10
|
+
"CoCreate-aria": "./src/index.js"
|
|
11
|
+
},
|
|
12
|
+
output: {
|
|
13
|
+
path: path.resolve(__dirname, "dist"),
|
|
14
|
+
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
15
|
+
libraryExport: "default",
|
|
16
|
+
library: ["CoCreate", "aria"],
|
|
17
|
+
clean: true
|
|
18
|
+
},
|
|
19
|
+
plugins: [
|
|
20
|
+
new MiniCssExtractPlugin({
|
|
21
|
+
filename: isProduction ? "[name].min.css" : "[name].css"
|
|
22
|
+
}),
|
|
23
|
+
new FileUploader(env, argv)
|
|
24
|
+
],
|
|
25
|
+
mode: isProduction ? "production" : "development",
|
|
26
|
+
devtool: isProduction ? "source-map" : "eval-source-map",
|
|
27
|
+
module: {
|
|
28
|
+
rules: [
|
|
29
|
+
{
|
|
30
|
+
test: /.js$/,
|
|
31
|
+
exclude: /node_modules/,
|
|
32
|
+
use: {
|
|
33
|
+
loader: "esbuild-loader",
|
|
34
|
+
options: {
|
|
35
|
+
loader: "js",
|
|
36
|
+
target: "es2017"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
test: /.css$/i,
|
|
42
|
+
use: [MiniCssExtractPlugin.loader, "css-loader"]
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
optimization: {
|
|
47
|
+
minimize: isProduction,
|
|
48
|
+
minimizer: [
|
|
49
|
+
new EsbuildPlugin({
|
|
50
|
+
target: "es2017",
|
|
51
|
+
css: true
|
|
52
|
+
})
|
|
53
|
+
],
|
|
54
|
+
splitChunks: {
|
|
55
|
+
cacheGroups: {
|
|
56
|
+
defaultVendors: false
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
performance: {
|
|
61
|
+
hints: isProduction ? "warning" : false
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
return config;
|
|
65
|
+
};
|