Commit 30c67b01 authored by Cédric Le Ninivin's avatar Cédric Le Ninivin

Move editor to root

parent 5387c193
<!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>
if ('serviceWorker' in navigator) {
//navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function() {
// Registration was successful. Now, check to see whether the Service Worker is controlling the page.
if (navigator.serviceWorker.controller) {
// If .controller is set, then this page is being actively controlled by the Service Worker.
// Show the interface for sending messages to the service worker.
showCommands();
} else {
// If .controller isn't set, then prompt the user to reload the page so that the Service Worker can take
// control. Until that happens, the Service Worker's message handler won't be used.
document.querySelector('#status').textContent =
'Please reload this page to allow the service worker to take control.';
}
//}).catch(function(error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
//document.querySelector('#status').textContent = error;
//});
} else {
// The current browser doesn't support Service Workers.
var aElement = document.createElement('a');
aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
aElement.textContent = 'Service Workers are not supported in the current browser.';
document.querySelector('#status').appendChild(aElement);
}
//jio = jIO.createJIO({type: "indexeddb", database: "cribjs"});
jio = jIO.createJIO({type:"dav", url: "https://cedriclendav.node.vifib.com/toto", basic_login: btoa("cedriclen:foo")});
function setStatus(statusMessage) {
document.querySelector('#status').textContent = statusMessage;
}
function getExtension(url) {
var extension = url.split('.').pop();
if (extension === "/") {
return ".html";
}
return "." + extension;
}
function showCommands() {
document.querySelector('#add').addEventListener('click', function() {
var url = document.querySelector('#url').value;
sendMessage({
command: 'add',
url: url,
information: new Blob([document.querySelector('#information').value], {
type: document.querySelector('#mimetype').value
})
}).then(function() {
// If the promise resolves, just display a success message.
setStatus('Added to cache: ' + url + ' at ' + Date());
}, setStatus);
});
document.querySelector('#delete').addEventListener('click', function() {
sendMessage({
command: 'delete',
url: document.querySelector('#url').value
}).then(function() {
// If the promise resolves, just display a success message.
setStatus('Deleted from cache.');
}, setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#list-contents').addEventListener('click', function() {
sendMessage({
command: 'keys'
}).then(function(data) {
var contentsElement = document.querySelector('#contents');
// Clear out the existing items from the list.
while (contentsElement.firstChild) {
contentsElement.removeChild(contentsElement.firstChild);
}
// Add each cached URL to the list, one by one.
data.urls.forEach(function(url) {
var liElement = document.createElement('li'),
aElement = document.createElement('a');
aElement.setAttribute('href', url);
aElement.textContent = url;
liElement.innerHTML = aElement.outerHTML;
contentsElement.appendChild(liElement);
});
}, setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#get').addEventListener('click', function() {
console.log("bar");
getContent(document.querySelector('#url').value,
function() {
document.querySelector('#mimetype').value = this.getResponseHeader("content-type");
document.querySelector('#information').value = this.responseText;
}
);
});
document.querySelector('#save-path').value = document.location.origin;
document.querySelector('#save-contents').addEventListener('click', function() {
console.log('asking for the keys');
var path_to_save, path_to_save_length, application_id;
path_to_save = document.querySelector('#save-path').value;
application_id = document.querySelector('#save-id').value;
path_to_save_length = path_to_save.length;
sendMessage({
command: 'keys'
}).then(function(data) {
// Add each cached URL to the list, one by one.
console.log("foo");
return new RSVP.Queue()
.push(function() {
console.log("put");
return RSVP.all(
[jio.put("/" + application_id + ".attachment/", {
// url: path_to_save
}),
jio.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 = data.urls.length; i < i_len; i += 1) {
url = String(data.urls[i]);
if (url.indexOf(path_to_save) === 0) {
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);
extension = getExtension(url);
console.log("Pushing attachment " + url + " to " + path_to_save);
promise_list.push(
jio.putAttachment("/" + application_id + ".attachment/", btoa(url) + extension,
response.target.response
)
);
}
return RSVP.all(promise_list);
})
.push(undefined, function(error) {
console.log(error);
});
}, setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#load-path').value = document.location.origin;
document.querySelector('#load-contents').addEventListener('click', function() {
console.log('asking for the keys');
var url_list = [],
application_id;
application_id = document.querySelector('#load-id').value;
return new RSVP.Queue()
.push(function() {
console.log("put");
return jio.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.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;
console.log(url_list);
console.log(response_list);
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);
sendMessage({
command: 'add',
url: document.querySelector('#load-path').value + url,
information: response_list[i]
});
}
})
.push(undefined, function(error) {
console.log(error);
});
});
document.querySelector('#mass-remove').addEventListener('click', function() {
var url_list = document.querySelector('#mass-remove-list').value.match(/[^\r\n]+/g),
url_list_length = url_list.length,
i;
for (i = 0; i < url_list_length; i += 1) {
sendMessage({
command: 'delete',
url: url_list[i]
}); // If the promise rejects, then setStatus will be called with the error.
}
});
document.querySelector('#commands').style.display = 'block';
}
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 Promise(function(resolve, reject) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(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
navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
});
}
function getContent(url, reqListener) {
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", url, true);
oReq.send();
}
\ No newline at end of file
* Use Indexeddb to save URL list in service worker
* Improve storage organisation (breaks compatibility)
* Provide Diff Tool for collaboration
nav.navbar-default {
background-color: none;
}
\ No newline at end of file
/*globals window, document, RSVP, rJS, Handlebars,
location, console, btoa, Blob, jIO, atob,
loopEventListener */
/*jslint indent: 2, maxlen: 80*/
(function (RSVP, rJS, Handlebars, jIO, loopEventListener) {
"use strict";
var CODE_CONTENT_KEY = "text_content";
function getExtension(url) {
var extension = url.split('.').pop();
if (extension.endsWith('/')) {
return ".html";
}
return "." + extension;
}
function createJio(gadget, jio_config) {
var jio_gadget;
return gadget.getDeclaredGadget("jio_gadget")
.push(function (jio_g) {
jio_gadget = jio_g;
if (jio_config === undefined)
jio_config = {type: "indexeddb", database: "cribjs"};
console.log(jio_config);
return jio_gadget.createJio(jio_config);
});
}
function createDAVJio(gadget, event) {
return createJio(gadget, {
type: "dav",
url: gadget.props.element.querySelector('.form-use-jio-dav .url').value,
basic_login: btoa(
gadget.props.element.querySelector(
".form-use-jio-dav .credential"
).value
)
});
}
function displayURLList(gadget, event) {
return new RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('crib_sw_gadget');
})
.push(function (crib_sw_gadget) {
return crib_sw_gadget.allDocs();
})
.push(function (data) {
var contentsElement = gadget.props.element.querySelector(
'.crib-url-list-content tbody'),
footer_element = gadget.props.element.querySelector(
'.crib-url-list-content tfoot'),
url_list = data.urls,
url_number = 0, cached_number = 0,
url, trElement, tdElement;
// Clear out the existing items from the list.
while (contentsElement.firstChild) {
contentsElement.removeChild(contentsElement.firstChild);
}
// Add each cached URL to the list, one by one.
for (url in url_list) {
if (url_list.hasOwnProperty(url)) {
var element;
cached_number = url_list[url].cached ?
cached_number + 1 : cached_number;
url_number += 1;
trElement = document.createElement('tr');
tdElement = document.createElement('td');
tdElement.innerHTML = (
url_list[url].cached ? "<span>&#x2713;</span>" : "");
trElement.appendChild(tdElement);
tdElement = document.createElement('td');
element = document.createElement('a');
element.setAttribute('href', "#view=editor&url=" + url);
element.textContent = url;
tdElement.appendChild(element);
trElement.appendChild(tdElement);
tdElement = document.createElement('td');
element = document.createElement('a');
element.textContent = "Go";
element.setAttribute('href', url);
element.setAttribute('target', "_blank");
element.setAttribute("class", "btn btn-primary btn-xs");
tdElement.appendChild(element);
trElement.appendChild(tdElement);
contentsElement.appendChild(trElement);
}
}
while (footer_element.firstChild) {
footer_element.removeChild(footer_element.firstChild);
}
trElement = document.createElement('tr');
tdElement = document.createElement('td');
tdElement.innerHTML = "<span>" + cached_number + " &#x2713;</span>";
trElement.appendChild(tdElement);
tdElement = document.createElement('td');
tdElement.innerHTML = url_number + " URLs";
trElement.appendChild(tdElement);
tdElement = document.createElement('td');
trElement.appendChild(tdElement);
footer_element.appendChild(trElement);
})
.fail(function (error) {
// XXX An Error Should be thrown
console.log(error);
throw error;
});
}
function saveTextContent(gadget, event) {
var content,
url = gadget.props.element
.querySelector("form.crib-editor-get .url").value,
mimetype = gadget.props.element
.querySelector("form.crib-editor-save .mimetype").value;
console.log("saving content");
return new RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('codeeditor');
})
.push(function (code_editor_gadget) {
return code_editor_gadget.getContent();
})
.push(function (data) {
content = data[CODE_CONTENT_KEY] || "";
return gadget.getDeclaredGadget('crib_sw_gadget');
})
.push(function (crib_gadget) {
return crib_gadget.put(url, {content: content, type: mimetype});
})
.push(function () {
gadget.props.element
.querySelector(".crib-editor-save-status").textContent = "Saved " +
url + " files at " + Date();
})
.fail(function (error) {
console.log(error);
gadget.props.element
.querySelector(".crib-editor-save-status").textContent = error;
});
}
function getUrlTextContent(gadget, event, url) {
console.log("saving content");
return new RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('crib_sw_gadget');
})
.push(function (crib_gadget) {
return RSVP.all([crib_gadget.get(url),
gadget.getDeclaredGadget('codeeditor')]);
})
.push(function (data_list) {
gadget.props.element
.querySelector("form.crib-editor-save .mimetype")
.value = data_list[0].responseType;
return data_list[1].render({
key: CODE_CONTENT_KEY,
value: data_list[0].responseText,
mode: data_list[0].responseType
});
})
.fail(function (error) {
console.log(error);
});
}
function saveContentToJIO(gadget, event) {
var path_to_save, path_to_save_length, application_id, crib_sw_gadget,
jio_gadget, url_list = [], saved_number = 0;
path_to_save = gadget.props.element
.querySelector('form.crib-save-to-jio .save-path').value;
application_id = gadget.props.element
.querySelector('form.crib-save-to-jio .save-id').value;
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 crib_sw_gadget.allDocs({cached_only: true});
})
.push(function (data) {
url_list = data.urls;
// This is buggy, it fails if the document already exists with dav storage
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 = String(url_list[i]);
if (url.indexOf(path_to_save) === 0) {
saved_number += 1;
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);
extension = getExtension(url);
console.log("Will push attachment " + url + " to " + path_to_save);
promise_list.push(
jio_gadget.putAttachment(
"/" + application_id + ".attachment/", btoa(url) + extension,
response.target.response
)
);
}
return RSVP.all(promise_list);
})
.push(function () {
gadget.props.element
.querySelector(".crib-save-to-jio-status")
.textContent = "Saved " + saved_number + " files at " + Date();
})
.fail(function (error) {
gadget.props.element.querySelector(".crib-save-to-jio-status")
.textContent = error;
console.log(error);
});
}
function loadContentFromJIO(gadget, event) {
var path_to_load, path_to_load_length, application_id, crib_sw_gadget,
jio_gadget, url_list = [];
path_to_load = gadget.props.element
.querySelector('form.crib-load-from-jio .load-path').value;
application_id = gadget.props.element
.querySelector('form.crib-load-from-jio .load-id').value;
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.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;
console.log(url_list);
console.log(response_list);
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);
promise_list.push(
crib_sw_gadget.put(path_to_load + url, {blob: response_list[i]})
);
}
})
.push(function () {
gadget.props.element.querySelector(".crib-load-from-jio-status")
.textContent = "Loaded " + url_list.length + " files at " + Date();
})
.fail(function (error) {
gadget.props.element.querySelector(".crib-load-from-jio-status")
.textContent = error;
console.log(error);
});
}
function massRemoveFromCache(gadget, event) {
var url_list = gadget.props.element
.querySelector("form.crib-mass-remove textarea").value.match(/[^\r\n]+/g),
url_list_length = url_list.length;
return new RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('crib_sw_gadget');
})
.push(function (crib_gadget) {
var i,
promise_list = [];
for (i = 0; i < url_list_length; i += 1) {
promise_list.push(crib_gadget.remove(url_list[i]));
}
return RSVP.all(promise_list);
})
.push(function () {
gadget.props.element.querySelector(".crib-mass-remove-status")
.textContent = "Removed " + url_list.length + " files at " + Date();
})
.fail(function (error) {
gadget.props.element.querySelector(".crib-mass-remove-status")
.textContent = error;
console.log(error);
});
}
function displayTabContent(gadget, state) {
var tab_content_list = gadget.props.element
.querySelectorAll('.nav_content');
for (var i = 0; i < tab_content_list.length; i += 1) {
console.log('working with:');
console.log(tab_content_list[i]);
if (tab_content_list[i].getAttribute('class').indexOf(state) === -1) {
tab_content_list[i].setAttribute('style', 'display:none;');
} else {
tab_content_list[i].setAttribute('style', '');
}
}
}
rJS(window)
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
.ready(function (g) {
return createJio(g);
})
.allowPublicAcquisition("editor_saveContent", function () {
return saveTextContent(this, undefined);
})
.declareMethod('render', function (options) {
var promise_list = [],
gadget = this;
gadget.props.element.querySelector('form.crib-save-to-jio .save-path')
.value = document.location.origin;
gadget.props.element.querySelector('form.crib-load-from-jio .load-path')
.value = document.location.origin;
gadget.props.options = options;
// Add promise for list Cache content
if (options.url !== undefined) {
gadget.props.element.querySelector("form.crib-editor-get .url")
.value = options.url;
promise_list.push(getUrlTextContent(gadget, undefined, options.url));
}
displayTabContent(gadget, options.view || 'cribjs');
promise_list.push(displayURLList(gadget, undefined));
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-url-list-content"),
'submit',
false,
function (event) {displayURLList(gadget, event); }
));
// promise to get content from URL
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-editor-get"),
'submit',
false,
function (event) {
var url = gadget.props.element
.querySelector("form.crib-editor-get .url").value;
return getUrlTextContent(gadget, event, url);
}
));
// promise to save content
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-editor-save"),
'submit',
false,
function (event) {saveTextContent(gadget, event); }
));
// promise to save content to jIO
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-save-to-jio"),
'submit',
false,
function (event) {saveContentToJIO(gadget, event); }
));
// promise to load content from jIO
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-load-from-jio"),
'submit',
false,
function (event) {loadContentFromJIO(gadget, event); }
));
// promise to remove content from cache
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".crib-mass-remove"),
'submit',
false,
function (event) {massRemoveFromCache(gadget, event); }
));
// promise to use dav storage for jIO
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".form-use-jio-dav"),
'submit',
false,
function (event) {createDAVJio(gadget, event); }
));
// promise to use local storage for jIO
promise_list.push(loopEventListener(
gadget.props.element.querySelector(".form-use-jio-local"),
'submit',
false,
function (event) {
createJio(gadget, {type: "indexeddb", database: "cribjs"});
}
));
return RSVP.all(promise_list);
});
}(RSVP, rJS, Handlebars, jIO, loopEventListener));
\ No newline at end of file
html body nav.navbar-default {
background-color: transparent;
}
html body .navbar-default .navbar-nav>li>a {
color: #337ab7;
}
html body .navbar-default .navbar-brand {
color: #337ab7;
}
\ No newline at end of file
nav.navbar-default {
background-color: none;
}
\ No newline at end of file
/*globals window, document, RSVP, rJS, Handlebars, console*/
/*jslint indent: 2, maxlen: 80*/
(function (RSVP, rJS, Handlebars) {
"use strict";
function callCribSWGadget(gadget, method, param_list) {
var called = false;
return new RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget("crib_sw_gadget");
})
.push(function (crib_sw_gadget) {
return crib_sw_gadget[method].apply(crib_sw_gadget, param_list);
})
.push(function (result) {
return result;
}, function (error) {
throw error;
});
}
rJS(window)
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
.allowPublicAcquisition("crib_sw_allDocs", function (param_list) {
return callCribSWGadget(this, "allDocs", param_list);
})
.allowPublicAcquisition("crib_sw_remove", function (param_list) {
return callCribSWGadget(this, "remove", param_list);
})
.allowPublicAcquisition("crib_sw_put", function (param_list) {
return callCribSWGadget(this, "put", param_list);
})
.allowPublicAcquisition("crib_sw_get", function (param_list) {
return callCribSWGadget(this, "get", param_list);
})
.declareMethod('render', function (options) {
var promise_list = [],
gadget = this;
gadget.props.options = options;
// Add promise for list Cache content
// promise to use dav storage for jIO
return RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget('crib_ide_gadget');
})
.push(function (crib_ide_gadget) {
return crib_ide_gadget.render();
});
});
}(RSVP, rJS, Handlebars));
\ No newline at end of file
<!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">
<link rel="stylesheet" href="../lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../crib-editor3/cribjs.css">
<title>CribJS</title>
<script src="../lib/rsvp.js"></script>
<script src="../lib/jio-latest.js"></script>
<script src="../lib/renderjs.js"></script>
<script src="../gadget/gadget_global.js"></script>
<script src="./cribjs_launcher.js"></script>
</head>
<body>
<div data-gadget-url="../gadget/gadget_jio.html"
data-gadget-scope="setting_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="../gadget/gadget_cribjs_router.html"
data-gadget-scope="router"
data-gadget-sandbox="public"></div>
<div data-gadget-url="../gadget/gadget_cribjs_header.html"
data-gadget-scope="header"
data-gadget-sandbox="public"></div>
<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>
<div role="main" class="ui-content gadget-content"></div>
</body>
</html>
\ No newline at end of file
......@@ -4,81 +4,38 @@
<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">
<link rel="stylesheet" href="./cribjs.css">
<title>CribJS</title>
<script src="./lib/rsvp.js"></script>
<script src="./lib/jio-latest.js"></script>
<script src="./lib/renderjs.js"></script>
<script src="./gadget/gadget_global.js"></script>
<script src="./landing.js"></script>
<script src="./cribjs_launcher.js"></script>
</head>
<body>
<div data-gadget-url="./gadget/gadget_landing_cribjs.html"
data-gadget-scope="jio_cribjs"
<div data-gadget-url="./gadget/gadget_jio.html"
data-gadget-scope="setting_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="./gadget/gadget_cribjs_router.html"
data-gadget-scope="router"
data-gadget-sandbox="public"></div>
<div data-gadget-url="./gadget/gadget_cribjs_header.html"
data-gadget-scope="header"
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>
<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>
<div role="main" class="ui-content gadget-content"></div>
</body>
</html>
</html>
\ No newline at end of file
<!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>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Free Web Initiative with CribJS: 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 :)</p>
<div class="output">
<div id="status"></div>
<div id="commands" style="display: none">
<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>
<div>
<button id="list-contents">List Cache Contents</button>
<button id="save-contents">Save Cache</button>
<button id="load-contents">Load Cache</button>
</div>
<ul id="contents"></ul>
</div>
</div>
<script src="jungle.js"></script>
</body>
</html>
\ No newline at end of file
if ('serviceWorker' in navigator) {
//navigator.serviceWorker.register('./sw.js', {scope: './'}).then(function() {
// Registration was successful. Now, check to see whether the Service Worker is controlling the page.
if (navigator.serviceWorker.controller) {
// If .controller is set, then this page is being actively controlled by the Service Worker.
// Show the interface for sending messages to the service worker.
showCommands();
} else {
// If .controller isn't set, then prompt the user to reload the page so that the Service Worker can take
// control. Until that happens, the Service Worker's message handler won't be used.
document.querySelector('#status').textContent =
'Please reload this page to allow the service worker to take control.';
}
//}).catch(function(error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
// document.querySelector('#status').textContent = error;
//});
} else {
// The current browser doesn't support Service Workers.
var aElement = document.createElement('a');
aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
aElement.textContent = 'Service Workers are not supported in the current browser.';
document.querySelector('#status').appendChild(aElement);
}
function setStatus(statusMessage) {
document.querySelector('#status').textContent = statusMessage;
}
function showCommands() {
document.querySelector('#add').addEventListener('click', function() {
var url = document.querySelector('#url').value;
sendMessage({
command: 'add',
url: url,
information: new Blob([document.querySelector('#information').value], {
type: document.querySelector('#mimetype').value
})
}).then(function() {
// If the promise resolves, just display a success message.
setStatus('Added to cache: ' + url + ' at ' +Date());
}).catch(setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#delete').addEventListener('click', function() {
sendMessage({
command: 'delete',
url: document.querySelector('#url').value
}).then(function() {
// If the promise resolves, just display a success message.
setStatus('Deleted from cache.');
}).catch(setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#list-contents').addEventListener('click', function() {
sendMessage({
command: 'keys'
}).then(function(data) {
var contentsElement = document.querySelector('#contents');
// Clear out the existing items from the list.
while (contentsElement.firstChild) {
contentsElement.removeChild(contentsElement.firstChild);
}
// Add each cached URL to the list, one by one.
data.urls.forEach(function(url) {
var liElement = document.createElement('li');
liElement.textContent = url;
contentsElement.appendChild(liElement);
});
}).catch(setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#get').addEventListener('click', function() {
getContent(document.querySelector('#url').value,
function() {
document.querySelector('#mimetype').value = this.getResponseHeader("content-type");
document.querySelector('#information').value = this.responseText;
}
);
})
document.querySelector('#save-contents').addEventListener('click', function() {
sendMessage({
command: 'keys'
}).then(function(data) {
// Add each cached URL to the list, one by one.
data.urls.forEach(function(url) {
getContent(url,
function(){
var url_content = {'content_type': '', 'content':''};
url_content.content_type = this.getResponseHeader("content-type");
url_content.content = this.responseText;
localStorage.setItem(url, url_content);
}
);
});
}).catch(setStatus); // If the promise rejects, then setStatus will be called with the error.
});
document.querySelector('#commands').style.display = 'block';
}
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 Promise(function(resolve, reject) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(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
navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
});
}
function getContent(url, reqListener) {
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", url, true);
oReq.send();
}
\ No newline at end of file
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
/*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 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) {
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(),
edit_url="https://" + makeid(10) + ".cribjs.nexedi.net/crib-editor4/#page=editor&url="
+ site + "&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-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