Commit e37a7e68 authored by Romain Courteaud's avatar Romain Courteaud

Implement declareGadget.

Add an example of renderjs usage.
parent 3fbd6e26
......@@ -14,7 +14,11 @@ all: external lint test build doc
external: lib/sinon/sinon.js \
lib/jquery/jquery.js \
lib/qunit/qunit.js \
lib/qunit/qunit.css
lib/qunit/qunit.css \
lib/jio/jio.js \
lib/jio/md5.js \
lib/jio/complex_queries.js \
lib/jio/localstorage.js
lib/sinon/sinon.js:
@mkdir -p $(@D)
......@@ -22,12 +26,28 @@ lib/sinon/sinon.js:
lib/jquery/jquery.js:
@mkdir -p $(@D)
curl -s -o $@ http://code.jquery.com/jquery-2.0.3.js
curl -s -o $@ http://code.jquery.com/jquery-1.9.1.js
lib/qunit/qunit.%:
@mkdir -p $(@D)
curl -s -o $@ http://code.jquery.com/qunit/qunit-1.12.0$(suffix $@)
lib/jio/jio.js:
@mkdir -p $(@D)
curl -s -o $@ http://git.erp5.org/gitweb/jio.git/blob_plain/refs/heads/master:/jio.js
lib/jio/md5.js:
@mkdir -p $(@D)
curl -s -o $@ http://git.erp5.org/gitweb/jio.git/blob_plain/refs/heads/master:/lib/md5/md5.js
lib/jio/localstorage.js:
@mkdir -p $(@D)
curl -s -o $@ http://git.erp5.org/gitweb/jio.git/blob_plain/refs/heads/master:/src/jio.storage/localstorage.js
lib/jio/complex_queries.js:
@mkdir -p $(@D)
curl -s -o $@ http://git.erp5.org/gitweb/jio.git/blob_plain/refs/heads/master:/complex_queries.js
$(RENDERJS_MIN): $(RENDERJS)
$(UGLIFY_CMD) "$<" > "$@"
......@@ -49,4 +69,4 @@ lint: ${BUILDDIR}/$(RENDERJS).lint
doc:
$(YUIDOC_CMD) .
clean:
rm -rf $(RENDERJS_MIN) ${BUILDDIR} lib/sinon lib/jquery lib/qunit
rm -rf $(RENDERJS_MIN) ${BUILDDIR} lib/sinon lib/jquery lib/qunit lib/jio
......@@ -2,3 +2,4 @@ handle relative url #parseGadgetHTML TODO
how to manage local script tag #parseGadgetHTML TODO
check that gadget/dom context is kept in promise TODO
keep css file media query #declareCSS TODO
handle double loading of renderjs js file TODO
<html>
<head>
<title>Catalog Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../renderjs.js" type="text/javascript"></script>
<script src="catalog.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
/*global window, jQuery, rJS */
"use strict";
(function (window, $, rJS, undefined) {
var gk = rJS(window),
io_dict = {
"path" : "./io.html",
"title" : "IO",
"interface" : "http://www.renderjs.org/interface/io",
},
editor_1_dict = {
"path" : "./editor.html",
"title" : "Simple Text Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor",
},
editor_2_dict = {
"path" : "./jqteditor.html",
"title" : "JQuery Text 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);
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]);
} else {
deferred.reject("Unsupported filter");
}
return deferred.promise();
});
}(window, $, rJS))
<html>
<head>
<title>Simple Text Editor Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../renderjs.js" type="text/javascript"></script>
<script src="editor.js" type="text/javascript"></script>
<link rel="http://www.renderjs.org/rel/interface"
href="http://www.renderjs.org/interface/editor"/>
</head>
<body>
<!--label for="textarea-a">Your basic text editor:</label-->
<textarea id="textarea-a"></textarea>
</body>
</html>
/*global window, jQuery, rJS */
"use strict";
(function (window, $, rJS) {
function escape_text(text) {
// &, ", ', <, >, /
return text.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
};
var gk = rJS(window);
gk.declareMethod('setContent', function (value) {
return rJS(this).context.find('textarea').val(escape_text(value));
})
.declareMethod('getContent', function () {
return rJS(this).context.find('textarea').val();
});
}(window, $, rJS))
<html>
<head>
<title>IO</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../renderjs.js" type="text/javascript"></script>
<script src="../../lib/jio/md5.js" type="text/javascript"></script>
<script src="../../lib/jio/jio.js" type="text/javascript"></script>
<script src="../../lib/jio/complex_queries.js" type="text/javascript"></script>
<script src="../../lib/jio/localstorage.js" 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 window, jQuery, jIO, rJS */
"use strict";
(function (window, $, jIO, rJS) {
var gk = rJS(window);
gk.declareMethod('configureIO', function (key) {
rJS(this).jio = jIO.newJio({
"type": "local",
"username": "couscous",
"application_name": "renderjs"
});
rJS(this).jio_key = key;
})
.declareMethod('getIO', function () {
var deferred = $.Deferred(),
default_value = "",
gadget = rJS(this);
gadget.jio.getAttachment({
"_id": gadget.jio_key,
"_attachment": "body.txt"
}, function (err, response) {
if (err) {
if (err.status === 404) {
deferred.resolve(default_value);
} else {
deferred.reject(err);
}
} else {
deferred.resolve(response || default_value);
}
});
return deferred.promise();
})
.declareMethod('setIO', function (value) {
var deferred = $.Deferred(),
default_value = "",
gadget = rJS(this);
gadget.jio.put({"_id": gadget.jio_key},
function (err, response) {
if (err) {
deferred.reject(err);
} else {
gadget.jio.putAttachment({
"_id": gadget.jio_key,
"_attachment": "body.txt",
"_data": value,
"_mimetype": "text/plain"
}, function (err, response) {
if (err) {
deferred.reject(err);
} else {
deferred.resolve();
}
});
}
});
return deferred.promise();
})
.declareMethod('configureDataSourceCallback', function (that, callback) {
var g = rJS(this);
g.context.find('a').unbind('click').click(function () {
callback.apply(that).done(function (value) {
g.setIO(value);
});
});
});
}(window, $, jIO, rJS))
This diff is collapsed.
This diff is collapsed.
<html>
<head>
<title>JQuery Text Editor Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="jqte/jquery-te-1.4.0.css" />
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../renderjs.js" type="text/javascript"></script>
<script src="jqte/jquery-te-1.4.0.js" type="text/javascript"></script>
<script src="jqteditor.js" type="text/javascript"></script>
<link rel="http://www.renderjs.org/rel/interface"
href="http://www.renderjs.org/interface/editor"/>
</head>
<body>
<!--label for="textarea-b">Your advanced text editor:</label-->
<textarea id="textarea-b" class="ckeditor"></textarea>
</body>
</html>
/*global window, jQuery, rJS */
"use strict";
(function (window, $, rJS) {
var gk = rJS(window);
gk.declareMethod('setContent', function (value) {
// return rJS(this).context.find('textarea').val(escape_text(value));
return rJS(this).context.find('#textarea-b').jqteVal(value);
})
.declareMethod('getContent', function () {
return rJS(this).context.find('#textarea-b').val();
});
gk.ready(function () {
var g = rJS(this);
g.context.find("#textarea-b").jqte();
});
}(window, $, rJS))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Office JS</title>
<link rel="stylesheet" href="../../lib/jqm/jquery.mobile.css" />
<script src="../../lib/jquery/jquery.js" type="text/javascript"></script>
<script src="../../renderjs.js" type="text/javascript"></script>
<script src="officejs.js" type="text/javascript"></script>
<script src="../../lib/jqm/jquery.mobile.js" 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>
/*global window, jQuery, rJS */
"use strict";
(function (window, $, rJS) {
function attachIOToEditor(editor, io, id) {
editor.context.trigger('create');
io.context.trigger('create');
io.configureIO(id).done(function () {
io.configureDataSourceCallback(editor, editor.getContent);
io.getIO().done(function (data) {
editor.setContent(data);
});
});
}
rJS(window).ready(function () {
var g = rJS(this),
catalog_context = g.context.find(".catalog_location").last(),
editor_a_context = g.context.find(".editor_a").last(),
io_a_context = g.context.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.html', catalog_context).done(function (catalog) {
// Fetch the list of editor and io gadgets
// This is done in 2 different queries to the catalog
$.when(
catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/editor"'}),
catalog.allDocs(
{query: 'interface: "http://www.renderjs.org/interface/io"'}))
.done(function (editor_list, io_list) {
var panel_context = g.context.find(".bare_panel");
// Load 1 editor and 1 IO and plug them
$.when(
g.declareGadget(editor_list[0].path, editor_a_context),
g.declareGadget(io_list[0].path, io_a_context),
"officejs").done(attachIOToEditor);
// Fill the panel
$.each(editor_list, function(i, editor_definition) {
panel_context.append(
'<a href="#" data-role="button" data-icon="edit" ' +
'data-iconpos="left">' + editor_definition.title + '</a>');
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');
});
});
// $.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, $, rJS))
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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