# HG changeset patch # User veltr # Date 1346849373 -7200 # Node ID d249d36ecc376789f63ec26bc62e3425ebbb0c1a # Parent 10e0c23c849e91fbf930dff9cda320bef4dbce2a Add Edge button, French translation and various bugfixes diff -r 10e0c23c849e -r d249d36ecc37 client/css/renkan.css --- a/client/css/renkan.css Mon Sep 03 18:51:32 2012 +0200 +++ b/client/css/renkan.css Wed Sep 05 14:49:33 2012 +0200 @@ -138,6 +138,14 @@ .Rk-FullScreen-Button:hover { background-position: -34px -35px; } + +.Rk-AddEdge-Button { + width: 34px; background-position: -68px 0; +} + +.Rk-AddEdge-Button:hover { + background-position: -68px -35px; +} /* Canvas */ .Rk-Canvas { @@ -149,7 +157,16 @@ /* Editors */ .Rk-Editor { - position: absolute; left: 0; top: 35px; z-index: 2; + position: absolute; left: 0; top: 35px; right: 0; z-index: 2; +} + +.Rk-Notifications { + position: absolute; right: 15px; top: 15px; width: 200px; + padding: 10px; border-radius: 8px; display: none; + color: #ffffff; font-size: 13px; text-align: center; font-weight: bold; + background: rgba(20,20,20,.7); + background: -moz-linear-gradient(top, rgba(40,40,40,.7) 20%, rgba(0,0,0,.7) 80%); + background: -webkit-linear-gradient(top, rgba(40,40,40,.7) 20%, rgba(0,0,0,.7) 80%); } .Rk-CloseX { @@ -264,13 +281,14 @@ } .Rk-Search-Current { - width: 25px; height: 20px; margin: 2px; + width: 40px; height: 20px; margin: 2px; background-repeat: no-repeat; } .Rk-Search-List { - width: 160px; margin-left: 15px; font-size: 13px; - position: absolute; left: -75px; top: 25px; background: #ffffff; - box-shadow: 0 1px 0 #505050; display: none; + width: 180px; margin-left: 15px; font-size: 13px; + position: absolute; right: 0; top: 25px; background: #ffffff; + box-shadow: 1px 1px 2px #505050; display: none; + border: 1px solid #cccccc; } .Rk-Search-List li { @@ -284,7 +302,7 @@ .Rk-Search-Submit { border: 1px solid #003050; height: 27px; width: 30px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; - background: #333333 center no-repeat url(../img/search.png); + background: #333333 center no-repeat url(../img/search.png); cursor: pointer; } .Rk-Search-Submit:hover { diff -r 10e0c23c849e -r d249d36ecc37 client/img/topbarbuttons.png Binary file client/img/topbarbuttons.png has changed diff -r 10e0c23c849e -r d249d36ecc37 client/js/full-json.js --- a/client/js/full-json.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/full-json.js Wed Sep 05 14:49:33 2012 +0200 @@ -32,5 +32,6 @@ _model.on("change remove", function(_model) { _thrSave(); }); + _thrSave(); }); } diff -r 10e0c23c849e -r d249d36ecc37 client/js/i18n.js --- a/client/js/i18n.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/i18n.js Wed Sep 05 14:49:33 2012 +0200 @@ -9,8 +9,42 @@ edit_to: "To:", full_screen: "Full Screen", add_node: "Add Node", + add_edge: "Add Edge", created_by: "Created by:", zoom_in: "Zoom In", - zoom_out: "Zoom Out" + zoom_out: "Zoom Out", + 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" + }, + 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:", + full_screen: "Mode plein écran", + add_node: "Ajouter un nœud", + add_edge: "Ajouter un lien", + created_by: "Créé par :", + zoom_in: "Agrandir l’échelle", + zoom_out: "Rapetisser l’échelle", + 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" } } diff -r 10e0c23c849e -r d249d36ecc37 client/js/main.js --- a/client/js/main.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/main.js Wed Sep 05 14:49:33 2012 +0200 @@ -123,11 +123,12 @@ } return false; }); - this.$.find(".Rk-Search-Select").mouseenter(function() { - _select.slideDown(); - }).mouseleave(function() { - _select.slideUp(); - }) + this.$.find(".Rk-Search-Current").mouseenter( + function() { _select.slideDown(); } + ); + this.$.find(".Rk-Search-Select").mouseleave( + function() { _select.slideUp(); } + ); this.setSearchEngine(0); } Rkns._(_opts.bins).each(function(_bin) { diff -r 10e0c23c849e -r d249d36ecc37 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/paper-renderer.js Wed Sep 05 14:49:33 2012 +0200 @@ -17,7 +17,10 @@ _EDITOR_ARROW_WIDTH : 40, _EDITOR_MARGIN : 15, _EDITOR_PADDING : 10, - _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']) + _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']), + _CLICKMODE_ADDNODE : 1, + _CLICKMODE_STARTEDGE : 2, + _CLICKMODE_ENDEDGE : 3 } Rkns.Renderer.Utils = { @@ -272,6 +275,8 @@ if (!this.renderer.is_dragging) { this.openEditor(); } + this.renderer.click_target = null; + this.renderer.is_dragging = false; } Rkns.Renderer.Node.prototype.destroy = function(_event) { @@ -376,6 +381,8 @@ if (!this.renderer.is_dragging) { this.openEditor(); } + this.renderer.click_target = null; + this.renderer.is_dragging = false; } Rkns.Renderer.Edge.prototype.paperShift = function(_delta) { @@ -436,20 +443,31 @@ } Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) { - var _hitResult = paper.project.hitTest(_event.point); + var _hitResult = paper.project.hitTest(_event.point), + _model = this.from_representation.model, + _endDrag = true; if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { var _target = _hitResult.item.__representation; - if (_target.type === "Node" && this.from_representation.model !== _target.model) { + if (_target.type === "Node" && _model !== _target.model) { var _data = { id: Rkns.Utils.getUID('edge'), created_by: this.renderer.renkan.current_user, - from: this.from_representation.model.get("_id"), + from: _model.get("_id"), to: _target.model.get("_id") }; this.project.addEdge(_data); } + if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) { + _endDrag = false; + this.renderer.is_dragging = true; + } } - this.renderer.removeRepresentation(this); + if (_endDrag) { + this.renderer.click_target = null; + this.renderer.is_dragging = false; + this.renderer.removeRepresentation(this); + paper.view.draw(); + } } Rkns.Renderer.TempEdge.prototype.destroy = function() { @@ -679,6 +697,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") + '"?')) { this.project.removeNode(this.node_representation.model); } @@ -801,6 +820,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") + '"?')) { this.project.removeEdge(this.edge_representation.model); } @@ -821,6 +841,7 @@ })) this.canvas_$ = this.$.find(".Rk-Canvas"); this.editor_$ = this.$.find(".Rk-Editor"); + this.notif_$ = this.$.find(".Rk-Notifications"); paper.setup(this.canvas_$[0]); this.scale = 1; this.offset = paper.view.center; @@ -831,6 +852,7 @@ this.node_layer = new paper.Layer(); this.overlay_layer = new paper.Layer(); this.bundles = []; + this.click_mode = false; var _tool = new paper.Tool(), _this = this; _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE; @@ -871,11 +893,12 @@ _this.setScale( _this.scale * Math.SQRT2 ); _this.redraw(); }); - this.$.find(".Rk-Users").mouseenter(function() { - _this.$.find(".Rk-UserList").slideDown(); - }).mouseleave(function() { - _this.$.find(".Rk-UserList").slideUp(); - }); + this.$.find(".Rk-CurrentUser").mouseenter( + function() { _this.$.find(".Rk-UserList").slideDown() } + ); + this.$.find(".Rk-Users").mouseleave( + function() { _this.$.find(".Rk-UserList").slideUp(); } + ); this.$.find(".Rk-FullScreen-Button").click(function() { var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen, _el = _this.renkan.$[0], @@ -898,17 +921,22 @@ } }); this.$.find(".Rk-AddNode-Button").click(function() { - var _coords = _this.toModelCoords(paper.view.center), - _data = { - id: Rkns.Utils.getUID('node'), - created_by: _this.renkan.current_user, - position: { - x: _coords.x, - y: _coords.y - } - }; - _node = _this.renkan.project.addNode(_data); - _this.getRepresentationByModel(_node).openEditor(); + if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) { + _this.click_mode = false; + _this.notif_$.hide(); + } else { + _this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE; + _this.notif_$.html(_renkan.l10n.notif_add_node).fadeIn(); + } + }); + this.$.find(".Rk-AddEdge-Button").click(function() { + if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) { + _this.click_mode = false; + _this.notif_$.hide(); + } else { + _this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE; + _this.notif_$.html(_renkan.l10n.notif_start_edge).fadeIn(); + } }); this.$.find(".Rk-TopBar-Button").mouseover(function() { Rkns.$(this).find(".Rk-TopBar-Tooltip").show(); @@ -947,12 +975,13 @@ } Rkns.Renderer.Scene.prototype.template = Rkns._.template( - '

