# HG changeset patch # User veltr # Date 1361894664 -3600 # Node ID 9b459e41e2df99bc8b4e2fd7f80974668e6eeadd # Parent 3389e6c469366bf8143ef19e9e88383c8d18dcc3 Added drag-and-drop and image from local drive diff -r 3389e6c46936 -r 9b459e41e2df client/css/renkan.css --- a/client/css/renkan.css Tue Feb 26 11:09:57 2013 +0100 +++ b/client/css/renkan.css Tue Feb 26 17:04:24 2013 +0100 @@ -202,18 +202,18 @@ } .Rk-Editor p, .Rk-Editor-p { - margin: 5px 0; font-size: 12px; + margin: 5px 0; font-size: 12px; clear: both; } -.Rk-Editor label { - float: left; width: 70px; +.Rk-Editor-Label { + float: left; width: 80px; } a.Rk-Edit-Goto { display: block; float: right; width: 18px; height: 17px; margin: 1px 0; border: none; background: url(../img/goto.png); } -.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image { +.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image, .Rk-Edit-Image-File { font-size: 12px; width: 225px; } @@ -222,7 +222,7 @@ } .Rk-Edit-ImgPreview { - border: 1px solid #666; margin: 5px 0; min-height: 10px; display: block; + border: 1px solid #666; margin: 5px auto; display: block; max-width: 100% !important; max-height: 100px !important; } diff -r 3389e6c46936 -r 9b459e41e2df client/img/image-placeholder.png Binary file client/img/image-placeholder.png has changed diff -r 3389e6c46936 -r 9b459e41e2df client/js/i18n.js --- a/client/js/i18n.js Tue Feb 26 11:09:57 2013 +0100 +++ b/client/js/i18n.js Tue Feb 26 17:04:24 2013 +0100 @@ -1,64 +1,43 @@ Rkns.i18n = { - en: { - edit_node: "Edit Node", - edit_edge: "Edit Edge", - edit_title: "Title:", - edit_uri: "URI:", - edit_description: "Description:", - edit_from: "From:", - edit_to: "To:", - edit_image: "Image:", - full_screen: "Full Screen", - add_node: "Add Node", - add_edge: "Add Edge", - save_project: "Archive Project", - created_by: "Created by:", - zoom_in: "Zoom In", - zoom_out: "Zoom Out", - caption_edit: "Edit", - caption_remove: "Remove", - caption_link: "Link to another node", - notif_add_node: "Click on the background canvas to add a node", - notif_start_edge: "Click on a first node to start the edge", - notif_end_edge: "Click on a second node to complete the edge", - search_on_twitter: "Twitter", - wiki_fr: "French Wikipedia", - wiki_en: "English Wikipedia", - wiki_ja: "Japanese Wikipedia", - wiki_: "Wikipedia (Other Language)", - untitled_project: "Untitled project", - search_ldt: "Lignes de Temps", - loading_bin: "Loading, please wait" - }, fr: { - edit_node: "Édition d’un nœud", - edit_edge: "Édition d’un lien", - edit_title: "Titre :", - edit_uri: "URI :", - edit_description: "Description :", - edit_from: "De :", - edit_to: "Vers :", - edit_image: "Image :", - full_screen: "Mode plein écran", - add_node: "Ajouter un nœud", - add_edge: "Ajouter un lien", - save_project: "Archiver le projet", - created_by: "Créé par :", - zoom_in: "Agrandir l’échelle", - zoom_out: "Rapetisser l’échelle", - caption_edit: "Éditer", - caption_remove: "Supprimer", - caption_link: "Créer un lien", - notif_add_node: "Cliquer sur le fond du graphe pour rajouter un nœud", - notif_start_edge: "Cliquer sur un premier nœud pour commencer le lien", - notif_end_edge: "Cliquer sur un second nœud pour terminer le lien", - search_on_twitter: "Twitter", - wiki_fr: "Wikipedia en Français", - wiki_en: "Wikipedia en Anglais", - wiki_ja: "Wikipedia en Japonais", - wiki_: "Wikipedia (Autre langue)", - untitled_project: "Projet sans titre", - search_ldt: "Lignes de Temps", - loading_bin: "Chargement en cours, merci de patienter" + "Edit Node": "Édition d’un nœud", + "Edit Edge": "Édition d’un lien", + "Title:": "Titre :", + "URI:": "URI :", + "Description:": "Description :", + "From:": "De :", + "To:": "Vers :", + "Image": "Image", + "Image URL:": "URL d'Image", + "Choose Image File:": "Choisir un fichier image", + "Full Screen": "Mode plein écran", + "Add Node": "Ajouter un nœud", + "Add Edge": "Ajouter un lien", + "Archive Project": "Archiver le projet", + "Created by:": "Créé par :", + "Zoom In": "Agrandir l’échelle", + "Zoom Out": "Rapetisser l’échelle", + "Edit": "Éditer", + "Remove": "Supprimer", + "Link to another node": "Créer un lien", + "Click on the background canvas to add a node": "Cliquer sur le fond du graphe pour rajouter un nœud", + "Click on a first node to start the edge": "Cliquer sur un premier nœud pour commencer le lien", + "Click on a second node to complete the edge": "Cliquer sur un second nœud pour terminer le lien", + "Twitter": "Twitter", + "Wikipedia": "Wikipédia", + "Wikipedia in ": "Wikipédia en ", + "French": "Français", + "English": "Anglais", + "Japanese": "Japonais", + "Untitled project": "Projet sans titre", + "Lignes de Temps": "Lignes de Temps", + "Loading, please wait": "Chargement en cours, merci de patienter", + "Edge color:": "Couleur :", + "Node color:": "Couleur :", + "Do you really wish to remove node ": "Voulez-vous réellement supprimer le nœud ", + "Do you really wish to remove edge ": "Voulez-vous réellement supprimer le lien ", + "This file is not an image": "Ce fichier n'est pas une image", + "Image size must be under ": "L'image doit peser moins de ", + "KB": "ko" } } diff -r 3389e6c46936 -r 9b459e41e2df client/js/ldtjson-bin.js --- a/client/js/ldtjson-bin.js Tue Feb 26 11:09:57 2013 +0100 +++ b/client/js/ldtjson-bin.js Tue Feb 26 17:04:24 2013 +0100 @@ -135,7 +135,7 @@ } Rkns.Ldt.Search.prototype.getSearchTitle = function() { - return this.renkan.l10n.search_ldt; + return this.renkan.translate("Lignes de Temps"); } Rkns.Ldt.Search.prototype.search = function(_q) { diff -r 3389e6c46936 -r 9b459e41e2df client/js/main.js --- a/client/js/main.js Tue Feb 26 11:09:57 2013 +0100 +++ b/client/js/main.js Tue Feb 26 17:04:24 2013 +0100 @@ -67,7 +67,7 @@ this.main_$ = Rkns.$('
<%=node.created_by_title%>
' + + '<%-translate("Created by:")%> <%=node.created_by_title%>
' ); Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template( '<%-node.description%>
' - + '<%=node.created_by_title%>
' + + '<%-translate("Created by:")%> <%=node.created_by_title%>
' ); Rkns.Renderer.NodeEditor.prototype.draw = function() { @@ -673,11 +676,12 @@ uri: _model.get("uri"), description: _model.get("description"), image: _model.get("image") || "", + image_placeholder: this.renderer.renkan.static_url + "img/image-placeholder.png", color: _model.get("color") || _created_by.get("color"), created_by_color: _created_by.get("color"), created_by_title: _created_by.get("title") }, - l10n: this.renderer.renkan.l10n + translate: this.renderer.renkan.translate })); this.redraw(); var _this = this; @@ -686,19 +690,44 @@ paper.view.draw(); }); if (!this.renderer.renkan.read_only) { - this.editor_$.find("input, textarea").bind("keyup change", function() { - var _uri = _this.editor_$.find(".Rk-Edit-URI").val(), - _image = _this.editor_$.find(".Rk-Edit-Image").val(); - _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image); - _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri); - var _data = { - title: _this.editor_$.find(".Rk-Edit-Title").val(), - description: _this.editor_$.find(".Rk-Edit-Description").val(), - uri: _uri, - image: _image - } - _model.set(_data); - _this.redraw(); + + var onFieldChange = Rkns._(function() { + Rkns._(function() { + var _uri = _this.editor_$.find(".Rk-Edit-URI").val(), + _image = _this.editor_$.find(".Rk-Edit-Image").val(); + _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image); + _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri); + var _data = { + title: _this.editor_$.find(".Rk-Edit-Title").val(), + description: _this.editor_$.find(".Rk-Edit-Description").val(), + uri: _uri, + image: _image + } + _model.set(_data); + _this.redraw(); + }).defer(); + }).throttle(500); + + this.editor_$.find("input, textarea").bind("change keyup paste", onFieldChange); + + this.editor_$.find(".Rk-Edit-Image-File").bind("change", function() { + if (this.files.length) { + var f = this.files[0], + fr = new FileReader(); + if (f.type.substr(0,5) !== "image") { + alert(_this.renderer.renkan.translate("This file is not an image")); + return; + } + if (f.size > (Rkns.Renderer._IMAGE_MAX_KB * 1024)) { + alert(_this.renderer.renkan.translate("Image size must be under ")+Rkns.Renderer._IMAGE_MAX_KB+_this.renderer.renkan.translate("KB")); + return; + } + fr.onload = function(e) { + _this.editor_$.find(".Rk-Edit-Image").val(e.target.result); + onFieldChange(); + } + fr.readAsDataURL(f); + } }); this.editor_$.find(".Rk-Edit-Title")[0].focus(); this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( @@ -754,23 +783,23 @@ } Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( - '<%=edge.from_title%>
' - + '<%=edge.to_title%>
' - + '<%=edge.created_by_title%>
' + + '<%-translate("From:")%><%=edge.from_title%>
' + + '<%-translate("To:")%><%=edge.to_title%>
' + + '<%-translate("Created by:")%><%=edge.created_by_title%>
' ); Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template( '<%-edge.description%>
' - + '<%=edge.from_title%>
' - + '<%=edge.to_title%>
' - + '<%=edge.created_by_title%>
' + + '<%-translate("From:")%><%=edge.from_title%>
' + + '<%-translate("To:")%><%=edge.to_title%>
' + + '<%-translate("Created by:")%><%=edge.created_by_title%>
' ); Rkns.Renderer.EdgeEditor.prototype.draw = function() { @@ -793,7 +822,7 @@ created_by_color: _created_by.get("color"), created_by_title: _created_by.get("title") }, - l10n: this.renderer.renkan.l10n + translate: this.renderer.renkan.translate })); this.redraw(); var _this = this; @@ -802,15 +831,20 @@ paper.view.draw(); }); if (!this.renderer.renkan.read_only) { - this.editor_$.find("input, textarea").bind("keyup change", function() { - _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val()); - var _data = { - title: _this.editor_$.find(".Rk-Edit-Title").val(), - uri: _this.editor_$.find(".Rk-Edit-URI").val() - } - _model.set(_data); - _this.redraw(); - }); + + var onFieldChange = Rkns._(function() { + Rkns._(function() { + _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val()); + var _data = { + title: _this.editor_$.find(".Rk-Edit-Title").val(), + uri: _this.editor_$.find(".Rk-Edit-URI").val() + } + _model.set(_data); + _this.redraw(); + }).defer(); + }).throttle(500); + + this.editor_$.find("input, textarea").bind("keyup change paste", onFieldChange); this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } @@ -844,7 +878,7 @@ Rkns.Renderer.NodeEditButton.prototype._init = function() { this.renderer.overlay_layer.activate(); this.type = "Node-edit-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.l10n.caption_edit); + this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit")); } Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) { @@ -887,7 +921,7 @@ Rkns.Renderer.NodeRemoveButton.prototype._init = function() { this.renderer.overlay_layer.activate(); this.type = "Node-remove-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.l10n.caption_remove); + this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove")); } Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) { @@ -915,7 +949,7 @@ Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() { this.renderer.removeRepresentationsOfType("editor"); - if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) { + if (confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) { this.project.removeNode(this.node_representation.model); } } @@ -931,7 +965,7 @@ Rkns.Renderer.NodeLinkButton.prototype._init = function() { this.renderer.overlay_layer.activate(); this.type = "Node-link-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.l10n.caption_link); + this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node")); } Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) { @@ -968,7 +1002,7 @@ Rkns.Renderer.EdgeEditButton.prototype._init = function() { this.renderer.overlay_layer.activate(); this.type = "Edge-edit-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.l10n.caption_edit); + this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit")); } Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) { @@ -1011,7 +1045,7 @@ Rkns.Renderer.EdgeRemoveButton.prototype._init = function() { this.renderer.overlay_layer.activate(); this.type = "Edge-remove-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.l10n.caption_remove); + this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove")); } Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) { this.sector.moveTo(_pos); @@ -1038,7 +1072,7 @@ Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() { this.renderer.removeRepresentationsOfType("editor"); - if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) { + if (confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) { this.project.removeEdge(this.edge_representation.model); } } @@ -1092,6 +1126,59 @@ this.canvas_$.mouseenter(function(_event) { _this.onMouseEnter(_event); }); + this.canvas_$.on("dragover", function(_event) { + _event.stopPropagation(); + _event.preventDefault(); + }) + this.canvas_$.on("drop", function(_event) { + _event.stopPropagation(); + _event.preventDefault(); + var res = {} + Rkns._(_event.originalEvent.dataTransfer.types).each(function(t) { + return res[t] = _event.originalEvent.dataTransfer.getData(t); + }); + var newNode = {}; + if (res["text/plain"]) { + newNode.description = res["text/plain"].replace(/[\s\n]+/gm,' ').trim(); + } + if (res["text/html"]) { + var snippet = Rkns.$('