Added Ldt Search
authorveltr
Thu, 21 Feb 2013 17:36:29 +0100
changeset 64 3a5a9421687b
parent 62 f9019462465a
child 65 3389e6c46936
Added Ldt Search
client/css/renkan.css
client/img/search-logos.png
client/js/i18n.js
client/js/ldtjson-bin.js
client/js/main.js
client/js/paper-renderer.js
client/render-test.html
--- a/client/css/renkan.css	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/css/renkan.css	Thu Feb 21 17:36:29 2013 +0100
@@ -377,7 +377,6 @@
 
 /* Individual Bins */
 
-
 .Rk-Bin-Title {
     background: #333333;
     background: -moz-linear-gradient(top, #505050 20%, #1e1e1e 80%);
@@ -521,6 +520,14 @@
     margin-left: 54px;
 }
 
+.Rk-Ldt-Icon, .Rk-Ldt-Title-Icon {
+    background: url(../img/search-logos.png); background-position: 0 -100px; background-repeat: no-repeat;
+}
+
+.Rk-Ldt-Title-Icon {
+    height: 20px; margin-top: 4px;
+}
+
 .Rk-Ldt-Tag-Icon {
     float: left; margin: 0 2px 0 0;
 }
@@ -532,3 +539,7 @@
 .Rk-Clear {
     clear: both;
 }
+
+h4.Rk-Bin-Loading {
+    margin: 10px; text-align: center; font-size: 20px; color: #999999;
+}
\ No newline at end of file
Binary file client/img/search-logos.png has changed
--- a/client/js/i18n.js	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/js/i18n.js	Thu Feb 21 17:36:29 2013 +0100
@@ -26,7 +26,9 @@
         wiki_en: "English Wikipedia",
         wiki_ja: "Japanese Wikipedia",
         wiki_: "Wikipedia (Other Language)",
-        untitled_project: "Untitled project"
+        untitled_project: "Untitled project",
+        search_ldt: "Lignes de Temps",
+        loading_bin: "Loading, please wait"
     },
     fr: {
         edit_node: "Édition d’un nœud",
@@ -55,6 +57,8 @@
         wiki_en: "Wikipedia en Anglais",
         wiki_ja: "Wikipedia en Japonais",
         wiki_: "Wikipedia (Autre langue)",
-        untitled_project: "Projet sans titre"
+        untitled_project: "Projet sans titre",
+        search_ldt: "Lignes de Temps",
+        loading_bin: "Chargement en cours, merci de patienter"
     }
 }
--- a/client/js/ldtjson-bin.js	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/js/ldtjson-bin.js	Thu Feb 21 17:36:29 2013 +0100
@@ -17,6 +17,7 @@
     this.proj_id = _opts.project_id;
     this.ldt_platform = _opts.ldt_platform || "http://ldt.iri.centrepompidou.fr/";
     this.title_$.html(_opts.title);
+    this.title_icon_$.addClass('Rk-Ldt-Title-Icon');
     this.refresh();
 }
 
@@ -122,4 +123,137 @@
             _this.render();
         }
     });
