client/js/main.js
changeset 168 f978d70a9e63
parent 139 9929b1447f69
child 169 a60a450b8f3b
equal deleted inserted replaced
167:eb97351d5e9b 168:f978d70a9e63
     1 /* 
     1 /* 
     2  *  Copyright 2012 Institut de recherche et d'innovation 
     2  *  Copyright 2012-2013 Institut de recherche et d'innovation 
     3  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
     3  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
     4  *   
     4  *   
     5  *  contact@iri.centrepompidou.fr
     5  *  contact@iri.centrepompidou.fr
     6  *  http://www.iri.centrepompidou.fr 
     6  *  http://www.iri.centrepompidou.fr 
     7  *   
     7  *   
    50             
    50             
    51         var _this = this;
    51         var _this = this;
    52         
    52         
    53         Rkns.$('<a>')
    53         Rkns.$('<a>')
    54             .attr({
    54             .attr({
    55             	href: "#",
    55                 href: "#",
    56             	title: _renkan.translate("Close bin")
    56                 title: _renkan.translate("Close bin")
    57         	})
    57             })
    58             .addClass("Rk-Bin-Close")
    58             .addClass("Rk-Bin-Close")
    59             .html('&times;')
    59             .html('&times;')
    60             .appendTo(this.$)
    60             .appendTo(this.$)
    61             .click(function() {
    61             .click(function() {
    62                 _this.destroy();
    62                 _this.destroy();
    63                 if (!_renkan.$.find(".Rk-Bin-Main:visible").length) {
    63                 if (!_renkan.$.find(".Rk-Bin-Main:visible").length) {
    64                 	_renkan.$.find(".Rk-Bin-Main:last").slideDown();
    64                     _renkan.$.find(".Rk-Bin-Main:last").slideDown();
    65                 }
    65                 }
    66                 _renkan.resizeBins();
    66                 _renkan.resizeBins();
    67                 return false;
    67                 return false;
    68             });
    68             });
    69         Rkns.$('<a>')
    69         Rkns.$('<a>')
    70             .attr({
    70             .attr({
    71             	href: "#",
    71                 href: "#",
    72             	title: _renkan.translate("Refresh bin")
    72                 title: _renkan.translate("Refresh bin")
    73         	})
    73             })
    74             .addClass("Rk-Bin-Refresh")
    74             .addClass("Rk-Bin-Refresh")
    75             .appendTo(this.$)
    75             .appendTo(this.$)
    76             .click(function() {
    76             .click(function() {
    77                 _this.refresh();
    77                 _this.refresh();
    78                 return false;
    78                 return false;
    94             window.setInterval(function() {
    94             window.setInterval(function() {
    95                 _this.refresh();
    95                 _this.refresh();
    96             },_opts.auto_refresh)
    96             },_opts.auto_refresh)
    97         }
    97         }
    98     }
    98     }
    99 }
    99 };
   100 
   100 
   101 Rkns._BaseBin.prototype.destroy = function() {
   101 Rkns._BaseBin.prototype.destroy = function() {
   102     this.$.detach();
   102     this.$.detach();
   103     this.renkan.resizeBins();
   103     this.renkan.resizeBins();
   104 }
   104 };
   105 
   105 
   106 /* Point of entry */
   106 /* Point of entry */
   107 
   107 
   108 Rkns.Renkan = function(_opts) {
   108 Rkns.Renkan = function(_opts) {
   109     var _this = this;
   109     var _this = this;
   110     
   110     
   111     this.options = _.defaults(_opts, Rkns.defaults);
   111     this.options = _.defaults(_opts, Rkns.defaults);
   112         
   112         
   113 	Rkns._(this.options.property_files).each(function(f) {
   113     Rkns._(this.options.property_files).each(function(f) {
   114 		Rkns.$.getJSON(f, function(data) {
   114         Rkns.$.getJSON(f, function(data) {
   115 			_this.options.properties = _this.options.properties.concat(data);
   115             _this.options.properties = _this.options.properties.concat(data);
   116 		});
   116         });
   117 	});
   117     });
   118     
   118     
   119     this.read_only = this.options.read_only || !this.options.editor_mode;
   119     this.read_only = this.options.read_only || !this.options.editor_mode;
   120 
   120 
   121     this.project = new Rkns.Models.Project();
   121     this.project = new Rkns.Models.Project();
   122     
   122     
   123     this.translate = function(_text) {
       
   124     	return (Rkns.i18n[_this.options.language] || Rkns.i18n[_this.options.language.substr(0,2)] || {})[_text] || _text;
       
   125     }
       
   126     if (typeof this.options.user_id !== "undefined") {
   123     if (typeof this.options.user_id !== "undefined") {
   127         this.current_user = this.options.user_id;
   124         this.current_user = this.options.user_id;
   128     }
   125     }
   129     this.$ = Rkns.$("#" + this.options.container);
   126     this.$ = Rkns.$("#" + this.options.container);
   130     this.$
   127     this.$
   142         var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),
   139         var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),
   143             _select = this.$.find(".Rk-Search-List"),
   140             _select = this.$.find(".Rk-Search-List"),
   144             _input = this.$.find(".Rk-Web-Search-Input")
   141             _input = this.$.find(".Rk-Web-Search-Input")
   145             _form = this.$.find(".Rk-Web-Search-Form");
   142             _form = this.$.find(".Rk-Web-Search-Form");
   146         Rkns._(this.options.search).each(function(_search, _key) {
   143         Rkns._(this.options.search).each(function(_search, _key) {
   147         	if (Rkns[_search.type] && Rkns[_search.type].Search) {
   144             if (Rkns[_search.type] && Rkns[_search.type].Search) {
   148         		_this.search_engines.push(new Rkns[_search.type].Search(_this, _search));
   145                 _this.search_engines.push(new Rkns[_search.type].Search(_this, _search));
   149         	}
   146             }
   150         });
   147         });
   151         _select.html(
   148         _select.html(
   152             Rkns._(this.search_engines).map(function(_search, _key) {
   149             Rkns._(this.search_engines).map(function(_search, _key) {
   153                 return _tmpl({
   150                 return _tmpl({
   154                     key: _key,
   151                     key: _key,
   176             function() { _select.hide(); }
   173             function() { _select.hide(); }
   177         );
   174         );
   178         this.setSearchEngine(0);
   175         this.setSearchEngine(0);
   179     }
   176     }
   180     Rkns._(this.options.bins).each(function(_bin) {
   177     Rkns._(this.options.bins).each(function(_bin) {
   181     	if (Rkns[_bin.type] && Rkns[_bin.type].Bin) {
   178         if (Rkns[_bin.type] && Rkns[_bin.type].Bin) {
   182     		_this.tabs.push(new Rkns[_bin.type].Bin(_this, _bin));
   179             _this.tabs.push(new Rkns[_bin.type].Bin(_this, _bin));
   183     	}
   180         }
   184     });
   181     });
       
   182     
       
   183     var elementDropped = false;
   185     
   184     
   186     this.$.find(".Rk-Bins")
   185     this.$.find(".Rk-Bins")
   187         .on("click",".Rk-Bin-Title,.Rk-Bin-Title-Icon", function() {
   186         .on("click",".Rk-Bin-Title,.Rk-Bin-Title-Icon", function() {
   188             var _mainDiv = Rkns.$(this).siblings(".Rk-Bin-Main");
   187             var _mainDiv = Rkns.$(this).siblings(".Rk-Bin-Main");
   189             if (_mainDiv.is(":hidden")) {
   188             if (_mainDiv.is(":hidden")) {
   201                 });
   200                 });
   202             }
   201             }
   203         }).mouseout(function() {
   202         }).mouseout(function() {
   204             _this.renderer.unhighlightAll();
   203             _this.renderer.unhighlightAll();
   205         }).on("mousemove", ".Rk-Bin-Item", function(e) {
   204         }).on("mousemove", ".Rk-Bin-Item", function(e) {
   206 			try {
   205             try {
   207 				this.dragDrop();
   206                 this.dragDrop();
   208 			}
   207             }
   209 			catch(err) {}
   208             catch(err) {}
       
   209         }).on("touchstart", ".Rk-Bin-Item", function(e) {
       
   210             elementDropped = false;
       
   211         }).on("touchmove", ".Rk-Bin-Item", function(e) {
       
   212             e.preventDefault();
       
   213             var touch = e.originalEvent.changedTouches[0],
       
   214                 off = _this.renderer.canvas_$.offset(),
       
   215                 w = _this.renderer.canvas_$.width(),
       
   216                 h = _this.renderer.canvas_$.height();
       
   217             if (touch.pageX >= off.left && touch.pageX < (off.left + w) && touch.pageY >= off.top && touch.pageY < (off.top + h)) {
       
   218                 if (elementDropped) {
       
   219                     _this.renderer.onMouseMove(touch, true);
       
   220                 } else {
       
   221                     elementDropped = true;
       
   222                     var div = document.createElement('div');
       
   223                     div.appendChild(this.cloneNode(true));
       
   224                     _this.renderer.dropData({"text/html": div.innerHTML}, touch);
       
   225                     _this.renderer.onMouseDown(touch, true);
       
   226                 }
       
   227             }
       
   228         }).on("touchend", ".Rk-Bin-Item", function(e) {
       
   229             if (elementDropped) {
       
   230                 _this.renderer.onMouseUp(e.originalEvent.changedTouches[0], true);
       
   231             }
       
   232             elementDropped = false;
   210         }).on("dragstart", ".Rk-Bin-Item", function(e) {
   233         }).on("dragstart", ".Rk-Bin-Item", function(e) {
   211         	var div = document.createElement('div');
   234             var div = document.createElement('div');
   212         	div.appendChild(this.cloneNode(true));
   235             div.appendChild(this.cloneNode(true));
   213 			try {
   236             try {
   214 				e.originalEvent.dataTransfer.setData("text/html",div.innerHTML);
   237                 e.originalEvent.dataTransfer.setData("text/html",div.innerHTML);
   215 			}
   238             }
   216 			catch(err) {
   239             catch(err) {
   217 				e.originalEvent.dataTransfer.setData("text",div.innerHTML);
   240                 e.originalEvent.dataTransfer.setData("text",div.innerHTML);
   218 			}
   241             }
   219         });
   242         });
   220     Rkns.$(window).resize(function() {
   243     Rkns.$(window).resize(function() {
   221         _this.resizeBins();
   244         _this.resizeBins();
   222     });
   245     });
   223     
   246     
   228        });
   251        });
   229     });
   252     });
   230     this.$.find(".Rk-Bins-Search-Form").submit(function() {
   253     this.$.find(".Rk-Bins-Search-Form").submit(function() {
   231         return false
   254         return false
   232     });
   255     });
   233 }
   256 };
   234 
   257 
   235 Rkns.Renkan.prototype.template = Rkns._.template(
   258 Rkns.Renkan.prototype.template = Rkns._.template(
   236     '<% if (options.show_bins) { %><div class="Rk-Bins"><div class="Rk-Bins-Head"><h2 class="Rk-Bins-Title"><%- translate("Select contents:")%></h2>'
   259     '<% if (options.show_bins) { %><div class="Rk-Bins"><div class="Rk-Bins-Head"><h2 class="Rk-Bins-Title"><%- translate("Select contents:")%></h2>'
   237     + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search the Web") %>" />'
   260     + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search the Web") %>" />'
   238     + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
   261     + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
   240     + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search in Bins") %>" />'
   263     + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search in Bins") %>" />'
   241     + '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" title="<%- translate("Search in Bins") %>" /></form></div>'
   264     + '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" title="<%- translate("Search in Bins") %>" /></form></div>'
   242     + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (options.show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
   265     + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (options.show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
   243 );
   266 );
   244 
   267 
       
   268 Rkns.Renkan.prototype.translate = function(_text) {
       
   269     if (Rkns.i18n[this.options.language] && Rkns.i18n[this.options.language][_text]) {
       
   270         return Rkns.i18n[this.options.language][_text];
       
   271     }
       
   272     if (this.options.language.length > 2 && Rkns.i18n[this.options.language.substr(0,2)] && Rkns.i18n[this.options.language.substr(0,2)][_text]) {
       
   273         return Rkns.i18n[this.options.language.substr(0,2)][_text];
       
   274     }
       
   275     return _text;
       
   276 };
       
   277 
   245 Rkns.Renkan.prototype.onStatusChange = function() {
   278 Rkns.Renkan.prototype.onStatusChange = function() {
   246 	this.renderer.onStatusChange();
   279     this.renderer.onStatusChange();
   247 }
   280 };
   248 
       
   249 
   281 
   250 Rkns.Renkan.prototype.setSearchEngine = function(_key) {
   282 Rkns.Renkan.prototype.setSearchEngine = function(_key) {
   251     this.search_engine = this.search_engines[_key];
   283     this.search_engine = this.search_engines[_key];
   252     this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass());
   284     this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass());
   253 }
   285 };
   254 
   286 
   255 Rkns.Renkan.prototype.resizeBins = function() {
   287 Rkns.Renkan.prototype.resizeBins = function() {
   256     var _d = + this.$.find(".Rk-Bins-Head").outerHeight();
   288     var _d = + this.$.find(".Rk-Bins-Head").outerHeight();
   257     this.$.find(".Rk-Bin-Title:visible").each(function() {
   289     this.$.find(".Rk-Bin-Title:visible").each(function() {
   258         _d += Rkns.$(this).outerHeight();
   290         _d += Rkns.$(this).outerHeight();
   259     });
   291     });
   260     this.$.find(".Rk-Bin-Main").css({
   292     this.$.find(".Rk-Bin-Main").css({
   261         height: this.$.find(".Rk-Bins").height() - _d
   293         height: this.$.find(".Rk-Bins").height() - _d
   262     });
   294     });
   263 }
   295 };
   264 
   296 
   265 /* Utility functions */
   297 /* Utility functions */
   266 
   298 
   267 Rkns.Utils = {
   299 Rkns.Utils = {
   268     _ID_AUTO_INCREMENT : 0,
   300     _ID_AUTO_INCREMENT : 0,
   269     _ID_BASE : (function(_d) {
   301     _ID_BASE : (function(_d) {
       
   302         
   270         function pad(n){return n<10 ? '0'+n : n}
   303         function pad(n){return n<10 ? '0'+n : n}
   271         function fillrand(n) {
   304         function fillrand(n) {
   272             var _res = ''
   305             var _res = ''
   273             for (var i=0; i<n; i++) {
   306             for (var i=0; i<n; i++) {
   274                 _res += Math.floor(16*Math.random()).toString(16);
   307                 _res += Math.floor(16*Math.random()).toString(16);
   277         }
   310         }
   278         return _d.getUTCFullYear() + '-'  
   311         return _d.getUTCFullYear() + '-'  
   279             + pad(_d.getUTCMonth()+1) + '-'  
   312             + pad(_d.getUTCMonth()+1) + '-'  
   280             + pad(_d.getUTCDate()) + '-'
   313             + pad(_d.getUTCDate()) + '-'
   281             + fillrand(16);
   314             + fillrand(16);
       
   315         
   282     })(new Date()),
   316     })(new Date()),
   283     getUID : function(_base) {
   317     getUID : function(_base) {
       
   318         
   284         var _n = (++this._ID_AUTO_INCREMENT).toString(16),
   319         var _n = (++this._ID_AUTO_INCREMENT).toString(16),
   285             _base = (typeof _base === "undefined" ? "" : _base + "-" );
   320             _base = (typeof _base === "undefined" ? "" : _base + "-" );
   286         while (_n.length < 4) {
   321         while (_n.length < 4) {
   287             _n = '0' + _n
   322             _n = '0' + _n
   288         }
   323         }
   289         return _base + this._ID_BASE + '-' + _n;
   324         return _base + this._ID_BASE + '-' + _n;
       
   325         
   290     },
   326     },
   291     getFullURL : function(url) {
   327     getFullURL : function(url) {
   292     	
   328         
   293     	if(typeof(url) == 'undefined' || url == null ) {
   329         if(typeof(url) == 'undefined' || url == null ) {
   294     		return "";
   330             return "";
   295     	}
   331         }
   296     	if(url.indexOf("http://")==0) {
   332         if(/https?:\/\//.test(url)) {
   297     		return url;
   333             return url;
   298     	}
   334         }
   299     	var img = new Image();
   335         var img = new Image();
   300     	img.src = url;
   336         img.src = url;
   301     	var res = img.src;
   337         var res = img.src;
   302     	img.src = null;
   338         img.src = null;
   303     	return res;
   339         return res;
       
   340         
   304     },
   341     },
   305     inherit : function(_baseClass, _callbefore) {
   342     inherit : function(_baseClass, _callbefore) {
   306         var _class = function() {
   343         
       
   344         var _class = function(_arg) {
   307             if (typeof _callbefore === "function") {
   345             if (typeof _callbefore === "function") {
   308                 _callbefore.apply(this, Array.prototype.slice.call(arguments, 0));
   346                 _callbefore.apply(this, Array.prototype.slice.call(arguments, 0));
   309             }
   347             }
   310             _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));
   348             _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));
   311             if (typeof this._init == "function") {
   349             if (typeof this._init == "function" && !this._initialized) {
   312                 this._init.apply(this, Array.prototype.slice.call(arguments, 0));
   350                 this._init.apply(this, Array.prototype.slice.call(arguments, 0));
   313             }
   351                 this._initialized = true;
   314         }
   352             }
   315         _class.prototype = new _baseClass();
   353         }
       
   354         Rkns._(_class.prototype).extend(_baseClass.prototype);
   316         return _class;
   355         return _class;
   317     }
   356         
   318 }
   357     }
       
   358 };