@cocreate/state 1.20.1 → 1.22.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [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)
+
+
+### Features
+
+* $back and $forward operators for history control ([ffdeb5d](https://github.com/CoCreate-app/CoCreate-state/commit/ffdeb5d8d5331e51cbcd97043369f5eef1331c35))
+
 ## [1.20.1](https://github.com/CoCreate-app/CoCreate-state/compare/v1.20.0...v1.20.1) (2024-02-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/state",
-  "version": "1.20.1",
+  "version": "1.22.0",
   "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",

package/src/index.js

@@ -54,20 +54,28 @@ function _setAttributeValues(el, attrValues) {
 
     delete attrValues['overwrite']
 
-    Object.keys(attrValues).forEach(key => {
-        _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);
+    for (const key of Object.keys(attrValues)) {
+        if (attrValues[key] === '$back') {
+            window.history.back();
+            break;
+        } else if (attrValues[key] === '$forward') {
+            window.history.forward();
+            break;
+        } 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);
+            }
         }
-        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) {
@@ -97,15 +105,23 @@ async function stateAttributes(element) {
         elements.push(...nestedElements)
     }
 
+    let pushState = true
     for (let i = 0; i < elements.length; i++) {
         let attrValues = await _getAttributeValues(elements[i]);
+        if (attrValues.src === '$back' || attrValues.src === '$forward')
+            pushState = false
         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);
+    if (pushState && !element.closest('href')) {
+        // TODO: Handle $title when adding statedAttributes
+        let title = element.getAttribute('title') || document.title || '';
+
+        history.pushState({ statedAttributes, title, url: location.href }, title, location.href);
+    } else {
+        console.log('pushState: ', pushState)
     }
 
     localStorage.setItem('statedAttributes', statedAttributes);
@@ -141,6 +157,31 @@ function _getStateId(attrValues, state_to) {
         _setAttributeValues(element, attrValues);
 }
 
+window.onload = function () {
+    if (!history.state || history.state.url !== location.href) {
+        const statedAttributes = localStorage.getItem('statedAttributes') || '';
+        history.replaceState({ 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',