--- /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;
+}
--- 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;
}
Binary file client/img/more.png has changed
Binary file client/img/search-logos.png has changed
Binary file client/img/search.png has changed
Binary file client/img/tooltiparrow.png has changed
Binary file client/img/topbarbuttons.png has changed
--- 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"
--- 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(
'<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
+ '<div class="Rk-Ldt-Icon Rk-Ldt-TagIcon"></div><h4><%-title%></h4></li>'
);
-Rkns.Bins.LdtJson.prototype.annotationTemplate = Rkns._.template(
+Rkns.Ldt.ProjectBin.prototype.annotationTemplate = Rkns._.template(
'<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+ '<div class="Rk-Ldt-Icon Rk-Ldt-<%=type%>Icon"></div><h4><%-title%></h4><p><%-description%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p></li>'
);
-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);
--- 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.$('<li>')
.addClass("Rk-Bin")
.appendTo(_renkan.$.find(".Rk-Bin-List"));
+ this.title_icon_$ = Rkns.$('<span>')
+ .addClass("Rk-Bin-Title-Icon")
+ .appendTo(this.$);
+ var _this = this;
+ Rkns.$('<span>')
+ .addClass("Rk-Bin-Close")
+ .html('×')
+ .appendTo(this.$)
+ .click(function() {
+ _this.destroy();
+ });
this.title_$ = Rkns.$('<h2>')
.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('<option value="<%= key %>"><%= value.title %></option>'),
- _select = this.$.find(".Rk-Search-Select"),
+ var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),
+ _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(
- '<div class="Rk-Bins">'
- + '<form class="Rk-Search-Form"><input class="Rk-Search-Input" type="search" placeholder="Search" /><select class="Rk-Search-Select"></select></form>'
+ '<div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'
+ + '<form class="Rk-Search-Form"><input class="Rk-Search-Input" type="text" placeholder="Search" />'
+ + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
+ + '<input type="submit" value="" class="Rk-Search-Submit" /></form>'
+ '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render Rk-Render-Panel"></div>'
);
+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() {
--- 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(
- '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
+ '<div class="Rk-TopBar"><h3 class="Rk-PadTitle">Untitled Project</h3>'
+ + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name"><unknown user></span></div><ul class="Rk-UserList"></ul></div>'
+ + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>'
+ + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>'
+ + '<div class="Rk-TopBar-Separator"></div></div>'
+ + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
+ '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+ '</div>'
);
@@ -974,6 +1030,26 @@
});
}
+Rkns.Renderer.Scene.prototype.userTemplate = Rkns._.template(
+ '<li class="Rk-User"><span class="Rk-UserColor" style="background:<%=background%>;"></span><%=name%></li>'
+);
+
+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(
--- 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(
'<li class="Rk-Twitter-Tweet Rk-Bin-Item" data-uri="http://twitter.com/<%=tweet.from_user%>/status/<%=tweet.id_str%>" '
+ 'data-title="Tweet by @<%=tweet.from_user%>" data-description="<%-tweet.text%>">'
+ '<img class="Rk-Twitter-TwImage" src="<%=tweet.profile_image_url%>" />'
@@ -13,9 +43,11 @@
+ '<a href="http://twitter.com/intent/favorite?tweet_id=<%=tweet.id_str%>" target="_blank">favorite</a></p></li>'
);
-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=?",
--- 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(
'<li class="Rk-Wikipedia-Result Rk-Bin-Item" data-uri="<%=wpurl%>" '
+ 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>">'
+ '<div class="Rk-Wikipedia-Icon"></div><h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>'
+ '<p class="Rk-Wikipedia-Snippet"><%=result.snippet%></p></li>'
);
-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=?",
--- 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 @@
});
});
</script>
- <link rel="stylesheet" href="css/renkan.css" />
+ <link rel="stylesheet" href="css/renkan-publish.css" />
<style type="text/css">
</style>
</head>
--- 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"
});
