Skip to content

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

CribJS uses RenderJS and a loader

parent 69199231
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3133 additions and 316 deletions
app.js
View file @ ba356131
This diff is collapsed.
base.html 0 → 100644
View file @ ba356131
<!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>Service worker demo</title>
<script src="lib/sha256.js"></script>
<script src="lib/sha256.amd.js"></script>
<script src="lib/rsvp.js"></script>
<script src="lib/jio-latest.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Free Web Initiative: Start your Website</h1>
<p>You can start building this website by editing the content of the input here:</p>
<ul>
<li>First field: the path</li>
<li>First field: mimetype</li>
<li>First field: the content</li>
</ul>
<p>Have fun building the web :) <a href="todo.html">TODO</a></p>
<div class="output">
<div id="status"></div>
<div id="commands" style="display: none">
<h3>Edit</h3>
<div>
<label for="url">Resource URL:</label>
<input id="url" type="text" size="50" value="test.html">
<button id="get">Get from Cache</button>
<input id="mimetype" type="text" size="50" value="text/html">
<div>
<textarea id="information" cols="35" wrap="soft"></textarea>
</div>
<div>
<button id="add">Add to Cache</button>
<button id="delete">Delete from Cache</button>
</div>
<h3>Save</h3>
<div>
<label for="save-path">Save:</label>
<input id="save-path" type="text" size="30" value="">
<label for="save-id"> to:</label>
<input id="save-id" type="text" size="30" value="cribjs">
<button id="save-contents">Save Cache</button>
</div>
<h3>Load</h3>
<div>
<label for="load-id">Load :</label>
<input id="load-id" type="text" size="30" value="cribjs">
<label for="load-path"> to path:</label>
<input id="load-path" type="text" size="30" value="cribeditor/v1.1">
<button id="load-contents">Load Cache</button>
</div>
<h3>Mass removal</h3>
<div>
<textarea id="mass-remove-list" cols="35" wrap="soft"></textarea>
</div>
<div>
<button id="mass-remove">Mass remove from Cache</button>
</div>
<h3>List Cache content</h3>
<div>
<button id="list-contents">List Cache Contents</button>
</div>
<ul id="contents"></ul>
</div>
</div>
<script src="base.js"></script>
</body>
</html>
base.js 0 → 100644
View file @ ba356131
This diff is collapsed.
gadget/crib-sw-gadget.html 0 → 100644
View file @ ba356131
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Crib SW interface Gadget</title>
<!-- renderjs -->
<script src="/lib/rsvp.js" type="text/javascript"></script>
<script src="/lib/renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="crib-sw-gadget.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
gadget/crib-sw-gadget.js 0 → 100644
View file @ ba356131
/*global window, rJS, RSVP */
/*jslint indent: 2, maxerr: 3 */
(function(window, rJS, RSVP) {
"use strict";
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', {scope: './'})
}
/**
* Send request with XHR and return a promise. xhr.onload: The promise is
* resolved when the status code is lower than 400 with the xhr object as
* first parameter. xhr.onerror: reject with xhr object as first
* parameter. xhr.onprogress: notifies the xhr object.
*
* @param {Object} param The parameters
* @param {String} [param.type="GET"] The request method
* @param {String} [param.dataType=""] The data type to retrieve
* @param {String} param.url The url
* @param {Any} [param.data] The data to send
* @param {Function} [param.beforeSend] A function called just before the
* send request. The first parameter of this function is the XHR object.
* @return {Promise} The promise
*/
function ajax(param) {
var xhr = new XMLHttpRequest();
return new RSVP.Promise(function(resolve, reject, notify) {
var k;
xhr.open(param.type || "GET", param.url, true);
xhr.addEventListener("load", function(e) {
var answer = {};
if (e.target.status >= 400) {
return reject(e);
}
answer.responseText = this.responseText;
answer.responseType = this.getResponseHeader("content-type");
answer.responseURL = param.url
resolve(answer);
});
xhr.addEventListener("error", reject);
xhr.addEventListener("progress", notify);
if (typeof param.xhrFields === 'object' && param.xhrFields !== null) {
for (k in param.xhrFields) {
if (param.xhrFields.hasOwnProperty(k)) {
xhr[k] = param.xhrFields[k];
}
}
}
xhr.send();
}, function() {
xhr.abort();
});
}
function sendMessage(message) {
// This wraps the message posting/response in a promise, which will resolve if the response doesn't
// contain an error, and reject with the error if it does. If you'd prefer, it's possible to call
// controller.postMessage() and set up the onmessage handler independently of a promise, but this is
// a convenient wrapper.
return new RSVP.Promise(function(resolve, reject, notify) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
console.log(event);
if (event.data.error) {
reject(event.data.error);
} else {
resolve(event.data);
}
};
// This sends the message data as well as transferring messageChannel.port2 to the service worker.
// The service worker can then use the transferred port to reply via postMessage(), which
// will in turn trigger the onmessage handler on messageChannel.port1.
// See https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
return navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
});
}
function setStatus(statusMessage) {
console.log(statusMessage);
}
rJS(window)
.ready(function(gadget) {
// Initialize the gadget local parameters
gadget.state_parameter_dict = {};
if (navigator.serviceWorker.controller === null) {
document.location = document.location.origin;
}
})
.declareMethod('allDocs', function() {
return new RSVP.Queue()
.push(function() {
return sendMessage({
command: 'keys'
})
})
})
.declareMethod('get', function(url) {
return ajax({
url: url
})
})
.declareMethod('put', function(url, parameter) {
return new RSVP.Queue()
.push(function() {
if (parameter.blob !== undefined) {
return sendMessage({
command: 'add',
url: url,
information: parameter.blob
})
}
return sendMessage({
command: 'add',
url: url,
information: new Blob([parameter.content], {
type: parameter.type,
})
})
}).push(function() {
// If the promise resolves, just display a success message.
console.log("Done adding "+ url);
return 'Added to cache: ' + url + ' at ' + Date();
}).fail(setStatus);
})
.declareMethod('remove', function(url) {
return new RSVP.Queue()
.push(function() {
return sendMessage({
command: 'delete',
url: url
})
})
});
}(window, rJS, RSVP));
\ No newline at end of file
gadget/gadget_cribjs_loader.html 0 → 100644
View file @ ba356131
<!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="gadget_cribjs_loader.js"></script>
</head>
<body>
<h1>CribJS Loader</h1>
<div data-gadget-url="/gadget/gadget_jio_cribjs.html"
data-gadget-scope="jio_cribjs"
data-gadget-sandbox="public"></div>
<div data-gadget-url="/gadget/gadget_jio_configurator.html"
data-gadget-scope="jio_configurator"
data-gadget-sandbox="public"></div>
<form>
<button type="submit">Load</button>
</form>
<ul>
</ul>
</body>
</html>
\ No newline at end of file
gadget/gadget_cribjs_loader.js 0 → 100644
View file @ ba356131
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS */
(function (window, rJS) {
"use strict";
function loadCribJS (gadget, event) {
var jio_cribjs_gadget,
jio_configurator_gadget;
return RSVP.Queue()
.push(function() {
return RSPV.all([
gadget.getDeclaredGadget("jio_cribjs"),
gadget.getDeclaredGadget("jio_configurator")]);
})
.push(function(gadget_list) {
jio_cribjs_gadget = gadget_list[0];
jio_configurator_gadget = gadget_list[1];
return jio_configurator_gadget.getContent();
})
.push(function (jio_string) {
return jio_cribjs_gadget.load({
path: document.location.origin,
jio_config: JSON.parse(jio_string),
application_id: "cribjs"
})
})
.push(function (url_list) {
console.log(url_list);
document.location = document.location.origin + "/crib-editor/";
})
}
rJS(window)
.declareMethod('render', function (options) {
var gadget = this,
jio_configuration_string = "";
console.log("rendering");
if (localStorage.hasOwnProperty("crib_js_loader_jio")) {
jio_configuration_string = localStorage.getItem("crib_js_loader_jio");
} else {
jio_configuration_string = '{"type": "dav", "url": "https://cedriclendav.node.vifib.com/public/cribjs-storage/"}';
}
return RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('jio_configurator');
})
.push(function (jio_configurator_gadget) {
console.log(jio_configuration_string);
return jio_configurator_gadget.render({value: jio_configuration_string});
})
.push(function () {
return loopEventListener(
gadget.props.element.querySelector("form"),
'submit',
false,
function (event) {loadCribJS(gadget, event)}
);
})
.fail(function(e){console.log(e)})
})
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.props.element = element;
});
});
}(window, rJS));
\ No newline at end of file
gadget/gadget_jio.html 0 → 100644
View file @ ba356131
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Jio Gadget</title>
<!-- renderjs -->
<script src="/lib/rsvp.js" type="text/javascript"></script>
<script src="/lib/renderjs.js" type="text/javascript"></script>
<script src="/lib/jio-latest.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_jio.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
gadget/gadget_jio.js 0 → 100644
View file @ ba356131
/*global window, rJS, jIO */
/*jslint indent: 2, maxerr: 3 */
(function (window, rJS, jIO) {
"use strict";
rJS(window)
.ready(function (gadget) {
// Initialize the gadget local parameters
gadget.state_parameter_dict = {};
})
.declareMethod('createJio', function (jio_options) {
this.state_parameter_dict.jio_storage = jIO.createJIO(jio_options);
})
.declareMethod('allDocs', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.allDocs.apply(storage, arguments);
})
.declareMethod('allAttachments', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.allAttachments.apply(storage, arguments);
})
.declareMethod('get', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.get.apply(storage, arguments);
})
.declareMethod('put', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.put.apply(storage, arguments);
})
.declareMethod('post', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.post.apply(storage, arguments);
})
.declareMethod('remove', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.remove.apply(storage, arguments);
})
.declareMethod('getAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.getAttachment.apply(storage, arguments);
})
.declareMethod('putAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.putAttachment.apply(storage, arguments);
})
.declareMethod('removeAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.removeAttachment.apply(storage, arguments);
})
.declareMethod('repair', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.repair.apply(storage, arguments);
});
}(window, rJS, jIO));
\ No newline at end of file
gadget/gadget_jio_configurator.html 0 → 100644
View file @ ba356131
<!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="gadget_jio_configurator.js"></script>
</head>
<body>
<form>
<textarea name="jio_json_configuration"></textarea>
</form>
</body>
</html>
\ No newline at end of file
gadget/gadget_jio_configurator.js 0 → 100644
View file @ ba356131
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS */
(function (window, rJS) {
"use strict";
rJS(window)
.declareAcquiredMethod("saveContent", "editor_saveContent")
.declareMethod('render', function (options) {
if (options && options.hasOwnProperty("value"))
this.props.element.querySelector("textarea").value = options.value || "";
})
.declareMethod('getContent', function () {
return this.props.element.querySelector("textarea").value;
})
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.props.element = element;
});
});
}(window, rJS));
\ No newline at end of file
gadget/gadget_jio_cribjs.html 0 → 100644
View file @ ba356131
<!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="gadget_jio_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_jio_cribjs.js 0 → 100644
View file @ ba356131
/*globals window, document, RSVP, rJS,
location, console*/
/*jslint indent: 2, maxlen: 80*/
(function (window, document, RSVP, rJS, location, console) {
"use strict";
function getExtension(url) {
var extension = url.split('.').pop();
if (extension.endsWith('/')) {
return ".html";
}
return "." + extension;
}
rJS(window)
.ready(function (g) {
g.props = {};
})
.declareMethod('load', function (options) {
var path_to_load, path_to_load_length, application_id, crib_sw_gadget, jio_config,
jio_gadget, url_list = [], gadget = this;
path_to_load = options.path;
application_id = options.application_id;
jio_config = options.jio_config;
path_to_load_length = path_to_load.length;
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.getDeclaredGadget('crib_sw_gadget'),
gadget.getDeclaredGadget('jio_gadget')]);
})
.push(function (gadget_list) {
crib_sw_gadget = gadget_list[0];
jio_gadget = gadget_list[1];
return jio_gadget.createJio(jio_config);
})
.push(function () {
return jio_gadget.allAttachments("/" + application_id + ".attachment/");
})
.push(function(response) {
var promise_list = [],
key, extension;
for (key in response) {
if (response.hasOwnProperty(key)) {
extension = getExtension(key);
console.log(key);
url_list.push(atob(key.substr(0, key.length - extension.length)))
promise_list.push(jio_gadget.getAttachment("/" + application_id + ".attachment/", key));
}
};
return RSVP.all(promise_list)
})
.push(function(response_list) {
var promise_list = [],
i, i_len, url, index, response, location, location_len;
location = document.location.origin;
location_len = location.length
for (i = 0, i_len = response_list.length; i < i_len; i += 1) {
url = url_list[i]
index = url.indexOf(location);
if (index != -1)
url = url.substr(index + location_len);
console.log(path_to_load + url);
promise_list.push(
crib_sw_gadget.put(path_to_load + url, {blob: response_list[i]})
)
}
return RSVP.all(promise_list);
})
.push(function() {
return url_list
});
})
.declareMethod('save', function (options) {
var path_to_save, path_to_save_length, application_id, crib_sw_gadget, jio_config,
jio_gadget, url_list = [], saved_url_list = [], gadget = this;
path_to_save = options.path;
application_id = options.application_id;
jio_config = options.jio_config;
path_to_save_length = path_to_save.length;
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.getDeclaredGadget('crib_sw_gadget'),
gadget.getDeclaredGadget('jio_gadget')]);
})
.push(function (gadget_list) {
crib_sw_gadget = gadget_list[0];
jio_gadget = gadget_list[1];
return jio_gadget.createJio(jio_config);
})
.push(function (){
return crib_sw_gadget.allDocs();
})
.push(function(data) {
url_list = data.urls;
// This is buggy, it fails if the document already exists with dav storage
// XX Should be able to add some metadata here such as url, contributor, version ...
return RSVP.all(
[jio_gadget.put("/" + application_id + ".attachment/", {
}),
jio_gadget.putAttachment("/", application_id, new Blob([JSON.stringify({url: path_to_save})],{type: "application/json"}))
]);
})
.push(function() {
var promise_list = [],
i, i_len, url;
for (i = 0, i_len = url_list.length; i < i_len; i += 1) {
url = new String(url_list[i]);
if (url.indexOf(path_to_save) === 0) {
saved_url_list.push({url: url});
promise_list.push(jIO.util.ajax({
url: url,
dataType: "blob"
}));
};
};
return RSVP.all(promise_list);
})
.push(function(response_list) {
var promise_list = [],
i, i_len, url, response, extension;
for (i = 0, i_len = response_list.length; i < i_len; i += 1) {
response = response_list[i];
url = response.target.responseURL.substr(path_to_save_length);
// This is tricky here, we use the extension for file storages in order to get the correct blob
// It should be fixed
saved_url_list[i].target = url;
extension = getExtension(url);
saved_url_list[i].target = extension;
console.log("Will push attachment " + saved_url_list[i].url + " to " + url);
promise_list.push(
jio_gadget.putAttachment("/" + application_id + ".attachment/", btoa(url) + extension,
response.target.response
)
);
};
return RSVP.all(promise_list);
})
.push(function() {
return saved_url_list;
})
.fail(function(error) {
gadget.props.element.querySelector(".crib-save-to-jio-status").textContent = error;
console.log(error);
});
})
}(window, document, RSVP, rJS, location, console));
\ No newline at end of file
index.html
View file @ ba356131
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -8,73 +5,24 @@ ...@@ -8,73 +5,24 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Service worker demo</title> <title>CribJS Loader</title>
<script src="lib/sha256.js"></script> <script src="/lib/rsvp.js"></script>
<script src="lib/sha256.amd.js"></script> <script src="/lib/renderjs.js"></script>
<script src="lib/rsvp.js"></script> <script src="app.js"></script>
<script src="lib/jio-latest.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head> </head>
<body> <body>
<h1>Free Web Initiative: Start your Website</h1> <h1>CribJS Loader</h1>
<p>You can start building this website by editing the content of the input here:</p> <p>You can load your crib from here or start with the default one</p>
<ul> <div data-gadget-url="/gadget/gadget_jio_cribjs.html"
<li>First field: the path</li> data-gadget-scope="jio_cribjs"
<li>First field: mimetype</li> data-gadget-sandbox="public"></div>
<li>First field: the content</li> <div data-gadget-url="/gadget/gadget_jio_configurator.html"
</ul> data-gadget-scope="jio_configurator"
<p>Have fun building the web :) <a href="todo.html">TODO</a></p> data-gadget-sandbox="public"></div>
<div class="output"> <form class="loading">
<div id="status"></div> <button type="submit">Load</button>
</form>
<div id="commands" style="display: none"> <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>
<h3>Edit</h3> <p>A simple editor can be found <a href="base.html">here</a></p>
<div>
<label for="url">Resource URL:</label>
<input id="url" type="text" size="50" value="test.html">
<button id="get">Get from Cache</button>
<input id="mimetype" type="text" size="50" value="text/html">
<div>
<textarea id="information" cols="35" wrap="soft"></textarea>
</div>
<div>
<button id="add">Add to Cache</button>
<button id="delete">Delete from Cache</button>
</div>
<h3>Save</h3>
<div>
<label for="save-path">Save:</label>
<input id="save-path" type="text" size="30" value="">
<label for="save-id"> to:</label>
<input id="save-id" type="text" size="30" value="cribjs">
<button id="save-contents">Save Cache</button>
</div>
<h3>Load</h3>
<div>
<label for="load-id">Load :</label>
<input id="load-id" type="text" size="30" value="cribjs">
<label for="load-path"> to path:</label>
<input id="load-path" type="text" size="30" value="cribeditor/v1.1">
<button id="load-contents">Load Cache</button>
</div>
<h3>Mass removal</h3>
<div>
<textarea id="mass-remove-list" cols="35" wrap="soft"></textarea>
</div>
<div>
<button id="mass-remove">Mass remove from Cache</button>
</div>
<h3>List Cache content</h3>
<div>
<button id="list-contents">List Cache Contents</button>
</div>
<ul id="contents"></ul>
</div>
</div>
<script src="app.js"></script>
</body> </body>
</html> </html>
lib/renderjs.js 0 → 100644
View file @ ba356131
This diff is collapsed.
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