Add data param to .load() method in navigation for one-time data

Author: HTMLGuyLLC

README-template.md

@@ -122,7 +122,7 @@ setIncomingElement|el:string|self|a selector string for the element being retrie
 getIncomingElement| |string|
 setReplaceElement|el:string|self|a selector string for the element on the current page you want the new HTML to replace
 getReplaceElement| |string|
-load|url:string, callback:function/null, incoming_el:string/null, replace_el:string/null, push_state:bool|void|pulls content from the provided URL and puts it on the current page - also swaps out the page title, metas, and much more
+load|url:string, callback:function/null, data:object, incoming_el:string/null, replace_el:string/null, push_state:bool|void|pulls content from the provided URL and puts it on the current page - also swaps out the page title, metas, and much more
 loaderEnabled|n/a|bool|property to toggle the slow request loader on/off
 setLoaderDelay|delay:int|self|set how long a request should take in ms before the loader displays
 getLoaderDelay| |self|
@@ -241,18 +241,23 @@ navigation.setDataItem('product_id', 1);
 navigation.load('/my-page', function(el, el_selector, replaced_selector, route, data){
     //my page is now loaded
     
-    //get the product_id that was set
+    //get the product_id that was set using .setDataItem() above
     const product_id = data.product_id;
     
-    //now clear it so it's gone for the next page load
+    //get some_other_id that was provided as the third .load param (right below this callback)
+    //some_other_id is only for this onload callback and does not persist
+    //the product_id value above will persist unless cleared
+    const some_other_id = data.some_other_id;
+    
+    //now clear product_id it so it's gone for the next page load
     navigation.clearData();
-});
+}, {some_other_id: 2});
 
 //in some cases, you'll want to grab a different element from the URL
 //this example grabs .popup-content from /my-popup and replaces .current-popup
 navigation.load('/my-popup', function(el, el_selector, replaced_selector, route, data){
    //now the new element is on the page
-}, '.popup-content', '.current-popup');
+}, {}, '.popup-content', '.current-popup');
 ```
 
 ---

README.md

@@ -122,7 +122,7 @@ setIncomingElement|el:string|self|a selector string for the element being retrie
 getIncomingElement| |string|
 setReplaceElement|el:string|self|a selector string for the element on the current page you want the new HTML to replace
 getReplaceElement| |string|
-load|url:string, callback:function/null, incoming_el:string/null, replace_el:string/null, push_state:bool|void|pulls content from the provided URL and puts it on the current page - also swaps out the page title, metas, and much more
+load|url:string, callback:function/null, data:object, incoming_el:string/null, replace_el:string/null, push_state:bool|void|pulls content from the provided URL and puts it on the current page - also swaps out the page title, metas, and much more
 loaderEnabled|n/a|bool|property to toggle the slow request loader on/off
 setLoaderDelay|delay:int|self|set how long a request should take in ms before the loader displays
 getLoaderDelay| |self|
@@ -241,18 +241,23 @@ navigation.setDataItem('product_id', 1);
 navigation.load('/my-page', function(el, el_selector, replaced_selector, route, data){
     //my page is now loaded
     
-    //get the product_id that was set
+    //get the product_id that was set using .setDataItem() above
     const product_id = data.product_id;
     
-    //now clear it so it's gone for the next page load
+    //get some_other_id that was provided as the third .load param (right below this callback)
+    //some_other_id is only for this onload callback and does not persist
+    //the product_id value above will persist unless cleared
+    const some_other_id = data.some_other_id;
+    
+    //now clear product_id it so it's gone for the next page load
     navigation.clearData();
-});
+}, {some_other_id: 2});
 
 //in some cases, you'll want to grab a different element from the URL
 //this example grabs .popup-content from /my-popup and replaces .current-popup
 navigation.load('/my-popup', function(el, el_selector, replaced_selector, route, data){
    //now the new element is on the page
-}, '.popup-content', '.current-popup');
+}, {}, '.popup-content', '.current-popup');
 ```
 
 ---

dist/jpack.bundled.min.js

@@ -151,15 +151,16 @@ export const navigation = {
      * 3) Replaces it on the page (and all the magic replacePageContent does, see comments on that method below)
      * 4) If there's a callback provided, it'll be run afterwards (it receives the newly replaced element as a param)
      *
-     * On error, it triggers a navigation failure and provides the error message
+     * On error, it triggers onFail callbacks you've attached and provides the error message
      *
      * @param url
      * @param callback
+     * @param data
      * @param incoming_el
      * @param replace_el
      * @param push_state
      */
-    load: function (url, callback, incoming_el, replace_el, push_state = true) {
+    load: function (url, callback, data = {}, incoming_el, replace_el, push_state = true) {
         const self = this;
 
         //defaults
@@ -171,8 +172,10 @@ export const navigation = {
         if (typeof incoming_el !== 'string') throw `incoming_el (${incoming_el}) must be a string`;
         if (typeof replace_el !== 'string') throw `replace_el (${replace_el}) must be a string`;
 
-        //cache in case it changes during this process because axios is async
-        const data = self.getData();
+        //merge data set on navigation with data for this request
+        data = {...self._data, ...data};
+
+        //cache route (axios is async)
         const current_route = self.getRouteFromMeta();
 
         self.showLoader();
@@ -391,7 +394,7 @@ export const navigation = {
 
         //back button
         window.onpopstate = function (e) {
-            self.load(request.getURIWithQueryString(), null, self.getIncomingElement(), self.getReplaceElement(), false);
+            self.load(request.getURIWithQueryString(), null, {}, self.getIncomingElement(), self.getReplaceElement(), false);
         };
 
         return this;

dist/jpack.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@htmlguyllc/jpack",
-  "version": "9.0.12",
+  "version": "9.0.13",
   "description": "Core Javascript Library of Everyday Objects, Events, and Utilities",
   "keywords": [
     "javascript",

es/navigation/index.js

@@ -83,7 +83,7 @@ describe('clone', function() {
             obj.name = 'tom';
             if( obj.name === objClone.name ) throw 'Obj was modified: '+JSON.stringify(obj);
             obj = 'string now';
-            if( objClone === 'string now' ) throw 'Obj was modified: '+JSON.stringify(obj);
+            if( objClone === obj ) throw 'Obj was modified: '+JSON.stringify(obj);
 
             //array
             var arr = [1,2];
@@ -96,7 +96,7 @@ describe('clone', function() {
             arr.push(3);
             if( arrClone[2] === 3 ) throw 'Array was modified: '+JSON.stringify(arrClone);
             arr = 'string now';
-            if( typeof arrClone === 'string' ) throw `Array was modified: ${arrClone}`;
+            if( arrClone === arr ) throw `Array was modified: ${arrClone}`;
         });
     });
 });