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

Rewrote DragSlider. Much, much better now. Includes scrolling and constraints

pull/177/head
Zach Wise 13 years ago
parent
f37b8cc5d4
commit
cadeaa9dc1
2 changed files with 196 additions and 123 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. 270
      source/js/Slider/VMM.DragSlider.js
  2. 49
      source/js/VMM.Timeline.TimeNav.js

270
source/js/Slider/VMM.DragSlider.js
Unescape View File

@ -3,145 +3,201 @@
if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') { if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
// VMM.DragSlider.createSlidePanel(drag_object, move_object, w, padding, sticky); // VMM.DragSlider.createSlidePanel(drag_object, move_object, w, padding, sticky);
// VMM.DragSlider.cancelSlide(); // VMM.DragSlider.cancelSlide();
VMM.DragSlider = {
createPanel: function(drag_object, move_object, w, padding, sticky) {
VMM.DragSlider = function() {
var drag = {
element: "",
element_move: "",
constraint: "",
sliding: false,
pagex: {
start: 0,
end: 0
},
left: {
start: 0,
end: 0
},
time: {
start: 0,
end: 0
},
touch: false
},
dragevent = {
down: "mousedown",
up: "mouseup",
leave: "mouseleave",
move: "mousemove"
},
mousedrag = {
down: "mousedown",
up: "mouseup",
leave: "mouseleave",
move: "mousemove"
},
touchdrag = {
down: "touchstart",
up: "touchend",
leave: "mouseleave",
move: "touchmove"
};
this.createPanel = function(drag_object, move_object, constraint, touch) {
drag.element = drag_object;
drag.element_move = move_object;
var x = padding; if ( constraint != null && constraint != "") {
VMM.DragSlider.width = w; drag.constraint = constraint;
VMM.DragSlider.makeDraggable(drag_object, move_object);
VMM.DragSlider.drag_elem = drag_object;
/*
if (sticky != null && sticky != "") {
VMM.TouchSlider.sticky = sticky;
} else { } else {
VMM.TouchSlider.sticky = false; drag.constraint = false;
} }
*/ if ( touch) {
VMM.DragSlider.sticky = sticky; drag.touch = touch;
}, } else {
makeDraggable: function(drag_object, move_object) { drag.touch = false;
VMM.bindEvent(drag_object, VMM.DragSlider.onDragStart, "mousedown", {element: move_object, delement: drag_object}); }
//VMM.bindEvent(drag_object, VMM.DragSlider.onDragMove, "mousemove", {element: move_object}); trace("TOUCH" + drag.touch);
VMM.bindEvent(drag_object, VMM.DragSlider.onDragEnd, "mouseup", {element: move_object, delement: drag_object}); if (drag.touch) {
VMM.bindEvent(drag_object, VMM.DragSlider.onDragLeave, "mouseleave", {element: move_object, delement: drag_object}); dragevent = touchdrag;
}, } else {
cancelSlide: function(e) { dragevent = mousedrag;
VMM.unbindEvent(VMM.DragSlider.drag_elem, VMM.DragSlider.onDragMove, "mousemove"); }
//VMM.DragSlider.drag_elem.preventDefault();
//VMM.DragSlider.drag_elem.stopPropagation(); makeDraggable(drag.element, drag.element_move);
}
this.updateConstraint = function(constraint) {
trace("updateConstraint");
drag.constraint = constraint;
}
var makeDraggable = function(drag_object, move_object) {
VMM.bindEvent(drag_object, onDragStart, dragevent.down, {element: move_object, delement: drag_object});
VMM.bindEvent(drag_object, onDragEnd, dragevent.up, {element: move_object, delement: drag_object});
VMM.bindEvent(drag_object, onDragLeave, dragevent.leave, {element: move_object, delement: drag_object});
}
this.cancelSlide = function(e) {
VMM.unbindEvent(drag.element, onDragMove, dragevent.move);
return true; return true;
}, }
onDragLeave: function(e) { var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
VMM.unbindEvent(e.data.delement, VMM.DragSlider.onDragMove, "mousemove");
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return true; if (drag.sliding) {
}, drag.sliding = false;
onDragStart: function(e) { dragEnd(e.data.element, e.data.delement, e);
VMM.DragSlider.dragStart(e.data.element, e.data.delement, e); return false;
} else {
return true;
}
}
var onDragStart = function(e) {
dragStart(e.data.element, e.data.delement, e);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return true; return true;
}, }
onDragEnd: function(e) {
var onDragEnd = function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) {
if (VMM.DragSlider.sliding) { drag.sliding = false;
VMM.DragSlider.sliding = false; dragEnd(e.data.element, e.data.delement, e);
VMM.DragSlider.dragEnd(e.data.element, e.data.delement, e);
return false; return false;
} else { } else {
return true; return true;
} }
}
}, var onDragMove = function(e) {
onDragMove: function(e) { dragMove(e.data.element, e);
VMM.DragSlider.dragMove(e.data.element, e);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return false; return false;
}, }
dragStart: function(elem, delem, e) { var dragStart = function(elem, delem, e) {
if (drag.touch) {
VMM.DragSlider.startX = e.pageX; trace("IS TOUCH")
VMM.Lib.css(elem, '-webkit-transition-duration', '0');
VMM.DragSlider.startLeft = VMM.DragSlider.getLeft(elem); drag.pagex.start = e.originalEvent.touches[0].screenX;
VMM.DragSlider.dragStartTime = new Date().getTime(); } else {
VMM.DragSlider.dragWidth = VMM.Lib.width(delem); drag.pagex.start = e.pageX;
}
// CANCEL CURRENT ANIMATION IF ANIMATING drag.left.start = getLeft(elem);
var _newx = Math.round(VMM.DragSlider.startX - e.pageX - VMM.DragSlider.startLeft); drag.time.start = new Date().getTime();
VMM.Lib.stop(elem); VMM.Lib.stop(elem);
VMM.bindEvent(delem, VMM.DragSlider.onDragMove, "mousemove", {element: elem}); VMM.bindEvent(delem, onDragMove, dragevent.move, {element: elem});
}, }
dragEnd: function(elem, delem, e) { var dragEnd = function(elem, delem, e) {
VMM.unbindEvent(delem, VMM.DragSlider.onDragMove, "mousemove"); VMM.unbindEvent(delem, onDragMove, dragevent.move);
//VMM.DragSlider.dragMomentum(elem, e); dragMomentum(elem, e);
if (VMM.DragSlider.getLeft(elem) > 0) { }
//(VMM.DragSlider.dragWidth/2) var dragMove = function(elem, e) {
//This means they dragged to the right past the first item drag.sliding = true;
//VMM.Lib.animate(elem, 1000, "linear", {"left": 0}); if (drag.touch) {
drag.pagex.end = e.originalEvent.touches[0].screenX;
//VMM.fireEvent(elem, "DRAGUPDATE", [0]);
} else { } else {
//This means they were just dragging within the bounds of the grid and we just need to handle the momentum and snap to the grid. drag.pagex.end = e.pageX;
VMM.DragSlider.dragMomentum(elem, e);
}
},
dragMove: function(elem, e) {
if (!VMM.DragSlider.sliding) {
//elem.parent().addClass('sliding');
} }
drag.left.end = getLeft(elem);
VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start));
}
var dragMomentum = function(elem, e) {
var drag_info = {
left: drag.left.end,
left_adjust: 0,
change: {
x: 0
},
time: (new Date().getTime() - drag.time.start) * 10,
time_adjust: (new Date().getTime() - drag.time.start) * 10
},
ease = "easeOutExpo";
drag_info.change.x = 6000 * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
VMM.DragSlider.sliding = true;
if (VMM.DragSlider.startX > e.pageX) {
//Sliding to the left
VMM.Lib.css(elem, 'left', -(VMM.DragSlider.startX - e.pageX - VMM.DragSlider.startLeft));
VMM.DragSlider.slidingLeft = true;
} else {
//Sliding to the right
var left = (e.pageX - VMM.DragSlider.startX + VMM.DragSlider.startLeft);
VMM.Lib.css(elem, 'left', -(VMM.DragSlider.startX - e.pageX - VMM.DragSlider.startLeft));
VMM.DragSlider.slidingLeft = false;
}
},
dragMomentum: function(elem, e) {
var slideAdjust = (new Date().getTime() - VMM.DragSlider.dragStartTime) * 10;
var timeAdjust = slideAdjust;
var left = VMM.DragSlider.getLeft(elem);
var changeX = 6000 * (Math.abs(VMM.DragSlider.startLeft) - Math.abs(left));
//var changeX = 6000 * (VMM.DragSlider.startLeft - left);
slideAdjust = Math.round(changeX / slideAdjust);
var newLeft = left + slideAdjust; drag_info.left_adjust = Math.round(drag_info.change.x / drag_info.time);
drag_info.left = Math.min(drag_info.left + drag_info.left_adjust);
var t = newLeft % VMM.DragSlider.width; if (drag.constraint) {
//left: Math.min(0, newLeft), if (drag_info.left > drag.constraint.left) {
var _r_object = { drag_info.left = drag.constraint.left;
left: Math.min(newLeft), if (drag_info.time > 5000) {
time: timeAdjust drag_info.time = 5000;
}
} else if (drag_info.left < drag.constraint.right) {
drag_info.left = drag.constraint.right;
if (drag_info.time > 5000) {
drag_info.time = 5000;
}
}
} }
VMM.fireEvent(elem, "DRAGUPDATE", [_r_object]); VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]);
var _ease = "easeOutExpo";
if (_r_object.time > 0) {
VMM.Lib.animate(elem, _r_object.time, _ease, {"left": _r_object.left});
};
if (drag_info.time > 0) {
if (drag.touch) {
VMM.Lib.css(elem, '-webkit-transition-property', 'left');
VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time);
VMM.Lib.css(elem, 'left', drag_info.left);
} else {
VMM.Lib.animate(elem, drag_info.time, ease, {"left": drag_info.left});
}
}
//VMM.DragSlider.startX = null; }
}, var getLeft = function(elem) {
getLeft: function(elem) {
return parseInt(VMM.Lib.css(elem, 'left').substring(0, VMM.Lib.css(elem, 'left').length - 2), 10); return parseInt(VMM.Lib.css(elem, 'left').substring(0, VMM.Lib.css(elem, 'left').length - 2), 10);
} }
} }
} }

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

