1 /* 

     2  *  Copyright 2012 Institut de recherche et d'innovation 

     3  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron

     4  *   

     5  *  contact@iri.centrepompidou.fr

     6  *  http://www.iri.centrepompidou.fr 

     7  *   

     8  *  This software is a computer program whose purpose is to show and add annotations on a video .

     9  *  This software is governed by the CeCILL-C license under French law and

    10  *  abiding by the rules of distribution of free software. You can  use, 

    11  *  modify and/ or redistribute the software under the terms of the CeCILL-C

    12  *  license as circulated by CEA, CNRS and INRIA at the following URL

    13  *  "http://www.cecill.info". 

    14  *  

    15  *  The fact that you are presently reading this means that you have had

    16  *  knowledge of the CeCILL-C license and that you accept its terms.

    17 */

    18 

    19 /* Declaring the Renkan Namespace Rkns and Default values */

    20 

    21 if (typeof Rkns !== "object") {

    22     Rkns = {}

    23 }

    24 

    25 Rkns.$ = jQuery;

    26 

    27 Rkns._ = _;

    28 

    29 Rkns.pickerColors = ["#8f1919", "#a80000", "#d82626", "#ff0000", "#e87c7c", "#ff6565", "#f7d3d3", "#fecccc", "#8f5419", "#a85400", "#d87f26", "#ff7f00", "#e8b27c", "#ffb265", "#f7e5d3", "#fee5cc", "#8f8f19", "#a8a800", "#d8d826", "#feff00", "#e8e87c", "#feff65", "#f7f7d3", "#fefecc", "#198f19", "#00a800", "#26d826", "#00ff00", "#7ce87c", "#65ff65", "#d3f7d3", "#ccfecc", "#198f8f", "#00a8a8", "#26d8d8", "#00feff", "#7ce8e8", "#65feff", "#d3f7f7", "#ccfefe", "#19198f", "#0000a8", "#2626d8", "#0000ff", "#7c7ce8", "#6565ff", "#d3d3f7", "#ccccfe", "#8f198f", "#a800a8", "#d826d8", "#ff00fe", "#e87ce8", "#ff65fe", "#f7d3f7", "#feccfe", "#000000", "#242424", "#484848", "#6d6d6d", "#919191", "#b6b6b6", "#dadada", "#ffffff"];

    30 

    31 Rkns._BaseBin = function(_renkan, _opts) {

    32     if (typeof _renkan !== "undefined") {

    33         this.renkan = _renkan;

    34         this.renkan.$.find(".Rk-Bin-Main").hide();

    35         this.$ = Rkns.$('<li>')

    36             .addClass("Rk-Bin")

    37             .appendTo(_renkan.$.find(".Rk-Bin-List"));

    38         this.title_icon_$ = Rkns.$('<span>')

    39             .addClass("Rk-Bin-Title-Icon")

    40             .appendTo(this.$);

    41             

    42         var _this = this;

    43         

    44         Rkns.$('<a>')

    45             .attr("href","#")

    46             .addClass("Rk-Bin-Close")

    47             .html('×')

    48             .appendTo(this.$)

    49             .click(function() {

    50                 _this.destroy();

    51                 return false;

    52             });

    53         Rkns.$('<a>')

    54             .attr("href","#")

    55             .addClass("Rk-Bin-Refresh")

    56             .appendTo(this.$)

    57             .click(function() {

    58                 _this.refresh();

    59                 return false;

    60             });

    61         this.count_$ = Rkns.$('<div>')

    62             .addClass("Rk-Bin-Count")

    63             .appendTo(this.$);

    64         this.title_$ = Rkns.$('<h2>')

    65             .addClass("Rk-Bin-Title")

    66             .appendTo(this.$);

    67         this.main_$ = Rkns.$('<div>')

    68             .addClass("Rk-Bin-Main")

    69             .appendTo(this.$);

    70         this.title_$.html(_opts.title || '(new bin)');

    71         this.renkan.resizeBins();

    72         

    73         if (_opts.auto_refresh) {

    74             window.setInterval(function() {

    75                 _this.refresh();

    76             },_opts.auto_refresh)

    77         }

    78     }

    79 }

    80 

    81 Rkns._BaseBin.prototype.destroy = function() {

    82     this.$.detach();

    83     this.renkan.resizeBins();

    84 }

    85 

    86 /* Point of entry */

    87 

    88 Rkns.Renkan = function(_opts) {

    89     if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {

    90         _opts.language = "en";

    91     }

    92     if (typeof _opts.container !== "string") {

    93         _opts.container = "renkan";

    94     }

    95     if (typeof _opts.search !== "object" || !_opts.search) {

    96         _opts.search = [];

    97     }

    98     if (typeof _opts.static_url !== "string") {

    99         _opts.static_url = "";

   100     }

   101     this.project = new Rkns.Models.Project();

   102     this.language = _opts.language;

   103     this.static_url = _opts.static_url;

   104     this.l10n = Rkns.i18n[_opts.language];

   105     if (typeof _opts.user_id !== "undefined") {

   106         this.current_user = _opts.user_id;

   107     }

   108     this.$ = Rkns.$("#" + _opts.container);

   109     this.$

   110         .addClass("Rk-Main")

   111         .html(this.template());

   112     this.renderer = new Rkns.Renderer.Scene(this);

   113     this.tabs = [];

   114     this.search_engines = [];

   115     this.selected_bin_item = undefined;

   116 

   117     this.current_user_list = new Rkns.Models.UsersList();

   118     

   119     var _this = this;

   120     this.$.mouseup(function() {

   121         _this.selected_bin_item = undefined;

   122         _this.$.find(".Rk-Bin-Item.dragging").removeClass("dragging");

   123     });

   124     if (!_opts.search.length) {

   125         this.$.find(".Rk-Web-Search-Form").detach();

   126     } else {

   127         var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),

   128             _select = this.$.find(".Rk-Search-List"),

   129             _input = this.$.find(".Rk-Web-Search-Input")

   130             _form = this.$.find(".Rk-Web-Search-Form");

   131         Rkns._(_opts.search).each(function(_search, _key) {

   132             var _searchObj = new _search.type(_this, _search);

   133             _this.search_engines.push(_searchObj);

   134         });

   135         _select.html(

   136             Rkns._(this.search_engines).map(function(_search, _key) {

   137                 return _tmpl({

   138                     key: _key,

   139                     title: _search.getSearchTitle(),

   140                     className: _search.getBgClass()

   141                 });

   142             }).join("")

   143         );

   144         _select.find("li").click(function() {

   145             var _el = Rkns.$(this);

   146             _this.setSearchEngine(_el.attr("data-key"));

   147             _form.submit();

   148         });

   149         _form.submit(function() {

   150             if (_input.val()) {

   151                 var _search = _this.search_engine;

   152                 _search.search(_input.val());

   153             }

   154             return false;

   155         });

   156         this.$.find(".Rk-Search-Current").mouseenter(

   157             function() { _select.slideDown(); }

   158         );

   159         this.$.find(".Rk-Search-Select").mouseleave(

   160             function() { _select.slideUp(); }

   161         );

   162         this.setSearchEngine(0);

   163     }

   164     Rkns._(_opts.bins).each(function(_bin) {

   165         _this.tabs.push(new _bin.bin(_this, _bin));

   166     });

   167     

   168     this.$.find(".Rk-Bins")

   169         .on("click",".Rk-Bin-Title,.Rk-Bin-Title-Icon", function() {

   170             var _mainDiv = Rkns.$(this).siblings(".Rk-Bin-Main");

   171             if (_mainDiv.is(":hidden")) {

   172                 _this.$.find(".Rk-Bin-Main").slideUp();

   173                 _mainDiv.slideDown();

   174             }

   175         }).on("mousedown", ".Rk-Bin-Item", function() {

   176             var _t = Rkns.$(this);

   177             _t.addClass("dragging");

   178             _this.selected_bin_item = {

   179                 uri : $(_t).attr("data-uri"),

   180                 title : $(_t).attr("data-title"),

   181                 description : $(_t).attr("data-description"),

   182                 image: $(_t).attr("data-image")

   183             }

   184             return false;

   185         }).on("mouseover", ".Rk-Bin-Item", function(_e) {

   186             var _t = Rkns.$(this);

   187             if (_t && $(_t).attr("data-uri")) {

   188                 var _models = _this.project.get("nodes").where({

   189                     uri: $(_t).attr("data-uri")

   190                 });

   191                 Rkns._(_models).each(function(_model) {

   192                     _this.renderer.highlightModel(_model);

   193                 });

   194             }

   195         }).mouseout(function() {

   196             _this.renderer.unhighlightAll();

   197         });

   198     Rkns.$(window).resize(function() {

   199         _this.resizeBins();

   200     });

   201     

   202     this.$.find(".Rk-Bins-Search-Input").on("change keyup paste input", function() {

   203        var val = Rkns.$(this).val();

   204        Rkns._(_this.tabs).each(function(tab) {

   205            tab.render(val);

   206        });

   207     });

   208     this.$.find(".Rk-Bins-Search-Form").submit(function() {

   209         return false

   210     });

   211 }

   212 

   213 Rkns.Renkan.prototype.template = Rkns._.template(

   214     '<div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'

   215     + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="Search the Web" />'

   216     + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'

   217     + '<input type="submit" value="" class="Rk-Web-Search-Submit Rk-Search-Submit" /></form>'

   218     + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="Search in Bins" />'

   219     + '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" /></form>'

   220     + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render Rk-Render-Panel"></div>'

   221 );

   222 

   223 

   224 Rkns.Renkan.prototype.setSearchEngine = function(_key) {

   225     this.search_engine = this.search_engines[_key];

   226     this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass());

   227 }

   228 

   229 Rkns.Renkan.prototype.resizeBins = function() {

   230     var _d = + this.$.find(".Rk-Web-Search-Form").outerHeight() + this.$.find(".Rk-Bins-Search-Form").outerHeight();

   231     this.$.find(".Rk-Bin-Title:visible").each(function() {

   232         _d += Rkns.$(this).outerHeight();

   233     });

   234     this.$.find(".Rk-Bin-Main").css({

   235         height: this.$.find(".Rk-Bins").height() - _d

   236     });

   237 }

   238 

   239 /* Utility functions */

   240 

   241 Rkns.Utils = {

   242     _ID_AUTO_INCREMENT : 0,

   243     _ID_BASE : (function(_d) {

   244         function pad(n){return n<10 ? '0'+n : n}

   245         function fillrand(n) {

   246             var _res = ''

   247             for (var i=0; i<n; i++) {

   248                 _res += Math.floor(16*Math.random()).toString(16);

   249             }

   250             return _res;

   251         }

   252         return _d.getUTCFullYear() + '-'  

   253             + pad(_d.getUTCMonth()+1) + '-'  

   254             + pad(_d.getUTCDate()) + '-'

   255             + fillrand(16);

   256     })(new Date()),

   257     getUID : function(_base) {

   258         var _n = (++this._ID_AUTO_INCREMENT).toString(16),

   259             _base = (typeof _base === "undefined" ? "" : _base + "-" );

   260         while (_n.length < 4) {

   261             _n = '0' + _n

   262         }

   263         return _base + this._ID_BASE + '-' + _n;

   264     },

   265     inherit : function(_baseClass, _callbefore) {

   266         var _class = function() {

   267             if (typeof _callbefore === "function") {

   268                 _callbefore.apply(this, Array.prototype.slice.call(arguments, 0));

   269             }

   270             _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));

   271             if (typeof this._init == "function") {

   272                 this._init.apply(this, Array.prototype.slice.call(arguments, 0));

   273             }

   274         }

   275         _class.prototype = new _baseClass();

   276         return _class;

   277     }

   278 }