jsmd editor improvements

See merge request !6

bt5/erp5_notebook/SkinTemplateItem/portal_skins/erp5_notebook/gadget_jsmd_eval.css.css

@@ -5,3 +5,60 @@ div.code-block {
   margin: 40px 10px;
   padding-left: 10px;
 }
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Roboto", Arial, sans-serif;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+h2 {
+  font-weight: normal;
+  font-size: 25px;
+  line-height: 33px;
+  margin-top: 1em;
+}
+
+h3 {
+  margin-top: .5em;
+}
+
+p, li, span {
+  font-family: 'Heuristica', 'Helvetica', Times, serif;
+}
+
+p, li, ul {
+  font-size: 16px;
+  line-height: 18px;
+}
+
+pre {
+  white-space: normal;
+  word-wrap: break-word;
+  font-size: 1em;
+}
+
+code {
+  font-family: monospace;
+  white-space: normal;
+  word-wrap: break-word;
+  color: #444;
+  font-size: 1em;
+}
+
+pre, code, code span {
+  font-family: "Courier New", Courier, monospace, sans-serif;
+}
+
+code span {
+  font-size: .9em;
+  font-family: "Courier New", Courier, monospace, sans-serif;
+}
\ No newline at end of file

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

@@ -518,7 +518,17 @@
 
   function deferCellExecution(cell) {
     return function () {
-      return executeCell(cell);
+      return new RSVP.Queue()
+        .push(function () {
+          return executeCell(cell);
+        })
+        .push(undefined, function (error) {
+          //errors in cell execution must be part of the notebook result
+          //notebook execution must continue
+          var pre = document.createElement('pre');
+          pre.textContent = error;
+          document.body.appendChild(pre);
+        });
     };
   }
 
@@ -542,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

@@ -24,6 +24,10 @@
   }
 
   rJS(window)
+
+    .ready(function (gadget) {
+      gadget.property_dict = {};
+    })
     /////////////////////////////////////////////////////////////////
     // declared methods
     /////////////////////////////////////////////////////////////////
@@ -38,6 +42,7 @@
       var gadget = this,
         base_url = document.location.toString(),
         doc;
+      gadget.property_dict.deferred = RSVP.defer();
 
       return fetchHTML("gadget_jsmd_eval.html", base_url)
         .push(function (result) {
@@ -47,13 +52,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,10 +79,41 @@
           // 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();
         });
     })
 
+    .declareMethod('getContent', function () {
+      var gadget = this,
+        content_dict = {},
+        dict = gadget.property_dict;
+      return new RSVP.Queue()
+        .push(function () {
+          return dict.deferred.promise;
+        })
+        .push(function () {
+          content_dict[gadget.state.key] = gadget.element.querySelector("iframe")
+            .contentDocument.firstChild.innerHTML;
+          return content_dict;
+        });
+    })
+
+    .declareJob('listenMessage', function () {
+      var gadget = this,
+        dict = gadget.property_dict;
+      return loopEventListener(window, 'message', false, function (event) {
+          //only handle jsmd eval child messages
+          if ((event.origin !== window.origin) || (event.data !== "jsmd_eval_done"))
+            return;
+          console.log("JSMD Eval Done.");
+          document.querySelector('[id="js-spinner"]').remove();
+          return dict.deferred.resolve();
+        }
+      );
+    })
+
     .declareJob('listenResize', function () {
       var gadget = this;
       function resize() {

bt5/erp5_notebook/bt/dependency_list

 erp5_base
-erp5_dms
\ No newline at end of file
+erp5_dms
+erp5_font
\ No newline at end of file