@glitchr/transparent 1.0.14 → 1.0.17

package/package.json

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

package/src/css/{index.css → index.scss}

@@ -13,3 +13,25 @@ img[data-src]:not(.loaded) {
 	75%		{ background-color: #EFEFEFAA;}
 	100%	{ background-color: transparent;}
 }
+
+@keyframes blinkOpacity {
+	0%		{ opacity: 1; }
+	25%		{ opacity: 0; }
+	50%		{ opacity: 1; }
+	75%		{ opacity: 0; }
+	100%	{ opacity: 1; }
+}
+
+.error
+{
+	animation: blink 5s infinite;
+
+	width:100vw;
+	height: 100vh;
+
+	background-image:url("../images/error.svg");
+	background-position: center;
+	background-repeat: no-repeat;
+
+	animation: blinkOpacity 2s infinite;
+}

package/src/images/error.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <g>
+  <title>Layer 1</title>
+  <g stroke="null" id="svg_1">
+   <rect stroke="null" id="svg_2" x="0" y="0" opacity="0.3" fill="rgba(105,77,255,0)" height="256.17189" width="256.265636"/>
+   <path stroke="null" id="svg_3" fill="#fff" d="m128.132818,21.347657a106.777348,106.738287 0 1 0 106.777348,106.738287a106.777348,106.738287 0 0 0 -106.777348,-106.738287z"/>
+   <path stroke="null" id="svg_4" fill="#dd1e1e" d="m128.132818,32.021486a96.099614,96.064459 0 1 0 96.099614,96.064459a96.099614,96.064459 0 0 0 -96.099614,-96.064459zm55.524221,130.220711l-21.35547,21.347657l-34.168751,-34.156252l-34.168751,34.156252l-21.35547,-21.347657l34.168751,-34.156252l-34.168751,-34.156252l21.35547,-21.347657l34.168751,34.156252l34.168751,-34.156252l21.35547,21.347657l-34.168751,34.156252l34.168751,34.156252z"/>
+  </g>
+ </g>
+</svg>

package/src/index.js

@@ -1,2 +1,2 @@
 import './js/transparent.js';
-import './css/index.css';
+import './css/index.scss';

package/src/js/transparent.js

@@ -165,6 +165,7 @@
         "response_text": {},
         "response_limit": 25,
         "throttle": 1000,
+        "rescue_reload": 5000,
         "identifier": "#page",
         "loader": "#loader",
         "smoothscroll_duration": "200ms",
@@ -899,21 +900,27 @@
 
     Transparent.rescue = function(dom)
     {
-        Transparent.activeOut();
-        
         console.error("Rescue mode.. called");
         rescueMode = true;
 
         var head = $(dom).find("head").html();
         var body = $(dom).find("body").html();
-        if(head == undefined || body == undefined)
-            window.reload();
 
-        document.head.innerHTML = $(dom).find("head").html();
-        document.body.innerHTML = $(dom).find("body").html();
+        if(head == undefined || body == "undefined") {
+            
+            $(Settings.identifier).html("<div class='error'></div>");
+
+            setTimeout(function() { window.location.reload(); }, Transparent.parseDuration(Settings["rescue_reload"]));
+
+        } else {
 
-        Transparent.evalScript($("head")[0]);
-        Transparent.evalScript($("body")[0]);
+            document.head.innerHTML = $(dom).find("head").html();
+            document.body.innerHTML = $(dom).find("body").html();
+            Transparent.evalScript($("head")[0]);
+            Transparent.evalScript($("body")[0]);
+        }
+        
+        Transparent.activeOut();
     }
 
     Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
@@ -1583,10 +1590,8 @@
                 }, type != "POST");
         }
 
-        if(Transparent.isRescueMode()) window.location.href = url;
-
         if(history.state && !Transparent.hasResponse(history.state.uuid))
-            Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
+                Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
 
         // This append on user click (e.g. when user push a link)
         // It is null when dev is pushing or replacing state