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.

578 lines
17 KiB

13 years ago
/* Slider
================================================== */
if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
//VMM.Slider = function(parent, content_width, content_height, is_timeline) {
VMM.Slider = function(parent, parent_config) {
13 years ago
/* PRIVATE VARS
================================================== */
var _private_var = "private";
var events = {}; // CUSTOM EVENT HOLDER
var data = []; // HOLDS SLIDE DATA
var slides_content = "";
var slides = [];
var medias = [];
var current_slide = 0;
var current_width = 960;
var touch = {
move: false,
x: 10,
y:0,
off: 0,
dampen: 48
};
var slide_positions = [];
/* LOCAL CONFIG
================================================== */
13 years ago
var config = {
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
}
};
var _config = {
13 years ago
interval: 10,
something: 0,
width: 720,
height: 400,
ease: "easeInOutExpo",
duration: 1000,
timeline: false,
spacing: 15,
};
/* APPLY SUPPLIED CONFIG
================================================== */
if (type.of(parent_config) == 'object') {
var x;
for (x in parent_config) {
if (Object.prototype.hasOwnProperty.call(parent_config, x)) {
config[x] = parent_config[x];
}
}
} else if (type.of(_config) == 'object') {
var x;
for (x in _config) {
if (Object.prototype.hasOwnProperty.call(_config, x)) {
config[x] = _config[x];
}
}
}
13 years ago
var slider_width = 1000;
config.slider.width = config.width;
config.slider.height = config.height;
13 years ago
/*
13 years ago
if (content_width != null && content_width != "") {
config.width = content_width;
}
if (content_height != null && content_height != "") {
config.height = content_height;
}
if (is_timeline != null && is_timeline != "") {
config.timeline = is_timeline;
}
*/
13 years ago
var content = "";
var _active = false;
/* ELEMENTS
================================================== */
var $slider = "";
var $slider_mask = "";
var $slider_container = "";
var $slides_items = "";
//var $slide = "";
var navigation = {};
// Nav Items
navigation.nextBtn;
navigation.prevBtn;
navigation.nextDate;
navigation.prevDate;
navigation.nextTitle;
navigation.prevTitle;
/* PUBLIC VARS
================================================== */
this.ver = "0.1";
var layout = parent; // expecting slider div
/* PUBLIC FUNCTIONS
================================================== */
this.init = function(d) {
if(typeof d != 'undefined') {
this.setData(d);
} else {
trace("WAITING ON DATA");
}
};
this.width = function(w) {
if (w != null && w != "") {
config.slider.width = w;
13 years ago
reSize();
} else {
return config.slider.width;
13 years ago
}
}
this.height = function(h) {
if (h != null && h != "") {
config.slider.height = h;
13 years ago
reSize();
} else {
return config.slider.height;
13 years ago
}
}
/* GETTERS AND SETTERS
================================================== */
this.setData = function(d) {
if(typeof d != 'undefined') {
data = d;
build();
} else{
trace("NO DATA");
}
};
this.getData = function() {
return data;
};
this.setConfig = function(d) {
if(typeof d != 'undefined') {
config = d;
// TO DO
// FIRE AN EVENT ETC
} else{
trace("NO CONFIG DATA");
}
}
this.getConfig = function() {
return config;
};
this.setSize = function(w, h) {
if (w != null) {config.slider.width = w};
if (h != null) {config.slider.height = h};
13 years ago
if (_active) {
reSize();
}
}
this.active = function() {
return _active;
};
this.getCurrentNumber = function() {
return current_slide;
};
this.setSlide = function(n) {
goToSlide(n);
};
/* ON EVENT
================================================== */
function onConfigSet() {
trace("onConfigSet");
};
function reSize(go_to_slide, from_start) {
var _go_to_slide = true;
var _from_start = false;
if (go_to_slide != null) {_go_to_slide = go_to_slide};
if (from_start != null) {_from_start = from_start};
current_width = config.slider.width;
13 years ago
config.slider.nav.height = VMM.Element.height(navigation.prevBtnContainer);
13 years ago
config.slider.content.width = current_width - (config.slider.content.padding *2);
13 years ago
VMM.Element.width($slides_items, (slides.length * config.slider.content.width));
13 years ago
if (_from_start) {
var _pos = VMM.Element.position(slides[current_slide]);
VMM.Element.css($slider_container, "left", _pos.left);
}
// Position slides
positionSlides();
// Position Nav
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.slider.nav.width));
VMM.Element.height(navigation.prevBtn, config.slider.height);
VMM.Element.height(navigation.nextBtn, config.slider.height);
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
13 years ago
// Animate Changes
VMM.Element.height($slider_mask, config.slider.height);
13 years ago
VMM.Element.width($slider_mask, current_width);
if (_go_to_slide) {
goToSlide(current_slide, "linear", 1);
};
if (current_slide == 0) {
VMM.Element.visible(navigation.prevBtn, false);
}
}
function onNextClick(e) {
if (current_slide == slides.length - 1) {
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)});
} else {
goToSlide(current_slide+1);
upDate();
}
}
function onPrevClick(e) {
if (current_slide == 0) {
goToSlide(current_slide);
} else {
goToSlide(current_slide-1);
upDate();
}
}
function onKeypressNav(e) {
switch(e.keyCode) {
//right arrow
case 39:
13 years ago
onNextClick(e);
break;
//left arrow
case 37:
13 years ago
onPrevClick(e);
break;
}
}
13 years ago
function onTouchUpdate(e, b) {
if (slide_positions.length == 0) {
for(var i = 0; i < slides.length; i++) {
var sp = VMM.Element.position(slides[i]);
slide_positions.push(sp.left);
}
}
if (typeof b.left == "number") {
var _pos = b.left;
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.slider_width/3)) {
13 years ago
onNextClick();
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.slider_width/3)) {
13 years ago
onPrevClick();
} else {
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)});
}
} else {
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)});
}
if (typeof b.top == "number") {
VMM.Element.animate($slider_container, config.duration, config.ease, {"top": -b.top});
//VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") + b.top });
//VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") + VMM.Element.height(layout) });
//VMM.Element.animate($slider_container, config.duration, config.ease, {"top": -400});
} else {
}
};
function upDate() {
VMM.fireEvent(layout, "UPDATE");
};
/* PRIVATE FUNCTIONS
================================================== */
var getData = function(d) {
data = d;
};
/* SLIDES
================================================== */
// BUILD SLIDES
var buildSlides = function(d) {
// Clear out existing content
VMM.attachElement($slides_items, "");
for(var i = 0; i < d.length; i++) {
var bw = "";
var _slide;
var _media;
bw = VMM.createElement("div", d[i].content, "content");
13 years ago
13 years ago
_slide = VMM.appendAndGetElement($slides_items, "<div>", "slider-item" , bw);
13 years ago
13 years ago
slides.push(_slide);
}
}
// POSITION SLIDES AND SIZE THEM
var positionSlides = function() {
/* SIZE SLIDES
================================================== */
VMM.Element.css(".slider-item", "width", config.slider.content.width );
VMM.Element.height(".slider-item", config.slider.height);
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.slider.height - 50 );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.slider.height - 150 );
13 years ago
/* FIX FOR NON-WEBKIT BROWSERS
================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-width", 32 );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-height", 32 );
/* SOUNDCLOUD
================================================== */
13 years ago
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 );
/* RESIZE IFRAME MEDIA ELEMENTS
================================================== */
//var _iframe_height = Math.round(config.height) - 60;
var _iframe_height_full = Math.round(config.slider.height) - 160;
13 years ago
//var _iframe_width = Math.round((_iframe_height / 9) * 16);
var _iframe_width_full = Math.round((_iframe_height_full / 9) * 16);
var _iframe_width = (config.slider.content.width/100)*60 ;
13 years ago
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
// NORMAL
VMM.Element.height(".slider-item .media .media-container .media-frame", _iframe_height);
VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
// IFRAME FULL SIZE VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full);
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full);
// IFRAME FULL SIZE NON VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.slider.height - 150);
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.slider.content.width);
13 years ago
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width);
// MAPS
VMM.Element.height(".slider-item .layout-media .media .media-container .map", _iframe_height_full+60);
VMM.Element.height(".slider-item .layout-text-media .media .media-container .map", _iframe_height_full+120);
13 years ago
// MAPS
VMM.Element.height(".slider-item .layout-media .media .media-container .doc", _iframe_height_full+60);
VMM.Element.height(".slider-item .layout-text-media .media .media-container .doc", _iframe_height_full+120);
13 years ago
// MAX WIDTH
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width );
13 years ago
//VMM.Element.width(".slider-item .layout-text-media .media .media-container .media-frame", _iframe_width);
//VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-height", _iframe_height );
/* POSITION SLIDES
================================================== */
var pos = 0;
for(var i = 0; i < slides.length; i++) {
pos = i * (config.slider.width+config.spacing);
13 years ago
VMM.Element.css(slides[i], "left", pos);
}
}
var opacitySlides = function(n) {
var _ease = "linear";
for(var i = 0; i < slides.length; i++) {
if (i == current_slide) {
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 1});
} else if (i == current_slide - 1) {
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 0.1});
} else if (i == current_slide + 1) {
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 0.1});
} else {
VMM.Element.css(slides[i], "opacity", n);
}
}
}
// Go to slide
//goToSlide(n, ease, duration);
var goToSlide = function(n, ease, duration, fast, firstrun) {
/* STOP ANY VIDEO PLAYERS ACTIVE
================================================== */
VMM.ExternalAPI.youtube.stopPlayers();
// Set current slide
current_slide = n;
var _ease = config.ease;
var _duration = config.duration;
var is_last = false;
var is_first = false;
if (current_slide == 0) {
is_first = true;
}
if (current_slide +1 == slides.length) {
is_last = true
}
if (ease != null && ease != "") {_ease = ease};
if (duration != null && duration != "") {_duration = duration};
/* get slide position
================================================== */
var _pos = VMM.Element.position(slides[current_slide]);
/* set proper nav titles and dates etc.
================================================== */
if (is_first) {
VMM.Element.visible(navigation.prevBtn, false);
} else {
VMM.Element.visible(navigation.prevBtn, true);
if (config.type == "timeline") {
13 years ago
VMM.attachElement(navigation.prevDate, data[current_slide - 1].date);
}
VMM.attachElement(navigation.prevTitle, VMM.Util.unlinkify(data[current_slide - 1].title));
}
if (is_last) {
VMM.Element.visible(navigation.nextBtn, false);
} else {
VMM.Element.visible(navigation.nextBtn, true);
if (config.type == "timeline") {
13 years ago
VMM.attachElement(navigation.nextDate, data[current_slide + 1].date);
}
VMM.attachElement(navigation.nextTitle, VMM.Util.unlinkify(data[current_slide + 1].title) );
}
/* ANIMATE SLIDE
================================================== */
if (fast) {
VMM.Element.css($slider_container, "left", -(_pos.left - config.slider.content.padding));
13 years ago
} else{
VMM.Element.stop($slider_container);
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.slider.content.padding)});
13 years ago
}
if (firstrun) {
VMM.fireEvent(layout, "LOADED");
}
/* SET Vertical Scoll
================================================== */
//opacitySlides(0.85);
if (VMM.Element.height(slides[current_slide]) > config.slider_height) {
13 years ago
VMM.Element.css(".slider", "overflow-y", "scroll" );
} else {
VMM.Element.css(layout, "overflow-y", "hidden" );
VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") - VMM.Element.height(layout) });
}
}
/* NAVIGATION
================================================== */
var buildNavigation = function() {
var temp_icon = "<div class='icon'>&nbsp;</div>";
navigation.nextBtn = VMM.appendAndGetElement($slider, "<div>", "nav-next");
navigation.prevBtn = VMM.appendAndGetElement($slider, "<div>", "nav-previous");
navigation.nextBtnContainer = VMM.appendAndGetElement(navigation.nextBtn, "<div>", "nav-container", temp_icon);
navigation.prevBtnContainer = VMM.appendAndGetElement(navigation.prevBtn, "<div>", "nav-container", temp_icon);
if (config.type == "timeline") {
13 years ago
navigation.nextDate = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "date", "1957");
navigation.prevDate = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "date", "1957");
}
navigation.nextTitle = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "title", "Title Goes Here");
navigation.prevTitle = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "title", "Title Goes Here");
VMM.bindEvent(".nav-next", onNextClick);
VMM.bindEvent(".nav-previous", onPrevClick);
VMM.bindEvent(window, onKeypressNav, 'keydown');
13 years ago
}
/* BUILD
================================================== */
var build = function() {
// Clear out existing content
VMM.attachElement(layout, "");
// Get DOM Objects to local objects
$slider = VMM.getElement("div.slider");
$slider_mask = VMM.appendAndGetElement($slider, "<div>", "slider-container-mask");
$slider_container = VMM.appendAndGetElement($slider_mask, "<div>", "slider-container");
$slides_items = VMM.appendAndGetElement($slider_container, "<div>", "slider-item-container");
// BUILD NAVIGATION
buildNavigation();
// ATTACH SLIDES
buildSlides(data);
/* MAKE SLIDER TOUCHABLE
================================================== */
var __duration = 3000;
if (VMM.Browser.device == "tablet" || VMM.Browser.device == "mobile") {
config.duration = 500;
__duration = 1000;
VMM.TouchSlider.createPanel($slider_container, $slider_container, VMM.Element.width(slides[0]), config.spacing, true);
VMM.bindEvent($slider_container, onTouchUpdate, "TOUCHUPDATE");
} else if (VMM.Browser.device == "mobile") {
} else {
//VMM.DragSlider.createPanel($slider_container, $slider_container, VMM.Element.width(slides[0]), config.spacing, true);
}
reSize(false, true);
VMM.Element.visible(navigation.prevBtn, false);
// GO TO FIRST SLIDE
goToSlide(0, "easeOutExpo", __duration, true, true);
_active = true;
};
};
}