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.
 
 
 
 

557 lines
15 KiB

/*!
Timeline
Designed and built by Zach Wise at VeriteCo
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, _timeline_id) {
var $timeline, $feedback, $messege, slider, timenav, version, timeline_id;
var events = {}, data = {}, _dates = [], config = {};
var has_width = false, has_height = false, ie7 = false;
if (type.of(_timeline_id) == "string") {
timeline_id = _timeline_id;
} else {
timeline_id = "#timeline";
}
version = "0.98.5";
trace("TIMELINE VERSION " + version);
/* CONFIG
================================================== */
config = {
id: timeline_id,
type: "timeline",
maptype: "toner",
start_page: false,
interval: 10,
something: 0,
width: 960,
height: 540,
spacing: 15,
loaded: {
slider: false,
timenav: false,
percentloaded: 0
},
nav: {
start_page: false,
interval_width: 200,
density: 4,
minor_width: 0,
multiplier: {
current: 6,
min: .1,
max: 50
},
rows: [1, 1, 1],
width: 960,
height: 200,
marker: {
width: 150,
height: 48
}
},
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
};
if ( w != null && w != "") {
config.width = w;
has_width = true;
}
if ( h != null && h != "") {
config.height = h;
has_height = true;
}
/* CREATE CONFIG
================================================== */
var createConfig = function(conf) {
// 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];
}
}
}
config.nav.width = config.width;
config.nav.height = 200;
config.feature.width = config.width;
config.feature.height = config.height - config.nav.height;
VMM.Timeline.Config = config;
VMM.master_config.Timeline = VMM.Timeline.Config;
}
/* CREATE TIMELINE STRUCTURE
================================================== */
var createStructure = function(w, h) {
$timeline = VMM.getElement(timeline_id);
VMM.Element.addClass(timeline_id, "vmm-timeline");
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
$messege = VMM.appendAndGetElement($feedback, "<div>", "messege", "Timeline");
slider = new VMM.Slider(timeline_id + " div.slider", config);
timenav = new VMM.Timeline.TimeNav(timeline_id + " div.navigation");
if (!has_width) {
config.width = VMM.Element.width($timeline);
} else {
VMM.Element.width($timeline, config.width);
}
if (!has_height) {
config.height = VMM.Element.height($timeline);
} else {
VMM.Element.height($timeline, config.height);
}
}
/* 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);
};
function onSliderLoaded(e) {
config.loaded.slider = true;
onComponentLoaded();
};
function onComponentLoaded(e) {
config.loaded.percentloaded = config.loaded.percentloaded + 25;
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(_data, _timeline_id, conf) {
if (type.of(_timeline_id) == "string") {
if (_timeline_id.match("#")) {
timeline_id = _timeline_id;
} else {
timeline_id = "#" + _timeline_id;
}
}
createConfig(conf);
createStructure(w,h);
trace('TIMELINE INIT');
VMM.Util.date.setLanguage(VMM.Timeline.Config.language);
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
$messege = VMM.appendAndGetElement($feedback, "<div>", "messege", VMM.Timeline.Config.language.messages.loading_timeline);
VMM.bindEvent(global, onDataReady, "DATAREADY");
VMM.bindEvent(global, showMessege, "MESSEGE");
/* GET DATA
================================================== */
if (VMM.Browser.browser == "MSIE" && parseInt(VMM.Browser.version, 10) == 7) {
ie7 = true;
VMM.fireEvent(global, "MESSEGE", "Internet Explorer 7 is not supported by #Timeline.");
} else {
if (type.of(_data) == "string" || type.of(_data) == "object") {
VMM.Timeline.DataObj.getData(_data);
} else {
VMM.Timeline.DataObj.getData(VMM.getElement(timeline_id));
}
}
};
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(e, msg) {
trace("showMessege " + msg);
VMM.attachElement($messege, msg);
};
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) {
var d = dd;
var slide = "";
var _valid = false;
var _hasmedia = false;
var _hastext = false;
var c = {};
c._text = "";
c._media = "";
updateSize();
if (type.of(d_date) == "date") {
_valid = true;
if (dd.type != "start") {
c._text += VMM.createElement("h2", VMM.Util.date.prettyDate(d_date), "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");
}
if (_valid) {
var _layout_class = "content-container layout";
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 (_hastext) {
_layout_class += "-text"
}
if (_hasmedia) {
_layout_class += "-media";
}
slide = VMM.createElement("div", c._text + c._media, _layout_class);
return slide;
}
return slide;
}
var updateSize = function() {
trace("UPDATE SIZE");
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;
}
config.feature.height = config.height - config.nav.height - 3;
};
// BUILD DATE OBJECTS
var buildDates = function() {
updateSize();
VMM.fireEvent(global, "MESSEGE", "Building Dates");
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));
_date.startdate = VMM.Util.date.parse(data.date[i].startDate);
} else {
_date.startdate = VMM.Util.date.parse(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));
_date.enddate = VMM.Util.date.parse(data.date[i].endDate);
} else {
_date.enddate = VMM.Util.date.parse(data.date[i].endDate);
}
} else {
_date.enddate = _date.startdate;
}
_date.title = data.date[i].headline;
_date.type = data.date[i].type;
_date.date = VMM.Util.date.prettyDate(_date.startdate);
_date.asset = data.date[i].asset;
_date.fulldate = _date.startdate.getTime();
// BUILD SLIDE CONTENT
_date.content = buildSlide(data.date[i], _date.startdate);
if (_date.content != null && _date.content != "") {
_dates.push(_date);
}
}
};
/* CUSTOM SORT
================================================== */
_dates.sort(function(a, b){
return a.fulldate - b.fulldate
});
/* 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));
} else {
_date.startdate = VMM.Util.date.parse(data.startDate);
}
_date.startdate = new Date(_dates[0].startdate);
var td = _dates[0].startdate;
var td_num = 0;
/*
if (_dates[0].startdate.getDate() > 1) {
_date.startdate.setDate(td.getDate() - 1);
} else if (_dates[0].startdate.getHours() > 0) {
_date.startdate.setHours(td.getHours() - 1);
}
*/
if (td.getMonth() === 0 && td.getDate() == 1 && td.getHours() === 0 && td.getMinutes() === 0 ) {
// trace("YEAR ONLY");
_date.startdate.setFullYear(td.getFullYear() - 1);
} else if (td.getDate() <= 1 && td.getHours() === 0 && td.getMinutes() === 0) {
// trace("YEAR MONTH");
_date.startdate.setMonth(td.getMonth() - 1);
} else if (td.getHours() === 0 && td.getMinutes() === 0) {
// trace("YEAR MONTH DAY");
_date.startdate.setDate(td.getDate() - 1);
} else if (td.getMinutes() === 0) {
// trace("YEAR MONTH DAY HOUR");
_date.startdate.setHours(td.getHours() - 1);
} else {
// trace("YEAR MONTH DAY HOUR MINUTE");
_date.startdate.setMinutes(td.getMinutes() - 1);
}
_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 != "" || _date.title != null && _date.title != "") {
_dates.push(_date);
}
}
/* CUSTOM SORT
================================================== */
_dates.sort(function(a, b){
return a.fulldate - b.fulldate
});
onDatesProcessed();
}
};
VMM.Timeline.Config = {};
};