@cocreate/state 1.22.0 → 1.22.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/docs/index.html +13 -35
  3. package/package.json +7 -7
  4. package/src/index.js +30 -28
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [1.22.2](https://github.com/CoCreate-app/CoCreate-state/compare/v1.22.1...v1.22.2) (2024-06-12)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * bump cocreate dependencies ([789df84](https://github.com/CoCreate-app/CoCreate-state/commit/789df844610cffa93ddb889d52a3560b153fb1bb))
7
+ * svg icon class ([bf92741](https://github.com/CoCreate-app/CoCreate-state/commit/bf92741f5fda1674a67ae248cadf822657493853))
8
+
9
+ ## [1.22.1](https://github.com/CoCreate-app/CoCreate-state/compare/v1.22.0...v1.22.1) (2024-04-29)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * bump cocreate dependencies ([3972fe5](https://github.com/CoCreate-app/CoCreate-state/commit/3972fe5147f4e95b04df3188c3520ead5fd40a95))
15
+ * state management ([13177bd](https://github.com/CoCreate-app/CoCreate-state/commit/13177bdf44ff2d3248e6ccce1b2c74222727d0c6))
16
+
1
17
  # [1.22.0](https://github.com/CoCreate-app/CoCreate-state/compare/v1.21.0...v1.22.0) (2024-04-29)
2
18
 
3
19
 
package/docs/index.html CHANGED
@@ -81,43 +81,33 @@
81
81
  class="margin-right:15px"
82
82
  share-network="twitter"
83
83
  title="Share on twitter"
84
- ><i
85
- class="height:20px fill:#505050"
86
- src="/assets/svg/twitter.svg"></i
84
+ ><i src="/assets/svg/twitter.svg"></i
87
85
  ></a>
88
86
  <a
89
87
  class="margin-right:15px"
90
88
  share-network="facebook"
91
89
  title="Share on Facebook"
92
- ><i
93
- class="height:20px fill:#505050"
94
- src="/assets/svg/facebook.svg"></i
90
+ ><i src="/assets/svg/facebook.svg"></i
95
91
  ></a>
96
92
  <a
97
93
  class="margin-right:15px"
98
94
  share-network="instagram"
99
95
  title="Share on instagram"
100
- ><i
101
- class="height:20px fill:#505050"
102
- src="/assets/svg/instagram.svg"></i
96
+ ><i src="/assets/svg/instagram.svg"></i
103
97
  ></a>
104
98
  </div>
105
99
  <a
106
100
  class="margin-right:15px"
107
101
  share-network="share"
108
102
  title="Share on share"
109
- ><i
110
- class="height:20px fill:#505050"
111
- src="/assets/svg/share-alt.svg"></i
103
+ ><i src="/assets/svg/share-alt.svg"></i
112
104
  ></a>
113
105
  </div>
114
106
  <a
115
107
  href="https://github.com/CoCreate-app/CoCreate-state"
116
108
  target="_blank"
117
109
  class="margin-right:15px"
118
- ><i
119
- class="height:20px fill:#505050"
120
- src="/assets/svg/github.svg"></i
110
+ ><i src="/assets/svg/github.svg"></i
121
111
  ></a>
122
112
  </div>
123
113
  </div>
@@ -144,9 +134,7 @@
144
134
  <a
145
135
  class="margin-left:10px display:none"
146
136
  href="#state-install"
147
- ><i
148
- class="height:20px fill:#505050"
149
- src="/assets/svg/link.svg"></i
137
+ ><i src="/assets/svg/link.svg"></i
150
138
  ></a>
151
139
  </span>
152
140
  </div>
@@ -170,9 +158,7 @@
170
158
  <a
171
159
  class="margin-left:10px display:none"
172
160
  href="#state-usage"
173
- ><i
174
- class="height:20px fill:#505050"
175
- src="/assets/svg/link.svg"></i
161
+ ><i src="/assets/svg/link.svg"></i
176
162
  ></a>
177
163
  </span>
178
164
  </div>
@@ -205,9 +191,7 @@
205
191
  <a
206
192
  class="margin-left:10px display:none"
207
193
  href="#state-attributes"
208
- ><i
209
- class="height:20px fill:#505050"
210
- src="/assets/svg/link.svg"></i
194
+ ><i src="/assets/svg/link.svg"></i
211
195
  ></a>
212
196
  </span>
213
197
  </div>
@@ -258,9 +242,7 @@
258
242
  <a
259
243
  class="margin-left:10px display:none"
260
244
  href="#state-demo"
261
- ><i
262
- class="height:20px fill:#505050"
263
- src="/assets/svg/link.svg"></i
245
+ ><i src="/assets/svg/link.svg"></i
264
246
  ></a>
265
247
  </span>
266
248
  </div>
@@ -304,7 +286,7 @@
304
286
  toggle="code-height"
305
287
  toggle-selector="#demo-code"
306
288
  ><i
307
- class="height:18px fill:#505050"
289
+ class="height:18px"
308
290
  src="/assets/svg/eye.svg"></i
309
291
  ></a>
310
292
  <a
@@ -315,18 +297,14 @@
315
297
  hide="#eye-slash"
316
298
  toggle="code-height"
317
299
  toggle-selector="#demo-code"
318
- ><i
319
- class="height:20px fill:#505050"
320
- src="/assets/svg/eye-slash.svg"></i
300
+ ><i src="/assets/svg/eye-slash.svg"></i
321
301
  ></a>
322
302
  <a
323
303
  class="margin-right:10px"
324
304
  id="code"
325
305
  show="#code-slash"
326
306
  hide="#code, #demo-code"
327
- ><i
328
- class="height:20px fill:#505050"
329
- src="/assets/svg/code.svg"></i
307
+ ><i src="/assets/svg/code.svg"></i
330
308
  ></a>
331
309
  <a
332
310
  class="margin-right:10px"
@@ -335,7 +313,7 @@
335
313
  show="#code, #demo-code"
336
314
  hide="#code-slash"
337
315
  ><i
338
- class="display:flex height:18px fill:#505050"
316
+ class="height:18px"
339
317
  src="/assets/svg/code.svg"></i
340
318
  ></a>
341
319
  <a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/state",
3
- "version": "1.22.0",
3
+ "version": "1.22.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",
@@ -58,11 +58,11 @@
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
60
  "dependencies": {
61
- "@cocreate/actions": "^1.14.0",
62
- "@cocreate/crud-client": "^1.31.0",
63
- "@cocreate/element-prototype": "^1.15.0",
64
- "@cocreate/local-storage": "^1.12.0",
65
- "@cocreate/observer": "^1.14.0",
66
- "@cocreate/uuid": "^1.9.0"
61
+ "@cocreate/actions": "^1.18.2",
62
+ "@cocreate/crud-client": "^1.33.9",
63
+ "@cocreate/element-prototype": "^1.23.0",
64
+ "@cocreate/local-storage": "^1.15.0",
65
+ "@cocreate/observer": "^1.16.1",
66
+ "@cocreate/uuid": "^1.11.2"
67
67
  }
68
68
  }
package/src/index.js CHANGED
@@ -55,25 +55,17 @@ function _setAttributeValues(el, attrValues) {
55
55
  delete attrValues['overwrite']
56
56
 
57
57
  for (const key of Object.keys(attrValues)) {
58
- if (attrValues[key] === '$back') {
59
- window.history.back();
60
- break;
61
- } else if (attrValues[key] === '$forward') {
62
- window.history.forward();
63
- break;
64
- } else {
65
- _setAttributeValue(el, key, attrValues[key], isOverwrite);
66
- _setAttributeValue(el, `state-${key}`, attrValues[key], isOverwrite);
67
- if (key == 'array' || key == 'object' || key == 'name') {
68
- _setAttributeValue(el, `fetch-${key}`, attrValues[key], isOverwrite);
69
- _setAttributeValue(el, `state-fetch-${key}`, attrValues[key], isOverwrite);
70
- }
71
- if (key == 'template') {
72
- _setAttributeValue(el, 'template_id', attrValues[key], isOverwrite);
73
- }
74
- if (key == 'template_id') {
75
- _setAttributeValue(el, 'template', attrValues[key], isOverwrite);
76
- }
58
+ _setAttributeValue(el, key, attrValues[key], isOverwrite);
59
+ _setAttributeValue(el, `state-${key}`, attrValues[key], isOverwrite);
60
+ if (key == 'array' || key == 'object' || key == 'name') {
61
+ _setAttributeValue(el, `fetch-${key}`, attrValues[key], isOverwrite);
62
+ _setAttributeValue(el, `state-fetch-${key}`, attrValues[key], isOverwrite);
63
+ }
64
+ if (key == 'template') {
65
+ _setAttributeValue(el, 'template_id', attrValues[key], isOverwrite);
66
+ }
67
+ if (key == 'template_id') {
68
+ _setAttributeValue(el, 'template', attrValues[key], isOverwrite);
77
69
  }
78
70
  }
79
71
  }
@@ -105,26 +97,33 @@ async function stateAttributes(element) {
105
97
  elements.push(...nestedElements)
106
98
  }
107
99
 
108
- let pushState = true
100
+ let changeState = false
109
101
  for (let i = 0; i < elements.length; i++) {
110
102
  let attrValues = await _getAttributeValues(elements[i]);
111
- if (attrValues.src === '$back' || attrValues.src === '$forward')
112
- pushState = false
103
+ if (attrValues.src === '$back' || attrValues.href === '$back') {
104
+ changeState = true
105
+ window.history.back();
106
+ break;
107
+ } else if (attrValues.src === '$forward' || attrValues.href === '$forward') {
108
+ changeState = true
109
+ window.history.forward();
110
+ break;
111
+ }
112
+
113
113
  let state_to = elements[i].getAttribute('state_to');
114
114
  Object.assign(statedAttributes, { [`${state_to}`]: attrValues });
115
115
  _getStateId(attrValues, state_to);
116
116
  }
117
117
  statedAttributes = JSON.stringify(statedAttributes)
118
- if (pushState && !element.closest('href')) {
118
+ let href = element.closest('href')
119
+ if (!changeState && !href) {
119
120
  // TODO: Handle $title when adding statedAttributes
120
121
  let title = element.getAttribute('title') || document.title || '';
121
-
122
122
  history.pushState({ statedAttributes, title, url: location.href }, title, location.href);
123
- } else {
124
- console.log('pushState: ', pushState)
125
123
  }
126
124
 
127
- localStorage.setItem('statedAttributes', statedAttributes);
125
+ if (!changeState)
126
+ localStorage.setItem('statedAttributes', statedAttributes);
128
127
 
129
128
  document.dispatchEvent(new CustomEvent('stateEnd', {
130
129
  detail: {}
@@ -158,9 +157,12 @@ function _getStateId(attrValues, state_to) {
158
157
  }
159
158
 
160
159
  window.onload = function () {
161
- if (!history.state || history.state.url !== location.href) {
160
+ if (!history.length) {
162
161
  const statedAttributes = localStorage.getItem('statedAttributes') || '';
163
162
  history.replaceState({ statedAttributes, url: location.href, title: document.title }, document.title, location.href);
163
+ } else if (!history.state || history.state.url !== location.href) {
164
+ const statedAttributes = localStorage.getItem('statedAttributes') || '';
165
+ history.pushState({ statedAttributes, url: location.href, title: document.title }, document.title, location.href);
164
166
  }
165
167
  };
166
168