Commit e82d6959 authored by Ryan Herbert's avatar Ryan Herbert

Add baseline for tips and tricks

See #2582
parent a7e154fc
......@@ -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;
}
......
......@@ -367,6 +367,8 @@
<form id="form"></form>
<div id="tip-container"></div>
</body>
</html>
......@@ -63,6 +63,7 @@ function loadAfterConf() {
"../tools",
"../url",
"../autocomplete",
"../tips",
// Speed test
"../speed_test",
"../../test/QUnit/testFiles/data_test",
......
......@@ -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)
}
......
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);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment