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. 258
      source/js/Slider/VMM.DragSlider.js
  2. 49
      source/js/VMM.Timeline.TimeNav.js

258
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) {
drag.touch = touch;
} else {
drag.touch = false;
}
trace("TOUCH" + drag.touch);
if (drag.touch) {
dragevent = touchdrag;
} else {
dragevent = mousedrag;
} }
*/
VMM.DragSlider.sticky = sticky;
},
makeDraggable: function(drag_object, move_object) {
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});
VMM.bindEvent(drag_object, VMM.DragSlider.onDragEnd, "mouseup", {element: move_object, delement: drag_object});
VMM.bindEvent(drag_object, VMM.DragSlider.onDragLeave, "mouseleave", {element: move_object, delement: drag_object});
},
cancelSlide: function(e) {
VMM.unbindEvent(VMM.DragSlider.drag_elem, VMM.DragSlider.onDragMove, "mousemove");
//VMM.DragSlider.drag_elem.preventDefault();
//VMM.DragSlider.drag_elem.stopPropagation();
return true;
},
onDragLeave: function(e) {
VMM.unbindEvent(e.data.delement, VMM.DragSlider.onDragMove, "mousemove"); 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;
}
var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) {
drag.sliding = false;
dragEnd(e.data.element, e.data.delement, e);
return false;
} else {
return true; return true;
}, }
onDragStart: function(e) { }
VMM.DragSlider.dragStart(e.data.element, e.data.delement, e);
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) {
VMM.unbindEvent(delem, VMM.DragSlider.onDragMove, "mousemove");
//VMM.DragSlider.dragMomentum(elem, e);
if (VMM.DragSlider.getLeft(elem) > 0) {
//(VMM.DragSlider.dragWidth/2)
//This means they dragged to the right past the first item
//VMM.Lib.animate(elem, 1000, "linear", {"left": 0});
//VMM.fireEvent(elem, "DRAGUPDATE", [0]);
} 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.
VMM.DragSlider.dragMomentum(elem, e);
} }
}, var dragEnd = function(elem, delem, e) {
dragMove: function(elem, e) { VMM.unbindEvent(delem, onDragMove, dragevent.move);
if (!VMM.DragSlider.sliding) { dragMomentum(elem, e);
//elem.parent().addClass('sliding');
} }
var dragMove = function(elem, e) {
VMM.DragSlider.sliding = true; drag.sliding = true;
if (VMM.DragSlider.startX > e.pageX) { if (drag.touch) {
//Sliding to the left drag.pagex.end = e.originalEvent.touches[0].screenX;
VMM.Lib.css(elem, 'left', -(VMM.DragSlider.startX - e.pageX - VMM.DragSlider.startLeft));
VMM.DragSlider.slidingLeft = true;
} else { } else {
//Sliding to the right drag.pagex.end = e.pageX;
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;
} }
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
}, },
dragMomentum: function(elem, e) { ease = "easeOutExpo";
var slideAdjust = (new Date().getTime() - VMM.DragSlider.dragStartTime) * 10;
var timeAdjust = slideAdjust; drag_info.change.x = 6000 * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
var left = VMM.DragSlider.getLeft(elem);
var changeX = 6000 * (Math.abs(VMM.DragSlider.startLeft) - Math.abs(left)); drag_info.left_adjust = Math.round(drag_info.change.x / drag_info.time);
//var changeX = 6000 * (VMM.DragSlider.startLeft - left);
slideAdjust = Math.round(changeX / slideAdjust);
var newLeft = left + slideAdjust; 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);
//VMM.DragSlider.startX = null; } else {
}, VMM.Lib.animate(elem, drag_info.time, ease, {"left": drag_info.left});
getLeft: function(elem) { }
return parseInt(VMM.Lib.css(elem, 'left').substring(0, VMM.Lib.css(elem, 'left').length - 2), 10);
} }
} }
var getLeft = function(elem) {
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);
} }
} }
@ -1005,6 +1016,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) );
//trace((config.nav.minor_width/config.nav.multiplier.current)/2) //trace((config.nav.minor_width/config.nav.multiplier.current)/2)
@ -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