# HG changeset patch # User veltr # Date 1369752312 -7200 # Node ID 50b3287d06dd90d400e635ac260d2eeff0b87b3d # Parent ba5022639c7646f59129d893abeafc81c0722591 Added a basic space editor diff -r ba5022639c76 -r 50b3287d06dd client/css/space-editor.css --- /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 diff -r ba5022639c76 -r 50b3287d06dd client/js/defaults.js --- 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, diff -r ba5022639c76 -r 50b3287d06dd client/js/main.js --- 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 @@ + '" />' + '
" />' + '" />
' - + '<% } %>
' + + '<% } %>' + + '<% if (options.show_editor) { %>
<% } %>' ); Rkns.Renkan.prototype.translate = function(_text) { @@ -363,3 +375,5 @@ } }; + +/* END main.js */ diff -r ba5022639c76 -r 50b3287d06dd client/js/space-editor.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)); + +}); diff -r ba5022639c76 -r 50b3287d06dd client/publish-test.html --- 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=?" }); }); diff -r ba5022639c76 -r 50b3287d06dd client/space-editor.html --- /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 @@ + + + + + + Test de Rendu RENKAN + + + + + + + + + + + + + + + + + + + + + + + + +

Renkan Space Editor

+
+ Update Preview +
+
+
+

Search Engines

+ + + + + + +

Bins

+ + + + + + +
+ + +