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
This diff is collapsed.
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