Add baseline for tips and tricks

See #2582

browser/css/vidjil.less

@@ -96,6 +96,14 @@ ul{
    color: red;
 }
 
+#tip-container {
+  position: absolute;
+  float: right;
+  z-index: 50;
+  right: 0px;
+  top: 32px;
+}
+
 #upload_summary {
   float: right;
   display:none;
@@ -1811,6 +1819,28 @@ span.warningReads {
     background-color: @message_red;
 }
 
+.tip_1 {
+  width: 400px;
+  border: solid;
+  border-width: 2px;
+  display: block;
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  background: @message_green1;
+  border-color: @border;
+}
+
+.right {
+  float: right;
+  clear: both;
+}
+
+.left {
+  float: left;
+  clear: both;
+}
+
 select>option:hover {
     background-color: @border;
 }

browser/index.html

@@ -367,6 +367,8 @@
 
         <form id="form"></form>
 
+        <div id="tip-container"></div>
+
     </body> 
 
 </html>

browser/js/app.js

@@ -63,6 +63,7 @@ function loadAfterConf() {
                                          "../tools",
                                          "../url",
                                          "../autocomplete",
+                                         "../tips",
                                          // Speed test
                                          "../speed_test",
                                          "../../test/QUnit/testFiles/data_test",

browser/js/main.js

@@ -92,6 +92,12 @@ try {
     initMenu();
 
     new VidjilAutoComplete(db.db_address + 'tag/auto_complete');
+
+    var tips;
+    $.getJSON('tips.json', function(data) {
+        tips = new TipsOfTheDay(data, new TipDecorator());
+        tips.display(document.getElementById('tip-container'));
+    });
 } catch(err) {
     this.db.log_error(err)
 }

browser/js/tips.js

+function TipsOfTheDay(data, decorator) {
+    this.storage_key = "vidjil.tips.seen";
+    this.tips = data;
+    this.seen = this.get_seen_ids();
+    this.cur_unseen = -1;
+    this.unseen = this.get_unseen_ids();
+
+    this.decorator = decorator;
+}
+
+TipsOfTheDay.prototype =  {
+
+    get_seen_ids: function() {
+        var storage = window.localStorage;
+        var seen_string = storage.getItem(this.storage_key);
+        if (seen_string === null || typeof seen_string === "undefined") {
+            seen_string = "[]";
+        }
+        return JSON.parse(seen_string);
+    },
+
+    get_unseen_ids: function() {
+        var self = this;
+        return Object.keys(this.tips).filter(function(elem) {
+            return self.seen.indexOf(elem) < 0;
+        });
+    },
+
+    load_unseen: function(index) {
+        var tip_id = this.unseen[index];
+        if (typeof tip_id === "undefined") {
+            return null;
+        }
+        var tip = this.tips[tip_id];
+        this.set_seen(tip_id);
+        return tip;
+    },
+
+    load_next_unseen: function() {
+        this.cur_unseen = ++this.cur_unseen % this.unseen.length;
+        return this.load_unseen(this.cur_unseen);
+    },
+
+    load_previous_unseen: function() {
+        if (this.cur_unseen > 0) {
+            this.cur_unseen--;
+        } else {
+            this.cur_unseen = this.unseen.length - 1;
+        }
+        return this.load_unseen(this.cur_unseen);
+    },
+
+    set_seen: function(id) {
+        if (this.seen.indexOf(id) < 0) {
+            this.seen.push(id);
+            var storage = window.localStorage;
+            storage.setItem(this.storage_key, JSON.stringify(this.seen));
+        }
+    },
+
+    is_unseen: function(id) {
+        return this.seen.indexOf(id) < 0;
+    },
+
+    display: function(container, prev) {
+        if (typeof prev === "undefined") {
+            prev = false;
+        }
+
+        var self = this;
+
+        var tip = null;
+        if (prev) {
+            tip = this.load_previous_unseen();
+        } else {
+            tip = this.load_next_unseen();
+        }
+
+        if (tip !== null) {
+            var tip_div = this.decorator.decorate(tip);
+
+            var nav_div = document.createElement('div');
+            nav_div.className = "right";
+
+            var prev = document.createElement('i');
+            prev.className = "icon-left-open-1";
+            prev.onclick = function() {
+                self.display(container, true);
+            }
+            nav_div.appendChild(prev);
+
+            var next = document.createElement('i');
+            next.className = "icon-right-open-1";
+            next.onclick = function() {
+                self.display(container, false);
+            }
+            nav_div.appendChild(next);
+
+            tip_div.appendChild(nav_div);
+
+            // clear the container and insert tip
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+            container.appendChild(tip_div);
+        }
+    }
+}
+
+function TipDecorator() {
+
+}
+
+TipDecorator.prototype = {
+
+    decorate: function(elem) {
+        var self = this;
+        var div = document.createElement('div');
+        div.className = "tip_1 right";
+        var close = document.createElement('i');
+        close.className = "icon-cancel right clear";
+        close.onclick = function() {
+            self.clear_parent(div);
+        }
+        div.appendChild(close);
+
+        var title = document.createElement('div');
+        title.style.fontWeight = "bold";
+        title.appendChild(document.createTextNode('Tips and tricks:'));
+        div.appendChild(title);
+
+        var tip_div = document.createElement('div');
+        tip_div.className = "left";
+        tip_div.innerHTML = elem;
+
+        div.appendChild(tip_div);
+
+        return div;
+    },
+
+    clear_parent: function(div) {
+        var par = div.parentNode;
+        while (par.firstChild) {
+            par.removeChild(par.firstChild);
+        }
+    }
+}

browser/tips.json

+{}