@cocreate/state 1.21.0 → 1.22.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.22.1](https://github.com/CoCreate-app/CoCreate-state/compare/v1.22.0...v1.22.1) (2024-04-29)
+
+
+### Bug Fixes
+
+* bump cocreate dependencies ([3972fe5](https://github.com/CoCreate-app/CoCreate-state/commit/3972fe5147f4e95b04df3188c3520ead5fd40a95))
+* state management ([13177bd](https://github.com/CoCreate-app/CoCreate-state/commit/13177bdf44ff2d3248e6ccce1b2c74222727d0c6))
+
+# [1.22.0](https://github.com/CoCreate-app/CoCreate-state/compare/v1.21.0...v1.22.0) (2024-04-29)
+
+
+### Bug Fixes
+
+* improved state handeling and history api ([1b26d24](https://github.com/CoCreate-app/CoCreate-state/commit/1b26d24670d01020df4f2f054ee3dd100a3f5643))
+
+
+### Features
+
+* popstate event handling ([df2432b](https://github.com/CoCreate-app/CoCreate-state/commit/df2432bc5090ef2942218d8ddb652f321e2c246c))
+
 # [1.21.0](https://github.com/CoCreate-app/CoCreate-state/compare/v1.20.1...v1.21.0) (2024-04-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/state",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "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.",
   "keywords": [
     "state",
@@ -58,11 +58,11 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.14.0",
-    "@cocreate/crud-client": "^1.31.0",
-    "@cocreate/element-prototype": "^1.15.0",
-    "@cocreate/local-storage": "^1.12.0",
-    "@cocreate/observer": "^1.14.0",
-    "@cocreate/uuid": "^1.9.0"
+    "@cocreate/actions": "^1.18.1",
+    "@cocreate/crud-client": "^1.33.8",
+    "@cocreate/element-prototype": "^1.22.2",
+    "@cocreate/local-storage": "^1.14.3",
+    "@cocreate/observer": "^1.16.0",
+    "@cocreate/uuid": "^1.11.1"
   }
 }

package/src/index.js

@@ -54,26 +54,20 @@ function _setAttributeValues(el, attrValues) {
 
     delete attrValues['overwrite']
 
-    Object.keys(attrValues).forEach(key => {
-        if (attrValues[key] === '$back')
-            window.history.back()
-        else if (attrValues[key] === '$forward')
-            window.history.forward()
-        else {
-            _setAttributeValue(el, key, attrValues[key], isOverwrite);
-            _setAttributeValue(el, `state-${key}`, attrValues[key], isOverwrite);
-            if (key == 'array' || key == 'object' || key == 'name') {
-                _setAttributeValue(el, `fetch-${key}`, attrValues[key], isOverwrite);
-                _setAttributeValue(el, `state-fetch-${key}`, attrValues[key], isOverwrite);
-            }
-            if (key == 'template') {
-                _setAttributeValue(el, 'template_id', attrValues[key], isOverwrite);
-            }
-            if (key == 'template_id') {
-                _setAttributeValue(el, 'template', attrValues[key], isOverwrite);
-            }
+    for (const key of Object.keys(attrValues)) {
+        _setAttributeValue(el, key, attrValues[key], isOverwrite);
+        _setAttributeValue(el, `state-${key}`, attrValues[key], isOverwrite);
+        if (key == 'array' || key == 'object' || key == 'name') {
+            _setAttributeValue(el, `fetch-${key}`, attrValues[key], isOverwrite);
+            _setAttributeValue(el, `state-fetch-${key}`, attrValues[key], isOverwrite);
         }
-    });
+        if (key == 'template') {
+            _setAttributeValue(el, 'template_id', attrValues[key], isOverwrite);
+        }
+        if (key == 'template_id') {
+            _setAttributeValue(el, 'template', attrValues[key], isOverwrite);
+        }
+    }
 }
 
 async function _setAttributeValue(element, attribute, value, isOverwrite) {
@@ -103,18 +97,33 @@ async function stateAttributes(element) {
         elements.push(...nestedElements)
     }
 
+    let changeState = false
     for (let i = 0; i < elements.length; i++) {
         let attrValues = await _getAttributeValues(elements[i]);
+        if (attrValues.src === '$back' || attrValues.href === '$back') {
+            changeState = true
+            window.history.back();
+            break;
+        } else if (attrValues.src === '$forward' || attrValues.href === '$forward') {
+            changeState = true
+            window.history.forward();
+            break;
+        }
+
         let state_to = elements[i].getAttribute('state_to');
         Object.assign(statedAttributes, { [`${state_to}`]: attrValues });
         _getStateId(attrValues, state_to);
     }
     statedAttributes = JSON.stringify(statedAttributes)
-    if (!element.closest('href')) {
-        history.pushState({ statedAttributes, title: '', url: '' }, '', location.href);
+    let href = element.closest('href')
+    if (!changeState && !href) {
+        // TODO: Handle $title when adding statedAttributes
+        let title = element.getAttribute('title') || document.title || '';
+        history.pushState({ statedAttributes, title, url: location.href }, title, location.href);
     }
 
-    localStorage.setItem('statedAttributes', statedAttributes);
+    if (!changeState)
+        localStorage.setItem('statedAttributes', statedAttributes);
 
     document.dispatchEvent(new CustomEvent('stateEnd', {
         detail: {}
@@ -147,6 +156,34 @@ function _getStateId(attrValues, state_to) {
         _setAttributeValues(element, attrValues);
 }
 
+window.onload = function () {
+    if (!history.length) {
+        const statedAttributes = localStorage.getItem('statedAttributes') || '';
+        history.replaceState({ statedAttributes, url: location.href, title: document.title }, document.title, location.href);
+    } else if (!history.state || history.state.url !== location.href) {
+        const statedAttributes = localStorage.getItem('statedAttributes') || '';
+        history.pushState({ statedAttributes, url: location.href, title: document.title }, document.title, location.href);
+    }
+};
+
+window.addEventListener('popstate', function (event) {
+    if (event.state) {
+        if (event.state.statedAttributes) {
+            localStorage.setItem('statedAttributes', event.state.statedAttributes);
+            let elements = document.querySelectorAll('[state_id]')
+            initElements(elements)
+        }
+
+        if (event.state.url && event.state.url !== window.location.href) {
+            if (event.state.title)
+                sessionStorage.setItem('currentPageTitle', event.state.title); // Store title in session storage
+
+            location.href = event.state.url; // Navigate if the URL is different
+        } else if (event.state.title) {
+            document.title = event.state.title; // Update the title if provided
+        }
+    }
+});
 
 observer.init({
     name: 'CoCreateState',