# HG changeset patch # User veltr # Date 1362161670 -3600 # Node ID 47b3125130a2aecb7d68dddbfd6159aebb8cb0d5 # Parent f0873867143a6ca5ed427ae69c49aa24a874fdd8 bookmarklet evolution diff -r f0873867143a -r 47b3125130a2 client/css/renkan.css --- a/client/css/renkan.css Thu Feb 28 19:13:08 2013 +0100 +++ b/client/css/renkan.css Fri Mar 01 19:14:30 2013 +0100 @@ -41,6 +41,10 @@ border: none; } +html { + overflow: hidden; +} + body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; background: #ffffff; color: #000000; @@ -300,8 +304,18 @@ padding-left: 20px; } +.Rk-Fold-Bins { + position: absolute; top: 5px; width: 12px; text-align: center; font-size: 16px; cursor: pointer; + line-height: 16px; padding: 4px; color: #ffffff; background: #666666; border-radius: 0 6px 6px 0; + font-weight: bold; +} + +.Rk-Fold-Bins:hover { + background: #333333; +} + .Rk-ZoomButtons { - position: absolute; left: 0; top: 0; cursor: pointer; + position: absolute; left: 0; top: 35px; cursor: pointer; } .Rk-ZoomIn, .Rk-ZoomOut { @@ -380,7 +394,7 @@ 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; + border: 1px solid #cccccc; z-index: 2; } .Rk-Search-List li { diff -r f0873867143a -r 47b3125130a2 client/js/i18n.js --- a/client/js/i18n.js Thu Feb 28 19:13:08 2013 +0100 +++ b/client/js/i18n.js Fri Mar 01 19:14:30 2013 +0100 @@ -60,6 +60,9 @@ "Dragged resource": "Ressource glisée-déposée", "Search the Web": "Rechercher en ligne", "Search in Bins": "Rechercher dans les chutiers", - "(untitled)": "(sans titre)" + "(untitled)": "(sans titre)", + "Select contents:": "Sélectionner des contenus :", + "Drag items from this website, drop them in Renkan": "Glissez des éléments de ce site web vers Renkan", + "Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan.": "Glissez ce bouton vers votre barre de favoris. Ensuite, depuis un site tiers, cliquez dessus pour activer 'Drag-to-Add' puis glissez des éléments de ce site vers Renkan" } } diff -r f0873867143a -r 47b3125130a2 client/js/main.js --- a/client/js/main.js Thu Feb 28 19:13:08 2013 +0100 +++ b/client/js/main.js Fri Mar 01 19:14:30 2013 +0100 @@ -129,9 +129,6 @@ }); }); } - if (typeof _opts.bookmarklet_url !== "string") { - _opts.bookmarklet_url = "js/bookmarklet.js"; - } this.project = new Rkns.Models.Project(); this.language = _opts.language; this.static_url = _opts.static_url; @@ -139,16 +136,6 @@ this.read_only = _opts.read_only; this.properties = _opts.properties; - function getAbsoluteURL(url) { - var tmp = document.createElement('img'); - tmp.src = url; - var res = tmp.src; - tmp.src = null; - return res; - } - - this.bookmarklet_url = getAbsoluteURL(_opts.bookmarklet_url); - this.translate = function(_text) { return (Rkns.i18n[_opts.language] || Rkns.i18n[_opts.language.substr(0,2)] || {})[_text] || _text; } @@ -201,7 +188,7 @@ function() { _select.slideDown(); } ); this.$.find(".Rk-Search-Select").mouseleave( - function() { _select.slideUp(); } + function() { _select.hide(); } ); this.setSearchEngine(0); } diff -r f0873867143a -r 47b3125130a2 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Thu Feb 28 19:13:08 2013 +0100 +++ b/client/js/paper-renderer.js Fri Mar 01 19:14:30 2013 +0100 @@ -30,6 +30,11 @@ get: function(attr) { return this[attr] || false; } + }, + _BOOKMARKLET_CODE: function(_renkan) { + return "(function(a,b,c,d,e,f,h,i,j,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='" + + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_") + + "

