--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/css/space-editor.css Tue May 28 16:45:12 2013 +0200
@@ -0,0 +1,143 @@
+html {
+ overflow: visible !important;
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif; background: #F6F6F6; color: #333333;
+}
+
+.clearer {
+ display: block; clear: both; height: 1px;
+}
+
+h1 {
+ margin-bottom: 5px; padding: 0 15px; background: #333333; color: #ffffff;
+ font-weight: bold; font-size: 30px; line-height: 60px;
+}
+
+.right {
+ width: 301px; position: absolute; top: 10px; right: 10px;
+}
+
+.main {
+ margin: 10px 330px 10px 20px;
+}
+
+.blue-button {
+ display: inline-block; padding: 4px 6px;
+ color: #ffffff; text-decoration: none; border-radius: 4px;
+ background: -moz-linear-gradient(top, #6080c0, #2040a0);
+ background: -webkit-linear-gradient(top, #6080c0, #2040a0);
+ box-shadow: 1px 1px 2px #808080;
+}
+
+.blue-button:hover {
+ background: -moz-linear-gradient(top, #2040a0, #6080c0);
+ background: -webkit-linear-gradient(top, #2040a0, #6080c0);
+}
+
+.update-preview {
+ text-align: center; display: block; margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 34px;
+}
+
+#preview {
+ position: relative; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 300px; height: 800px;
+ border-radius: 4px; overflow: hidden; margin-bottom: 10px;
+}
+
+.section-title {
+ font-size: 20px; font-weight: bold; margin: 20px 0 5px;
+}
+
+.first-level-list {
+ margin: 5px 0;
+}
+
+.add-item {
+ margin: 5px 0; font-size: 22px; font-weight: bold; line-height: 18px;
+}
+
+.add-item:hover:after {
+ float: right; font-size: 14px; font-weight: normal; line-height: 18px; margin-left: 4px;
+}
+
+.add-search-engine:hover:after {
+ content: "Add Search Engine";
+}
+.add-resource:hover:after {
+ content: "Add Resource";
+}
+.add-bin:hover:after {
+ content: "Add Bin";
+}
+
+.item {
+ padding: 5px; margin: 5px 0; border-radius: 4px; font-size: 12px;
+ background: -moz-linear-gradient(top, #ffcc8f, #fff0d0);
+ background: -webkit-linear-gradient(top, #ffcc8f, #fff0d0);
+ box-shadow: 1px 1px 2px #808080;
+}
+
+.remove-item {
+ float: right; font-size: 22px; line-height: 18px; height: 18px; margin: 0 0 2px -10px; font-weight: bold;
+}
+
+.setting {
+ float: left; width: 260px; margin: 2px 15px 2px 2px; line-height: 24px; min-height: 24px;
+}
+
+.setting label {
+ float: left; display: block; width: 100px; font-weight: bold;
+}
+
+.display-value {
+ float: left; display: block; width: 160px;
+}
+
+.edit-value {
+ width: 160px; display: none; border: 1px solid #cccccc; border-radius: 3px;
+}
+
+input.edit-value, textarea.edit-value {
+ width: 154px; padding: 2px;
+}
+
+textarea.edit-value {
+ resize: vertical; height: 72px;
+}
+
+.item-editing .display-value {
+ display: none;
+}
+
+.item-editing .edit-value {
+ display: inline-block;
+}
+
+.resource-list-title {
+ clear: both; width: 100%; font-size: 16px; font-weight: bold; margin: 5px 0 0;
+}
+
+.resource {
+ display: block; clear: both;
+ padding: 5px; margin: 5px; border-radius: 4px;
+ background: -moz-linear-gradient(top, #ff8f00, #ffcc8f);
+ background: -webkit-linear-gradient(top, #ff8f00, #ffcc8f);
+ box-shadow: 1px 1px 2px #808080;
+}
+
+.resource .display-value {
+ display: inline-block;
+}
+
+.resource .edit-value {
+ display: none;
+}
+
+.resource.resource-editing .display-value {
+ display: none;
+}
+
+.resource.resource-editing .edit-value {
+ display: inline-block;
+}
\ No newline at end of file
--- a/client/js/defaults.js Wed May 15 18:17:18 2013 +0200
+++ b/client/js/defaults.js Tue May 28 16:45:12 2013 +0200
@@ -14,6 +14,8 @@
/* Show bins in left column */
properties: [],
/* Semantic properties for edges */
+ show_editor: true,
+ /* Show the graph editor... Setting this to "false" only shows the bins part ! */
read_only: false,
/* Allows editing of renkan without changing the rest of the GUI. Can be switched on/off on the fly to block/enable editing */
editor_mode: true,
--- a/client/js/main.js Wed May 15 18:17:18 2013 +0200
+++ b/client/js/main.js Tue May 28 16:45:12 2013 +0200
@@ -134,7 +134,11 @@
this.$
.addClass("Rk-Main")
.html(this.template(this));
- this.renderer = new Rkns.Renderer.Scene(this);
+
+ if (this.options.show_editor) {
+ this.renderer = new Rkns.Renderer.Scene(this);
+ }
+
this.tabs = [];
this.search_engines = [];
@@ -196,7 +200,11 @@
_this.$.find(".Rk-Bin-Main").slideUp();
_mainDiv.slideDown();
}
- }).on("mouseover", ".Rk-Bin-Item", function(_e) {
+ });
+
+ if (this.options.show_editor) {
+
+ this.$.find(".Rk-Bins").on("mouseover", ".Rk-Bin-Item", function(_e) {
var _t = Rkns.$(this);
if (_t && $(_t).attr("data-uri")) {
var _models = _this.project.get("nodes").where({
@@ -247,6 +255,9 @@
e.originalEvent.dataTransfer.setData("text",div.innerHTML);
}
});
+
+ }
+
Rkns.$(window).resize(function() {
_this.resizeBins();
});
@@ -269,7 +280,8 @@
+ '<input type="submit" value="" class="Rk-Web-Search-Submit Rk-Search-Submit" title="<%- translate("Search the Web") %>" /></form>'
+ '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search in Bins") %>" />'
+ '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" title="<%- translate("Search in Bins") %>" /></form></div>'
- + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (options.show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
+ + '<ul class="Rk-Bin-List"></ul></div><% } %>'
+ + '<% if (options.show_editor) { %><div class="Rk-Render Rk-Render-<% if (options.show_bins) { %>Panel<% } else { %>Full<% } %>"></div><% } %>'
);
Rkns.Renkan.prototype.translate = function(_text) {
@@ -363,3 +375,5 @@
}
};
+
+/* END main.js */
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/space-editor.js Tue May 28 16:45:12 2013 +0200
@@ -0,0 +1,355 @@
+$(function() {
+
+ var originalData = {
+ show_editor: false,
+ container: "preview"
+ };
+
+ var userData = {
+ bins: [
+ {
+ type: "ResourceList",
+ title: "Resource List",
+ list: [
+ {
+ title: "IRI",
+ url: "http://www.iri.centrepompidou.fr/",
+ image: "http://www.iri.centrepompidou.fr/wp-content/themes/IRI-Theme/images/logo-iri-petit_fr_fr.png",
+ description: "Institut de Recherche et d'Innovation"
+ }
+ ]
+ }
+ ],
+ search: [
+ {
+ type: "Wikipedia",
+ lang: "en"
+ }
+ ]
+ };
+
+ function getNormalizedHtml(jqsel) {
+ return jqsel.html().replace(/[\r\n]/gm,' ').replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'');
+ }
+
+ var searchEngineTemplate = getNormalizedHtml($(".search-engine-list"));
+
+ $(".search-engine-list").empty().sortable();
+
+ var resourceTemplate = getNormalizedHtml($(".resource-list"));
+
+ $(".resource-list").empty();
+
+ var binTemplate = getNormalizedHtml($(".bin-list"));
+
+ $(".bin-list").empty().sortable();
+
+ function addSearchEngine(data, editMode) {
+
+ $(".item").removeClass("item-editing");
+
+ var element = $(searchEngineTemplate),
+ allfields = element.find(".edit-value"),
+ typefield = element.find(".search-engine-type .edit-value"),
+ typedisplay = element.find(".search-engine-type .display-value"),
+ langsection = element.find(".search-engine-language"),
+ langfield = element.find(".search-engine-language .edit-value"),
+ langdisplay = element.find(".search-engine-language .display-value");
+ element.data("userdata",data);
+
+ if (editMode) {
+ element.addClass("item-editing");
+ }
+
+ var onChange = function() {
+
+ data.type = typefield.val();
+ typedisplay.text(typefield.find("[value=" + data.type + "]").text());
+
+ if (data.type === "Wikipedia") {
+ data.lang = langfield.val() || "en";
+ langdisplay.text(langfield.find("[value=" + data.lang + "]").text());
+ langsection.show();
+ } else {
+ delete data.lang;
+ langsection.hide();
+ }
+ }
+
+ typefield.val(data.type);
+
+ if (data.type === "Wikipedia") {
+ langfield.val(data.lang || "en");
+ }
+
+ allfields.on("keyup paste change", onChange);
+
+ onChange();
+
+ element.click(function() {
+ $(".item").removeClass("item-editing");
+ element.addClass("item-editing");
+ return false;
+ });
+ element.find(".remove-item").click(function() {
+ element.remove();
+ return false;
+ });
+
+ $(".search-engine-list").append(element);
+ }
+
+ function addBin(data, editMode) {
+
+ $(".item").removeClass("item-editing");
+
+ var element = $(binTemplate),
+ allfields = element.find(".edit-value"),
+ typefield = element.find(".bin-type .edit-value"),
+ typedisplay = element.find(".bin-type .display-value"),
+ langsection = element.find(".bin-language"),
+ langfield = langsection.find(".edit-value"),
+ langdisplay = langsection.find(".display-value"),
+ ldtsection = element.find(".ldt-options"),
+ ldttypefield = element.find(".bin-ldt-type .edit-value"),
+ ldttypedisplay = element.find(".bin-ldt-type .display-value"),
+ ldtpffield = element.find(".bin-ldt-platform .edit-value"),
+ ldtpfdisplay = element.find(".bin-ldt-platform .display-value"),
+ ldtprojsection = element.find(".bin-ldt-project"),
+ ldtprojfield = ldtprojsection.find(".edit-value"),
+ ldtprojdisplay = ldtprojsection.find(".display-value"),
+ kwsection = element.find(".bin-keyword"),
+ kwfield = kwsection.find(".edit-value"),
+ kwdisplay = kwsection.find(".display-value"),
+ ressection = element.find(".bin-resources"),
+ titlefield = element.find(".bin-title .edit-value"),
+ titledisplay = element.find(".bin-title .display-value"),
+ reslist = element.find(".resource-list");
+
+ reslist.sortable({
+ stop: updateListData
+ });
+
+ element.data("userdata",data);
+
+ if (editMode) {
+ element.addClass("item-editing");
+ }
+
+ var onChange = function() {
+
+ data.type = typefield.val();
+ typedisplay.text(typefield.find("[value=" + data.type + "]").text());
+
+ if (data.type === "Wikipedia") {
+ data.lang = langfield.val() || "en";
+ langdisplay.text(langfield.find("[value=" + data.lang + "]").text());
+ langsection.show();
+ } else {
+ delete data.lang;
+ langsection.hide();
+ }
+
+ if (data.type === "Ldt") {
+ ldtsection.show();
+ data.ldt_type = ldttypefield.val() || "Results";
+ ldttypedisplay.text(ldttypefield.find("[value=" + data.ldt_type + "]").text());
+
+ data.ldt_platform = ldtpffield.val() || ldtpffield.val("http://ldt.iri.centrepompidou.fr/").val();
+ ldtpfdisplay.text(data.ldt_platform);
+
+ if (data.ldt_type === "Project") {
+ data.project_id = ldtprojfield.val();
+ ldtprojdisplay.text(data.ldt_project);
+ ldtprojsection.show();
+ } else {
+ delete data.ldt_project;
+ ldtprojsection.hide();
+ }
+
+ } else {
+ delete data.ldt_type;
+ delete data.project_id;
+ delete data.ldt_platform;
+ ldtsection.hide();
+ }
+
+ if (data.type === "Wikipedia" || data.type === "Twitter" || (data.type === "Ldt" && data.ldt_type === "Results")) {
+ data.search = kwfield.val();
+ kwdisplay.text(data.search);
+ kwsection.show();
+ } else {
+ delete data.search;
+ kwsection.hide();
+ }
+
+ if (data.type === "ResourceList") {
+ data.title = titlefield.val() || titlefield.val("Untitled Resource List").val();
+ titledisplay.text(data.title);
+ ressection.show();
+ } else {
+ ressection.hide();
+ }
+
+ updateListData();
+
+ }
+
+ var updateListData = function() {
+ if (data.type === "ResourceList") {
+ data.list = Array.prototype.slice.call(
+ reslist.find(".resource").map(function(){return $(this).data("userdata");})
+ );
+ } else {
+ delete data.list;
+ }
+ }
+
+ var addResource = function(resdata, editmode) {
+
+ var resel = $(resourceTemplate),
+ all_fields = resel.find(".edit-value"),
+ title_field = resel.find(".resource-title .edit-value"),
+ title_text = resel.find(".resource-title .display-value"),
+ url_field = resel.find(".resource-url .edit-value"),
+ url_text = resel.find(".resource-url .display-value"),
+ description_field = resel.find(".resource-description .edit-value"),
+ description_text = resel.find(".resource-description .display-value"),
+ image_field = resel.find(".resource-image .edit-value"),
+ image_text = resel.find(".resource-image .display-value");
+
+ resel.data("userdata",resdata);
+
+ if (editmode) {
+ resel.addClass("resource-editing");
+ }
+
+ var onResourceChange = function() {
+
+ resdata.title = title_field.val();
+ title_text.text(resdata.title);
+
+ resdata.description = description_field.val();
+ description_text.text(resdata.description);
+
+ resdata.url = url_field.val();
+ url_text.text(resdata.url);
+
+ resdata.image = image_field.val();
+ image_text.text(resdata.image);
+
+ updateListData();
+
+ }
+
+ title_field.val( resdata.title || "" );
+ url_field.val( resdata.url || "" );
+ description_field.val( resdata.description || "" );
+ image_field.val( resdata.image || "" );
+
+ all_fields.on("keyup paste change", onResourceChange);
+
+ onResourceChange();
+
+ resel.find(".remove-item").click(function() {
+ resel.remove();
+ updateListData();
+ return false;
+ });
+
+ resel.click(function() {
+ $(".resource").removeClass("resource-editing");
+ resel.addClass("resource-editing");
+ return false;
+ });
+
+ reslist.append(resel);
+ }
+
+ if (data.list) {
+ data.list.forEach(addResource);
+ }
+
+ typefield.val(data.type);
+
+ if (data.type === "Wikipedia") {
+ langfield.val(data.lang || "en");
+ }
+
+ if (data.type === "Ldt") {
+ ldttypefield.val(data.ldt_type || "Results");
+ ldtpffield.val(data.ldt_platform || "http://ldt.iri.centrepompidou.fr/");
+
+ if (data.ldt_type === "Project") {
+ ldtprojfield.val(data.ldt_project);
+ }
+
+ }
+
+ if (data.type === "Wikipedia" || data.type === "Twitter" || (data.type === "Ldt" && data.ldt_type === "Results")) {
+ kwfield.val(data.search || "");
+ }
+
+ if (data.type === "ResourceList") {
+ titlefield.val(data.title || "Untitled Resource List");
+ }
+
+ allfields.on("keyup paste change", onChange);
+
+ onChange();
+
+ element.click(function() {
+ $(".item").removeClass("item-editing");
+ element.addClass("item-editing");
+ return false;
+ });
+ element.find(".remove-item").click(function() {
+ element.remove();
+ return false;
+ });
+ element.find(".add-resource").click(function() {
+ addResource({"title": "New Resource"},true);
+ return false;
+ });
+
+ $(".bin-list").append(element);
+
+ }
+
+
+ userData.search.forEach(function(data) {
+ addSearchEngine(data,false);
+ });
+ userData.bins.forEach(function(data) {
+ addBin(data,false);
+ });
+
+ $(".add-search-engine").click(function() {
+ addSearchEngine({
+ type:"Twitter"
+ }, true);
+ return false;
+ });
+
+ $(".add-bin").click(function() {
+ addBin({
+ type:"Twitter",
+ search: ""
+ }, true);
+ return false;
+ });
+
+ $(".update-preview").click(function() {
+ userData.search = Array.prototype.slice.call(
+ $(".search-engine").map(function(){return $(this).data("userdata");})
+ );
+ userData.bins = Array.prototype.slice.call(
+ $(".bin").map(function(){return $(this).data("userdata");})
+ );
+ new Rkns.Renkan(_.extend({}, originalData, userData));
+
+ });
+
+ new Rkns.Renkan(_.extend({}, originalData, userData));
+
+});
--- a/client/publish-test.html Wed May 15 18:17:18 2013 +0200
+++ b/client/publish-test.html Tue May 28 16:45:12 2013 +0200
@@ -22,12 +22,11 @@
var _renkan;
$(function() {
_renkan = new Rkns.Renkan({
- url: "data/simple-persist.php",
editor_mode: false,
show_bins: false
});
Rkns.jsonIO(_renkan, {
- url: "http://renkan.iri-research.org/renkan/rest/projects/ef7ea617-df99-4c73-b4b6-0408f2e503f3"
+ url: "http://renkan.iri-research.org/renkan/rest/projects/ef7ea617-df99-4c73-b4b6-0408f2e503f3?callback=?"
});
});
</script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/space-editor.html Tue May 28 16:45:12 2013 +0200
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>Test de Rendu RENKAN</title>
+ <meta name="description" content="" />
+ <meta name="author" content="Institut de Recherche et d'Innovation" />
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/jquery-ui.min.js"></script>
+ <script src="lib/jquery.mousewheel.min.js"></script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="lib/backbone.js"></script>
+ <script src="lib/backbone-relational.js"></script>
+ <script src="lib/paper.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/defaults.js"></script>
+ <script src="js/i18n.js"></script>
+ <script src="js/models.js"></script>
+ <script src="js/list-bin.js"></script>
+ <script src="js/ldtjson-bin.js"></script>
+ <script src="js/twitter-bin.js"></script>
+ <script src="js/wikipedia-bin.js"></script>
+ <script src="js/space-editor.js"></script>
+
+ <link rel="stylesheet" href="css/renkan.css" />
+ <link rel="stylesheet" href="css/space-editor.css" />
+ </head>
+
+ <body>
+ <h1>Renkan Space Editor</h1>
+ <div class="right">
+ <a class="update-preview blue-button" href="#">Update Preview</a>
+ <div id="preview"></div>
+ </div>
+ <div class="main">
+ <h2 class="section-title">Search Engines</h2>
+
+ <ul class="first-level-list search-engine-list">
+ <li class="item search-engine">
+ <a href="#" class="blue-button remove-item">×</a>
+
+ <span class="setting search-engine-type">
+ <label>Type:</label>
+ <span class="display-value"></span>
+ <select class="edit-value">
+ <option value="Twitter">Twitter</option>
+ <option value="Wikipedia">Wikipedia</option>
+ <option value="Ldt">Lignes de Temps</option>
+ </select>
+ </span>
+ <span class="setting search-engine-language">
+ <label>Language:</label>
+ <select class="edit-value">
+ <option value="en">English</option>
+ <option value="fr">Français</option>
+ <option value="ja">日本語</option>
+ <option value="es">Español</option>
+ <option value="it">Italiano</option>
+ <option value="de">Deutsch</option>
+ <option value="pt">Português</option>
+ <option value="ru">Русский</option>
+ <option value="zh">中文</option>
+ </select>
+ <span class="display-value"></span>
+ </span>
+ <div class="clearer"></div>
+ </li>
+ </ul>
+
+ <a class="add-item add-search-engine blue-button" href="#">+</a>
+
+ <h2 class="section-title">Bins</h2>
+
+ <ul class="first-level-list bin-list">
+ <li class="item bin">
+ <a href="#" class="blue-button remove-item">×</a>
+
+ <span class="setting bin-type">
+ <label>Type:</label>
+ <span class="display-value"></span>
+ <select class="edit-value">
+ <option value="ResourceList">Resource List</option>
+ <option value="Twitter">Twitter Search Results</option>
+ <option value="Wikipedia">Wikipedia Search Results</option>
+ <option value="Ldt">Lignes de Temps</option>
+ </select>
+ </span>
+ <span class="setting bin-language">
+ <label>Language:</label>
+ <select class="edit-value">
+ <option value="en">English</option>
+ <option value="fr">Français</option>
+ <option value="ja">日本語</option>
+ <option value="es">Español</option>
+ <option value="it">Italiano</option>
+ <option value="de">Deutsch</option>
+ <option value="pt">Português</option>
+ <option value="ru">Русский</option>
+ <option value="zh">中文</option>
+ </select>
+ <span class="display-value"></span>
+ </span>
+ <span class="ldt-options">
+ <span class="setting bin-ldt-type">
+ <label>LDT type:</label>
+ <span class="display-value"></span>
+ <select class="edit-value">
+ <option value="Results">Search Results</option>
+ <option value="Project">Project</option>
+ </select>
+ </span>
+ <span class="setting bin-ldt-platform">
+ <label>Platform URL:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <span class="setting bin-ldt-project">
+ <label>Project ID:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ </span>
+ <span class="setting bin-keyword">
+ <label>Search Keyword:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <span class="bin-resources">
+ <span class="setting bin-title">
+ <label>Bin Title:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <h3 class="resource-list-title">Resources:</h3>
+ <ul class="resource-list">
+ <li class="resource">
+ <a href="#" class="blue-button remove-item">×</a>
+ <span class="setting resource-title">
+ <label>Title:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <span class="setting resource-url">
+ <label>URL:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <span class="setting resource-description">
+ <label>Description:</label>
+ <span class="display-value"></span>
+ <textarea class="edit-value"></textarea>
+ </span>
+ <span class="setting resource-image">
+ <label>Image URL:</label>
+ <span class="display-value"></span>
+ <input class="edit-value" />
+ </span>
+ <div class="clearer"></div>
+ </li>
+ </ul>
+ <a class="add-item add-resource blue-button" href="#">+</a>
+ </span>
+ <div class="clearer"></div>
+ </li>
+ </ul>
+
+ <a class="add-item add-bin blue-button" href="#">+</a>
+
+ </div>
+
+ </body>
+</html>