# HG changeset patch # User veltr # Date 1346685695 -7200 # Node ID 08a366a3514333bc757255a4ecb2ae25743b5619 # Parent 126cbe638feecb1f7ff62d21f0f9d59b44862620 First part of SH design integration diff -r 126cbe638fee -r 08a366a35143 client/css/renkan-publish.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/css/renkan-publish.css Mon Sep 03 17:21:35 2012 +0200 @@ -0,0 +1,100 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +ul, li { + list-style: none; +} + +input::-moz-focus-inner /*Remove button padding in FF*/ +{ + border: 0; + padding: 0; +} + +table { + border-collapse: separate; border-spacing: 0; +} + +th, td { + vertical-align: top; +} + +img a { + border: none; +} + +body { + font-size: 10px; font-family: Arial, Helvetica, sans-serif; + background: #ffffff; color: #000000; +} + +a { + color: #6060c0; +} + +.Rk-Render { + position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: -moz-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%); +} + +.Rk-Render-Panel { + position: absolute; left: 300px; top: 0; right: 0; bottom: 0; +} + +.Rk-Canvas { + background: -moz-linear-gradient(left, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%); + position: absolute; left: 0; top: 0; right: 0; bottom: 0; +} + +.Rk-Editor { + position: absolute; left: 0; top: 0; +} + +.Rk-CloseX { + float: right; cursor: pointer; +} + +.Rk-Editor h2 { + font-size: 14px; font-weight: bold; +} + +.Rk-Editor p { + margin: 5px 0; font-size: 11px; +} + +.Rk-ZoomButtons { + position: absolute; left: 0; top: 0; cursor: pointer; +} + +.Rk-ZoomIn, .Rk-ZoomOut { + width: 21px; height: 20px; background: url(../img/zoombuttons.png); margin: 5px; +} + +.Rk-ZoomIn:hover { + background-position: 0 -20px; +} + +.Rk-ZoomOut { + background-position: -21px 0; +} + +.Rk-ZoomOut:hover { + background-position: -21px -20px; +} diff -r 126cbe638fee -r 08a366a35143 client/css/renkan.css --- a/client/css/renkan.css Thu Aug 30 18:11:25 2012 +0200 +++ b/client/css/renkan.css Mon Sep 03 17:21:35 2012 +0200 @@ -50,24 +50,106 @@ color: #6060c0; } -.Rk-Bins { - background: #F0F0F0; position: absolute; left: 0; top: 0; width: 300px; bottom: 0; overflow: hidden; -} - -.Rk-Render-Panel { - position: absolute; left: 300px; top: 0; right: 0; bottom: 0; -} - -.Rk-Render-Full { +.Rk-Main { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } -.Rk-Canvas { - position: absolute; left: 0; top: 0; right: 0; bottom: 0; +.Rk-Render { + position: absolute; left: 300px; top: 0; right: 0; bottom: 0; + background: #ffffff; + background: -moz-linear-gradient(left, #f3f3f3 0, #ffffff 30%, #ffffff 70%, #f3f3f3 100%); + background: -webkit-linear-gradient(left, #f3f3f3 0, #ffffff 30%, #ffffff 70%, #f3f3f3 100%); +} + +/* Top Bar */ + +.Rk-TopBar { + position: absolute; left: 0; top: 0; right: 0; height: 35px; + background: #333333; + background: -moz-linear-gradient(top, #505050 5px, #1e1e1e 30px); + background: -webkit-linear-gradient(top, #505050 5px, #1e1e1e 30px); +} + +.Rk-PadTitle { + float: left; font-size: 14px; height: 16px; margin: 4px 5px; width: 130px; background: #666666; padding: 4px; border: 1px solid #333333; + border-radius: 3px; box-shadow: 0 1px 0 #505050; color: #ffffff; font-weight: bold; +} + +.Rk-Users { + float: right; width: 130px; margin: 4px 5px; +} + +.Rk-CurrentUser { + font-size: 13px; background: #666666; padding: 4px; border: 1px solid #333333; border-radius: 3px; box-shadow: 0 1px 0 #505050; color: #ffffff; +} + +.Rk-CurrentUser-Color { + display: inline-block; width: 12px; height: 12px; border: 1px solid #333333; margin: -2px 2px; +} + +.Rk-UserList { + box-shadow: 0 2px 2px #999999; + position: relative; z-index: 3; display: none; padding-top: 8px; +} + +.Rk-User { + background: #ffffff; padding: 3px; font-size: 12px; border-style: solid solid none; border-color: #cccccc; border-width: 1px; +} + +.Rk-TopBar-Button { + float: right; background: url(../img/topbarbuttons.png) no-repeat; height: 35px; cursor: pointer; + position: relative; } +.Rk-TopBar-Separator { + background: #666666; + background: -moz-linear-gradient(top, #666666 20%, #333333 80%); + background: -webkit-linear-gradient(top, #666666 20%, #333333 80%); + content: ""; display: block; height: 35px; float: right; width: 1px; border-left: 1px solid #111111; + margin: 0 3px; +} + +.Rk-TopBar-Tooltip { + position: absolute; top: 31px; left: 50%; margin-left: -60px; width: 120px; z-index: 3; display: none; +} + +.Rk-TopBar-Tooltip-Contents { + background: #ffffff; + font-size: 13px; font-weight: bold; color: #6060c0; text-align: center; padding: 2px; + border-style: none solid solid; border-width: 1px; border-color: #cccccc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; +} + +.Rk-TopBar-Tooltip-Tip { + height: 7px; background: url(../img/tooltiparrow.png) center no-repeat; margin: 0 1px; +} + +.Rk-AddNode-Button { + width: 34px; +} + +.Rk-AddNode-Button:hover { + background-position: 0 -35px; +} + +.Rk-FullScreen-Button { + width: 34px; background-position: -34px 0; +} + +.Rk-FullScreen-Button:hover { + background-position: -34px -35px; +} +/* Canvas */ + +.Rk-Canvas { + background: -moz-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%); + background: -webkit-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%); + position: absolute; left: 0; top: 35px; right: 0; bottom: 0; z-index: 1; +} + +/* Editors */ + .Rk-Editor { - position: absolute; left: 0; top: 0; + position: absolute; left: 0; top: 35px; z-index: 2; } .Rk-CloseX { @@ -126,25 +208,123 @@ background-position: -21px -20px; } +/* Bins */ + +.Rk-Title { + position: absolute; left: 0; top: 0; width: 300px; height: 35px; + background: #333333; + background: -moz-linear-gradient(top, #505050 5px, #1e1e1e 30px); + background: -webkit-linear-gradient(top, #505050 5px, #1e1e1e 30px); +} + +.Rk-Title h1 { + font-size: 18px; color: #ffffff; margin: 5px; +} + + +.Rk-Title:after { + background: #666666; + background: -moz-linear-gradient(top, #666666 20%, #333333 80%); + background: -webkit-linear-gradient(top, #666666 20%, #333333 80%); + content: ""; display: block; height: 35px; + left: 298px; position: absolute; top: 0; width: 1px; border-left: 1px solid #111111; +} + +.Rk-Bins { + background: #ffffff; position: absolute; left: 0; top: 35px; width: 299px; bottom: 0; + overflow: hidden; border-right: 1px solid #252525; +} + +/* Bin Search Field */ + +.Rk-Search-Form { + padding: 10px; height: 27px; + background: #666666; + background: -moz-linear-gradient(top, #606060 20%, #909090 80%); + background: -webkit-linear-gradient(top, #606060 20%, #909090 80%); +} + .Rk-Search-Input, .Rk-Search-Select { - border-radius: 5px; margin: 2px; padding: 2px; font-size: 13px; + float: left; border-width: 1px; border-color: #003050; } .Rk-Search-Input { - width: 150px; + border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-style: solid; + font-size: 13px; width: 190px; background: #ffffff; height: 15px; padding: 5px; } .Rk-Search-Select { - width: 130px; + display: inline-block; position: relative; width: 45px; + border-style: solid none; cursor: pointer; + height: 25px; background: #ffffff url(../img/more.png) 30px 10px no-repeat; +} + +.Rk-Search-Select:hover { + background-color: #3030FF; +} + +.Rk-Search-Current { + width: 25px; height: 20px; margin: 2px; +} + +.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; +} + +.Rk-Search-List li { + padding: 2px 2px 2px 30px; border-top: 1px solid #cccccc; height: 16px; + background-color: #ffffff; background-repeat: no-repeat; cursor: pointer; +} + +.Rk-Search-List li:hover { + background-color: #3030ff; color: #ffffff; } +.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); +} + +.Rk-Search-Submit:hover { + background-color: #999999; +} + +/* Individual Bins */ + + .Rk-Bin-Title { - border-top: 1px solid #cccccc; border-bottom: 1px solid #ffffff; background: #f0f0f0; - font-size: 14px; font-weight: bold; padding: 2px; cursor: pointer; + background: #333333; + background: -moz-linear-gradient(top, #505050 20%, #1e1e1e 80%); + background: -webkit-linear-gradient(top, #505050 20%, #1e1e1e 80%); + border-bottom: 1px solid #666666; font-weight: bold; + font-size: 14px; padding: 5px 5px 5px 30px; cursor: pointer; color: #f0f0f0; +} + +.Rk-Bin-Close { + float: right; font-size: 15px; font-weight: bold; margin: 3px 3px 0; color: #f0f0f0; cursor: pointer; +} + +.Rk-Bin-Close:hover { + color: #ffffe0; +} + +.Rk-Bin-Title:hover { + color: #ffffe0; + background: -moz-linear-gradient(top, rgb(20,20,20) 20%, rgb(60,60,60) 80%); + background: -webkit-linear-gradient(top, rgb(20,20,20) 20%, rgb(60,60,60) 80%); +} + +.Rk-Bin-Title-Icon { + float: left; width: 25px; margin: 2px; } .Rk-Bin-Main { overflow: auto; + background: #ffffff; + background: -moz-linear-gradient(top, #e0e0e0 0, #FFFFFF 2%, #FFFFFF 98%, #e0e0e0 100%); + background: -webkit-linear-gradient(top, #e0e0e0 0, #FFFFFF 2%, #FFFFFF 98%, #e0e0e0 100%); } .Rk-Bin-Item { @@ -152,11 +332,14 @@ } .Rk-Bin-Item:hover { - background: #d0d0d0; + background: -moz-linear-gradient(top, rgba(0,0,0,.1) 20%, rgba(128,128,128,.1) 80%); + background: -webkit-linear-gradient(top, rgba(0,0,0,.1) 20%, rgba(128,128,128,.1) 80%); } .Rk-Bin-Item.dragging { - background: #fff8f8; color: #660000; + background: -moz-linear-gradient(top, rgba(128,0,0,.1) 20%, rgba(255,128,128,.1) 80%); + background: -webkit-linear-gradient(top, rgba(128,0,0,.1) 20%, rgba(255,128,128,.1) 80%); + color: #660000; } .Rk-Bin-Item.selected { @@ -164,20 +347,28 @@ } .Rk-Bin-Main li { - padding: 2px; background: #f8f8f8; border-bottom: 1px solid #cccccc; + padding: 2px; border-bottom: 1px solid #cccccc; clear: both; } .Rk-Bin-Main h3 { - font-size: 15px; font-style: italic; font-weight: bold; text-align: center; + font-size: 14px; font-style: italic; font-weight: bold; text-align: center; } .Rk-Bin-Main h4 { - font-size: 13px; font-weight: bold; + font-size: 12px; font-weight: bold; } .Rk-Bin-Main p { - font-size: 12px; + font-size: 11px; +} + +.Rk-Twitter-Icon { + background-image: url(../img/search-logos.png); background-position: 0 -80px; +} + +.Rk-Twitter-Title-Icon { + height: 20px; background: url(../img/search-logos.png); background-position: 0 -80px; } .Rk-Twitter-TwImage { @@ -200,10 +391,30 @@ background: #ffff80; } +.Rk-Wikipedia-Search-Icon { + background-image: url(../img/search-logos.png); +} + .Rk-Wikipedia-Icon { float: left; width: 52px; height: 47px; background: url(../img/wikipedia.png); } +.Rk-Wikipedia-Title-Icon { + height: 20px; background: url(../img/search-logos.png); +} + +.Rk-Wikipedia-Lang-en { + background-position: 0 -20px; +} + +.Rk-Wikipedia-Lang-fr { + background-position: 0 -40px; +} + +.Rk-Wikipedia-Lang-ja { + background-position: 0 -60px; +} + .Rk-Wikipedia-Result { min-height: 51px; } diff -r 126cbe638fee -r 08a366a35143 client/img/more.png Binary file client/img/more.png has changed diff -r 126cbe638fee -r 08a366a35143 client/img/search-logos.png Binary file client/img/search-logos.png has changed diff -r 126cbe638fee -r 08a366a35143 client/img/search.png Binary file client/img/search.png has changed diff -r 126cbe638fee -r 08a366a35143 client/img/tooltiparrow.png Binary file client/img/tooltiparrow.png has changed diff -r 126cbe638fee -r 08a366a35143 client/img/topbarbuttons.png Binary file client/img/topbarbuttons.png has changed diff -r 126cbe638fee -r 08a366a35143 client/js/i18n.js --- a/client/js/i18n.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/i18n.js Mon Sep 03 17:21:35 2012 +0200 @@ -7,6 +7,8 @@ edit_description: "Description:", edit_from: "From:", edit_to: "To:", + full_screen: "Full Screen", + add_node: "Add Node", created_by: "Created by:", zoom_in: "Zoom In", zoom_out: "Zoom Out" diff -r 126cbe638fee -r 08a366a35143 client/js/ldtjson-bin.js --- a/client/js/ldtjson-bin.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/ldtjson-bin.js Mon Sep 03 17:21:35 2012 +0200 @@ -1,16 +1,18 @@ -Rkns.Bins.LdtJson = Rkns.Utils.inherit(Rkns.Bins._Base); +Rkns.Ldt = {} -Rkns.Bins.LdtJson.prototype.tagTemplate = Rkns._.template( +Rkns.Ldt.ProjectBin = Rkns.Utils.inherit(Rkns._BaseBin); + +Rkns.Ldt.ProjectBin.prototype.tagTemplate = Rkns._.template( '
  • ' + '

    <%-title%>

    • ' ); -Rkns.Bins.LdtJson.prototype.annotationTemplate = Rkns._.template( +Rkns.Ldt.ProjectBin.prototype.annotationTemplate = Rkns._.template( '
  • ' + '

    <%-title%>

    <%-description%>

    Start: <%=start%>, End: <%=end%>, Duration: <%=duration%>

    • ' ); -Rkns.Bins.LdtJson.prototype._init = function(_renkan, _opts) { +Rkns.Ldt.ProjectBin.prototype._init = function(_renkan, _opts) { this.proj_id = _opts.project_id; this.ldt_platform = _opts.ldt_platform || "http://ldt.iri.centrepompidou.fr/"; this.title_$.html(_opts.title); diff -r 126cbe638fee -r 08a366a35143 client/js/main.js --- a/client/js/main.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/main.js Mon Sep 03 17:21:35 2012 +0200 @@ -26,15 +26,24 @@ Rkns._ = _; -Rkns.Bins = {} - -Rkns.Bins._Base = function(_renkan, _opts) { +Rkns._BaseBin = function(_renkan, _opts) { if (typeof _renkan !== "undefined") { this.renkan = _renkan; this.renkan.$.find(".Rk-Bin-Main").hide(); this.$ = Rkns.$('
  • ') .addClass("Rk-Bin") .appendTo(_renkan.$.find(".Rk-Bin-List")); + this.title_icon_$ = Rkns.$('') + .addClass("Rk-Bin-Title-Icon") + .appendTo(this.$); + var _this = this; + Rkns.$('') + .addClass("Rk-Bin-Close") + .html('×') + .appendTo(this.$) + .click(function() { + _this.destroy(); + }); this.title_$ = Rkns.$('

    ') .addClass("Rk-Bin-Title") .appendTo(this.$); @@ -45,6 +54,12 @@ this.renkan.resizeBins(); } } + +Rkns._BaseBin.prototype.destroy = function() { + this.$.detach(); + this.renkan.resizeBins(); +} + /* Point of entry */ Rkns.Renkan = function(_opts) { @@ -58,14 +73,18 @@ _opts.search = []; } this.project = new Rkns.Models.Project(); + this.language = _opts.language; this.l10n = Rkns.i18n[_opts.language]; if (typeof _opts.user_id !== "undefined") { this.current_user = _opts.user_id; } this.$ = Rkns.$("#" + _opts.container); - this.$.html(this.template()); + this.$ + .addClass("Rk-Main") + .html(this.template()); this.renderer = new Rkns.Renderer.Scene(this); this.tabs = []; + this.search_engines = []; this.selected_bin_item = undefined; var _this = this; this.$.mouseup(function() { @@ -75,33 +94,41 @@ if (!_opts.search.length) { this.$.find(".Rk-Search-Form").detach(); } else { - var _tmpl = Rkns._.template(''), - _select = this.$.find(".Rk-Search-Select"), + var _tmpl = Rkns._.template('
  • <%= title %>
    • '), + _select = this.$.find(".Rk-Search-List"), _input = this.$.find(".Rk-Search-Input") _form = this.$.find(".Rk-Search-Form"); + Rkns._(_opts.search).each(function(_search, _key) { + var _searchObj = new _search.type(_this, _search); + _this.search_engines.push(_searchObj); + }); _select.html( - Rkns._(_opts.search).map(function(_value, _key) { + Rkns._(this.search_engines).map(function(_search, _key) { return _tmpl({ key: _key, - value: _value + title: _search.getSearchTitle(), + className: _search.getBgClass() }); }).join("") - ).change(function() { + ); + _select.find("li").click(function() { + var _el = Rkns.$(this); + _this.setSearchEngine(_el.attr("data-key")); _form.submit(); }); _form.submit(function() { if (_input.val()) { - var _search = _opts.search[_select.val()]; - _this.tabs.push( - new _search.bin( - _this, - Rkns._({ search: _input.val() }).defaults(_search) - ) - ); + var _search = _this.search_engine; + _search.search(_input.val()); } return false; - }); + this.$.find(".Rk-Search-Select").mouseenter(function() { + _select.slideDown(); + }).mouseleave(function() { + _select.slideUp(); + }) + this.setSearchEngine(0); } Rkns._(_opts.bins).each(function(_bin) { _this.tabs.push(new _bin.bin(_this, _bin)); @@ -124,7 +151,7 @@ this.$.find(".Rk-Bins") .click(function(_e) { - if (_e.target.className == "Rk-Bin-Title") { + if (Rkns.$(_e.target).is(".Rk-Bin-Title,.Rk-Bin-Title-Icon")) { var _mainDiv = Rkns.$(_e.target).siblings(".Rk-Bin-Main"); if (_mainDiv.is(":hidden")) { _this.$.find(".Rk-Bin-Main").slideUp(); @@ -161,12 +188,19 @@ } Rkns.Renkan.prototype.template = Rkns._.template( - '
    ' - + '
    ' + '

    Hyper Plateau

    ' + + '
    ' + + '
      ' + + '
      ' + '
        ' ); +Rkns.Renkan.prototype.setSearchEngine = function(_key) { + this.search_engine = this.search_engines[_key]; + this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass()); +} + Rkns.Renkan.prototype.resizeBins = function() { var _d = + this.$.find(".Rk-Search-Form").outerHeight(); this.$.find(".Rk-Bin-Title").each(function() { diff -r 126cbe638fee -r 08a366a35143 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/paper-renderer.js Mon Sep 03 17:21:35 2012 +0200 @@ -869,6 +869,51 @@ _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-FullScreen-Button").click(function() { + var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen, + _el = _this.renkan.$[0], + _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"], + _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"]; + if (_isFull) { + for (var i = 0; i < _cancelMethods.length; i++) { + if (typeof document[_cancelMethods[i]] === "function") { + document[_cancelMethods[i]](); + break; + } + } + } else { + for (var i = 0; i < _requestMethods.length; i++) { + if (typeof _el[_requestMethods[i]] === "function") { + _el[_requestMethods[i]](); + break; + } + } + } + }); + 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(); + }); + this.$.find(".Rk-TopBar-Button").mouseover(function() { + Rkns.$(this).find(".Rk-TopBar-Tooltip").show(); + }).mouseout(function() { + Rkns.$(this).find(".Rk-TopBar-Tooltip").hide(); + }); + paper.view.onResize = function(_event) { _this.offset = _this.offset.add(_event.delta.divide(2)); _this.redraw(); @@ -880,7 +925,13 @@ this.addRepresentations("Node", this.renkan.project.get("nodes")); this.addRepresentations("Edge", this.renkan.project.get("edges")); + this.renkan.project.get("users").each(function(_user) { + _this.addUser(_user); + }) + this.renkan.project.on("add:users", function(_user) { + _this.addUser(_user); + }); this.renkan.project.on("add:nodes", function(_node) { _this.addRepresentation("Node", _node); _thRedraw(); @@ -894,7 +945,12 @@ } Rkns.Renderer.Scene.prototype.template = Rkns._.template( - '
        ' + '

        Untitled Project

        ' + + '
        <unknown user>
          ' + + '
          <%=l10n.full_screen%>
          ' + + '
          <%=l10n.add_node%>
          ' + + '
          ' + + '
          ' + '
          ' + '
          ' ); @@ -974,6 +1030,26 @@ }); } +Rkns.Renderer.Scene.prototype.userTemplate = Rkns._.template( + '
        • <%=name%>
          • ' +); + +Rkns.Renderer.Scene.prototype.addUser = function(_user) { + if (_user.get("_id") === this.renkan.current_user) { + this.$.find(".Rk-CurrentUser-Name").text(_user.get("title")); + this.$.find(".Rk-CurrentUser-Color").css("background", _user.get("color")); + } else { + this.$.find(".Rk-UserList").append( + Rkns.$( + this.userTemplate({ + name: _user.get("title"), + background: _user.get("color") + }) + ) + ); + } +} + Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) { _representation.destroy(); this.representations = Rkns._(this.representations).reject( diff -r 126cbe638fee -r 08a366a35143 client/js/twitter-bin.js --- a/client/js/twitter-bin.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/twitter-bin.js Mon Sep 03 17:21:35 2012 +0200 @@ -1,6 +1,36 @@ -Rkns.Bins.Twitter = Rkns.Utils.inherit(Rkns.Bins._Base); +Rkns.Twitter = { + i18n: { + en: { + search_on_twitter: "Twitter" + } + } +} + +Rkns.Twitter.Search = function(_renkan, _opts) { + this.renkan = _renkan; + this.opts = _opts; +} + +Rkns.Twitter.Search.prototype.getBgClass = function() { + return "Rk-Twitter-Icon"; +} -Rkns.Bins.Twitter.prototype.tweetTemplate = Rkns._.template( +Rkns.Twitter.Search.prototype.getSearchTitle = function() { + var _lang = Rkns.Twitter.i18n[this.renkan.lang] || Rkns.Twitter.i18n['en']; + return _lang.search_on_twitter; +} + +Rkns.Twitter.Search.prototype.search = function(_q) { + this.renkan.tabs.push( + new Rkns.Twitter.Bin(this.renkan, { + search: _q + }) + ); +} + +Rkns.Twitter.Bin = Rkns.Utils.inherit(Rkns._BaseBin); + +Rkns.Twitter.Bin.prototype.tweetTemplate = Rkns._.template( '
        • ' + '' @@ -13,9 +43,11 @@ + 'favorite

          • ' ); -Rkns.Bins.Twitter.prototype._init = function(_renkan, _opts) { +Rkns.Twitter.Bin.prototype._init = function(_renkan, _opts) { this.search = _opts.search; - this.title_$.html('Twitter: "' + this.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; Rkns.$.getJSON( "http://search.twitter.com/search.json?q=" + encodeURIComponent(this.search) + "&callback=?", diff -r 126cbe638fee -r 08a366a35143 client/js/wikipedia-bin.js --- a/client/js/wikipedia-bin.js Thu Aug 30 18:11:25 2012 +0200 +++ b/client/js/wikipedia-bin.js Mon Sep 03 17:21:35 2012 +0200 @@ -1,16 +1,52 @@ -Rkns.Bins.Wikipedia = Rkns.Utils.inherit(Rkns.Bins._Base); +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) { + this.renkan = _renkan; + this.lang = _opts.lang || "en"; +} -Rkns.Bins.Wikipedia.prototype.resultTemplate = Rkns._.template( +Rkns.Wikipedia.Search.prototype.getBgClass = function() { + return "Rk-Wikipedia-Search-Icon Rk-Wikipedia-Lang-" + this.lang; +} + +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_) ; +} + +Rkns.Wikipedia.Search.prototype.search = function(_q) { + this.renkan.tabs.push( + new Rkns.Wikipedia.Bin(this.renkan, { + lang: this.lang, + search: _q + }) + ); +} + +Rkns.Wikipedia.Bin = Rkns.Utils.inherit(Rkns._BaseBin); + +Rkns.Wikipedia.Bin.prototype.resultTemplate = Rkns._.template( '
        • ' + '

          <%=highlightedtitle%>

          ' + '

          <%=result.snippet%>

          • ' ); -Rkns.Bins.Wikipedia.prototype._init = function(_renkan, _opts) { +Rkns.Wikipedia.Bin.prototype._init = function(_renkan, _opts) { this.search = _opts.search; this.lang = _opts.lang || "en"; - this.title_$.html(_opts.title + ': "' + this.search + '"'); + 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; Rkns.$.getJSON( "http://" + _this.lang + ".wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodeURIComponent(this.search) + "&format=json&callback=?", diff -r 126cbe638fee -r 08a366a35143 client/publish-test.html --- a/client/publish-test.html Thu Aug 30 18:11:25 2012 +0200 +++ b/client/publish-test.html Mon Sep 03 17:21:35 2012 +0200 @@ -23,7 +23,7 @@ }); }); - + diff -r 126cbe638fee -r 08a366a35143 client/render-test.html --- a/client/render-test.html Thu Aug 30 18:11:25 2012 +0200 +++ b/client/render-test.html Mon Sep 03 17:21:35 2012 +0200 @@ -28,48 +28,42 @@ url: "data/simple-persist.php", bins: [ { - title: "English Wikipedia", - bin: Rkns.Bins.Wikipedia, + bin: Rkns.Wikipedia.Bin, lang: "en", search: "Digital Humanities" }, { - title: "Japanese Wikipedia", - bin: Rkns.Bins.Wikipedia, + bin: Rkns.Wikipedia.Bin, lang: "ja", search: "Digital Humanities" }, { - title: "Twitter", - bin: Rkns.Bins.Twitter, + bin: Rkns.Twitter.Bin, search: "Digital Humanities" }, { title: "LDT Project", - bin: Rkns.Bins.LdtJson, + bin: Rkns.Ldt.ProjectBin, project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02", ldt_platform: "http://capsicum/pf/" } ], search: [ { - title: "French Wikipedia", - bin: Rkns.Bins.Wikipedia, + type: Rkns.Wikipedia.Search, lang: "fr" }, { - title: "English Wikipedia", - bin: Rkns.Bins.Wikipedia, + type: Rkns.Wikipedia.Search, lang: "en" }, { - title: "Japanese Wikipedia", - bin: Rkns.Bins.Wikipedia, + type: Rkns.Wikipedia.Search, lang: "ja" - }, { - title: "Twitter", - bin: Rkns.Bins.Twitter }, + { + type: Rkns.Twitter.Search + } ], user_id: "u-anonymous" });