'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/^http:\\/\\/ldt\\.iri\\.centrepompidou\\.fr/,s:'.Ldt-AnnotationsList-li,.Ldt-Polemic-TweetDiv,.Ldt-Segments-Segment',n:'ldt'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();" } } @@ -672,23 +677,23 @@ Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template( '

×<%-translate("Edit Node")%>

' - + '

' - + '

' - + '

' - + '

<%-translate("Size:")%>-<%=node.size%>+

' - + '
<%-translate("Node color:")%>
    ' + + '

    ' + + '

    ' + + '

    ' + + '

    <%-translate("Size:")%>-<%-node.size%>+

    ' + + '
    <%-translate("Node color:")%>
      ' + '<% _(Rkns.pickerColors).each(function(c) { %>
    • <% }); %>
    Choose color
    ' - + '' - + '

    ' + + '' + + '

    ' + '

    ' - + '

    <%-translate("Created by:")%> <%=node.created_by_title%>

    ' + + '

    <%-translate("Created by:")%> <%-node.created_by_title%>

    ' ); Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template( - '

    ×<%-node.title%>

    ' + '

    ×<%-node.title%>

    ' + '

    <%-node.uri%>

    ' + '

    <%-node.description%>

    ' - + '

    <%-translate("Created by:")%><%=node.created_by_title%>

    ' + + '

    <%-translate("Created by:")%><%-node.created_by_title%>

    ' ); Rkns.Renderer.NodeEditor.prototype.draw = function() { @@ -828,27 +833,27 @@ Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( '

    ×<%-translate("Edit Edge")%>

    ' - + '

    ' - + '

    ' + + '

    ' + + '

    ' + '<% if (properties.length) { %>

    <% } %>' - + '
    <%-translate("Edge color:")%>
      ' + + '
      <%-translate("Edge color:")%>
        ' + '<% _(Rkns.pickerColors).each(function(c) { %>
      • <% }); %>
      Choose color
      ' - + '

      <%-translate("From:")%><%=edge.from_title%>

      ' - + '

      <%-translate("To:")%><%=edge.to_title%>

      ' - + '

      <%-translate("Created by:")%><%=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.title %>

      ' + '

      ×<%- edge.title %>

      ' + '

      <%-edge.uri%>

      ' + '

      <%-edge.description%>

      ' - + '

      <%-translate("From:")%><%=edge.from_title%>

      ' - + '

      <%-translate("To:")%><%=edge.to_title%>

      ' - + '

      <%-translate("Created by:")%><%=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() { @@ -1171,6 +1176,21 @@ /* */ +Rkns.Renderer.MiniFrame = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); + +Rkns.Renderer.MiniFrame.prototype.paperShift = function(_delta) { + this.renderer.offset = this.renderer.offset.subtract(_delta.divide(this.renderer.minimap.scale).multiply(this.renderer.scale)); + this.renderer.resetCoords(); + this.renderer.redraw(); +} + +Rkns.Renderer.MiniFrame.prototype.mouseup = function(_delta) { + this.renderer.click_target = null; + this.renderer.is_dragging = false; +} + +/* */ + Rkns.Renderer.Scene = function(_renkan) { this.renkan = _renkan; this.$ = Rkns.$(".Rk-Render"); @@ -1203,7 +1223,7 @@ this.minimap.rectangle.strokeColor = '#cccccc'; this.minimap.rectangle.strokeWidth = 4; this.minimap.offset = new paper.Point(this.minimap.size.divide(2)); - this.minimap.scale = .25; + this.minimap.scale = .1; this.node_layer.activate(); this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size); @@ -1214,11 +1234,14 @@ this.minimap.miniframe.fillColor = '#f0f0ff'; this.minimap.miniframe.strokeColor = '#8080ff'; this.minimap.miniframe.strokeWidth = 2; + this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null); this.bundles = []; this.click_mode = false; var _tool = new paper.Tool(), - _this = this; + _this = this, + _allowScroll = true; + _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE; _tool.onMouseMove = function(_event) { _this.onMouseMove(_event); @@ -1233,7 +1256,9 @@ _this.onMouseUp(_event); }); this.canvas_$.mousewheel(function(_event, _delta) { - _this.onScroll(_event, _delta); + if (_allowScroll) { + _this.onScroll(_event, _delta); + } }); this.canvas_$.dblclick(function(_event) { _this.onDoubleClick(_event); @@ -1241,10 +1266,17 @@ this.canvas_$.on("dragover", function(_event) { _event.stopPropagation(); _event.preventDefault(); - }) + }); + this.canvas_$.on("dragenter", function(_e) { + _allowScroll = false; + }); + this.canvas_$.on("dragleave", function(_e) { + _allowScroll = true; + }); this.canvas_$.on("drop", function(_event) { _event.stopPropagation(); _event.preventDefault(); + _allowScroll = true; if (_this.renkan.read_only) { return; } @@ -1253,29 +1285,82 @@ return res[t] = _event.originalEvent.dataTransfer.getData(t); }); var newNode = {}; - if (res["text/x-iri-source-uri"]) { - newNode.uri = res["text/x-iri-source-uri"]; - } - if (res["text/plain"]) { - newNode.description = res["text/plain"].replace(/[\s\n]+/gm,' ').trim(); - } - if (res["text/html"]) { - var snippet = Rkns.$('
      ').html(res["text/html"]); - newNode.image = snippet.find("img").attr("src") || ''; - newNode.uri = snippet.find("a").attr("href") || newNode.uri; - newNode.title = snippet.find("[title]").attr("title"); - } - if (res["text/uri-list"]) { - newNode.uri = res["text/uri-list"]; - } - if (res["text/x-moz-url"] && !newNode.title) { - newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim(); - if (newNode.title === newNode.uri) { - newNode.title = false; - } - } - if (res["text/x-iri-source-title"] && !newNode.title) { - newNode.title = res["text/x-iri-source-title"]; + console.log(res); + switch(res["text/x-iri-specific-site"]) { + case "twitter": + var snippet = Rkns.$('
      ').html(res["text/x-iri-selected-html"]), + tweetdiv = snippet.find(".tweet") + newNode.title = _renkan.translate("Tweet by ") + tweetdiv.attr("data-name"); + newNode.uri = "http://twitter.com/" + tweetdiv.attr("data-screen-name") + "/status/" + tweetdiv.attr("data-tweet-id"); + newNode.image = tweetdiv.find(".avatar").attr("src"); + newNode.description = tweetdiv.find(".js-tweet-text:first").text(); + break; + case "google": + var snippet = Rkns.$('
      ').html(res["text/x-iri-selected-html"]); + newNode.title = snippet.find("h3:first").text().trim(); + newNode.uri = snippet.find("h3 a").attr("href"); + newNode.description = snippet.find(".st:first").text().trim(); + break; + case "ldt": + var snippet = Rkns.$('
      ').html(res["text/x-iri-selected-html"]), + tweetel = snippet.children().first(); + if (tweetel.hasClass("Ldt-AnnotationsList-li")) { + newNode.title = tweetel.find(".Ldt-AnnotationsList-Title").text().trim(); + newNode.description = tweetel.find(".Ldt-AnnotationsList-Description").text().trim(); + newNode.image = tweetel.find(".Ldt-AnnotationsList-Thumbnail").attr("src"); + var url = tweetel.find("a").attr("href"); + if (/^https?:\/\//.test(url)) { + newNode.uri = url; + } else { + newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,'') + '#' + url.replace(/^.*#/,'') + } + newNode.color = tweetel[0].style.backgroundColor; + } + if (tweetel.hasClass("Ldt-Polemic-TweetDiv")) { + newNode.title = _renkan.translate("Annotation from PolemicTweet"); + newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,'') + '#id=' + tweetel.attr("annotation-id"); + newNode.description = tweetel.attr("tweet-title"); + newNode.color = tweetel.attr("polemic-color"); + } + if (tweetel.hasClass("Ldt-Segments-Segment")) { + var text = tweetel.attr("segment-text").split(/<[^>]+>/g); + newNode.title = text[0]; + newNode.description = text.slice(1).join(""); + + newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,''); + var match = tweetel.attr("trace-info").match(/segment-id:([\d\w_-]+)/); + if (match) { + newNode.uri += '#id=' + match[1]; + } + newNode.color = tweetel.attr("data-base-color"); + } + break; + case undefined: + default: + if (res["text/x-iri-source-uri"]) { + newNode.uri = res["text/x-iri-source-uri"]; + } + if (res["text/plain"] || res["text/x-iri-selected-text"]) { + newNode.description = (res["text/plain"] || res["text/x-iri-selected-text"]).replace(/[\s\n]+/gm,' ').trim(); + } + if (res["text/html"] || res["text/x-iri-selected-html"]) { + var snippet = Rkns.$('
      ').html(res["text/html"] || res["text/x-iri-selected-html"]); + newNode.image = snippet.find("img").attr("src") || ''; + newNode.uri = snippet.find("a").attr("href") || newNode.uri; + newNode.title = snippet.find("[title]").attr("title"); + } + if (res["text/uri-list"]) { + newNode.uri = res["text/uri-list"]; + } + if (res["text/x-moz-url"] && !newNode.title) { + newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim(); + if (newNode.title === newNode.uri) { + newNode.title = false; + } + } + if (res["text/x-iri-source-title"] && !newNode.title) { + newNode.title = res["text/x-iri-source-title"]; + } } var fields = ["title", "description", "uri", "image"]; for (var i = 0; i < fields.length; i++) { @@ -1298,6 +1383,7 @@ title: newNode.title || _this.renkan.translate("Dragged resource"), description: newNode.description || "", image: newNode.image || "", + color: newNode.color || undefined, position: { x: _coords.x, y: _coords.y @@ -1368,22 +1454,42 @@ _this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn(); } }); - this.$.find(".Rk-Bookmarklet-Button").click(function(){ - _this.notif_$ - .text(_renkan.translate("Drag this bookmarklet to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan.")) - .fadeIn() - .delay(5000) - .fadeOut(); - return false; - }); + this.$.find(".Rk-Bookmarklet-Button") + .attr("href","javascript:" + Rkns.Renderer._BOOKMARKLET_CODE(_renkan)) + .click(function(){ + _this.notif_$ + .text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan.")) + .fadeIn() + .delay(5000) + .fadeOut(); + return false; + }); this.$.find(".Rk-TopBar-Button").mouseover(function() { Rkns.$(this).find(".Rk-TopBar-Tooltip").show(); }).mouseout(function() { Rkns.$(this).find(".Rk-TopBar-Tooltip").hide(); }); + this.$.find(".Rk-Fold-Bins").click(function() { + var bins = _renkan.$.find(".Rk-Bins"); + if (bins.offset().left < 0) { + bins.animate({left: 0},250); + _this.$.animate({left: 300},250,function() { + var w = _this.$.width(); + paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]); + }); + $(this).html("«"); + } else { + bins.animate({left: -300},250); + _this.$.animate({left: 0},250,function() { + var w = _this.$.width(); + paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]); + }); + $(this).html("»"); + } + }); paper.view.onResize = function(_event) { - _this.offset = _this.offset.add(_event.delta.divide(2)); + _this.offset = _this.offset.add(_event.delta.divide(2)); _this.resetCoords(); _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size) _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4])); @@ -1446,13 +1552,12 @@ + '
      <%-translate("Add Node")%>
      ' + '
      <%-translate("Add Edge")%>
      ' + '
      <%-translate("Archive Project")%>
      ' - + '
      ' - + '<%-translate("Renkan \'Drag and Add\' bookmarklet")%>
      ' + + '
      ' + + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%>
      ' + '
      ' + '<% } %>' + '
      ' + + '<% if (show_bins) { %>
      «
      <% } %>' + '
      ">
      ">
      ' + '
      ' ); @@ -1507,8 +1612,8 @@ this.minimap.scale = _scale; } if (nodes.length === 1) { - this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])); - this.minimap.scale = .25; + this.minimap.scale = .1; + this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]).multiply(this.minimap.scale)); } this.redraw(); }