@ -32,7 +32,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
}, },
$timenav, $content, $time, $timeintervalminor, $timeinterval, $timeintervalmajor, $timebackground, $timenav, $content, $time, $timeintervalminor, $timeinterval, $timeintervalmajor, $timebackground,
$timeintervalbackground, $timenavline, $timenavindicator, $timeintervalminor_minor, $toolbar, $zoomin, $zoomout; $timeintervalbackground, $timenavline, $timenavindicator, $timeintervalminor_minor, $toolbar, $zoomin, $zoomout, $dragslide;
@ -124,8 +124,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
}; };
function reSize(firstrun) { function reSize(firstrun) {
config.nav.contstraint.left = (config.width/2); config.nav.constraint.left = (config.width/2);
config.nav.contstraint.right = config.nav.contstraint.right_min - (config.width/2); config.nav.constraint.right = config.nav.constraint.right_min - (config.width/2);
$dragslide.updateConstraint(config.nav.constraint);
VMM.Lib.css($timenavline, "left", Math.round(config.width/2)+2); VMM.Lib.css($timenavline, "left", Math.round(config.width/2)+2);
VMM.Lib.css($timenavindicator, "left", Math.round(config.width/2)-8); VMM.Lib.css($timenavindicator, "left", Math.round(config.width/2)-8);
goToMarker(config.current_slide, config.ease, config.duration, true, firstrun); goToMarker(config.current_slide, config.ease, config.duration, true, firstrun);
@ -136,7 +138,8 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
function onZoomIn() { function onZoomIn() {
VMM.DragSlider.cancelSlide();
$dragslide.cancelSlide();
if (config.nav.multiplier.current > config.nav.multiplier.min) { if (config.nav.multiplier.current > config.nav.multiplier.min) {
if (config.nav.multiplier.current <= 1) { if (config.nav.multiplier.current <= 1) {
config.nav.multiplier.current = config.nav.multiplier.current - .25; config.nav.multiplier.current = config.nav.multiplier.current - .25;
@ -160,7 +163,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
function onZoomOut() { function onZoomOut() {
VMM.DragSlider.cancelSlide(); $dragslide.cancelSlide();
if (config.nav.multiplier.current < config.nav.multiplier.max) { if (config.nav.multiplier.current < config.nav.multiplier.max) {
if (config.nav.multiplier.current > 4) { if (config.nav.multiplier.current > 4) {
if (config.nav.multiplier.current > 16) { if (config.nav.multiplier.current > 16) {
@ -180,7 +183,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
function onBackHome(e) { function onBackHome(e) {
VMM.DragSlider.cancelSlide(); $dragslide.cancelSlide();
goToMarker(0); goToMarker(0);
upDate(); upDate();
} }
@ -212,10 +215,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
// Stop from scrolling too far // Stop from scrolling too far
scroll_to = VMM.Lib.position($timenav).left + delta; scroll_to = VMM.Lib.position($timenav).left + delta;
if (scroll_to > config.nav.contstraint.left) { if (scroll_to > config.nav.constraint.left) {
scroll_to = config.width/2; scroll_to = config.width/2;
} else if (scroll_to < config.nav.contstraint.right) { } else if (scroll_to < config.nav.constraint.right) {
scroll_to = config.nav.contstraint.right; scroll_to = config.nav.constraint.right;
} }
VMM.Lib.stop($timenav); VMM.Lib.stop($timenav);
@ -229,12 +232,15 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
positionEras(true); positionEras(true);
positionInterval($timeinterval, interval_array, true, true); positionInterval($timeinterval, interval_array, true, true);
positionInterval($timeintervalmajor, interval_major_array, true); positionInterval($timeintervalmajor, interval_major_array, true);
config.nav.constraint.left = (config.width/2);
config.nav.constraint.right = config.nav.constraint.right_min - (config.width/2);
$dragslide.updateConstraint(config.nav.constraint);
}; };
/* MARKER EVENTS /* MARKER EVENTS
================================================== */ ================================================== */
function onMarkerClick(e) { function onMarkerClick(e) {
VMM.DragSlider.cancelSlide(); $dragslide.cancelSlide();
goToMarker(e.data.number); goToMarker(e.data.number);
upDate(); upDate();
}; };
@ -985,13 +991,18 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
if (pos > config.nav.minor_width) { if (pos > config.nav.minor_width) {
config.nav.minor_width = pos; config.nav.minor_width = pos;
//config.nav.constraint.right_min = -pos;
//config.nav.constraint.right = config.nav.constraint.right_min + (config.width/2);
} }
if (pos < config.nav.minor_left) { if (pos < config.nav.minor_left) {
config.nav.minor_left = pos; config.nav.minor_left = pos;
config.nav.contstraint.right_min = pos; //config.nav.constraint.right_min = pos;
config.nav.contstraint.right = config.nav.contstraint.right_min - (config.width/2); //config.nav.constraint.right = config.nav.constraint.right_min + (config.width/2);
} }
} }
@ -1004,6 +1015,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
} }
config.nav.constraint.right_min = -(config.nav.minor_width)+(config.width);
config.nav.constraint.right = config.nav.constraint.right_min + (config.width/2);
VMM.Lib.css($timeintervalminor_minor, "left", config.nav.minor_left - (config.width)/2); 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) ); VMM.Lib.width($timeintervalminor_minor, (config.nav.minor_width)+(config.width) + Math.abs(config.nav.minor_left) );
@ -1276,15 +1291,17 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
$toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"}) $toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"})
// MAKE TIMELINE TOUCHABLE // MAKE TIMELINE DRAGGABLE/TOUCHABLE
$dragslide = new VMM.DragSlider;
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") { if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
VMM.TouchSlider.createPanel($timebackground, $timenav, config.width, config.spacing, false); $dragslide.createPanel(layout, $timenav, config.nav.constraint, true);
VMM.bindEvent($timenav, onTouchUpdate, "TOUCHUPDATE");
} else { } else {
VMM.DragSlider.createPanel(layout, $timenav, config.width, config.spacing, false); $dragslide.createPanel(layout, $timenav, config.nav.constraint);
} }
VMM.bindEvent(".zoom-in", onZoomIn, "click"); VMM.bindEvent(".zoom-in", onZoomIn, "click");
VMM.bindEvent(".zoom-out", onZoomOut, "click"); VMM.bindEvent(".zoom-out", onZoomOut, "click");
VMM.bindEvent(layout, onMouseScroll, 'DOMMouseScroll'); VMM.bindEvent(layout, onMouseScroll, 'DOMMouseScroll');

Write Preview
Loading…
Cancel
Save