Commit e5044033 authored by Romain Courteaud's avatar Romain Courteaud

Integrate simple renderjs demo.

parent e8b75933
......@@ -87,6 +87,8 @@ module.exports = function (grunt) {
syncImport: true
},
files: {
"<%= global_config.dest %>/jio_drive/jio_drive.css":
"<%= global_config.src %>/jio_drive/jio_drive.less",
"<%= global_config.dest %>/editor_ace/aceeditor.css":
"<%= global_config.src %>/editor_ace/aceeditor.less",
"<%= global_config.dest %>/erp5/erp5.css":
......
/*global jQuery, rJS */
(function (window, $, rJS) {
"use strict";
var gk = rJS(window),
io_dict = {
"path" : "../jio_drive/io.html",
"title" : "IO",
"interface" : "http://www.renderjs.org/interface/io"
},
editor_1_dict = {
"path" : "../editor_raw/index.html",
"title" : "Simple Text Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor"
},
editor_2_dict = {
"path" : "../editor_jqte/index.html",
"title" : "JQuery Text Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor"
},
editor_3_dict = {
"path" : "../editor_ace/index.html",
"title" : "Ace Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor"
},
editor_4_dict = {
"path" : "../editor_aloha/index.html",
"title" : "Aloha Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor"
},
catalog_list = [
{
"path" : "./officejs.html",
"title" : "Office JS",
"interface" : "http://www.renderjs.org/interface/officejs"
}
];
catalog_list.push(io_dict);
catalog_list.push(editor_1_dict);
catalog_list.push(editor_2_dict);
catalog_list.push(editor_3_dict);
catalog_list.push(editor_4_dict);
gk.declareMethod('allDocs', function (filter) {
var deferred = $.Deferred();
if (filter === undefined) {
deferred.resolve(catalog_list);
} else if (filter.query ===
'interface: "http://www.renderjs.org/interface/io"') {
deferred.resolve([io_dict]);
} else if (filter.query ===
'interface: "http://www.renderjs.org/interface/editor"') {
deferred.resolve([editor_1_dict, editor_2_dict,
editor_3_dict, editor_4_dict]);
} else {
deferred.reject("Unsupported filter");
}
return deferred.promise();
});
}(window, jQuery, rJS));
<html>
<head>
<title>Catalog Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="catalog.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jio Drive</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jio_drive.css" />
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<script src="jio_drive.js" type="text/javascript"></script>
<script src="../<%= curl.jquerymobilejs.relative_dest %>" type="text/javascript"></script>
<link rel="http://www.renderjs.org/rel/interface"
href="http://www.renderjs.org/interface/officejs"/>
</head>
<body>
<div data-role="page" id="index">
<!-- header -->
<div data-role="header">
<a href="#menu"
data-rel="panel"
data-role="button"
data-icon="bars"
data-iconpos="notext"
data-dismissable="false">Menu</a>
<h1>Office JS</h1>
</div>
<!-- panel -->
<div data-role="panel" id="menu" data-theme="a" class="bare_panel"></div>
<!--div class="catalog_location"></div-->
<!-- content -->
<div data-role="content">
<!-- editor A -->
<div class="editor_a">
<div data-role="fieldcontain" class="editor_a_safe">
</div>
<div data-role="fieldcontain" class="editor_a">
</div>
</div>
<!-- editor B -->
<div class="editor_b">
<div data-role="fieldcontain" class="editor_b_safe">
</div>
<div data-role="fieldcontain" class="editor_b">
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>IO</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
<script src="io.js" type="text/javascript"></script>
<link rel="http://www.renderjs.org/rel/interface"
href="http://www.renderjs.org/interface/io"/>
</head>
<body>
<a href="#" data-role="button" data-icon="check" data-inline="true">Save</a>
</body>
</html>
/*global jQuery, jIO, rJS */
(function (window, $, jIO, rJS) {
"use strict";
var gk = rJS(window);
gk.declareMethod('configureIO', function (key) {
this.jio = jIO.createJIO({
"type": "local",
"username": "couscous",
"application_name": "renderjs"
});
this.jio_key = key;
})
.declareMethod('getIO', function () {
var gadget = this;
return gadget.jio.getAttachment({
"_id": gadget.jio_key,
"_attachment": "body.txt"
}).then(function (response) {
return jIO.util.readBlobAsText(response.data);
}).then(function (response) {
return response.target.result;
});
})
.declareMethod('setIO', function (value) {
var gadget = this;
return gadget.jio.put({"_id": gadget.jio_key})
.then(function () {
return gadget.jio.putAttachment({
"_id": gadget.jio_key,
"_attachment": "body.txt",
"_data": value,
"_mimetype": "text/plain"
});
});
})
.declareMethod('configureDataSourceCallback', function (that, callback) {
var g = this;
$(g.element).find('a').unbind('click').click(function () {
callback.apply(that).then(function (value) {
g.setIO(value);
});
});
});
}(window, jQuery, jIO, rJS));
/*global console, jQuery, rJS, RSVP */
/*jslint nomen: true*/
(function (window, $, rJS, RSVP) {
"use strict";
function attachIOToEditor(all_param) {
var editor = all_param[0],
io = all_param[1],
id = all_param[2];
$(io.__element).trigger('create');
$(editor.__element).trigger('create');
// .then(function (element) {
// element.trigger('create');
// });
// io.getElement()
// .then(function (element) {
// element.trigger('create');
// });
return io.configureIO(id)
.then(function () {
return io.configureDataSourceCallback(editor, editor.getContent);
})
.then(function () {
return io.getIO().fail(function (error) {
if (error.status === 404) {
return "";
}
throw error;
});
})
.then(function (value) {
return editor.setContent(value);
});
}
function handleError(rejectedReason) {
var word_list;
console.warn(rejectedReason);
if (rejectedReason instanceof Error) {
word_list = rejectedReason.toString();
} else {
word_list = JSON.stringify(rejectedReason);
}
// XXX Escape text
document.getElementsByTagName('body')[0].innerHTML = word_list;
throw rejectedReason;
}
function createLoadNewEditorCallback(g, editor_path, e_c, io_path, i_c) {
return function () {
e_c.empty();
return RSVP.all([
g.declareGadget(editor_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 attachIOToEditor(all_param);
})
.fail(handleError);
};
}
rJS(window).ready(function (g) {
var editor_a_context = $(g.__element).find(".editor_a").last(),
io_a_context = $(g.__element).find(".editor_a_safe").last();
// editor_b_context = g.context.find(".editor_b").last(),
// io_b_context = g.context.find(".editor_b_safe").last();
// First, load the catalog gadget
g.declareGadget('../catalog_static/index.html')
.then(function (catalog) {
// Fetch the list of editor and io gadgets
// This is done in 2 different queries to the catalog
return RSVP.all([
catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/editor"'}
),
catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/io"'}
)
]);
})
.then(function (all_list) {
var panel_context = $(g.__element).find(".bare_panel"),
editor_list = all_list[0],
io_list = all_list[1],
editor_definition,
i;
// Load 1 editor and 1 IO and plug them
editor_a_context.empty();
return RSVP.all([
g.declareGadget(
editor_list[0].path,
{element: editor_a_context[0], sandbox: 'iframe'}
),
g.declareGadget(io_list[0].path),// io_a_context),
"officejs"
])
.then(function (all_param) {
io_a_context.empty();
io_a_context[0].appendChild(all_param[1].__element);
return attachIOToEditor(all_param);
})
.then(function () {
// Fill the panel
for (i = 0; i < editor_list.length; i += 1) {
editor_definition = editor_list[i];
panel_context.append(
'<a href="#" data-role="button" data-icon="edit" ' +
'data-iconpos="left">' + editor_definition.title + '</a>'
);
// $(editor_definition.element).click(
panel_context.find('a').last().click(
createLoadNewEditorCallback(g, editor_definition.path,
editor_a_context, io_list[0].path, io_a_context)
);
// XXX Handle links
// panel_context.find('a').last().click(function () {
// $.when(
// g.declareGadget(editor_definition.path,
// editor_a_context),
// g.declareGadget(io_list[0].path, io_a_context),
// "officejs"
// ).done(attachIOToEditor);
// });
}
panel_context.trigger('create');
});
})
.fail(handleError);
// $.when(
// g.declareGadget('./jqteditor.html', editor_a_context),
// g.declareGadget('./io.html', io_a_context),
// "officejs_a").done(attachIOToEditor);
// $.when(
// g.declareGadget('./editor.html', editor_b_context),
// g.declareGadget('./io.html', io_b_context),
// "officejs_b").done(attachIOToEditor);
});
}(window, jQuery, rJS, RSVP));
iframe {
border:0;
margin:0;
padding:0;
width:80%;
height:300px;
}
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