Untitled Project

' + '

<%=l10n.untitled_project%>

' + '
<unknown user>
    ' + '
    <%=l10n.full_screen%>
    ' + '
    <%=l10n.add_node%>
    ' + + '
    <%=l10n.add_edge%>
    ' + '
    ' - + '
    ' + + '
    ' + '
    ' + '
    ' ); @@ -1138,18 +1167,44 @@ } Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) { - this.is_dragging = false; - var _hitResult = paper.project.hitTest(_event.point); - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - this.click_target = _hitResult.item.__representation; - if (this.click_target.type === "Node" && _hitResult.type === "stroke") { + if (!this.click_target || this.click_target.type !== "temp-edge") { + this.is_dragging = false; + var _hitResult = paper.project.hitTest(_event.point); + if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { + this.click_target = _hitResult.item.__representation; + if (this.click_target.type === "Node-link-button") { + this.removeRepresentationsOfType("editor"); + this.addTempEdge(this.click_target.node_representation, _event.point); + } + } else { + this.click_target = null; + if (this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) { + var _coords = this.toModelCoords(_event.point), + _data = { + id: Rkns.Utils.getUID('node'), + created_by: this.renkan.current_user, + position: { + x: _coords.x, + y: _coords.y + } + }; + _node = this.renkan.project.addNode(_data); + this.getRepresentationByModel(_node).openEditor(); + } + } + } + if (this.click_mode) { + if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") { + this.removeRepresentationsOfType("editor"); this.addTempEdge(this.click_target, _event.point); + this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE; + this.notif_$.fadeOut(function() { + Rkns.$(this).html(_renkan.l10n.notif_end_edge).fadeIn(); + }); + } else { + this.notif_$.hide(); + this.click_mode = false; } - if (this.click_target.type === "Node-link-button") { - this.addTempEdge(this.click_target.node_representation, _event.point); - } - } else { - this.click_target = null; } } @@ -1169,9 +1224,10 @@ ]) } ); + } else { + this.click_target = null; + this.is_dragging = false; } - this.is_dragging = false; - this.click_target = null; } Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) { diff -r 10e0c23c849e -r d249d36ecc37 client/js/twitter-bin.js --- a/client/js/twitter-bin.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/twitter-bin.js Wed Sep 05 14:49:33 2012 +0200 @@ -1,9 +1,4 @@ Rkns.Twitter = { - i18n: { - en: { - search_on_twitter: "Twitter" - } - } } Rkns.Twitter.Search = function(_renkan, _opts) { @@ -16,8 +11,7 @@ } Rkns.Twitter.Search.prototype.getSearchTitle = function() { - var _lang = Rkns.Twitter.i18n[this.renkan.lang] || Rkns.Twitter.i18n['en']; - return _lang.search_on_twitter; + return this.renkan.l10n.search_on_twitter; } Rkns.Twitter.Search.prototype.search = function(_q) { @@ -45,7 +39,6 @@ Rkns.Twitter.Bin.prototype._init = function(_renkan, _opts) { this.search = _opts.search; - var _lang = Rkns.Twitter.i18n[this.renkan.lang] || Rkns.Twitter.i18n['en']; this.title_icon_$.addClass('Rk-Twitter-Title-Icon'); this.title_$.html(this.search).addClass("Rk-Twitter-Title"); var _this = this; diff -r 10e0c23c849e -r d249d36ecc37 client/js/wikipedia-bin.js --- a/client/js/wikipedia-bin.js Mon Sep 03 18:51:32 2012 +0200 +++ b/client/js/wikipedia-bin.js Wed Sep 05 14:49:33 2012 +0200 @@ -1,12 +1,4 @@ Rkns.Wikipedia = { - i18n: { - en: { - wiki_fr: "French Wikipedia", - wiki_en: "English Wikipedia", - wiki_ja: "Japanese Wikipedia", - wiki_: "Wikipedia (Other Language)" - } - } } Rkns.Wikipedia.Search = function(_renkan, _opts) { @@ -19,8 +11,7 @@ } Rkns.Wikipedia.Search.prototype.getSearchTitle = function() { - var _lang = Rkns.Wikipedia.i18n[this.renkan.lang] || Rkns.Wikipedia.i18n['en']; - return ( _lang["wiki_" + this.lang] || _lang.wiki_) ; + return ( this.renkan.l10n["wiki_" + this.lang] || this.renkan.l10n.wiki_) ; } Rkns.Wikipedia.Search.prototype.search = function(_q) { @@ -44,7 +35,6 @@ Rkns.Wikipedia.Bin.prototype._init = function(_renkan, _opts) { this.search = _opts.search; this.lang = _opts.lang || "en"; - var _lang = Rkns.Wikipedia.i18n[this.renkan.lang] || Rkns.Wikipedia.i18n['en']; this.title_icon_$.addClass('Rk-Wikipedia-Title-Icon Rk-Wikipedia-Lang-' + this.lang); this.title_$.html(this.search).addClass("Rk-Wikipedia-Title"); var _this = this; diff -r 10e0c23c849e -r d249d36ecc37 client/render-test.html --- a/client/render-test.html Mon Sep 03 18:51:32 2012 +0200 +++ b/client/render-test.html Wed Sep 05 14:49:33 2012 +0200 @@ -25,6 +25,7 @@ var _proj; $(function() { _renkan = new Rkns.Renkan({ + language: "fr", url: "data/simple-persist.php", bins: [ {