@cocreate/state 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [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.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,12 +54,14 @@ 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 {
+    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') {
@@ -73,7 +75,7 @@ function _setAttributeValues(el, attrValues) {
                 _setAttributeValue(el, 'template', attrValues[key], isOverwrite);
             }
         }
-    });
+    }
 }
 
 async function _setAttributeValue(element, attribute, value, isOverwrite) {
@@ -103,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);
@@ -147,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',