fix: iframe onload in firefox && retrieve cookie editor width server

src/server/public/scripts/modules/EditorInputs.js

@@ -115,7 +115,7 @@ export default class EditorInputs {
    * @return {[type]}   [description]
    */
   _inputReloadBlur(e) {
-    if (e.currentTarget.getAttribute('data-autocomplete') !== 'true') {
+    if (!e.target.parentNode.classList.contains('upload-wrapper') && e.currentTarget.getAttribute('data-autocomplete') !== 'true') {
       this.onReload._fire()
     }
   }

src/server/public/scripts/modules/EditorReload.js

@@ -53,36 +53,49 @@ export default class Reload {
   }
 
   inject(str) { 
-    var iframe = document.querySelector('#page-template')
+    var currentIframe = document.querySelector('#page-template')
+    var sibling = currentIframe.nextElementSibling
+    var parent = sibling.parentNode
+    var iframe = document.createElement('iframe')
+    var scrollTop = (IframeDocument('#page-template').body) ? IframeDocument('#page-template').body.scrollTop : 0;
+
+    parent.classList.add('reloading')
+
+    iframe.id = 'page-template'
+    iframe.src = 'about:blank'
+    iframe.sandbox = 'allow-same-origin allow-scripts allow-popups allow-forms'
+    iframe.setAttribute('data-iframe-src', document.querySelector('#page-template').getAttribute('data-iframe-src'))
 
     var initIframe = function () {
-      var iframeBody = IframeDocument('#page-template').body 
-      var scrollTop = iframeBody.scrollTop
-
       var doc = iframe.contentWindow.document 
       str = str.replace(/<\/head>/, '<base href="/" /></head>') 
       var template = Handlebars.compile(str, {noEscape: true})
       str = template(json)
-      doc.open() 
+      doc.open('text/html', 'replace') 
       doc.write(str) 
       doc.close()
 
       setTimeout(function () { 
         var iframeDoc = IframeDocument('#page-template') 
-        if(typeof iframeDoc !== 'undefined' && iframeDoc !== null 
-          && typeof iframeDoc.body !== 'undefined' && iframeDoc.body !== null) { 
+        if(typeof iframeDoc !== 'undefined' && iframeDoc !== null && typeof iframeDoc.body !== 'undefined' && iframeDoc.body !== null) { 
           iframeDoc.body.scrollTop = scrollTop 
         } 
       }, 1000)
     }
 
-    if(IframeDocument('#page-template').body) initIframe()
-    else iframe.onload = initIframe;
+    iframe.onload = function () {
+      initIframe()
+      setTimeout(function () { parent.classList.remove('reloading') }, 350)
+    }
+
+    currentIframe.remove()
+    parent.insertBefore(iframe, sibling);
   }
 
   reload() {
     var iframe = document.querySelector('#page-template')
     var json = JSON.parse(JSON.stringify(this._json.data))
+    iframe.parentNode.classList.add('reloading')
 
     delete json.abe_source
     var data = qs.stringify({

src/server/routes/get-main.js

@@ -112,7 +112,12 @@ var route = function(req, res, next) {
       var page = new Page(_json.abe_meta.template, text, _json, false) 
       pageHtml = page.html.replace(/"/g, '"').replace(/'/g, '\'').replace(/<!--/g, '<ABE!--').replace(/-->/g, '--ABE>')
     }
-
+
+    var editorWidth = '33%'
+    req.headers && req.headers.cookie.split(';').forEach(function(cookie) {
+      var parts = cookie.match(/(.*?)=(.*)$/)
+      if(parts[1] === 'editorWidth') editorWidth = parts[2]
+    })
     var EditorVariables = {
       pageHtml: pageHtml,
       isHome: isHome,
@@ -134,7 +139,8 @@ var route = function(req, res, next) {
         req: req
       },
       abeVersion: pkg.version,
-      nonce: '\'nonce-' + res.locals.nonce + '\''
+      nonce: '\'nonce-' + res.locals.nonce + '\'',
+      editorWidth: editorWidth
     }
     EditorVariables = abeExtend.hooks.instance.trigger('afterVariables', EditorVariables)
 

src/server/sass/modules/_loader.scss

@@ -0,0 +1,155 @@
+.reload-loader-wrapper{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.3);
+  transition:all 100ms ease-in;
+  opacity: 0;
+}
+
+.reloading{
+  .reload-loader-wrapper{
+    opacity: 1;
+  }
+}
+
+.sk-fading-circle {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -20px;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #FFF;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg); 
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg); 
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s; 
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s; 
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s; 
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s; 
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s; 
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s; 
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s; 
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; } 
+}

src/server/sass/styles.scss

@@ -15,4 +15,5 @@
 @import 'modules/_iframe';
 @import 'modules/_status';
 @import 'modules/_labels';
+@import 'modules/_loader';
 @import 'modules/_bootstrap-extend';

src/server/views/partials/engine.html

@@ -1,5 +1,5 @@
 {{#if form}}
-<div class="no-gutter half-view form-wrapper status-{{@root.json.abe_meta.status}}" data-width="33%">
+<div class="no-gutter half-view form-wrapper status-{{@root.json.abe_meta.status}}" data-width="{{editorWidth}}" style="width:{{editorWidth}}">
   <!-- *************** btn toolbar *************** -->
   <div class="toolbar">  
     <div class="btns">

src/server/views/partials/page.html

@@ -1,12 +1,28 @@
 <!-- *************** right iframe preview *************** -->
-<div class="no-gutter half-view iframe-wrapper">
+<div class="no-gutter half-view iframe-wrapper reloading">
   {{#if isHome}}
   {{else}}
   <iframe id="page-template" data-iframe-src="/abe/page/{{@root.json.abe_meta.link}}" src="about:blank" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
   {{/if}}
   <div class="browser-size"></div>
   <div class="ruler-over"></div>
   <div class="ruler"></div>
+  <div class="reload-loader-wrapper">
+    <div class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </div>
   <div class="open-engine">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
   </div>