@cocreate/state 1.24.0 → 1.24.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 +15 -0
- package/demo/index.html +176 -176
- package/package.json +1 -1
- package/src/index.js +18 -25
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
## [1.24.2](https://github.com/CoCreate-app/CoCreate-state/compare/v1.24.1...v1.24.2) (2025-04-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* renamed statedAttributes to state in local storage. ([610f591](https://github.com/CoCreate-app/CoCreate-state/commit/610f5916069ee773ee4bc020430892c869088d0b))
|
|
7
|
+
* update observer observe param to type and and attributeName to attributeFilter ([42d8a89](https://github.com/CoCreate-app/CoCreate-state/commit/42d8a89ce2b32ee5d17b8a1498e40bd4503416a9))
|
|
8
|
+
|
|
9
|
+
## [1.24.1](https://github.com/CoCreate-app/CoCreate-state/compare/v1.24.0...v1.24.1) (2025-01-18)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* filter-query-key ([f3f4781](https://github.com/CoCreate-app/CoCreate-state/commit/f3f4781e679696d19b935ff18e8c35ed947b9e56))
|
|
15
|
+
|
|
1
16
|
# [1.24.0](https://github.com/CoCreate-app/CoCreate-state/compare/v1.23.0...v1.24.0) (2024-12-14)
|
|
2
17
|
|
|
3
18
|
|
package/demo/index.html
CHANGED
|
@@ -1,188 +1,188 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>state | 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
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
<!-- CoCreate CSS CDN -->
|
|
13
|
+
<link
|
|
14
|
+
rel="stylesheet"
|
|
15
|
+
href="https://cdn.cocreate.app/state/latest/CoCreate-state.min.css"
|
|
16
|
+
type="text/css" />
|
|
17
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
18
|
+
</head>
|
|
19
|
+
<body style="padding: 20px">
|
|
20
|
+
<!-- windows -->
|
|
21
|
+
<button
|
|
22
|
+
actions="state, openModal"
|
|
23
|
+
modal-src="./documentation"
|
|
24
|
+
state-array="modules"
|
|
25
|
+
state-object=""
|
|
26
|
+
state_to="me1234"
|
|
27
|
+
modal-width="600px"
|
|
28
|
+
modal-height="100%"
|
|
29
|
+
modal-color="#333">
|
|
30
|
+
Window test.1
|
|
31
|
+
</button>
|
|
32
|
+
<button
|
|
33
|
+
actions="state, openModal"
|
|
34
|
+
modal-src="render.html"
|
|
35
|
+
state-array="module_activity"
|
|
36
|
+
state-object="5cd910dd30f02f16b3385821"
|
|
37
|
+
state_to="me1234"
|
|
38
|
+
modal-height="100%"
|
|
39
|
+
modal-color="red"
|
|
40
|
+
modal-x="20"
|
|
41
|
+
modal-y="40">
|
|
42
|
+
Window test.2
|
|
43
|
+
</button>
|
|
44
|
+
<!--Page-->
|
|
45
|
+
<button>
|
|
46
|
+
<a
|
|
47
|
+
href="render.html"
|
|
48
|
+
target=""
|
|
49
|
+
state-array="module_activity"
|
|
50
|
+
state-object="5d8aa1cfa37aee309596d6c6"
|
|
51
|
+
state_to="me1234"
|
|
52
|
+
>Page test.1.html
|
|
53
|
+
<div
|
|
54
|
+
state_to="me12345"
|
|
55
|
+
state-array="modules"
|
|
56
|
+
state-object="5d8aa2fca37aee309596d6c8"></div>
|
|
57
|
+
</a>
|
|
58
|
+
</button>
|
|
59
|
+
----
|
|
60
|
+
<button>
|
|
61
|
+
<a
|
|
62
|
+
href="CoCreate-kanban/simple-test.html"
|
|
63
|
+
state-array="module_activity"
|
|
64
|
+
state-key="stage"
|
|
65
|
+
state_to="stage"
|
|
66
|
+
>Fetch name</a
|
|
67
|
+
>
|
|
68
|
+
</button>
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
<button>
|
|
71
|
+
<a
|
|
72
|
+
href="CoCreate-kanban/kanban.html"
|
|
73
|
+
state-array="module_activity"
|
|
74
|
+
state-filter-value="5e6d79f9d8cdbe53927a0443"
|
|
75
|
+
state-filter-query-key
|
|
76
|
+
state_to="fetch_value"
|
|
77
|
+
>Simple Test</a
|
|
78
|
+
>
|
|
79
|
+
</button>
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
<button>
|
|
82
|
+
<a
|
|
83
|
+
href="https://server.cocreate.app/CoCreate-attributes/CoCreate-attibutes.html"
|
|
84
|
+
target="_blank"
|
|
85
|
+
state-array="modules"
|
|
86
|
+
state-object="5ebc16fc8917bc59483a7e3b"
|
|
87
|
+
state_to="1234"
|
|
88
|
+
>empty target</a
|
|
89
|
+
>
|
|
90
|
+
</button>
|
|
91
91
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
92
|
+
<button>
|
|
93
|
+
<a
|
|
94
|
+
href="CoCreate-attributes/CoCreate-attibutes.html"
|
|
95
|
+
actions="01, 02"
|
|
96
|
+
target="_blank"
|
|
97
|
+
state-array="modules"
|
|
98
|
+
state-object="5ebc16fc8917bc59483a7e3b"
|
|
99
|
+
state_to="1234"
|
|
100
|
+
>_blank</a
|
|
101
|
+
>
|
|
102
|
+
</button>
|
|
103
|
+
<button>
|
|
104
|
+
<a
|
|
105
|
+
href="CoCreate-attributes/CoCreate-attibutes.html"
|
|
106
|
+
target="_blank"
|
|
107
|
+
state-array="modules"
|
|
108
|
+
state-object="5d8aa2fca37aee309596d6c8"
|
|
109
|
+
state_to="1234"
|
|
110
|
+
>_window</a
|
|
111
|
+
>
|
|
112
|
+
</button>
|
|
113
|
+
<button>
|
|
114
|
+
<a
|
|
115
|
+
href="target.html"
|
|
116
|
+
target="_self"
|
|
117
|
+
state-array="modules"
|
|
118
|
+
state-object="5d8aa2fca37aee309596d6c8"
|
|
119
|
+
state_to="me1234"
|
|
120
|
+
>_self</a
|
|
121
|
+
>
|
|
122
|
+
</button>
|
|
123
|
+
----
|
|
124
|
+
<button>
|
|
125
|
+
<a
|
|
126
|
+
href="html_block.html"
|
|
127
|
+
state-array="modules"
|
|
128
|
+
state-object="5cf995e8ac959a2bd93356fb"
|
|
129
|
+
state_to="me1234"
|
|
130
|
+
>Page HTML BLOCK</a
|
|
131
|
+
>
|
|
132
|
+
</button>
|
|
133
|
+
<button>
|
|
134
|
+
<a
|
|
135
|
+
actions="state, openModal"
|
|
136
|
+
modal-src="html_block.html"
|
|
137
|
+
state-array="modules"
|
|
138
|
+
state-object="5cf995e8ac959a2bd93356fb"
|
|
139
|
+
state_to="me1234"
|
|
140
|
+
>Modal HTML BLOCK</a
|
|
141
|
+
>
|
|
142
|
+
</button>
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
144
|
+
<button>
|
|
145
|
+
<a
|
|
146
|
+
href="CoCreate-builder/index.html"
|
|
147
|
+
state-array="test1_array"
|
|
148
|
+
state_to="me1234"
|
|
149
|
+
>test page builder.html</a
|
|
150
|
+
>
|
|
151
|
+
</button>
|
|
152
|
+
<button>
|
|
153
|
+
<a
|
|
154
|
+
actions="state, openModal"
|
|
155
|
+
modal-src="builder.html"
|
|
156
|
+
state-array="modules"
|
|
157
|
+
state-object="5cf995e8ac959a2bd93356fb"
|
|
158
|
+
state_to="me1234"
|
|
159
|
+
>modal builder.html</a
|
|
160
|
+
>
|
|
161
|
+
</button>
|
|
162
162
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
163
|
+
<button>
|
|
164
|
+
<a
|
|
165
|
+
actions="state, openModal"
|
|
166
|
+
modal-src="module_datatable.html"
|
|
167
|
+
state-array="modules"
|
|
168
|
+
state-object="5cf995e8ac959a2bd93356fb"
|
|
169
|
+
state_to="me1234"
|
|
170
|
+
>modal datatable</a
|
|
171
|
+
>
|
|
172
|
+
</button>
|
|
173
173
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
174
|
+
<button>
|
|
175
|
+
<a
|
|
176
|
+
actions="state, openModal"
|
|
177
|
+
modal-src="index.html"
|
|
178
|
+
state_to="me1234"
|
|
179
|
+
>index.html</a
|
|
180
|
+
>
|
|
181
|
+
</button>
|
|
182
182
|
|
|
183
|
-
|
|
183
|
+
<div id="modal-viewport"></div>
|
|
184
184
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
185
|
+
<!--<script src="../dist/CoCreate-state.js"></script>-->
|
|
186
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
187
|
+
</body>
|
|
188
188
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/state",
|
|
3
|
-
"version": "1.24.
|
|
3
|
+
"version": "1.24.2",
|
|
4
4
|
"description": "Data attributes which can be used for components in CoCreate framework combined as a group of attributes that dynamically change attributes & fetch custom data.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"state",
|
package/src/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "@cocreate/element-prototype";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
2
|
+
import Observer from "@cocreate/observer";
|
|
3
|
+
import Action from "@cocreate/actions";
|
|
4
4
|
import uid from "@cocreate/uuid";
|
|
5
5
|
import localStorage from "@cocreate/local-storage";
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ function init() {
|
|
|
8
8
|
let elements = document.querySelectorAll("[state_id]");
|
|
9
9
|
initElements(elements);
|
|
10
10
|
window.addEventListener("storage", function (e) {
|
|
11
|
-
if (e.key == "
|
|
11
|
+
if (e.key == "state") {
|
|
12
12
|
elements = document.querySelectorAll(
|
|
13
13
|
'[state_id]:not([state-onstoragechange="false"])'
|
|
14
14
|
);
|
|
@@ -32,7 +32,7 @@ function initElement(element) {
|
|
|
32
32
|
let state_id = element.getAttribute("state_id");
|
|
33
33
|
if (!state_id) return;
|
|
34
34
|
|
|
35
|
-
let statedAttributes = localStorage.getItem("
|
|
35
|
+
let statedAttributes = localStorage.getItem("state");
|
|
36
36
|
|
|
37
37
|
if (!statedAttributes || statedAttributes.length == 0) return;
|
|
38
38
|
statedAttributes = JSON.parse(statedAttributes);
|
|
@@ -104,17 +104,14 @@ async function _setAttributeValue(element, attribute, value, isOverwrite) {
|
|
|
104
104
|
async function stateAttributes(element) {
|
|
105
105
|
let statedAttributes = {};
|
|
106
106
|
try {
|
|
107
|
-
const storedAttributes = localStorage.getItem("
|
|
107
|
+
const storedAttributes = localStorage.getItem("state");
|
|
108
108
|
if (storedAttributes) {
|
|
109
109
|
statedAttributes = JSON.parse(storedAttributes);
|
|
110
110
|
}
|
|
111
111
|
} catch (error) {
|
|
112
|
-
console.error(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
);
|
|
116
|
-
// Optionally reset `statedAttributes` in localStorage to ensure valid data:
|
|
117
|
-
localStorage.setItem("statedAttributes", JSON.stringify({}));
|
|
112
|
+
console.error("Failed to parse state from localStorage:", error);
|
|
113
|
+
// Optionally reset `state` in localStorage to ensure valid data:
|
|
114
|
+
localStorage.setItem("state", JSON.stringify({}));
|
|
118
115
|
}
|
|
119
116
|
let elements = [];
|
|
120
117
|
|
|
@@ -159,10 +156,9 @@ async function stateAttributes(element) {
|
|
|
159
156
|
);
|
|
160
157
|
}
|
|
161
158
|
|
|
162
|
-
if (!changeState)
|
|
163
|
-
localStorage.setItem("statedAttributes", statedAttributes);
|
|
159
|
+
if (!changeState) localStorage.setItem("state", statedAttributes);
|
|
164
160
|
|
|
165
|
-
|
|
161
|
+
element.dispatchEvent(
|
|
166
162
|
new CustomEvent("stateEnd", {
|
|
167
163
|
detail: {}
|
|
168
164
|
})
|
|
@@ -205,14 +201,14 @@ function _getStateId(attrValues, state_to) {
|
|
|
205
201
|
|
|
206
202
|
window.onload = function () {
|
|
207
203
|
if (!history.length) {
|
|
208
|
-
const statedAttributes = localStorage.getItem("
|
|
204
|
+
const statedAttributes = localStorage.getItem("state") || "";
|
|
209
205
|
history.replaceState(
|
|
210
206
|
{ statedAttributes, url: location.href, title: document.title },
|
|
211
207
|
document.title,
|
|
212
208
|
location.href
|
|
213
209
|
);
|
|
214
210
|
} else if (!history.state || history.state.url !== location.href) {
|
|
215
|
-
const statedAttributes = localStorage.getItem("
|
|
211
|
+
const statedAttributes = localStorage.getItem("state") || "";
|
|
216
212
|
history.pushState(
|
|
217
213
|
{ statedAttributes, url: location.href, title: document.title },
|
|
218
214
|
document.title,
|
|
@@ -224,10 +220,7 @@ window.onload = function () {
|
|
|
224
220
|
window.addEventListener("popstate", function (event) {
|
|
225
221
|
if (event.state) {
|
|
226
222
|
if (event.state.statedAttributes) {
|
|
227
|
-
localStorage.setItem(
|
|
228
|
-
"statedAttributes",
|
|
229
|
-
event.state.statedAttributes
|
|
230
|
-
);
|
|
223
|
+
localStorage.setItem("state", event.state.statedAttributes);
|
|
231
224
|
let elements = document.querySelectorAll("[state_id]");
|
|
232
225
|
initElements(elements);
|
|
233
226
|
}
|
|
@@ -243,20 +236,20 @@ window.addEventListener("popstate", function (event) {
|
|
|
243
236
|
}
|
|
244
237
|
});
|
|
245
238
|
|
|
246
|
-
|
|
239
|
+
Observer.init({
|
|
247
240
|
name: "CoCreateState",
|
|
248
|
-
|
|
241
|
+
types: ["addedNodes"],
|
|
249
242
|
selector: "[state_id]",
|
|
250
243
|
callback: function (mutation) {
|
|
251
244
|
initElement(mutation.target);
|
|
252
245
|
}
|
|
253
246
|
});
|
|
254
247
|
|
|
255
|
-
|
|
248
|
+
Action.init({
|
|
256
249
|
name: "state",
|
|
257
250
|
endEvent: "stateEnd",
|
|
258
|
-
callback: (
|
|
259
|
-
stateAttributes(
|
|
251
|
+
callback: (action) => {
|
|
252
|
+
stateAttributes(action.element);
|
|
260
253
|
}
|
|
261
254
|
});
|
|
262
255
|
|