@cocreate/events 1.27.0 → 1.27.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/demo/click.html +83 -83
- package/demo/hover.html +65 -65
- package/demo/index.html +124 -124
- package/demo/observer.html +36 -33
- package/demo/selected.html +78 -78
- package/demo/set-value.html +2 -2
- package/docs/index.html +350 -346
- package/package.json +8 -12
- package/src/index.js +86 -57
- package/webpack.config.js +65 -90
package/demo/observer.html
CHANGED
|
@@ -1,39 +1,42 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>Observer Events | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
13
|
+
<!-- Custom CSS -->
|
|
14
|
+
<style type="text/css">
|
|
15
|
+
.test {
|
|
16
|
+
background: red;
|
|
17
|
+
}
|
|
18
|
+
.new {
|
|
19
|
+
background: yellow;
|
|
20
|
+
}
|
|
21
|
+
.active {
|
|
22
|
+
background-color: blue;
|
|
23
|
+
}
|
|
24
|
+
.hidden {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
<div click-query="$parent" click-value="active">click here</div>
|
|
32
|
+
<div
|
|
33
|
+
observe-query="$parent"
|
|
34
|
+
observe-attribute="class"
|
|
35
|
+
observe-value="active">
|
|
36
|
+
testing this new value
|
|
37
|
+
</div>
|
|
35
38
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
40
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
41
|
+
</body>
|
|
39
42
|
</html>
|
package/demo/selected.html
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>Selected | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
<!-- Custom CSS -->
|
|
13
|
+
<style type="text/css">
|
|
14
|
+
.test {
|
|
15
|
+
background: red;
|
|
16
|
+
}
|
|
17
|
+
.green {
|
|
18
|
+
background: green;
|
|
19
|
+
}
|
|
20
|
+
.yellow {
|
|
21
|
+
background: yellow;
|
|
22
|
+
}
|
|
23
|
+
.blue {
|
|
24
|
+
background: blue;
|
|
25
|
+
}
|
|
26
|
+
.red {
|
|
27
|
+
background: red;
|
|
28
|
+
}
|
|
29
|
+
.active {
|
|
30
|
+
background-color: blue;
|
|
31
|
+
}
|
|
32
|
+
.hfhfh[selected] {
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
<!--<article>-->
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
40
|
+
<div
|
|
41
|
+
id="yyy"
|
|
42
|
+
selected-query=".tester"
|
|
43
|
+
selected-value="active,"
|
|
44
|
+
selected-attribute="data-test"
|
|
45
|
+
selected-group="uno"
|
|
46
|
+
data-test=""
|
|
47
|
+
class="test">
|
|
48
|
+
1 tab
|
|
49
|
+
</div>
|
|
50
|
+
<div selected-value="active" selected-group="uno" class="test">
|
|
51
|
+
2 tab
|
|
52
|
+
</div>
|
|
53
|
+
<div selected-value="active" selected-group="uno" class="test">
|
|
54
|
+
3 tab
|
|
55
|
+
</div>
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
<hr />
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
<div selected-value="yellow" selected-group="2" class="green">
|
|
60
|
+
1 tab
|
|
61
|
+
</div>
|
|
62
|
+
<div selected-value="blue" selected-group="2" class="green">2 tab</div>
|
|
63
|
+
<div selected-value="red" selected-group="2" class="green">3 tab</div>
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
<hr />
|
|
66
|
+
<div class="tester">
|
|
67
|
+
<div
|
|
68
|
+
selected-value="active"
|
|
69
|
+
selected-query="$closest div.tester"
|
|
70
|
+
class="test">
|
|
71
|
+
4 tab
|
|
72
|
+
</div>
|
|
73
|
+
<div selected-value="active" class="test">4 tab</div>
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
<div
|
|
76
|
+
selected-value="color:black; background:grey"
|
|
77
|
+
selected-attribute="style"
|
|
78
|
+
style="">
|
|
79
|
+
color tab
|
|
80
|
+
</div>
|
|
81
81
|
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
<div id="yyyy" data-test="" class="test">1 tab</div>
|
|
83
|
+
</div>
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
<!-- <script src="../dist/CoCreate-selected.js"></script> -->
|
|
86
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
87
|
+
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
|
|
88
|
+
</body>
|
|
89
89
|
</html>
|
package/demo/set-value.html
CHANGED
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<div click-
|
|
15
|
+
<div click-query="#testing" click-value="hello, bye" click-key="ty">
|
|
16
16
|
<span id="testing" class="{{ty}}">other content</span>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
19
|
<form>
|
|
20
|
-
<input input-
|
|
20
|
+
<input input-query="#testing2" input-attribute="value" />
|
|
21
21
|
<input id="testing2" />
|
|
22
22
|
</form>
|
|
23
23
|
|