First Rework at Crib Editor Landing Page

gadget/gadget_cribjs_page_cribjs_home.html

@@ -31,5 +31,72 @@
       </ul>
       <p>Have fun building the web :), here is your <a href="../crib-editor/todo.txt">TODO list</a>.</p>
     </div>
+    <div data-gadget-url="./gadget_landing_cribjs.html"
+         data-gadget-scope="jio_cribjs"
+         data-gadget-sandbox="public"></div>
+      <div class="nav_content container">
+        <h1>CribJS Loader</h1>
+        <p>Load your Crib from here</p>
+      </div>
+      <div class="nav_content container">
+        <h3>Start Editing this Site</h3>
+        <a class="edit-url btn btn-primary" type="text" size="60" href="">Start Editing This Site Now</a>
+      </div>
+      <div class="nav_content container">
+        <form class="crib-load-from-zip-url form-inline">
+          <h3>Fill This site from a zip URL</h3>
+          <div class="form-group">
+            <label>Zip Url:
+              <input name="load-zip-url" class="load-zip-url form-control" type="text" size="60"></label>
+          </div>
+          <div class="form-group">
+            <label> Path in Zip:
+              <input name="load-from-zip-path" class="load-from-zip-path form-control" type="text" size="30" value="/">
+            </label>
+          </div>
+          <div class="form-group">
+            <label> to path:
+              <input name="load-zip-to-path" class="load-zip-to-path form-control" type="text" size="30" value="/">
+            </label>
+          </div>
+          <div class="form-group">
+            <label> And redirect to:
+              <input name="redirect-url" class="redirect-url form-control" type="text" size="30" value="">
+            </label>
+          </div>
+          <button name="load-zip-contents" class="load-zip-contents btn btn-default" type="submit">Import from URL</button>
+        </form>
+      </div>
+      <div class="nav_content container">
+        <div><span class="info crib-save-to-zip-status"></span></div>
+        <form class="crib-load-from-zip-file form-inline">
+          <h3>Import from zip File</h3>
+          <div class="form-group">
+            <label>Zip File:
+              <input name="load-zip-file" class="load-zip-file form-control" type="file" size="30"></label>
+          </div>
+          <div class="form-group">
+            <label> Path in Zip:
+              <input name="load-zip-path" class="load-from-zip-path form-control" type="text" size="30" value="/">
+            </label>
+          </div>
+          <div class="form-group">
+            <label> to path:
+              <input name="load-zip-to-path" class="load-zip-to-path form-control" type="text" size="30" value="/">
+            </label>
+          </div>
+          <div class="form-group">
+            <label> And redirect to:
+              <input name="redirect-url" class="redirect-url form-control" type="text" size="30" value="">
+            </label>
+          </div>
+          <button name="load-zip-contents" class="load-zip-contents btn btn-default" type="submit">Import from File</button>
+        </form>
+      </div>
+      <div class="nav_content container">
+        <p>You can check where it started, and start a crib from the beginning: <a href="jungle.html">The Jungle :)</a>. This one is a simple editor with no import/export functions. First challenge is to use that to add an import/export function :).</p>
+        <p>A simple editor can be found <a href="base.html">here</a></p>
+      </div>
+
   </body>
 </html>
\ No newline at end of file

gadget/gadget_cribjs_page_cribjs_home.js

 /*jslint nomen: true, indent: 2, maxerr: 3 */
