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.
 
 
 
 

612 lines
17 KiB

/*!
Timeline 0.95
Designed and built by Zach Wise digitalartwork.net
Date: April 26, 2012
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
http://www.gnu.org/licenses/
*/
/* CodeKit Import
http://incident57.com/codekit/
================================================== */
// @codekit-prepend "VMM.js";
// @codekit-prepend "VMM.Library.js";
// @codekit-prepend "VMM.Browser.js";
// @codekit-prepend "VMM.MediaElement.js";
// @codekit-prepend "VMM.MediaType.js";
// @codekit-prepend "VMM.Media.js";
// @codekit-prepend "VMM.FileExtention.js";
// @codekit-prepend "VMM.ExternalAPI.js";
// @codekit-prepend "VMM.TouchSlider.js";
// @codekit-prepend "VMM.DragSlider.js";
// @codekit-prepend "VMM.Slider.js";
// @codekit-prepend "VMM.Util.js";
// @codekit-prepend "VMM.LoadLib.js";
// @codekit-prepend "VMM.Language.js";
// @codekit-prepend "bootstrap-tooltip.js";
// @codekit-prepend "AES.js";
// @codekit-append "VMM.Timeline.TimeNav.js";
// @codekit-append "VMM.Timeline.DataObj.js";
/* Timeline
================================================== */
if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.Timeline = function(w, h, conf) {
var version = "0.95";
trace("TIMELINE VERSION " + version);
var $timeline = VMM.getElement("#timeline"); // expecting name only for parent
var $feedback;
var $messege;
var html_string = VMM.getElement("#timeline");
/* CREATE DOM STRUCTURE
================================================== */
//VMM.attachElement($timeline, "");
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
$messege = VMM.appendAndGetElement($feedback, "<div>", "messege", "#Timeline");
//VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
/* PRIVATE VARS
================================================== */
var _private_var = 'private';
var events = {}; // CUSTOM EVENT HOLDER
var data = {}; // HOLDS DATA
var _dates = []; // HOLDES PROCESSED DATES
/* CONFIG
================================================== */
var config = {
type: "timeline",
maptype: "toner",
interval: 10,
something: 0,
width: 960,
height: 540,
spacing: 15,
loaded: {
slider: false,
timenav: false,
percentloaded:0
},
nav: {
width: 960,
height: 200
},
feature: {
width: 960,
height: 540
},
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
},
ease: "easeInOutExpo",
duration: 1000,
language: VMM.Language
};
VMM.Timeline.Config = config;
VMM.master_config.Timeline = VMM.Timeline.Config;
if (w != null && w != "") {
config.width = w;
VMM.Element.width($timeline, w);
} else {
config.width = VMM.Element.width($timeline);
}
if (h != null && h != "") {
config.height = h;
VMM.Element.height($timeline, h);
} else {
config.height = VMM.Element.height($timeline);
}
config.nav = {
width: config.width,
height: 200
};
config.feature = {
width: config.width,
height: config.height - config.nav.height
}
if (VMM.Browser.device == "mobile") {
config.feature.height = config.height;
} else {
//config.feature.height = config.height - config.nav.height;
}
/* APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
================================================== */
if (typeof timeline_config == 'object') {
trace("HAS TIMELINE CONFIG");
var x;
for (x in timeline_config) {
if (Object.prototype.hasOwnProperty.call(timeline_config, x)) {
config[x] = timeline_config[x];
}
}
} else if (typeof conf == 'object') {
var x;
for (x in conf) {
if (Object.prototype.hasOwnProperty.call(conf, x)) {
config[x] = conf[x];
}
}
}
/* CHECK FOR IE7
================================================== */
var ie7 = false;
if (VMM.Browser.browser == "MSIE") {
if ( parseInt(VMM.Browser.version, 10) == 7) {
ie7 = true;
}
}
/* CREATE COMPONENTS
================================================== */
// SLIDER
//var slider = new VMM.Slider("div.slider", 720, 400, true);
var slider = new VMM.Slider("div.slider", config);
// TIMENAV
var timenav = new VMM.Timeline.TimeNav("div.navigation", 720, 400, true);
/* ON EVENT
================================================== */
function onDataReady(e, d) {
data = d.timeline;
if (type.of(data.era) == "array") {
} else {
data.era = [];
}
buildDates();
};
function onDatesProcessed() {
build();
}
function reSize() {
updateSize();
slider.setSize(config.feature.width, config.feature.height);
timenav.setSize(config.width, config.height);
resizeSlides();
};
function onSliderLoaded(e) {
config.loaded.slider = true;
onComponentLoaded();
};
function onComponentLoaded(e) {
config.loaded.percentloaded = config.loaded.percentloaded + 25;
showMessege("Loading Timeline " + config.loaded.percentloaded);
if (config.loaded.slider && config.loaded.timenav) {
hideMessege();
}
}
function onTimeNavLoaded(e) {
config.loaded.timenav = true;
onComponentLoaded();
}
function onSlideUpdate(e) {
timenav.setMarker(slider.getCurrentNumber(), config.ease,config.duration);
};
function onMarkerUpdate(e) {
slider.setSlide(timenav.getCurrentNumber());
};
/* PUBLIC FUNCTIONS
================================================== */
this.init = function(d) {
trace('TIMELINE INIT');
trace(VMM.Timeline.Config.language);
VMM.Util.date.setLanguage(VMM.Timeline.Config.language);
VMM.bindEvent(global, onDataReady, "DATAREADY");
/* GET DATA
================================================== */
if (ie7) {
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
$messege = VMM.appendAndGetElement($feedback, "<div>", "messege", "Internet Explorer 7 is not supported by #Timeline.");
} else {
if (type.of(d) == "string") {
VMM.Timeline.DataObj.getData(d);
} else {
VMM.Timeline.DataObj.getData(html_string);
}
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
$messege = VMM.appendAndGetElement($feedback, "<div>", "messege", VMM.Timeline.Config.language.messages.loading_timeline);
}
};
this.iframeLoaded = function() {
trace("iframeLoaded");
};
/* DATA
================================================== */
var getData = function(url) {
VMM.getJSON(url, function(d) {
data = VMM.Timeline.DataObj.getData(d);
VMM.fireEvent(global, "DATAREADY");
});
};
/* MESSEGES
================================================== */
var showMessege = function(msg) {
//VMM.Element.append($timeline, $feedback);
//VMM.attachElement($messege, msg);
//VMM.Element.animate($feedback, config.duration, config.ease, {"opacity": 1});
};
//VMM.Element.animate(element, duration, ease, att, callback_function);
var hideMessege = function() {
VMM.Element.animate($feedback, config.duration, config.ease*4, {"opacity": 0}, detachMessege);
};
var detachMessege = function() {
VMM.Element.detach($feedback);
}
/* BUILD DISPLAY
================================================== */
var build = function() {
/* CREATE DOM STRUCTURE
================================================== */
VMM.attachElement($timeline, "");
VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
reSize();
/* INIT THE OBJECTS
================================================== */
VMM.bindEvent("div.slider", onSliderLoaded, "LOADED");
VMM.bindEvent("div.navigation", onTimeNavLoaded, "LOADED");
VMM.bindEvent("div.slider", onSlideUpdate, "UPDATE");
VMM.bindEvent("div.navigation", onMarkerUpdate, "UPDATE");
slider.init(_dates);
timenav.init(_dates, data.era);
/* RESIZE EVENT LISTENERS
================================================== */
VMM.bindEvent(global, reSize, "resize");
VMM.bindEvent(global, function(e) {e.preventDefault()}, "touchmove");
};
// BUILD SLIDE CONTENT pass in json object
var buildSlide = function(dd, d_date) {
updateSize();
var d = dd;
var slide = "";
var c = {};
c._text = "";
c._media = "";
var _valid = false;
var _hasmedia = false;
var _hastext = false;
// NEEDS DATE IN ORDER TO USE
// TEXT
//if (d_date != null && d_date != "") {
if (type.of(d_date) == "date") {
_valid = true;
if (dd.type == "start") {
} else {
c._text += VMM.createElement("h2", VMM.Util.date.prettyDate(d_date), "date");
}
//c._text += VMM.createElement("h2", d.strDate, "date");
if (d.headline != null && d.headline != "") {
if (d.type == "tweets") {
} else if (dd.type == "start") {
c._text += VMM.createElement("h2", VMM.Util.linkify_with_twitter(d.headline, "_blank"), "start");
} else {
c._text += VMM.createElement("h3", VMM.Util.linkify_with_twitter(d.headline, "_blank"));
}
}
if (d.text != null && d.text != "") {
_hastext = true;
c._text += VMM.createElement("p", VMM.Util.linkify_with_twitter(d.text, "_blank"));
}
c._text = VMM.createElement("div", c._text, "container");
c._text = VMM.createElement("div", c._text, "text");
//trace(c._text);
}
// MEDIA
if (_valid) {
if (d.asset != null && d.asset != "") {
if (d.asset.media != null && d.asset.media != "") {
_hasmedia = true;
c._media = VMM.MediaElement.create("", d.asset, true, config.feature.width, config.feature.height);
}
}
}
if (_valid) {
var _layout_class = "content-container layout";
if (_hastext) {
_layout_class += "-text"
}
if (_hasmedia) {
_layout_class += "-media";
}
//c._media = VMM.createElement("div", c._media, "media-wrapper");
slide = VMM.createElement("div", c._text + c._media, _layout_class);
//trace(slide);
}
return slide;
}
var updateSize = function() {
config.width = VMM.Element.width($timeline);
config.height = VMM.Element.height($timeline);
config.nav.width = config.width;
config.feature.width = config.width;
if (VMM.Browser.device == "mobile") {
config.feature.height = config.height;
} else {
config.feature.height = config.height - config.nav.height - 3;
}
};
var resizeSlides = function() {
/* CHECK FOR MOBILE
================================================== */
if (config.width < 500) {
// MOBILE
VMM.Element.hide("div.navigation");
VMM.Element.hide("div.nav-next");
VMM.Element.hide("div.nav-previous");
//VMM.Element.css(".slider-item .content", "max-width", "100%");
//VMM.Element.width(".slider-item .content", "90%");
VMM.Element.height(".slider-container-mask", config.height);
} else {
// DESKTOP OR TABLET
VMM.Element.show("div.navigation");
VMM.Element.show("div.nav-next");
VMM.Element.show("div.nav-previous");
VMM.Element.height(".slider-container-mask", config.feature.height);
}
/* CHECK FOR TABLET
================================================== */
if (config.width < 820) {
// TABLET OR MOBILE
//VMM.Element.width(".slider-item .media", "100%");
//VMM.Element.width(".slider-item .text", "100%");
//VMM.Element.css(".slider-item .container", "max-width", "100%");
//VMM.Element.width(".slider-item .media .media-container .media-frame", (config.feature_width - config.spacing) );
//VMM.Element.css(".slider-item .media .media-container", "margin-bottom", 5);
if (config.width < 500) {
// MOBILE
//VMM.Element.height(".slider-item .media", Math.round(config.height/1.5));
//VMM.Element.css(".slider-item .media .media-container", "max-height", Math.round(config.height/1.5) - 50);
//VMM.Element.height(".slider-item .media .media-container .media-frame", Math.round(config.height/1.5) - 60);
} else {
// TABLET
//VMM.Element.height(".slider-item .media", Math.round(config.feature_height/1.5));
//VMM.Element.css(".slider-item .media .media-container", "max-height", Math.round(config.feature_height/1.5) - 50);
//VMM.Element.height(".slider-item .media .media-container .media-frame", Math.round(config.feature_height/1.5) - 60);
}
} else {
// DESKTOP
//VMM.Element.width(".slider-item .layout-media .media", "100%");
//VMM.Element.width(".slider-item .layout-text-media .media", "75%");
//VMM.Element.width(".slider-item .layout-text-media .text", "25%");
//VMM.Element.width(".slider-item .layout-text .text", "100%");
//VMM.Element.css(".slider-item .layout-text-media .container", "max-width", 200);
//VMM.Element.height(".slider-item .media", config.feature_height);
//VMM.Element.height(".slider-item .layout-text-media .media .media-container .media-frame", config.feature_height - 60);
//VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", config.feature_height - 160);
//VMM.Element.width(".slider-item .media .media-container .media-frame", Math.round(((config.feature_width/4) * 3) - config.spacing) );
//VMM.Element.css(".slider-item .media .media-container", "max-height", config.feature_height- 50);
//VMM.Element.css(".slider-item .media .media-container", "margin-bottom", 5);
}
};
// BUILD DATE OBJECTS
var buildDates = function() {
updateSize();
/* CREATE START PAGE IF AVAILABLE
================================================== */
if (data.headline != null && data.headline != "" && data.text != null && data.text != "") {
trace("HAS STARTPAGE");
var _date = {};
if (data.type == "google spreadsheet") {
trace("google spreadsheet startpage date" + data.startDate);
_date.startdate = new Date(Date.parse(data.startDate));
trace(_date.startdate);
} else {
_date.startdate = VMM.Util.parseDate(data.startDate);
}
_date.uniqueid = VMM.Util.unique_ID(5);
_date.enddate = _date.startdate;
_date.title = data.headline;
_date.headline = data.headline;
_date.text = data.text;
_date.type = "start";
_date.date = VMM.Util.date.prettyDate(data.startDate);
_date.asset = data.asset;
_date.fulldate = _date.startdate.getTime();
_date.content = buildSlide(_date, _date.startdate);
if (_date.content != null && _date.content != "") {
_dates.push(_date);
}
}
for(var i = 0; i < data.date.length; i++) {
if (data.date[i].startDate != null && data.date[i].startDate != "") {
var _date = {};
// START DATE
if (data.date[i].type == "tweets") {
_date.startdate = VMM.ExternalAPI.twitter.parseTwitterDate(data.date[i].startDate);
} else if (data.date[i].type == "google spreadsheet") {
_date.startdate = new Date(Date.parse(data.date[i].startDate));
trace(_date.startdate);
} else {
_date.startdate = VMM.Util.parseDate(data.date[i].startDate);
}
_date.uniqueid = (data.date[i].startDate).toString() + "-" + i.toString();
// END DATE
if (data.date[i].endDate != null && data.date[i].endDate != "") {
if (data.date[i].type == "tweets") {
_date.enddate = VMM.ExternalAPI.twitter.parseTwitterDate(data.date[i].endDate);
} else if (data.date[i].type == "google spreadsheet") {
_date.enddate = new Date(Date.parse(data.date[i].endDate));
} else {
_date.enddate = VMM.Util.parseDate(data.date[i].endDate);
}
} else {
_date.enddate = _date.startdate;
}
// TITLE
_date.title = data.date[i].headline;
_date.type = data.date[i].type;
// DATE
_date.date = VMM.Util.date.prettyDate(_date.startdate);
// ASSET
_date.asset = data.date[i].asset;
/* NEED FULL FRACTIONAL DATE
================================================== */
_date.fulldate = _date.startdate.getTime();
// BUILD SLIDE CONTENT
// Won't be added unless there is content
_date.content = buildSlide(data.date[i], _date.startdate);
if (_date.content != null && _date.content != "") {
_dates.push(_date);
}
}
};
/* CUSTOM SORT
================================================== */
//VMM.Util.customSort(a,b);
/*
for(var j = 0; j < _dates.length; j++) {
trace(_dates[j].startdate);
}
trace("============================");
*/
//_dates.reverse(VMM.Util.customSort(_dates.fulldate,_dates.fulldate));
_dates.sort(function(a, b){
return a.fulldate - b.fulldate
});
//_dates.reverse()
/*
for(var k = 0; k < _dates.length; k++) {
trace(_dates[k].startdate);
}
*/
onDatesProcessed();
}
};
VMM.Timeline.Config = {};
};