playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Major optimizations for timeline zooming, especially dealing with large timelines.

pull/127/merge
Zach Wise 13 years ago
parent
4cf5f9e876
commit
a20574a203
1 changed files with 352 additions and 223 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 469
      source/js/VMM.Timeline.TimeNav.js

469
source/js/VMM.Timeline.TimeNav.js
Unescape View File

@ -7,7 +7,17 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
trace("VMM.Timeline.TimeNav"); trace("VMM.Timeline.TimeNav");
var events = {}, timespan = {}, layout = parent; var events = {}, timespan = {}, layout = parent;
var timeouts = {
interval_position: ""
};
var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content, tags = []; var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content, tags = [];
var timenav_pos = {
left:"",
visible: {
left:"",
right:""
}
};
var current_marker = 0; var current_marker = 0;
var _active = false; var _active = false;
@ -159,8 +169,8 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
var refreshTimeline = function() { var refreshTimeline = function() {
trace("config.nav.multiplier " + config.nav.multiplier.current); trace("config.nav.multiplier " + config.nav.multiplier.current);
positionMarkers(true); positionMarkers(true);
positionInterval(interval_array, true, true); positionInterval($timeinterval, interval_array, true, true);
positionInterval(interval_major_array, true); positionInterval($timeintervalmajor, interval_major_array, true);
}; };
/* MARKER EVENTS /* MARKER EVENTS
@ -176,13 +186,16 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
}; };
var goToMarker = function(n, ease, duration, fast, firstrun) { var goToMarker = function(n, ease, duration, fast, firstrun) {
var _ease = config.ease,
_duration = config.duration,
is_last = false,
is_first = false;
current_marker = n; current_marker = n;
var _ease = config.ease;
var _duration = config.duration; timenav_pos.left = (config.width/2) - VMM.Lib.position(markers[current_marker].marker).left;
var is_last = false; timenav_pos.visible.left = Math.abs(timenav_pos.left) - 100;
var is_first = false; timenav_pos.visible.right = Math.abs(timenav_pos.left) + config.width + 100;
var _pos = VMM.Lib.position(markers[current_marker].marker);
if (current_marker == 0) { if (current_marker == 0) {
is_first = true; is_first = true;
@ -207,7 +220,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
// ANIMATE MARKER // ANIMATE MARKER
VMM.Lib.stop($timenav); VMM.Lib.stop($timenav);
VMM.Lib.animate($timenav, _duration, _ease, {"left": (config.width/2) - (_pos.left)}); VMM.Lib.animate($timenav, _duration, _ease, {"left": timenav_pos.left});
} }
@ -220,16 +233,16 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
/* CALCULATIONS /* CALCULATIONS
================================================== */ ================================================== */
var averageMarkerPositionDistance = function() { var averageMarkerPositionDistance = function() {
var last_pos = 0; var last_pos = 0,
var pos = 0; pos = 0,
var pos_dif = 0; pos_dif = 0,
var mp_diff = []; mp_diff = [];
for(var i = 0; i < markers.length; i++) { for(var i = 0; i < markers.length; i++) {
if (data[i].type == "start") { if (data[i].type == "start") {
} else { } else {
var _pos = positionOnTimeline(interval, data[i].startdate, data[i].enddate); var _pos = positionOnTimeline(interval, markers[i].relative_pos),
last_pos = pos; last_pos = pos;
pos = _pos.begin; pos = _pos.begin;
pos_dif = pos - last_pos; pos_dif = pos - last_pos;
@ -442,134 +455,113 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
/* POSITION /* POSITION
================================================== */ ================================================== */
var positionOnTimeline = function(the_interval, first, last) { var positionRelative = function(_interval, first, last) {
var _first,
_last,
_type = _interval.type,
timerelative = {start: "", end: "", type: _type};
var _type = the_interval.type; /* FIRST
var _multiplier = the_interval.multiplier;
var _first = getDateFractions(first);
var _last;
var tsd;
var ted;
/* CALCULATE POSITION ON TIMELINE
================================================== */ ================================================== */
tsd = first.months; _first = getDateFractions(first);
timerelative.start = first.months;
if (type.of(last) == "date") {
/* LAST
================================================== */
_last = getDateFractions(last);
ted = last.months;
if (_type == "eon") { if (_type == "eon") {
tsd = _first.eons; timerelative.start = _first.eons;
ted = _last.eons;
} else if (_type == "era") { } else if (_type == "era") {
tsd = _first.eras; timerelative.start = _first.eras;
ted = _last.eras;
} else if (_type == "epoch") { } else if (_type == "epoch") {
tsd = _first.epochs; timerelative.start = _first.epochs;
ted = _last.epochs;
} else if (_type == "age") { } else if (_type == "age") {
tsd = _first.ages; timerelative.start = _first.ages;
ted = _last.ages;
} else if (_type == "millenium") { } else if (_type == "millenium") {
tsd = first.milleniums; timerelative.start = first.milleniums;
ted = last.milleniums;
} else if (_type == "century") { } else if (_type == "century") {
tsd = _first.centuries; timerelative.start = _first.centuries;
ted = _last.centuries;
} else if (_type == "decade") { } else if (_type == "decade") {
tsd = _first.decades; timerelative.start = _first.decades;
ted = _last.decades;
} else if (_type == "year") { } else if (_type == "year") {
tsd = _first.years; timerelative.start = _first.years;
ted = _last.years;
} else if (_type == "month") { } else if (_type == "month") {
tsd = _first.months; timerelative.start = _first.months;
ted = _last.months;
} else if (_type == "week") { } else if (_type == "week") {
tsd = _first.weeks; timerelative.start = _first.weeks;
ted = _last.weeks;
} else if (_type == "day") { } else if (_type == "day") {
tsd = _first.days; timerelative.start = _first.days;
ted = _last.days;
} else if (_type == "hour") { } else if (_type == "hour") {
tsd = _first.hours; timerelative.start = _first.hours;
ted = _last.hours;
} else if (_type == "minute") { } else if (_type == "minute") {
tsd = _first.minutes; timerelative.start = _first.minutes;
ted = _last.minutes;
} }
_pos = ( tsd - interval.base ) * (config.nav.interval_width / config.nav.multiplier.current); /* LAST
_pos_end = ( ted - interval.base ) * (config.nav.interval_width / config.nav.multiplier.current); ================================================== */
if (type.of(last) == "date") {
_last = getDateFractions(last);
timerelative.end = last.months;
} else {
if (_type == "eon") { if (_type == "eon") {
tsd = _first.eons; timerelative.end = _last.eons;
ted = _first.eons;
} else if (_type == "era") { } else if (_type == "era") {
tsd = _first.eras; timerelative.end = _last.eras;
ted = _first.eras;
} else if (_type == "epoch") { } else if (_type == "epoch") {
tsd = _first.epochs; timerelative.end = _last.epochs;
ted = _first.epochs;
} else if (_type == "age") { } else if (_type == "age") {
tsd = _first.ages; timerelative.end = _last.ages;
ted = _first.ages;
} else if (_type == "millenium") { } else if (_type == "millenium") {
tsd = first.milleniums; timerelative.end = last.milleniums;
ted = first.milleniums;
} else if (_type == "century") { } else if (_type == "century") {
tsd = _first.centuries; timerelative.end = _last.centuries;
ted = _first.centuries;
} else if (_type == "decade") { } else if (_type == "decade") {
tsd = _first.decades; timerelative.end = _last.decades;
ted = _first.decades;
} else if (_type == "year") { } else if (_type == "year") {
tsd = _first.years; timerelative.end = _last.years;
ted = _first.years;
} else if (_type == "month") { } else if (_type == "month") {
tsd = _first.months; timerelative.end = _last.months;
ted = _first.months;
} else if (_type == "week") { } else if (_type == "week") {
tsd = _first.weeks; timerelative.end = _last.weeks;
ted = _first.weeks;
} else if (_type == "day") { } else if (_type == "day") {
tsd = _first.days; timerelative.end = _last.days;
ted = _first.days;
} else if (_type == "hour") { } else if (_type == "hour") {
tsd = _first.hours; timerelative.end = _last.hours;
ted = _first.hours;
} else if (_type == "minute") { } else if (_type == "minute") {
tsd = _first.minutes; timerelative.end = _last.minutes;
ted = _first.minutes;
} }
_pos = ( tsd - interval.base ) * (config.nav.interval_width / config.nav.multiplier.current); } else {
_pos_end = _pos;
timerelative.end = timerelative.start;
} }
return pos = {begin:_pos ,end:_pos_end}; return timerelative
}
var positionOnTimeline = function(the_interval, timerelative) {
return {
begin: (timerelative.start - interval.base) * (config.nav.interval_width / config.nav.multiplier.current),
end: (timerelative.end - interval.base) * (config.nav.interval_width / config.nav.multiplier.current)
};
} }
var positionMarkers = function(is_animated) { var positionMarkers = function(is_animated) {
var _type = interval.type; var _type = interval.type,
var _multiplier = interval.multiplier; _multiplier = interval.multiplier,
row = 2,
lpos = 0,
row_depth = 0,
_line_last_height_pos = 150,
_line_height = 6,
cur_mark = 0,
in_view_margin = config.width,
in_view = {
left: timenav_pos.visible.left - in_view_margin,
right: timenav_pos.visible.right + in_view_margin
};
// ROWS config.nav.minor_width = config.width;
var row = 2; //row
var lpos = 0; // last marker pos;
var row_depth = 0;
var _line_last_height_pos = 150;
var _line_height = 6;
var cur_mark = 0;
VMM.Lib.removeClass(".flag", "row1"); VMM.Lib.removeClass(".flag", "row1");
VMM.Lib.removeClass(".flag", "row2"); VMM.Lib.removeClass(".flag", "row2");
@ -577,12 +569,13 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
for(var i = 0; i < markers.length; i++) { for(var i = 0; i < markers.length; i++) {
var _line; // EVENT LENGTH var _line,
var _marker = markers[i].marker; _marker = markers[i].marker,
var _marker_flag = markers[i].flag; _marker_flag = markers[i].flag,
var _marker_line_event = markers[i].lineevent; _marker_line_event = markers[i].lineevent,
var _pos = positionOnTimeline(interval, data[i].startdate, data[i].enddate); _pos = positionOnTimeline(interval, markers[i].relative_pos),
var _pos_offset = -2; _pos_offset = -2,
is_in_view = false;
pos = _pos.begin; pos = _pos.begin;
_pos_end = _pos.end; _pos_end = _pos.end;
@ -592,11 +585,24 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
_pos_end = Math.round(_pos_end + _pos_offset); _pos_end = Math.round(_pos_end + _pos_offset);
_line = Math.round(_pos_end - pos); _line = Math.round(_pos_end - pos);
if (current_marker == i) {
timenav_pos.left = (config.width/2) - pos;
timenav_pos.visible.left = Math.abs(timenav_pos.left);
timenav_pos.visible.right = Math.abs(timenav_pos.left) + config.width;
in_view.left = timenav_pos.visible.left - in_view_margin;
in_view.right = timenav_pos.visible.right + in_view_margin;
}
if (Math.abs(pos) >= in_view.left && Math.abs(pos) <= in_view.right ) {
is_in_view = true;
}
// APPLY POSITION TO MARKER // APPLY POSITION TO MARKER
if (is_animated) { if (is_animated) {
VMM.Lib.stop(_marker); VMM.Lib.stop(_marker);
VMM.Lib.animate(_marker, config.duration/2, config.ease, {"left": pos}); VMM.Lib.animate(_marker, config.duration/2, config.ease, {"left": pos});
} else { } else {
VMM.Lib.stop(_marker);
VMM.Lib.css(_marker, "left", pos); VMM.Lib.css(_marker, "left", pos);
} }
@ -643,10 +649,11 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
// SET LAST MARKER POSITION // SET LAST MARKER POSITION
lpos = pos; lpos = pos;
if (is_animated) { if (is_animated && is_in_view) {
VMM.Lib.stop(_marker_flag); VMM.Lib.stop(_marker_flag);
VMM.Lib.animate(_marker_flag, config.duration, config.ease, {"top": config.nav.rows[row]}); VMM.Lib.animate(_marker_flag, config.duration, config.ease, {"top": config.nav.rows[row]});
} else { } else {
VMM.Lib.stop(_marker_flag);
VMM.Lib.css(_marker_flag, "top", config.nav.rows[row]); VMM.Lib.css(_marker_flag, "top", config.nav.rows[row]);
} }
@ -655,16 +662,23 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
VMM.Lib.visible(_marker, false); VMM.Lib.visible(_marker, false);
} }
if (pos > config.nav.minor_width) {
config.nav.minor_width = pos;
}
if (pos < config.nav.minor_left) {
config.nav.minor_left = pos;
} }
for(var j = 0; j < era_markers.length; j++) { }
var _line;
var era = era_markers[j];
var era_elem = era.content;
var pos = positionOnTimeline(interval, era.startdate, era.enddate);
var era_length = pos.end - pos.begin;
var era_height = 25;
for(var j = 0; j < era_markers.length; j++) {
var _line,
era = era_markers[j],
era_elem = era.content,
pos = positionOnTimeline(interval, era.relative_pos),
era_length = pos.end - pos.begin,
era_height = 25;
// APPLY POSITION TO MARKER // APPLY POSITION TO MARKER
VMM.Lib.css(era_elem, "left", pos.begin); VMM.Lib.css(era_elem, "left", pos.begin);
VMM.Lib.css(era_elem, "width", era_length); VMM.Lib.css(era_elem, "width", era_length);
@ -674,33 +688,54 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
// ANIMATE THE TIMELINE TO ADJUST TO CHANGES // ANIMATE THE TIMELINE TO ADJUST TO CHANGES
VMM.Lib.stop($timenav); VMM.Lib.stop($timenav);
VMM.Lib.animate($timenav, config.duration/2, config.ease, {"left": (config.width/2) - (cur_mark)}); VMM.Lib.animate($timenav, config.duration/2, config.ease, {"left": (config.width/2) - (cur_mark)});
//VMM.Lib.delay_animate(config.duration, $timenav, config.duration/2, config.ease, {"left": (config.width/2) - (cur_mark)});
} }
var positionInterval = function(the_intervals, is_animated, is_minor) { var positionInterval = function(the_main_element, the_intervals, is_animated, is_minor) {
var _type = interval.type,
_multiplier = interval.multiplier,
last_position = 0,
last_position_major = 0,
//in_view_margin = (config.nav.minor_width/config.nav.multiplier.current)/2,
in_view_margin = config.width,
in_view = {
left: timenav_pos.visible.left - in_view_margin,
right: timenav_pos.visible.right + in_view_margin
}
not_too_many = true;
config.nav.minor_left = 0;
if (the_intervals.length > 100) {
not_too_many = false;
trace("TOO MANY " + the_intervals.length);
}
var _type = interval.type;
var _multiplier = interval.multiplier;
var last_position = 0;
var last_position_major = 0;
for(var i = 0; i < the_intervals.length; i++) { for(var i = 0; i < the_intervals.length; i++) {
var _interval = the_intervals[i].interval_element; var _interval = the_intervals[i].interval_element,
var _interval_date = the_intervals[i].interval_date; _interval_date = the_intervals[i].interval_date,
var _interval_visible = the_intervals[i].interval_visible; _interval_visible = the_intervals[i].interval_visible,
var _pos = positionOnTimeline(interval, _interval_date); _pos = positionOnTimeline(interval, the_intervals[i].relative_pos),
var pos = _pos.begin; pos = _pos.begin,
var is_visible = true; _animation = the_intervals[i].animation,
var pos_offset = 50; is_visible = true,
is_in_view = false,
pos_offset = 50;
// APPLY POSITION TO MARKER
if (is_animated) { _animation.pos = pos;
VMM.Lib.animate(_interval, config.duration/2, config.ease, {"left": pos}); _animation.animate = false;
} else {
VMM.Lib.css(_interval, "left", pos); if (Math.abs(pos) >= in_view.left && Math.abs(pos) <= in_view.right ) {
is_in_view = true;
} }
if (true) {
// CONDENSE WHAT IS DISPLAYED // CONDENSE WHAT IS DISPLAYED
if (config.nav.multiplier.current > 16 && is_minor) { if (config.nav.multiplier.current > 16 && is_minor) {
is_visible = false; is_visible = false;
@ -722,23 +757,45 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
} }
if (is_visible) {
if (the_intervals[i].is_detached) {
VMM.Lib.append(the_main_element, _interval);
the_intervals[i].is_detached = false;
}
} else {
the_intervals[i].is_detached = true;
VMM.Lib.detach(_interval);
}
if (_interval_visible) { if (_interval_visible) {
if (!is_visible) { if (!is_visible) {
if (is_animated) { _animation.opacity = "0";
VMM.Lib.animate(_interval, config.duration*2, config.ease, {"opacity": 0}); if (is_animated && not_too_many) {
} else { _animation.animate = true;
VMM.Lib.css(_interval, "opacity", 0);
} }
the_intervals[i].interval_visible = false; the_intervals[i].interval_visible = false;
} else {
_animation.opacity = "100";
if (is_animated && is_in_view) {
_animation.animate = true;
}
} }
} else { } else {
_animation.opacity = "100";
if (is_visible) { if (is_visible) {
if (is_animated) { if (is_animated && not_too_many) {
VMM.Lib.animate(_interval, config.duration*2, config.ease, {"opacity": 100}); _animation.animate = true;
} else { } else {
VMM.Lib.css(_interval, "opacity", 100); if (is_animated && is_in_view) {
_animation.animate = true;
}
} }
the_intervals[i].interval_visible = true; the_intervals[i].interval_visible = true;
} else {
if (is_animated && not_too_many) {
_animation.animate = true;
}
} }
} }
@ -748,29 +805,57 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
config.nav.minor_width = pos; config.nav.minor_width = pos;
} }
if (pos < config.nav.minor_left) {
config.nav.minor_left = pos;
trace("MINOR " + pos);
}
} }
VMM.Lib.css($timeintervalminor_minor, "left", -(config.width/2)); if (_animation.animate) {
VMM.Lib.width($timeintervalminor_minor, (config.nav.minor_width)+(config.width) ); VMM.Lib.animate(_interval, config.duration/2, config.ease, {opacity: _animation.opacity, left: _animation.pos});
} else {
VMM.Lib.css(_interval, "opacity", _animation.opacity);
VMM.Lib.css(_interval, "left", pos);
}
}
VMM.Lib.css($timeintervalminor_minor, "left", config.nav.minor_left - (config.width)/2);
VMM.Lib.width($timeintervalminor_minor, (config.nav.minor_width)+(config.width) + Math.abs(config.nav.minor_left) );
//trace((config.nav.minor_width/config.nav.multiplier.current)/2)
/*
for(var k = 0; k < the_intervals.length; k++) {
var _animation = the_intervals[k].animation;
if (_animation.animate) {
var _interval = the_intervals[k].interval_element;
VMM.Lib.animate(_interval, config.duration/2, config.ease, {opacity: _animation.opacity, left: _animation.pos}, "interval_que");
}
}
*/
} }
var createIntervalElements = function(_interval, _array, _element_parent) { var createIntervalElements = function(_interval, _array, _element_parent) {
var inc_time = 0; var inc_time = 0,
var _first_run = true; _first_run = true,
var _last_pos = 0; _last_pos = 0,
var _largest_pos = 0; _largest_pos = 0;
VMM.attachElement(_element_parent, ""); VMM.attachElement(_element_parent, "");
_interval.date = new Date(data[0].startdate.getFullYear(), 0, 1, 0,0,0); _interval.date = new Date(data[0].startdate.getFullYear(), 0, 1, 0,0,0);
for(var i = 0; i < Math.ceil(_interval.number) + 1; i++) { for(var i = 0; i < Math.ceil(_interval.number) + 1; i++) {
var _idd; var _idd,
var _pos; _pos,
var pos; pos,
var _element = VMM.appendAndGetElement(_element_parent, "<div>", _interval.classname); _date,
var _date; _visible = false,
var _visible = false; _relative_pos,
_element = VMM.appendAndGetElement(_element_parent, "<div>", _interval.classname);
if (_interval.type == "eon") { if (_interval.type == "eon") {
if (_first_run) { if (_first_run) {
@ -861,8 +946,11 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
_first_run = false; _first_run = false;
_pos = positionOnTimeline(_interval, _interval.date); _relative_pos = positionRelative(interval, _interval.date);
pos = _pos.begin;
//_pos = positionOnTimeline(_interval, _interval.date);
//pos = _pos.begin;
pos = _relative_pos.begin;
VMM.appendElement(_element, _idd); VMM.appendElement(_element, _idd);
@ -881,7 +969,15 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
interval_element: _element, interval_element: _element,
interval_date: _date, interval_date: _date,
interval_visible: _visible, interval_visible: _visible,
type: _interval.interval_type type: _interval.interval_type,
relative_pos: _relative_pos,
is_detached: false,
animation: {
animate: false,
pos: "",
opacity: "100"
}
}; };
_array.push(_obj); _array.push(_obj);
@ -889,7 +985,8 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
VMM.Lib.width($timeintervalminor_minor, _largest_pos); VMM.Lib.width($timeintervalminor_minor, _largest_pos);
positionInterval(_array); positionInterval(_element_parent, _array);
} }
@ -917,8 +1014,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
buildMarkers(); buildMarkers();
calculateMultiplier(); calculateMultiplier();
positionMarkers(); positionMarkers();
positionInterval(interval_array, false, true);
positionInterval(interval_major_array);
positionInterval($timeinterval, interval_array, false, true);
positionInterval($timeintervalmajor, interval_major_array);
//reSize(true); //reSize(true);
if (config.start_page) { if (config.start_page) {
@ -1040,15 +1139,16 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
var buildMarkers = function() { var buildMarkers = function() {
var row = 2; //row var row = 2,
var lpos = 0; // last marker pos; lpos = 0,
var row_depth = 0; row_depth = 0;
markers = []; markers = [];
era_markers = []; era_markers = [];
for(var i = 0; i < data.length; i++) { for(var i = 0; i < data.length; i++) {
var _marker, _marker_flag, _marker_content, _marker_dot, _marker_line, _marker_line_event, _marker_title = ""; var _marker, _marker_flag, _marker_content, _marker_dot, _marker_line, _marker_line_event, _marker_title = "", has_title = false;
_marker = VMM.appendAndGetElement($content, "<div>", "marker"); _marker = VMM.appendAndGetElement($content, "<div>", "marker");
_marker_flag = VMM.appendAndGetElement(_marker, "<div>", "flag"); _marker_flag = VMM.appendAndGetElement(_marker, "<div>", "flag");
@ -1056,30 +1156,50 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
_marker_dot = VMM.appendAndGetElement(_marker, "<div>", "dot"); _marker_dot = VMM.appendAndGetElement(_marker, "<div>", "dot");
_marker_line = VMM.appendAndGetElement(_marker, "<div>", "line"); _marker_line = VMM.appendAndGetElement(_marker, "<div>", "line");
_marker_line_event = VMM.appendAndGetElement(_marker_line, "<div>", "event-line"); _marker_line_event = VMM.appendAndGetElement(_marker_line, "<div>", "event-line");
_marker_relative_pos = positionRelative(interval, data[i].startdate, data[i].enddate);
_marker_thumb = "";
// THUMBNAIL // THUMBNAIL
if (data[i].asset != null && data[i].asset != "") { if (data[i].asset != null && data[i].asset != "") {
VMM.appendElement(_marker_content, VMM.MediaElement.thumbnail(data[i].asset, 24, 24)); VMM.appendElement(_marker_content, VMM.MediaElement.thumbnail(data[i].asset, 24, 24, data[i].uniqueid));
} else { } else {
//VMM.appendElement(_marker_content, "<div class='thumbnail thumb-plaintext'></div>");
VMM.appendElement(_marker_content, "<div style='margin-right:7px;height:50px;width:2px;float:left;'></div>"); VMM.appendElement(_marker_content, "<div style='margin-right:7px;height:50px;width:2px;float:left;'></div>");
} }
// ADD DATE AND TITLE // ADD DATE AND TITLE
if (data[i].title != " ") { if (data[i].title == "" || data[i].title == " " ) {
_marker_title = VMM.Util.unlinkify(data[i].title); trace("TITLE NOTHING")
if (typeof data[i].slug != 'undefined' && data[i].slug != "") {
trace("SLUG")
_marker_title = VMM.Util.untagify(data[i].slug);
has_title = true;
} else { } else {
if (typeof data[i].slug != 'undefined') { var m = VMM.MediaType(data[i].asset.media);
_marker_title = VMM.Util.unlinkify(data[i].slug); if (m.type == "quote" || m.type == "unknown") {
_marker_title = VMM.Util.untagify(m.id);
has_title = true;
} else if (m.type == "twitter") {
has_title = false;
VMM.appendElement(_marker_content, "<h3 id='text_thumb_" + m.id + "'>" + _marker_title + "</h3>");
} else { } else {
has_title = false;
}
}
} else if (data[i].title != "" || data[i].title != " ") {
trace(data[i].title)
_marker_title = VMM.Util.untagify(data[i].title);
has_title = true;
} else {
trace("TITLE SLUG NOT FOUND " + data[i].slug)
} }
if (has_title) {
VMM.appendElement(_marker_content, "<h3>" + _marker_title + "</h3>");
} }
VMM.appendElement(_marker_content, "<h3>" + _marker_title + "</h3><h4>" + data[i].date + "</h4>");
// ADD ID // ADD ID
VMM.Lib.attr(_marker, "id", (data[i].uniqueid).toString()); VMM.Lib.attr(_marker, "id", ( "marker_" + data[i].uniqueid).toString() );
// MARKER CLICK // MARKER CLICK
VMM.bindEvent(_marker_flag, onMarkerClick, "", {number: i}); VMM.bindEvent(_marker_flag, onMarkerClick, "", {number: i});
@ -1090,16 +1210,22 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
flag: _marker_flag, flag: _marker_flag,
lineevent: _marker_line_event, lineevent: _marker_line_event,
type: "marker", type: "marker",
relative_pos: _marker_relative_pos,
tag: data[i].tag tag: data[i].tag
}; };
if (data[i].type == "start") { if (data[i].type == "start") {
trace("BUILD MARKER HAS START PAGE") trace("BUILD MARKER HAS START PAGE");
config.start_page = true; config.start_page = true;
_marker_obj.type = "start"; _marker_obj.type = "start";
} }
if (data[i].type == "storify") {
_marker_obj.type = "storify";
}
if (data[i].tag) { if (data[i].tag) {
tags.push(data[i].tag); tags.push(data[i].tag);
} }
@ -1133,9 +1259,12 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
enddate: VMM.Util.parseDate(eras[j].endDate), enddate: VMM.Util.parseDate(eras[j].endDate),
title: eras[j].headline, title: eras[j].headline,
uniqueid: VMM.Util.unique_ID(4), uniqueid: VMM.Util.unique_ID(4),
color: eras[j].color color: eras[j].color,
relative_pos: ""
}; };
era.relative_pos = positionRelative(interval, eras[j].startdate, eras[j].enddate);
VMM.Lib.attr(era.content, "id", era.uniqueid); VMM.Lib.attr(era.content, "id", era.uniqueid);
VMM.Lib.css(era.content, "background", era.color); VMM.Lib.css(era.content, "background", era.color);
VMM.appendElement(era.content, "<h3>" + VMM.Util.unlinkify(era.title) + "</h3>"); VMM.appendElement(era.content, "<h3>" + VMM.Util.unlinkify(era.title) + "</h3>");

Write Preview
Loading…
Cancel
Save