-/*global window, rJS, Handlebars, document, loopEventListener, RSVP */
+/*global window, rJS, Handlebars, document, loopEventListener, RSVP,
+   encodeURIComponent */
 (function (window, rJS, document, RSVP) {
   "use strict";
 
+  function getParameterDict() {
+    var hash = window.location.hash.substring(1),
+      params = {};
+    hash.split('&').map(hk => {
+      let temp = hk.split('=');
+      params[temp[0]] = temp[1];
+    });
+    return params;
+  }
+
+  function makeid(length) {
+    var result           = '';
+    var characters       = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < length; i++ ) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  }
+
+  function loadCribJSFromZipFile (gadget, event) {
+    return RSVP.Queue()
+    .push(function() {
+      return gadget.getDeclaredGadget("jio_cribjs");
+    })
+    .push(function(jio_cribjs_gadget) {
+      return jio_cribjs_gadget.loadFromZipFile({
+        path: document.location.href,
+        file_list: gadget.props.element.querySelector("form.crib-load-from-zip-file .load-zip-file").files,
+        from_path: gadget.props.element.querySelector("form.crib-load-from-zip-file .load-from-zip-path").value,
+        to_path: gadget.props.element.querySelector("form.crib-load-from-zip-file .load-zip-to-path").value,
+        application_id: "cribjs"
+      })
+    })
+    .push(function (url_list) {
+      document.location = gadget.props.element.querySelector("form.crib-load-from-zip-file .redirect-url").value;
+    })
+    .push(console.log, console.log);
+  }
+
+  function loadCribJSFromZipUrl (gadget, event) {
+    return RSVP.Queue()
+    .push(function() {
+      return gadget.getDeclaredGadget("jio_cribjs");
+    })
+    .push(function(jio_cribjs_gadget) {
+      return jio_cribjs_gadget.loadFromZipUrl({
+        path: document.location.href,
+        zip_url: gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-url").value,
+        from_path: gadget.props.element.querySelector("form.crib-load-from-zip-url .load-from-zip-path").value,
+        to_path: gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-to-path").value,
+        application_id: "cribjs"
+      })
+    })
+    .push(function (url_list) {
+      window.location.reload();
+      document.location = gadget.props.element.querySelector("form.crib-load-from-zip-url .redirect-url").value;
+    })
+    .push(console.log, console.log);
+  }
   rJS(window)
     /////////////////////////////////////////////////////////////////
     // ready
@@ -14,17 +75,48 @@
       return g.getElement()
         .push(function (element) {
           g.props.element = element;
+          g.props.start_deferred = RSVP.defer();
         });
     })
     //////////////////////////////////////////////
     // acquired methods
     //////////////////////////////////////////////
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
+    .declareAcquiredMethod("crib_sw_put", "crib_sw_put")
+    .allowPublicAcquisition("crib_sw_put", function (argument_list) {
+      return this.crib_sw_put.apply(this, arguments);
+    })
     .declareMethod('render', function (options) {
       var gadget = this,
         page_list = ["url_list", "editor", "save_load", "mass_remove"],
-        promise_list = [];
-
+        promise_list = [],
+        getURL = window.location,
+        site = getURL.protocol + "//" + getURL.host,
+        params = getParameterDict(),
+        edit_base = "https://" + makeid(10) + ".cribjs.nexedi.net/",
+        edit_url= edit_base + "#redirect_url=" +  encodeURIComponent(edit_base + "#page=editor&url="
+    		+ "index.html" + "&crib_enable_url=" + site + "/crib-enable.html");
+      gadget.props.element.querySelector("a.edit-url").href = edit_url ;
+      if ( params.hasOwnProperty("from_path") ) {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-from-zip-path").value = params.from_path;
+      } else {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-from-zip-path").value = "cribjs-editor-master/";
+      }
+      if ( params.hasOwnProperty("to_path") ) {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-to-path").value = params.to_path;
+      } else {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-to-path").value = site;
+      }
+      if ( params.hasOwnProperty("zip_url") ) {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-url").value = params.zip_url;
+      } else {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .load-zip-url").value = "https://lab.nexedi.com/cedric.leninivin/cribjs-editor/-/archive/master/cribjs-editor-master.zip";
+      }
+      if ( params.hasOwnProperty("redirect_url") ) {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .redirect-url").value = params.redirect_url;
+      } else {
+        gadget.props.element.querySelector("form.crib-load-from-zip-url .redirect-url").value = site ;
+      }
       page_list.forEach(function (page) {
         promise_list.push(gadget.getUrlFor({page: page}));
       });
@@ -38,7 +130,32 @@
             gadget.props.element.querySelector("." + page_list[i]).href = link_list[i];
           }
         });