+}
+
+Rkns.Ldt.Search = function(_renkan, _opts) {
+    this.renkan = _renkan;
+    this.lang = _opts.lang || "en";
+}
+
+Rkns.Ldt.Search.prototype.getBgClass = function() {
+    return "Rk-Ldt-Icon";
+}
+
+Rkns.Ldt.Search.prototype.getSearchTitle = function() {
+    return this.renkan.l10n.search_ldt;
+}
+
+Rkns.Ldt.Search.prototype.search = function(_q) {
+    this.renkan.tabs.push(
+        new Rkns.Ldt.ResultsBin(this.renkan, {
+            search: _q
+        })
+    );
+}
+
+Rkns.Ldt.ResultsBin = Rkns.Utils.inherit(Rkns._BaseBin);
+
+Rkns.Ldt.ResultsBin.prototype.segmentTemplate = Rkns._.template(
+    '<li class="Rk-Bin-Item" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/<%=projectid%>/<%=cuttingid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+    + '<img class="Rk-Ldt-Annotation-Icon" src="<%=image%>"/><h4><%=htitle%></h4><p><%=hdescription%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p><div class="Rk-Clear"></div></li>'
+);
+
+Rkns.Ldt.ResultsBin.prototype._init = function(_renkan, _opts) {
+    this.renkan = _renkan;
+    this.ldt_platform = _opts.ldt_platform || "http://ldt.iri.centrepompidou.fr/";
+    this.max_results = _opts.max_results || 50;
+    this.search = _opts.search;
+    this.title_$.html('Lignes de Temps: "' + _opts.search + '"');
+    this.title_icon_$.addClass('Rk-Ldt-Title-Icon');
+    this.refresh();
+}
+
+Rkns.Ldt.ResultsBin.prototype.render = function(searchstr) {
+    if (searchstr) {
+        var rxbase = searchstr.replace(/(\W)/g,'\\$1'),
+            _rgxp = new RegExp('('+rxbase+')','gi'),
+            rxtest = new RegExp(rxbase,'i')
+    }
+    function highlight(_text) {
+        return searchstr ? _text.replace(_rgxp, "<span class='searchmatch'>$1</span>") : _text;
+    }
+    function convertTC(_ms) {
+        function pad(_n) {
+            var _res = _n.toString();
+            while (_res.length < 2) {
+                _res = '0' + _res;
+            }
+            return _res;
+        }
+        var _totalSeconds = Math.abs(Math.floor(_ms/1000)),
+            _hours = Math.floor(_totalSeconds / 3600),
+            _minutes = (Math.floor(_totalSeconds / 60) % 60),
+            _seconds = _totalSeconds % 60,
+            _res = '';
+        if (_hours) {
+            _res += pad(_hours) + ':'
+        }
+        _res += pad(_minutes) + ':' + pad(_seconds);
+        return _res;
+    }
+    
+    var _html = '',
+        _this = this,
+        count = 0;
+    Rkns._(_this.data.objects).each(function(_segment) {
+        var _description = _segment.abstract,
+            _title = _segment.title;
+        if (searchstr && !rxtest.test(_title) && !rxtest.test(_description)) {
+            return;
+        }
+        count++;
+        var _duration = _segment.duration,
+            _begin = _segment.start_ts,
+            _end = + _segment.duration + _begin
+            _img = (
+                _duration
+                ? _this.renkan.static_url + "img/ldt-segment.png"
+                : _this.renkan.static_url + "img/ldt-point.png"
+            );
+        _html += _this.segmentTemplate({
+            ldt_platform: _this.ldt_platform,
+            title: _title,
+            htitle: highlight(_title),
+            description: _description,
+            hdescription: highlight(_description),
+            start: convertTC(_begin),
+            end: convertTC(_end),
+            duration: convertTC(_duration),
+            mediaid: _segment.iri_id,
+            projectid: _segment.project_id,
+            cuttingid: _segment.cutting_id,
+            annotationid: _segment.element_id,
+            image: _img
+        });
+    });
+    
+    this.main_$.html(_html);
+    if (searchstr && count) {
+        this.count_$.text(count).show();
+    } else {
+        this.count_$.hide();
+    }
+    if (searchstr && !count) {
+        this.$.hide();
+    } else {
+        this.$.show();
+    }
+    this.renkan.resizeBins();
+}
+
+Rkns.Ldt.ResultsBin.prototype.refresh = function() {
+    var _this = this;
+    Rkns.$.ajax({
+        url: this.ldt_platform + 'ldtplatform/api/ldt/1.0/segments/search/',
+        data: {
+            format: "jsonp",
+            q: this.search,
+            limit: this.max_results
+        },
+        dataType: "jsonp",
+        success: function(_data) {
+            _this.data = _data;
+            _this.render();
+        }
+    });
 }
\ No newline at end of file
--- a/client/js/main.js	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/js/main.js	Thu Feb 21 17:36:29 2013 +0100
@@ -66,7 +66,8 @@
             .appendTo(this.$);
         this.main_$ = Rkns.$('<div>')
             .addClass("Rk-Bin-Main")
-            .appendTo(this.$);
+            .appendTo(this.$)
+            .html('<h4 class="Rk-Bin-Loading">' + _renkan.l10n.loading_bin + '</h4>');
         this.title_$.html(_opts.title || '(new bin)');
         this.renkan.resizeBins();
         
--- a/client/js/paper-renderer.js	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/js/paper-renderer.js	Thu Feb 21 17:36:29 2013 +0100
@@ -557,7 +557,7 @@
     this.renderer.edge_layer.activate();
     this.type = "temp-edge";
     
-    var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color") || "#000000";
+    var _color = (this.project.get("users").get(this.renderer.renkan.current_user) || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.line = new paper.Path();
     this.line.strokeColor = _color;
     this.line.add([0,0],[0,0]);
--- a/client/render-test.html	Thu Feb 14 17:39:52 2013 +0100
+++ b/client/render-test.html	Thu Feb 21 17:36:29 2013 +0100
@@ -16,9 +16,9 @@
         <script src="js/i18n.js"></script>
         <script src="js/models.js"></script>
         <script src="js/full-json.js"></script>
+        <script src="js/ldtjson-bin.js"></script>
         <script src="js/twitter-bin.js"></script>
         <script src="js/wikipedia-bin.js"></script>
-        <script src="js/ldtjson-bin.js"></script>
         <script src="js/paper-renderer.js"></script>
         <script type="text/javascript">
             var _renkan;
@@ -29,6 +29,9 @@
                     ],
                     search: [
                         {
+                            type: Rkns.Ldt.Search
+                        },
+                        {
                             type: Rkns.Wikipedia.Search,
                             lang: "fr"
                         }, 
@@ -46,9 +49,6 @@
                     ],
                     user_id: "u-iri"
                 });
-                Rkns.jsonIO(_renkan, {
-                    url: "data/simple-persist.php"
-                });
             });
         </script>
         <link rel="stylesheet" href="css/renkan.css" />