Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
6.7 KiB
269 lines
6.7 KiB
/* Slider Slide |
|
================================================== */ |
|
if (typeof VMM.Slider != 'undefined') { |
|
VMM.Slider.Slide = function(d, _parent) { |
|
|
|
var $media, $text, $slide, $wrap, element, c, |
|
data = d, |
|
slide = {}, |
|
element = "", |
|
media = "", |
|
loaded = false, |
|
preloaded = false, |
|
is_skinny = false, |
|
_enqueue = true, |
|
_removeque = false, |
|
_id = "slide_", |
|
timer = {pushque:"", render:"", relayout:"", remove:"", skinny:false}, |
|
times = {pushque:500, render:100, relayout:100, remove:30000}; |
|
|
|
_id = _id + data.uniqueid; |
|
this.enqueue = _enqueue; |
|
this.id = _id; |
|
|
|
element = VMM.appendAndGetElement(_parent, "<div>", "slider-item"); |
|
c = {slide:"", text: "", media: "", media_element: "", layout: "content-container layout", has: { headline: false, text: false, media: false }}; |
|
|
|
/* PUBLIC |
|
================================================== */ |
|
this.show = function(skinny) { |
|
_enqueue = false; |
|
timer.skinny = skinny; |
|
_removeque = false; |
|
clearTimeout(timer.remove); |
|
|
|
if (!loaded) { |
|
if (preloaded) { |
|
clearTimeout(timer.relayout); |
|
timer.relayout = setTimeout(reloadLayout, times.relayout); |
|
} else { |
|
render(skinny); |
|
} |
|
} |
|
}; |
|
|
|
this.hide = function() { |
|
if (loaded && !_removeque) { |
|
_removeque = true; |
|
clearTimeout(timer.remove); |
|
timer.remove = setTimeout(removeSlide, times.remove); |
|
} |
|
}; |
|
|
|
this.clearTimers = function() { |
|
//clearTimeout(timer.remove); |
|
clearTimeout(timer.relayout); |
|
clearTimeout(timer.pushque); |
|
clearTimeout(timer.render); |
|
}; |
|
|
|
this.layout = function(skinny) { |
|
if (loaded && preloaded) { |
|
reLayout(skinny); |
|
} |
|
}; |
|
|
|
this.elem = function() { |
|
return element; |
|
}; |
|
|
|
this.position = function() { |
|
return VMM.Lib.position(element); |
|
}; |
|
|
|
this.leftpos = function(p) { |
|
if(typeof p != 'undefined') { |
|
VMM.Lib.css(element, "left", p); |
|
} else { |
|
return VMM.Lib.position(element).left |
|
} |
|
}; |
|
|
|
this.animate = function(d, e, p) { |
|
VMM.Lib.animate(element, d, e, p); |
|
}; |
|
|
|
this.css = function(p, v) { |
|
VMM.Lib.css(element, p, v ); |
|
} |
|
|
|
this.opacity = function(p) { |
|
VMM.Lib.css(element, "opacity", p); |
|
} |
|
|
|
this.width = function() { |
|
return VMM.Lib.width(element); |
|
}; |
|
|
|
this.height = function() { |
|
return VMM.Lib.height(element); |
|
}; |
|
|
|
this.content_height = function () { |
|
var ch = VMM.Lib.find( element, ".content")[0]; |
|
|
|
if (ch != 'undefined' && ch != null) { |
|
return VMM.Lib.height(ch); |
|
} else { |
|
return 0; |
|
} |
|
} |
|
|
|
/* PRIVATE |
|
================================================== */ |
|
var render = function(skinny) { |
|
trace("RENDER " + _id); |
|
|
|
loaded = true; |
|
preloaded = true; |
|
timer.skinny = skinny; |
|
|
|
buildSlide(); |
|
|
|
clearTimeout(timer.pushque); |
|
clearTimeout(timer.render); |
|
timer.pushque = setTimeout(VMM.ExternalAPI.pushQues, times.pushque); |
|
|
|
}; |
|
|
|
var removeSlide = function() { |
|
//VMM.attachElement(element, ""); |
|
trace("REMOVE SLIDE TIMER FINISHED"); |
|
loaded = false; |
|
VMM.Lib.detach($text); |
|
VMM.Lib.detach($media); |
|
|
|
}; |
|
|
|
var reloadLayout = function() { |
|
loaded = true; |
|
reLayout(timer.skinny, true); |
|
}; |
|
|
|
var reLayout = function(skinny, reload) { |
|
if (c.has.text) { |
|
if (skinny) { |
|
if (!is_skinny || reload) { |
|
VMM.Lib.removeClass($slide, "pad-left"); |
|
VMM.Lib.detach($text); |
|
VMM.Lib.detach($media); |
|
VMM.Lib.append($slide, $text); |
|
VMM.Lib.append($slide, $media); |
|
is_skinny = true; |
|
} |
|
} else { |
|
if (is_skinny || reload) { |
|
VMM.Lib.addClass($slide, "pad-left"); |
|
VMM.Lib.detach($text); |
|
VMM.Lib.detach($media); |
|
VMM.Lib.append($slide, $media); |
|
VMM.Lib.append($slide, $text); |
|
is_skinny = false; |
|
|
|
} |
|
} |
|
} else if (reload) { |
|
if (c.has.headline) { |
|
VMM.Lib.detach($text); |
|
VMM.Lib.append($slide, $text); |
|
} |
|
VMM.Lib.detach($media); |
|
VMM.Lib.append($slide, $media); |
|
} |
|
} |
|
|
|
var buildSlide = function() { |
|
trace("BUILDSLIDE"); |
|
$wrap = VMM.appendAndGetElement(element, "<div>", "content"); |
|
$slide = VMM.appendAndGetElement($wrap, "<div>"); |
|
|
|
/* DATE |
|
================================================== */ |
|
if (data.startdate != null && data.startdate != "") { |
|
if (type.of(data.startdate) == "date") { |
|
if (data.type != "start") { |
|
var st = VMM.Date.prettyDate(data.startdate); |
|
var en = VMM.Date.prettyDate(data.enddate); |
|
var tag = ""; |
|
/* TAG / CATEGORY |
|
================================================== */ |
|
if (data.tag != null && data.tag != "") { |
|
tag = VMM.createElement("span", data.tag, "slide-tag"); |
|
} |
|
|
|
if (st != en) { |
|
c.text += VMM.createElement("h2", st + " — " + en + tag, "date"); |
|
} else { |
|
c.text += VMM.createElement("h2", st + tag, "date"); |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* HEADLINE |
|
================================================== */ |
|
if (data.headline != null && data.headline != "") { |
|
c.has.headline = true; |
|
if (data.type == "start") { |
|
c.text += VMM.createElement("h2", VMM.Util.linkify_with_twitter(data.headline, "_blank"), "start"); |
|
} else { |
|
c.text += VMM.createElement("h3", VMM.Util.linkify_with_twitter(data.headline, "_blank")); |
|
} |
|
} |
|
|
|
/* TEXT |
|
================================================== */ |
|
if (data.text != null && data.text != "") { |
|
c.has.text = true; |
|
c.text += VMM.createElement("p", VMM.Util.linkify_with_twitter(data.text, "_blank")); |
|
} |
|
|
|
if (c.has.text || c.has.headline) { |
|
c.text = VMM.createElement("div", c.text, "container"); |
|
//$text = VMM.appendAndGetElement($slide, "<div>", "text", c.text); |
|
|
|
$text = VMM.appendAndGetElement($slide, "<div>", "text", VMM.TextElement.create(c.text)); |
|
|
|
} |
|
|
|
/* SLUG |
|
================================================== */ |
|
if (data.needs_slug) { |
|
|
|
} |
|
|
|
/* MEDIA |
|
================================================== */ |
|
if (data.asset != null && data.asset != "") { |
|
if (data.asset.media != null && data.asset.media != "") { |
|
c.has.media = true; |
|
$media = VMM.appendAndGetElement($slide, "<div>", "media", VMM.MediaElement.create(data.asset, data.uniqueid)); |
|
} |
|
} |
|
|
|
/* COMBINE |
|
================================================== */ |
|
if (c.has.text) { c.layout += "-text" }; |
|
if (c.has.media){ c.layout += "-media" }; |
|
|
|
if (c.has.text) { |
|
if (timer.skinny) { |
|
VMM.Lib.addClass($slide, c.layout); |
|
is_skinny = true; |
|
} else { |
|
VMM.Lib.addClass($slide, c.layout); |
|
VMM.Lib.addClass($slide, "pad-left"); |
|
VMM.Lib.detach($text); |
|
VMM.Lib.append($slide, $text); |
|
} |
|
|
|
} else { |
|
VMM.Lib.addClass($slide, c.layout); |
|
} |
|
|
|
|
|
}; |
|
|
|
} |
|
|
|
};
|
|
|