@glitchr/transparent 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/transparent",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Transparent SPA Application",
   "main": "src/index.js",
   "access": "public",

package/src/js/transparent.js

@@ -419,6 +419,12 @@
         Transparent.configure({'x-ajax-request': true});
         Transparent.configure(options);
 
+        if(Settings.debug) {
+
+            if (Settings.disable) console.debug("Transparent is disabled..");
+            else console.debug("Transparent is running..");
+        }
+
         isReady = true;
 
         dispatchEvent(new Event('transparent:'+Transparent.state.READY));
@@ -522,10 +528,6 @@
 
             if(el.target && el.target.tagName == "FORM") {
 
-                // Action must be prevented here
-                // This is specific to form submission
-                el.preventDefault();
-
                 var href = el.target.getAttribute("action");
                 if(!href) href = location.pathname + href;
 
@@ -1416,6 +1418,7 @@
         return elementsXY;
     }
 
+    var formSubmission = false;
     function __main__(e) {
 
         // Disable transparent JS (e.g. during development..)
@@ -1434,7 +1437,15 @@
         var target = Transparent.isElement(link[2]) ? link[2] : undefined;
         var data   = Transparent.isElement(link[2]) ? undefined : link[2];
 
+        // Wait for transparent window event to be triggered
+        if (!isReady) return;
+
+        if (e.type != Transparent.state.POPSTATE   &&
+            e.type != Transparent.state.HASHCHANGE && !$(this).find(Settings.identifier).length) return;
+
         var form   = target != undefined && target.tagName == "FORM" ? target : undefined;
+        formSubmission = false;
+
         if (form) {
 
             data = new FormData();
@@ -1448,19 +1459,20 @@
                     } else if(this.type == "file") {
 
                         for(var i = 0; i < this.files.length; i++)
-                            data.append(this.name, field.files[i]);
+                            data.append(this.name, this.files[i]);
 
                     } else data.append(this.name, this.value);
                 });
 
-            $(form).find(':submit').attr('disabled', 'disabled');
-        }
+            // Force page reload
+            formSubmission = true; // mark as form submission
 
-        // Wait for transparent window event to be triggered
-        if (!isReady) return;
+            if ($(e.target).hasClass(Transparent.state.RELOAD)) return;
+            if ($(form).hasClass(Transparent.state.RELOAD)) return;
 
-        if (e.type != Transparent.state.POPSTATE   &&
-            e.type != Transparent.state.HASHCHANGE && !$(this).find(Settings.identifier).length) return;
+            if(e.type == "submit")
+                $(form).find(':submit').attr('disabled', 'disabled');
+        }
 
         // Specific page exception
         for(i = 0; i < Settings.exceptions.length; i++) {
@@ -1680,12 +1692,16 @@
     // Overload onpopstate
     if(Settings.disable) {
 
+        if(Settings.debug) console.debug("Transparent is disabled..");
+
         var states    = Object.values(Transparent.state);
         var htmlClass = Array.from(($("html").attr("class") || "").split(" ")).filter(x => !states.includes(x));
         Transparent.html.removeClass(states).addClass(htmlClass.join(" ")+" "+Transparent.state.ROOT+" "+Transparent.state.READY+" "+Transparent.state.DISABLE);
 
     } else {
 
+        if(Settings.debug) console.debug("Transparent is running..");
+
         window.onpopstate   = __main__; // Onpopstate pop out straight to previous page.. this creates a jump while changing pages with hash..
         window.onhashchange = __main__;
 
@@ -1702,18 +1718,22 @@
                         if(this.type == "file") {
 
                             for(var i = 0; i < this.files.length; i++)
-                                formData.append(this.name, field.files[i]);
+                                formData.append(this.name+"["+i+"]", this.files[i].name+";"+this.files[i].size+";"+this.files[i].lastModified);
 
                         } else formData.append(this.name, this.value);
                     });
 
-                for (var [fieldName,fieldValue] of formData.entries())
-                    formDataBefore[fieldName] = fieldValue;
+                for (var [fieldName,fieldValue] of formData.entries()) {
+
+                    if(!fieldName.endsWith("[]") && fieldName != "undefined")
+                        formDataBefore[fieldName] = fieldValue;
+                }
             });
         });
 
-        window.onbeforeunload = function() {
+        window.onbeforeunload = function(e) {
 
+            if(formSubmission) return; // Do not display on form submission
             if(Settings.disable) return;
 
             var preventDefault = false;
@@ -1727,20 +1747,31 @@
                     if(this.type == "file") {
 
                         for(var i = 0; i < this.files.length; i++)
-                            formData.append(this.name, field.files[i]);
+                            formData.append(this.name+"["+i+"]", this.files[i].name+";"+this.files[i].size+";"+this.files[i].lastModified);
 
                     } else formData.append(this.name, this.value);
                 });
 
                 for (var [fieldName,fieldValue] of formData.entries()) {
-                    formDataAfter[fieldName] = fieldValue;
+
+                    if(!fieldName.endsWith("[]") && fieldName != "undefined")
+                        formDataAfter[fieldName] = fieldValue;
                 }
             });
 
-            var formDataBeforeKeys = Object.entries(formDataBefore).keys();
-            var formDataAfterKeys  = Object.entries(formDataAfter).keys();
+            var formDataBeforeKeys    = Object.keys(formDataBefore);
+            var formDataAfterKeys     = Object.keys(formDataAfter);
+            var formDataBeforeEntries = Object.entries(formDataBefore);
+            var formDataAfterEntries  = Object.entries(formDataAfter);
+            function compare(a, b) { return JSON.stringify(a) === JSON.stringify(b); }
+            function compareKeys(a, b) {
+
+                var aKeys = Object.keys(a).sort();
+                var bKeys = Object.keys(b).sort();
+                return JSON.stringify(aKeys) === JSON.stringify(bKeys);
+            }
 
-            if(formDataAfterKeys != formDataAfterKeys) preventDefault = true;
+            if(!compareKeys(formDataBeforeKeys, formDataAfterKeys)) preventDefault = true;
             else {
 
                 for (var [fieldName,fieldValueAfter] of Object.entries(formDataAfter)) {