Skip to content

R
renderjs
Commit 1a85fb74 authored by Cédric Le Ninivin's avatar Cédric Le Ninivin
Browse files
Options

Form Gadget: Add basic form gadget

parent cb939431
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 58 deletions
examples/fwi/form.html 0 → 100644
View file @ 1a85fb74
<!DOCTYPE html>
<html>
<head>
<title>Free Web Initiative</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="blog.css">
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../node_modules/rsvp/dist/rsvp-2.0.4.js" type="text/javascript"></script>
<script src="../../dist/renderjs-latest.js" type="text/javascript"></script>
<script src="form.js" type="text/javascript"></script>
</head>
<body style="background-color: white; color: black;">
<div class="editor_a">
<div data-role="fieldcontain" class="editor_a_safe">
</div>
<div data-role="fieldcontain" class="property_a_safe">
</div>
<div data-role="fieldcontain" class="editor_a">
</div>
</div>
</body>
</html>
examples/fwi/form.js 0 → 100644
View file @ 1a85fb74
/*jslint indent: 2 */
/*global EventEmitter, RSVP, jIO */
(function (window, rJS,$, RSVP) {
/**
* Web site configurations
*/
var gk = rJS(window),
that,
editor_context,
property_context,
current_document,
editor,
property;
gk.declareMethod('setContent', function (value) {
current_document = value;
return RSVP.all([
editor.setContent(value.text_content),
property.setContent(value)
])
})
.declareMethod('getContent', function () {
return RSVP.all([
editor.getContent(),
property.getContent()
])
.then(function (result_list) {
var document = result_list[1];
document.text_content = result_list[0];
return document;
});
})
.declareMethod('setForm', function () {
return that.declareGadget('./property.html')
.then(function(gadget){
console.log('prepared property');
property = gadget;
console.log(property);
property_context = $('.property_a_safe').last();
editor_context = $('.editor_a').last();
console.log('property:');
console.log(property);
property_context[0].appendChild(property.element);
})
.fail(function(error){
console.log(error);
})
})
.declareMethod('setEditor', function (editor_path) {
var g = this;
editor_context.empty();
return g.declareGadget(
editor_path,
{element: editor_context[0], sandbox: 'iframe'}
)
.then(function(gadget){
editor = gadget;
$(editor.element).trigger('create');
if (current_document){
return editor.setContent(current_document.text_content);
}
})
;
});
gk.ready(function (g) {
console.log('prepare form');
that = g;
});
}(window, rJS, jQuery, RSVP));
\ No newline at end of file
examples/fwi/index_list.js
View file @ 1a85fb74
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
document, document,
index_list_panel = $('#index_list'); index_list_panel = $('#index_list');
for (i = 0; i < document_list.length; i += 1) { for (i = 0; i < document_list.length; i += 1) {
document = document_list[i].doc; document = $.extend({}, document_list[i].doc);
index_list_panel.append( index_list_panel.append(
"<li><a href=#>" "<li><a href=#>"
+ document.title + document.title
......
examples/fwi/io.js
View file @ 1a85fb74
...@@ -38,7 +38,6 @@ ...@@ -38,7 +38,6 @@
]) ])
.then(function (result_list) { .then(function (result_list) {
var document = result_list[1]; var document = result_list[1];
document._id = key;
document.text_content = result_list[0]; document.text_content = result_list[0];
return g.setIO(document); return g.setIO(document);
}); });
......
examples/fwi/officejs.html
View file @ 1a85fb74
...@@ -38,20 +38,17 @@ ...@@ -38,20 +38,17 @@
<div data-role="content"> <div data-role="content">
<!-- editor A --> <!-- editor A -->
<div class="editor_a"> <div class="form_a">
<div data-role="fieldcontain" class="editor_a_safe">
</div>
<div data-role="fieldcontain" class="sidebar"></div> <div data-role="fieldcontain" class="sidebar"></div>
<div data-role="fieldcontain" class="property_a_safe"> <div data-role="fieldcontain" class="form_a_safe">
</div> </div>
<div data-role="fieldcontain" class="editor_a"> <div data-role="fieldcontain" class="form_a">
</div> </div>
</div> </div>
<!-- blog A --> <!-- blog A -->
<div class="blog_a"> <div class="blog_a">
<div data-role="fieldcontain" class="blog_a_safe"> <div data-role="fieldcontain" class="blog_a_safe">
</div> </div>
<div data-role="fieldcontain" class="blog_a"> <div data-role="fieldcontain" class="blog_a">
</div> </div>
</div> </div>
......
examples/fwi/officejs.js
View file @ 1a85fb74
...@@ -2,22 +2,19 @@ ...@@ -2,22 +2,19 @@
(function (window, $, rJS, RSVP) { (function (window, $, rJS, RSVP) {
"use strict"; "use strict";
function attachIOToEditor(all_param) { function attachIOToForm(all_param, editor_path) {
var editor = all_param[0], var form = all_param[0],
io = all_param[1], io = all_param[1],
id = all_param[2], index = all_param[2],
property = all_param[3],
index = all_param[4],
jio_config = { jio_config = {
"type": "dropbox", "type": "dropbox",
"access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C" "access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C"
}; };
$(io.element).trigger('create'); $(io.element).trigger('create');
$(property.element).trigger('create'); $(form.element).trigger('create');
$(editor.element).trigger('create'); return form.setEditor(editor_path)
return io.configureIO(jio_config)
.then(function () { .then(function () {
return ; return io.configureIO(jio_config)
}) })
.then(function () { .then(function () {
return io.getIOList().fail(function (error) { return io.getIOList().fail(function (error) {
...@@ -30,16 +27,13 @@ ...@@ -30,16 +27,13 @@
.then(function (document_list) { .then(function (document_list) {
console.log(document_list); console.log(document_list);
return RSVP.all([ return RSVP.all([
editor.setContent(document_list[0].doc.text_content), form.setContent(document_list[0].doc),
property.setContent(document_list[0].doc),
index.setDocumentList( index.setDocumentList(
document_list, document_list,
editor, editor.setContent, form, form.setContent,
property, property.setContent), io, io.getIO),
io.configureDataSourceCallback( io.configureDataSourceCallback(
editor, editor.getContent, form, form.getContent)
property, property.getContent ,
document_list[0].id)
]); ]);
}); });
} }
...@@ -52,12 +46,8 @@ ...@@ -52,12 +46,8 @@
"type": "dropbox", "type": "dropbox",
"access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C" "access_token": "v43SQLCEoi8AAAAAAAAAAVixCoMfDelgGj3NRPfEnqscAuNGp2LhoS8-GiAaDD4C"
}; };
$(io.element).trigger('create');
$(blog.element).trigger('create'); $(blog.element).trigger('create');
return io.configureIO(jio_config) return io.configureIO(jio_config)
.then(function () {
return io.configureDataSourceCallback(blog,blog.displayHTML, '48c3ca06-78b9-2f4c-80db-d5cb2417de45');
})
.then(function () { .then(function () {
return io.getIO('48c3ca06-78b9-2f4c-80db-d5cb2417de45').fail(function (error) { return io.getIO('48c3ca06-78b9-2f4c-80db-d5cb2417de45').fail(function (error) {
if (error.status === 404) { if (error.status === 404) {
...@@ -84,25 +74,24 @@ ...@@ -84,25 +74,24 @@
throw rejectedReason; throw rejectedReason;
} }
function createLoadNewEditorCallback(g, editor_path, e_c, io_path, i_c, property_path, p_c, index_path, index_c) { function createLoadNewEditorCallback(g, form_path, f_c, editor_path, io_path, i_c, index_path, index_c) {
return function () { return function () {
e_c.empty(); f_c.empty();
p_c.empty().attr("style","");
index_c.empty().attr("style",""); index_c.empty().attr("style","");
$('.editor_a_safe').attr("style","");
return RSVP.all([ return RSVP.all([
g.declareGadget(editor_path, {element: e_c[0], sandbox: 'iframe'}), g.declareGadget(form_path),
g.declareGadget(io_path), g.declareGadget(io_path),
"officejs",
g.declareGadget(property_path),
g.declareGadget(index_path) g.declareGadget(index_path)
]) ])
.then(function (all_param) { .then(function (all_param) {
i_c.empty(); i_c.empty();
f_c[0].appendChild(all_param[0].element);
i_c[0].appendChild(all_param[1].element); i_c[0].appendChild(all_param[1].element);
p_c[0].appendChild(all_param[3].element); index_c[0].appendChild(all_param[2].element);
index_c[0].appendChild(all_param[4].element); return all_param[0].setForm()
return attachIOToEditor(all_param); .then( function (){
attachIOToForm(all_param, editor_path);
})
}) })
.fail(handleError); .fail(handleError);
}; };
...@@ -120,8 +109,6 @@ ...@@ -120,8 +109,6 @@
"officejs" "officejs"
]) ])
.then(function (all_param) { .then(function (all_param) {
i_c.empty();
i_c[0].appendChild(all_param[1].element);
return attachIOToBlog(all_param); return attachIOToBlog(all_param);
}) })
.fail(handleError); .fail(handleError);
...@@ -129,14 +116,12 @@ ...@@ -129,14 +116,12 @@
} }
rJS(window).ready(function (g) { rJS(window).ready(function (g) {
var editor_a_context = $(g.element).find(".editor_a").last(), var io_a_context = $(g.element).find(".form_a_safe").last(),
io_a_context = $(g.element).find(".editor_a_safe").last(), io_blog_a_context = $(g.element).find(".form_a_safe").last(),
io_blog_a_context = $(g.element).find(".editor_a_safe").last(), blog_a_context = $(g.element).find(".form_a").last(),
blog_a_context = $(g.element).find(".editor_a").last(), form_a_context = $(g.element).find(".form_a").last(),
index_a_context = $(g.element).find(".sidebar").last(), index_a_context = $(g.element).find(".sidebar").last()
property_a_context = $(g.element).find(".property_a_safe").last()
; ;
// First, load the catalog gadget // First, load the catalog gadget
g.declareGadget('./catalog.html') g.declareGadget('./catalog.html')
.then(function (catalog) { .then(function (catalog) {
...@@ -163,20 +148,17 @@ ...@@ -163,20 +148,17 @@
}) })
.then(function (all_list) { .then(function (all_list) {
var panel_context = $(g.element).find(".bare_panel"), var panel_context = $(g.element).find(".bare_panel"),
form_path = './form.html',
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], blog_list = all_list[2],
property_list = all_list[3],
index_list = all_list[4], index_list = all_list[4],
editor_definition, editor_definition,
blog_definition, blog_definition,
index_definition = index_list[0].path, index_definition = index_list[0].path,
property_definition,
i; i;
// Load 1 editor and 1 IO and plug them // Load 1 editor and 1 IO and plug them
editor_a_context.empty(); console.log('Ready to prepare');
$('.editor_a_safe').attr("style","display:none");
$('.property_a_safe').attr("style","display:none");
return RSVP.all([ return RSVP.all([
g.declareGadget( g.declareGadget(
blog_list[0].path, blog_list[0].path,
...@@ -186,13 +168,13 @@ ...@@ -186,13 +168,13 @@
"officejs" "officejs"
]) ])
.then(function (all_param) { .then(function (all_param) {
console.log('setting blog');
io_blog_a_context.empty(); io_blog_a_context.empty();
io_blog_a_context[0].appendChild(all_param[1].element);
return attachIOToBlog(all_param); return attachIOToBlog(all_param);
}) })
.then(function () { .then(function () {
// Fill the panel // Fill the panel
property_definition = property_list[0]; console.log('fill panel');
for (i = 0; i < blog_list.length; i += 1) { for (i = 0; i < blog_list.length; i += 1) {
blog_definition = blog_list[i]; blog_definition = blog_list[i];
panel_context.append( panel_context.append(
...@@ -212,9 +194,9 @@ ...@@ -212,9 +194,9 @@
); );
panel_context.find('a').last().click( panel_context.find('a').last().click(
createLoadNewEditorCallback( createLoadNewEditorCallback(
g, editor_definition.path, g, form_path,
editor_a_context, io_list[0].path, io_a_context, form_a_context, editor_definition.path,
property_definition.path, property_a_context, io_list[0].path, io_a_context,
index_definition, index_a_context index_definition, index_a_context
) )
); );
......
examples/fwi/property.html
View file @ 1a85fb74
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<body style="background-color: white; color: black;"> <body style="background-color: white; color: black;">
<div class="main-container"> <div class="main-container">
<form id="document-property"> <form id="document-property">
<input id="_id" type="hidden" name="_id">
Title: <input id="title" type="text" name="title"> Title: <input id="title" type="text" name="title">
Reference: <input id="reference" type="text" name="reference"> Reference: <input id="reference" type="text" name="reference">
</form> </form>
......
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