+    })
+    .declareService(function () {
+      var gadget = this;
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.props.start_deferred.promise;
+        })
+        .push(function () {
+          var promise_list = [];
+          // promise to get content from URL
+          promise_list.push(loopEventListener(
+            gadget.props.element.querySelector("form.crib-load-from-zip-url"),
+            'submit',
+            false,
+            function (event) {loadCribJSFromZipUrl(gadget, event)}
+          ));
+          promise_list.push(loopEventListener(
+            gadget.props.element.querySelector("form.crib-load-from-zip-file"),
+            'submit',
+            false,
+            function (event) {loadCribJSFromZipFile(gadget, event)}
+          ));
+          return RSVP.all(promise_list);
+        });
     });
 
 
+
 }(window, rJS, document, RSVP));
\ No newline at end of file

gadget/gadget_landing_cribjs.html

@@ -12,11 +12,5 @@
     <script src="./gadget_landing_cribjs.js"></script>
   </head>
   <body>
-    <div data-gadget-url="./crib-sw-gadget.html"
-         data-gadget-scope="crib_sw_gadget"
-         data-gadget-sandbox="public"></div>
-    <div data-gadget-url="./gadget_jio.html"
-         data-gadget-scope="jio_gadget"
-         data-gadget-sandbox="public"></div>
   </body>
 </html>
\ No newline at end of file

gadget/gadget_landing_cribjs.js

@@ -12,15 +12,7 @@
     return "." + extension;
   }
 
-  function getSetting(gadget, key, default_value) {
-    if (key === "site_editor_gadget_url") {
-      return window.location.protocol + "//" + window.location.host +
-        "/crib-enable.html";
-    }
-    return default_value;
-  }
-
-  function loadZipIntoCrib(crib_sw_gadget, zip, from_path, path_to_load) {
+  function loadZipIntoCrib(gadget, zip, from_path, path_to_load) {
     var promise_list = [], url_number = 0;
     zip.forEach(function (relativePath, zipEntry) {
       var end_url;
@@ -55,7 +47,7 @@
             // This is a ugly hack as mimetype needs to be correct for JS
             result = result.slice(0, result.size, "text/css");
           }
-          return crib_sw_gadget.put(end_url, {blob: result});
+          return gadget.crib_sw_put(end_url, {blob: result});
         })
       );
     });
@@ -71,14 +63,11 @@
     }
     return new RSVP.Queue()
     .push(function () {
-      return RSVP.all([
-        gadget.getDeclaredGadget('crib_sw_gadget'),
-        JSZip.loadAsync(file_list[0])
-      ]);
+      return JSZip.loadAsync(file_list[0]);
     })
-    .push(function (result_list) {
+    .push(function (zip) {
       return loadZipIntoCrib(
-        result_list[0], result_list[1], from_path, path_to_load
+        gadget, zip, from_path, path_to_load
       );
     })
     .push(console.log, console.log);
@@ -86,15 +75,11 @@
 
 
   function loadContentFromZIPURL(gadget, options) {
-    var path_to_load = options.to_path, file_list, crib_sw_gadget,
+    var path_to_load = options.to_path, file_list,
       from_path = options.from_path, zip_url = options.zip_url,
       jio_gadget, url_list = [], url_number = 0;
     return new RSVP.Queue()
     .push(function () {
-      return gadget.getDeclaredGadget('crib_sw_gadget');
-    })
-    .push(function (returned_gadget) {
-      crib_sw_gadget = returned_gadget;
       return fetch(zip_url)
         .then(function (response) {                       // 2) filter on 200 OK
             if (response.status === 200 || response.status === 0) {
@@ -106,7 +91,7 @@
     })
     .push(JSZip.loadAsync)
     .push(function (zip) {
-      return loadZipIntoCrib(crib_sw_gadget, zip, from_path, path_to_load);
+      return loadZipIntoCrib(gadget, zip, from_path, path_to_load);
     })
     .push(console.log, console.log);
   }
@@ -121,8 +106,10 @@
     .declareMethod('loadFromZipFile', function (options) {
       return loadContentFromZIPFile(this, options);
     })
+    .declareAcquiredMethod("crib_sw_put", "crib_sw_put")
+    .declareAcquiredMethod("getSetting", "getSetting")
     .allowPublicAcquisition("getSetting", function (argument_list) {
-      return getSetting(this, argument_list[0], argument_list[1]);
+      return this.getSetting(argument_list[0], argument_list[1]);
     });
 
 }(window, document, RSVP, rJS, location, console, JSZip));
\ No newline at end of file