Skip to content

C
cribjs
Commit 478b0b77 authored by Cédric Le Ninivin's avatar Cédric Le Ninivin
Browse files
Options

Provide a functionnal landing page and automatic reload

parent 0d108acd
Show whitespace changes
Inline Side-by-side
Showing with 407 additions and 12 deletions
gadget/crib-sw-gadget.js
View file @ 478b0b77
...@@ -35,6 +35,17 @@ ...@@ -35,6 +35,17 @@
}); });
}) })
} }
})
.push(undefined, function (e) {
// Ugly Hack to reload page and make service worker available
if (e.indexOf("Please reload this page to allow Service Worker to control this page") > -1 ) {
console.log("reload");
window.location.reload(false);
throw(e);
} else {
console.log(e);
throw(e);
}
}); });
} }
......
gadget/gadget_landing_cribjs.html 0 → 100644
View file @ 478b0b77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>CribJS Loader</title>
<script src="/lib/rsvp.js"></script>
<script src="/lib/renderjs.js"></script>
<script src="/lib/jszip.js" type="text/javascript"></script>
<script src="gadget_landing_cribjs.js"></script>
</head>
<body>
<div data-gadget-url="/gadget/crib-sw-gadget.html"
data-gadget-scope="crib_sw_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="/gadget/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 0 → 100644
View file @ 478b0b77
/*globals window, document, RSVP, rJS,
location, console*/
/*jslint indent: 2, maxlen: 80*/
(function (window, document, RSVP, rJS, location, console, JSZip) {
"use strict";
function getExtension(url) {
var extension = url.split('.').pop();
if (extension.endsWith('/')) {
return ".html";
}
return "." + extension;
}
function getSetting(gadget, key, default_value) {
if ( key === "site_editor_gadget_url" ) {
return window.location.protocol + "//" + window.location.host + "/gadget/crib-sw-storage-gadget.html"
}
return default_value;
}
function loadContentFromZIPURL(gadget, options) {
var path_to_load = options.to_path, path_to_load_length, file_list, crib_sw_gadget,
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) {
return Promise.resolve(response.blob());
} else {
return Promise.reject(new Error(response.statusText));
}
});
})
.push(JSZip.loadAsync)
.push(function (zip) {
var promise_list = [];
zip.forEach(function (relativePath, zipEntry) {
var end_url;
url_number += 1;
if ( zipEntry.dir ) {
return
}
if ( !relativePath.startsWith(from_path) ) {
return
}
relativePath = relativePath.substring(from_path.length);
if (!relativePath.startsWith("/") && !path_to_load.endsWith("/")) {
end_url = path_to_load + "/" + relativePath
} else if (relativePath.startsWith("/") && path_to_load.endsWith("/")) {
end_url = path_to_load + relativePath.substring(1);
} else {
end_url = path_to_load + relativePath
}
promise_list.push(
new RSVP.Queue().
push(function () {
return zipEntry.async('blob');
})
.push(function (result) {
if ( end_url.endsWith(".js") ) {
// This is a ugly hack as mimetype needs to be correct for JS
result = result.slice(0, result.size, "application/javascript")
} else if ( end_url.endsWith(".html") ) {
// This is a ugly hack as mimetype needs to be correct for JS
result = result.slice(0, result.size, "text/html")
} else if ( end_url.endsWith(".css") ) {
// 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 RSVP.all(promise_list)
})
.push(console.log, console.log)
}
rJS(window)
.ready(function (g) {
g.props = {};
})
.declareMethod('loadFromZipUrl', function (options) {
return loadContentFromZIPURL(this, options);
})
.declareMethod('loadFromZipFile', function (options) {
return loadContentFromZIPURL(gadget, options);
})
.allowPublicAcquisition("getSetting", function (argument_list) {
return getSetting(this, argument_list[0], argument_list[1]);
})
}(window, document, RSVP, rJS, location, console, JSZip));
\ No newline at end of file
index.html
View file @ 478b0b77
...@@ -6,24 +6,82 @@ ...@@ -6,24 +6,82 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>CribJS Loader</title> <title>CribJS Loader</title>
<link rel="stylesheet" href="/lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="/landing.css">
<script src="./lib/rsvp.js"></script> <script src="./lib/rsvp.js"></script>
<script src="./lib/renderjs.js"></script> <script src="./lib/renderjs.js"></script>
<script src="./gadget/gadget_global.js"></script> <script src="./gadget/gadget_global.js"></script>
<script src="app.js"></script> <script src="landing.js"></script>
</head> </head>
<body> <body>
<h1>CribJS Loader</h1> <div data-gadget-url="./gadget/gadget_landing_cribjs.html"
<p>You can load your crib from here or start with the default one</p>
<div data-gadget-url="./gadget/gadget_jio_cribjs.html"
data-gadget-scope="jio_cribjs" data-gadget-scope="jio_cribjs"
data-gadget-sandbox="public"></div> data-gadget-sandbox="public"></div>
<div data-gadget-url="./gadget/gadget_jio_configurator.html" <div class="nav_content container">
data-gadget-scope="jio_configurator" <h1>CribJS Loader</h1>
data-gadget-sandbox="public"></div> <p>Load your Crib from here</p>
<form class="loading"> </div>
<button type="submit">Load</button> <div class="nav_content container">
<h3>Edit this Site</h3>
<div class="form-group">
<label>Edit URL:
<input name="edit-url" class="edit-url form-control" type="text" size="60" readonly value="/gadget/crib-sw-storage-gadget.html"></label>
</div>
</div>
<div class="nav_content container">
<form class="crib-load-from-zip-url form-inline">
<h3>Import from 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> </form>
<p>You can check where it started, and start a crib your own way from the beginning: <a href="jungle.html">The Jungle :)</a>. If you want to play it for real, only use what you are doing to develop.</p> </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> <p>A simple editor can be found <a href="base.html">here</a></p>
</div>
</body> </body>
</html> </html>
landing.css 0 → 100644
View file @ 478b0b77
html body nav.navbar-default {
background-color: transparent;
}
/*Test*/
html body h1 {
color: #337ab7;
}
html body .navbar-default .navbar-brand {
color: #337ab7;
}
iframe {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
position: fixed;
}
\ No newline at end of file
landing.html 0 → 100644
View file @ 478b0b77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>CribJS Loader</title>
<link rel="stylesheet" href="/lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="/landing.css">
<script src="./lib/rsvp.js"></script>
<script src="./lib/renderjs.js"></script>
<script src="./gadget/gadget_global.js"></script>
<script src="landing.js"></script>
</head>
<body>
<div data-gadget-url="./gadget/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>Edit this Site</h3>
<div class="form-group">
<label>Edit URL:
<input name="edit-url" class="edit-url form-control" type="text" size="60" readonly value="/gadget/crib-sw-storage-gadget.html"></label>
</div>
</div>
<div class="nav_content container">
<form class="crib-load-from-zip-url form-inline">
<h3>Import from 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>
landing.js 0 → 100644
View file @ 478b0b77
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS */
(function (window, rJS, loopEventListener) {
"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 loadCribJSFromZipFile (gadget, event) {
}
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) {
document.location = gadget.props.element.querySelector("form.crib-load-from-zip-url .redirect-url").value;
})
.push(console.log, console.log);
}
rJS(window)
.declareMethod('render', function (options) {
var gadget = this,
getURL = window.location,
site = getURL.protocol + "//" + getURL.host,
params = getParameterDict();
gadget.props.element.querySelector("input.edit-url").value = site + "/gadget/crib-sw-storage-gadget.html";
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-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/-/archive/master/cribjs-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 + "/crib-editor4/";
}
return RSVP.Queue()
.push(function () {
var promise_list = []
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)
})
.fail(function(e){console.log(e)})
})
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.props.element = element;
}).push(function() {
g.render({})
})
;
});
}(window, rJS, loopEventListener));
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7