Commit 07726f3b authored by Cédric Le Ninivin's avatar Cédric Le Ninivin

fwi: integrate basic blog gadget

parent ec10ac71
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Free Web Initiative</title> <title>Free Web Initiative</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="blog.css">
<script src="js/lib/events/events.js"></script> <script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="js/lib/jio/sha256.amd.js"></script> <script src="../../node_modules/rsvp/dist/rsvp-2.0.4.js" type="text/javascript"></script>
<script src="js/lib/jio/rsvp-custom.js"></script> <script src="../../dist/renderjs-latest.js" type="text/javascript"></script>
<script src="js/lib/jio/jio.js"></script> <script src="blog.js" type="text/javascript"></script>
<script src="js/lib/jio/complex_queries.js"></script>
<script src="js/lib/jio/localstorage.js"></script>
<script src="js/lib/jio/indexstorage.js"></script>
<script src="js/lib/jio/qiniustorage.js"></script>
<script src="js/lib/jio/dropboxstorage.js"></script>
<script src="js/lib/jio/hmac-sha1.js"></script>
</head> </head>
<header><h1 style="text-align:center;">Free Web Initiative</h1></header> <header><h1 style="text-align:center;">Free Web Initiative</h1></header>
<body style="background-color: white; color: black;"> <body style="background-color: white; color: black;">
...@@ -22,9 +17,6 @@ ...@@ -22,9 +17,6 @@
<div id="content"></div> <div id="content"></div>
</div> </div>
</div> </div>
<a id="dropbox_login" href=''>Dropbox</a>
<script src="js/dropbox.js"></script>
<script src="js/website.js"></script>
</body> </body>
</html> </html>
/*jslint indent: 2 */ /*jslint indent: 2 */
/*global EventEmitter, RSVP, jIO */ /*global EventEmitter, RSVP, jIO */
(function () { (function (window, rJS,$) {
/** /**
* Web site configurations * Web site configurations
*/ */
var now, var gk = rJS(window);
website_content =
[
{
"title": "Motto",
"reference": "erp5-Kyorin.Success.Case",
"language": "en",
"version": "001",
"created": now,
"modified": now,
"description": "A success story of Kyorin implementation of ERP5",
"text_content": "<h2>Motto</h2><p><strong>Regive access to your code</strong></p>"
},{
"title": "Guidelines",
"reference": "erp5-Tristans.document",
"language": "en",
"version": "001",
"created": now,
"modified": now,
"description": "test stestestes",
"text_content": '<h2>Free Web Application rules/guidelines</h2><p>see: <a href="http://www.gnu.org/philosophy/free-sw.en.html">Free Software Philosophy</a>.<ul><li>The freedom to run the application, for any purpose (freedom 0).</li><li>The freedom to study how the application works, and change it so it does your computing as you wish (freedom 1). Access to the source code is a precondition for this. (free web application should provide original code and a facility to compile it.)</li><li>The freedom to redistribute copies so you can help your neighbor (freedom 2).</li><li>The freedom to distribute copies of your modified versions to others (freedom 3). By doing this you can give the whole community a chance to benefit from your changes. Access to the source code is a precondition for this.</l></ul>'
},{
"title": "Freedom Button",
"reference": "erp5-Kyorin.Success.FB",
"language": "en",
"version": "001",
"created": now,
"modified": now,
"description": "A success story of Kyorin implementation of ERP5",
"text_content": "<h2>Freedom Button</h2><p>Free web is at the reach of a button: the freedom button displayed on your page. With just a click, users start to browse and modify the code.</p>"
},{
"title": "Education",
"reference": "erp5-Kyorin.Success.edu",
"language": "en",
"version": "001",
"created": now,
"modified": now,
"description": "A success story of Kyorin implementation of ERP5",
"text_content": "<h2>Free Web is for Education</h2><p>Computer science have never been this easy to practice. The only thing you need is a browser. Let's offer people a opportunity to learn how tools they uses everyday are make.</p><p>Free Web offer the opportunity for user to easily modify the way they are using the web. It facilitates the development of a web application because the user only need a browser to create it. He can easily ask for help because its code is available to everyone. You can also learn by modify and tweaking around an existing application. Further more, languages used in Web application are standard, to learn how to do basic applications you just need to learn 3 basic technologies: JavaScript, html and css.Doing so we offer a direct development tool without any installation. Only the code stays. We can reach people more easily. A MooC only cost its development and in then available to everyone for free, ready for modification and community improvement.We this, we can reach people that could not be reached before: women, children, elders... We can teach them and ask them to do the tools they will be using on the web. Computer science and the Web have been developed by scientists, developers and entrepreneurs, it is time for users to have a word because this amazing tool is for them.</p>"
}
],
configuration, cache = {},
/*jio_config = {
"type": "index",
"indices": [{
"id": "id.json",
"index": ["_id", "type", "reference", "modified",
"title", "description",
"text_content"],
"title": "Index the ID",
"attachment": "index.json"},
],
"sub_storage": {
"type": "dropbox",
"bucket": "yourtasks",
"access_key": "-ZKzQmTR8MRh0UEIE-a7Sc-GlD2Rd2tHCEweqKzP",
"secret_key": "LUKfbUtFSc_L8Ix8ZRrwEJfC6PgJbJiRWqpnz-kg"
}
},
jio_config = {
"type": "local",
"username": "Nexedi SA",
"application_name": "Live Website Demo"
},
jio_config = {
"type": "index",
"indices": [{
"id": "id.json",
"index": ["_id", "type", "reference", "modified",
"title", "description",
"text_content"],
"title": "Index the ID",
"attachment": "index.json"},
],
"sub_storage": {
"type": "dropbox",
"access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C"
}
},*/
jio_config = {
"type": "dropbox",
"access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C"
},
repository = jIO.createJIO(jio_config)
,website_emitter = new events.EventEmitter(), place, cache;
/**
* allow users to bind listeners to websites event
* TODO need to export website_emitter to window!
*/
place = {
"index": {
"dom": document.querySelector("#index")
},
"content": {
"dom": document.querySelector("#content")
}
};
/**
* SHOULD BE USED FOR TEST ONLY
* Creates and fill the page repository
* @return A promise
*/
var addSomePageIntoLocalStorageIfNecessary = function () {
/*Empty local storage before filling it*/
//window.localStorage.clear();
//window.sessionStorage.clear();
console.log("filling");
for (i = 0; i < website_content.length -1; i += 1) {
repository.post(website_content[i]);
}
console.log('almost')
return repository.post(website_content[website_content.length -1])
};
/**
* Retrieve the list of web pages
*/
var getPageList = function () {
return repository.allDocs({"include_docs": true})
.then(function (answer) {
return answer;
})
};
var loadAndDisplayIndexView = function () {
getPageList()
.then(function (response) {
// on index success
var i, length, rows, row, page_list_html = "<ul>";
rows = response.data.rows;
length = rows.length;
for (i = 0; i < length; i += 1) {
page_list_html += "<li><a href=\"#" + rows[i].doc.title.replace(/"/g, "\\\"") +
"\">" + rows[i].doc.title + "</a></li>";
}
page_list_html += "</ul>";
place.index.dom.innerHTML = page_list_html;
})
};
var loadAndDisplayContentPage = function (page_title) {
getPageList()
.then(function (response) {
// on page list response
var i, rows = response.data.rows, length = rows.length;
for (i = 0; i < length; i += 1) {
if (rows[i].doc.title === page_title) {
// show page
place.content.dom.innerHTML = rows[i].doc.text_content;
return;
}
}
place.content.dom.innerHTML = "<p>404</p>";
})
},
/** var loadAndDisplayIndexView = function () {
* Run the web site runtime var i, length, rows, row, page_list_html = "<ul>";
*/ rows = this.page_list.data.rows;
runWebSite = function () { length = rows.length;
console.log('run'); for (i = 0; i < length; i += 1) {
window.addEventListener("hashchange", function () { page_list_html += "<li><a href=\"#" + rows[i].doc.title.replace(/"/g, "\\\"") +
loadAndDisplayContentPage(location.hash.slice(1)); "\">" + rows[i].doc.title + "</a></li>";
}
page_list_html += "</ul>";
place.index.dom.innerHTML = page_list_html;
};
var loadAndDisplayContentPage = function (value) {
var i; //,
//rows = this.page_list.data.rows,
//length = rows.length;
//for (i = 0; i < length; i += 1) {
//if (rows[i].doc.title === page_title) {
// // show page
$("#content").empty().append(value);
//place.content.dom.innerHTML = rows[i].doc.text_content;
// return;
// }
//}
//place.content.dom.innerHTML = "<p>404</p>";
};
/* Initialize Page List */
gk.declareMethod('setPageList', function (page_list) {
this.page_list = page_list;
});
gk.declareMethod('displayHTML', function (value) {
this.value = value;
loadAndDisplayContentPage(value);
}); });
console.log('Index')
loadAndDisplayIndexView(); /**
if (location.hash) { * Run the web site runtime
loadAndDisplayContentPage(location.hash.slice(1)); */
} gk.ready(function (g) {
}; console.log('run-blog');
/*addSomePageIntoLocalStorageIfNecessary().then(runWebSite, console.error);}());*/ });
runWebSite();}());
\ No newline at end of file }(window, rJS, jQuery));
\ No newline at end of file
...@@ -27,6 +27,11 @@ ...@@ -27,6 +27,11 @@
"title" : "Aloha Editor Gadget", "title" : "Aloha Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor" "interface" : "http://www.renderjs.org/interface/editor"
}, },
blog_1_dict = {
"path" : "./blog.html",
"title" : "Blog Gadget",
"interface" : "http://www.renderjs.org/interface/blog"
},
catalog_list = [ catalog_list = [
{ {
"path" : "./officejs.html", "path" : "./officejs.html",
...@@ -40,6 +45,7 @@ ...@@ -40,6 +45,7 @@
catalog_list.push(editor_2_dict); catalog_list.push(editor_2_dict);
catalog_list.push(editor_3_dict); catalog_list.push(editor_3_dict);
catalog_list.push(editor_4_dict); catalog_list.push(editor_4_dict);
catalog_list.push(blog_1_dict);
gk.declareMethod('allDocs', function (filter) { gk.declareMethod('allDocs', function (filter) {
var deferred = $.Deferred(); var deferred = $.Deferred();
...@@ -48,6 +54,9 @@ ...@@ -48,6 +54,9 @@
} else if (filter.query === } else if (filter.query ===
'interface: "http://www.renderjs.org/interface/io"') { 'interface: "http://www.renderjs.org/interface/io"') {
deferred.resolve([io_dict]); deferred.resolve([io_dict]);
} else if (filter.query ===
'interface: "http://www.renderjs.org/interface/blog"') {
deferred.resolve([blog_1_dict]);
} else if (filter.query === } else if (filter.query ===
'interface: "http://www.renderjs.org/interface/editor"') { 'interface: "http://www.renderjs.org/interface/editor"') {
deferred.resolve([editor_1_dict, editor_2_dict, editor_3_dict, editor_4_dict]); deferred.resolve([editor_1_dict, editor_2_dict, editor_3_dict, editor_4_dict]);
......
...@@ -45,6 +45,14 @@ ...@@ -45,6 +45,14 @@
<div data-role="fieldcontain" class="editor_a"> <div data-role="fieldcontain" class="editor_a">
</div> </div>
</div> </div>
<!-- blog A -->
<div class="blog_a">
<div data-role="fieldcontain" class="blog_a_safe">
</div>
<div data-role="fieldcontain" class="blog_a">
</div>
</div>
<!-- editor B --> <!-- editor B -->
<div class="editor_b"> <div class="editor_b">
......
...@@ -36,6 +36,33 @@ ...@@ -36,6 +36,33 @@
}); });
} }
function attachIOToBlog(all_param) {
var blog = all_param[0],
io = all_param[1],
id = all_param[2],
jio_config = {
"type": "dropbox",
"access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C"
};
$(io.element).trigger('create');
$(blog.element).trigger('create');
return io.configureIO(id, jio_config)
.then(function () {
return io.configureDataSourceCallback(blog,blog.displayHTML);
})
.then(function () {
return io.getIO().fail(function (error) {
if (error.status === 404) {
return "";
}
throw error;
});
})
.then(function (value) {
return blog.displayHTML(value);
});
}
function handleError(rejectedReason) { function handleError(rejectedReason) {
var word_list; var word_list;
console.warn(rejectedReason); console.warn(rejectedReason);
...@@ -66,23 +93,47 @@ ...@@ -66,23 +93,47 @@
}; };
} }
function createLoadNewBlogCallback(g, blog_path, e_c, io_path, i_c) {
return function () {
e_c.empty();
return RSVP.all([
g.declareGadget(blog_path, {element: e_c[0], sandbox: 'iframe'}),
g.declareGadget(io_path),
"officejs"
])
.then(function (all_param) {
i_c.empty();
i_c[0].appendChild(all_param[1].element);
return attachIOToBlog(all_param);
})
.fail(handleError);
};
}
rJS(window).ready(function (g) { rJS(window).ready(function (g) {
var editor_a_context = $(g.element).find(".editor_a").last(), var editor_a_context = $(g.element).find(".editor_a").last(),
io_a_context = $(g.element).find(".editor_a_safe").last(); io_a_context = $(g.element).find(".editor_a_safe").last(),
io_blog_a_context = $(g.element).find(".blog_a_safe").last(),
blog_a_context = $(g.element).find(".blog_a").last();
// editor_b_context = g.context.find(".editor_b").last(), // editor_b_context = g.context.find(".editor_b").last(),
// io_b_context = g.context.find(".editor_b_safe").last(); // io_b_context = g.context.find(".editor_b_safe").last();
// First, load the catalog gadget // First, load the catalog gadget
console.log('start');
g.declareGadget('./catalog.html') g.declareGadget('./catalog.html')
.then(function (catalog) { .then(function (catalog) {
// Fetch the list of editor and io gadgets // Fetch the list of editor and io gadgets
// This is done in 2 different queries to the catalog // This is done in 2 different queries to the catalog
console.log('catalog ready');
return RSVP.all([ return RSVP.all([
catalog.allDocs( catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/editor"'} {query: 'interface: "http://www.renderjs.org/interface/editor"'}
), ),
catalog.allDocs( catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/io"'} {query: 'interface: "http://www.renderjs.org/interface/io"'}
),
catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/blog"'}
) )
]); ]);
}) })
...@@ -90,9 +141,10 @@ ...@@ -90,9 +141,10 @@
var panel_context = $(g.element).find(".bare_panel"), var panel_context = $(g.element).find(".bare_panel"),
editor_list = all_list[0], editor_list = all_list[0],
io_list = all_list[1], io_list = all_list[1],
blog_list = all_list[2],
editor_definition, editor_definition,
i; i;
console.log('got Catalog Stuff');
// Load 1 editor and 1 IO and plug them // Load 1 editor and 1 IO and plug them
editor_a_context.empty(); editor_a_context.empty();
return RSVP.all([ return RSVP.all([
...@@ -104,10 +156,25 @@ ...@@ -104,10 +156,25 @@
"officejs" "officejs"
]) ])
.then(function (all_param) { .then(function (all_param) {
console.log('Editor Gadget Prepared');
io_a_context.empty(); io_a_context.empty();
io_a_context[0].appendChild(all_param[1].element); io_a_context[0].appendChild(all_param[1].element);
return attachIOToEditor(all_param); return attachIOToEditor(all_param);
}) })
.then(function (){
return RSVP.all([ // Load Blog
g.declareGadget(
blog_list[0].path,
{element: blog_a_context[0], sandbox: 'iframe'}
),
g.declareGadget(io_list[0].path),// io_blog_a_context),
"officejs"
])})
.then(function (all_param) {
io_blog_a_context.empty();
io_blog_a_context[0].appendChild(all_param[1].element);
return attachIOToBlog(all_param);
})
.then(function () { .then(function () {
// Fill the panel // Fill the panel
for (i = 0; i < editor_list.length; i += 1) { for (i = 0; i < editor_list.length; i += 1) {
......
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