erp5_notebook: loading spinner in jsmd editor

- jsmd eval gadget notifies jsmd viewer gadget when notebook execution finishes so it handles the loading spinner

bt5/erp5_notebook/SkinTemplateItem/portal_skins/erp5_notebook/gadget_jsmd_eval.js.js

@@ -552,6 +552,9 @@
         var pre = document.createElement('pre');
         pre.textContent = error;
         document.body.appendChild(pre);
+      })
+      .push(function () {
+        window.parent.postMessage("jsmd_eval_done", window.origin);
       });
 
   }, false);

bt5/erp5_notebook/SkinTemplateItem/portal_skins/erp5_notebook/gadget_jsmd_viewer.css.css

@@ -32,3 +32,36 @@ iframe {
   margin: 0;
   padding: 0;
 }
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('font-awesome/font-awesome-webfont.eot');
+  src: url('font-awesome/font-awesome-webfont.eot') format('embedded-opentype'), url('font-awesome/font-awesome-webfont.woff2') format('woff2'), url('font-awesome/font-awesome-webfont.woff') format('woff'), url('font-awesome/font-awesome-webfont.ttf') format('truetype'), url('font-awesome/font-awesome-webfont.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.nb-ui-icon-spinner {
+  opacity: 1;
+  margin: 10px;
+  margin-top: 25px;
+}
+
+.nb-ui-icon-spinner::before {
+  font-family: FontAwesome;
+  content: "\f110";
+  animation: spin 0.5s infinite linear;
+  margin-right: 5px;
+}
+
+nb-loader {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  font-size: 300%;
+  animation-name: fadein;
+  animation-duration: 0.2s;
+  animation-delay: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in;
+}
\ No newline at end of file

bt5/erp5_notebook/SkinTemplateItem/portal_skins/erp5_notebook/gadget_jsmd_viewer.js.js

 /*global window, rJS, console, RSVP, jIO, DOMParser, Blob, document,
-         URL, loopEventListener */
+         URL, loopEventListener, promiseEventListener */
 /*jslint nomen: true, indent: 2, maxerr: 3 */
 (function (window, rJS, RSVP, jIO, DOMParser, document, URL,
            loopEventListener) {
@@ -47,13 +47,20 @@
 
           // Insert the JSMD value inside the HTML
           var script = document.createElement('script'),
-            iframe = document.createElement("iframe");
+            iframe = document.createElement("iframe"),
+            loading_spinner = document.createElement("div");
 
           script.setAttribute('type', 'text/x-jsmd');
           script.setAttribute('id', 'jsmd-source');
           script.textContent = gadget.state.value;
           doc.head.appendChild(script);
 
+          loading_spinner.setAttribute('id', 'js-spinner');
+          loading_spinner.classList.add("nb-ui-icon-spinner");
+          loading_spinner.classList.add("nb-ui-btn-icon-notext");
+          loading_spinner.classList.add("nb-loader");
+          loading_spinner.innerHTML = "Loading notebook...";
+
 /*
           blob = new Blob([doc.documentElement.outerHTML],
                           {type: "text/html;charset=UTF-8"});
@@ -67,7 +74,24 @@
           // iframe.setAttribute("src", evt.target.result);
           iframe.setAttribute("srcdoc", doc.documentElement.outerHTML);
           gadget.element.innerHTML = iframe.outerHTML;
+          gadget.element.prepend(loading_spinner);
           gadget.listenResize();
+          gadget.listenMessage();
+        });
+    })
+
+    .declareJob('listenMessage', function () {
+      var gadget = this;
+      return new RSVP.Queue()
+        .push(function () {
+          return promiseEventListener(window, "message", true);
+        })
+        .push(function (event) {
+          //only handle jsmd eval child messages
+          if ((event.origin !== window.origin) || (event.data !== "jsmd_eval_done"))
+            return gadget.listenMessage();
+          console.log("JSMD Eval Done.");
+          document.querySelector('[id="js-spinner"]').remove();
         });
     })
 
@@ -82,4 +106,4 @@
       return loopEventListener(window, 'resize', false, resize);
     });
 
-}(window, rJS, RSVP, jIO, DOMParser, document, URL, loopEventListener));
\ No newline at end of file
+}(window, rJS, RSVP, jIO, DOMParser, document, URL, loopEventListener, promiseEventListener));
\ No newline at end of file