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 12 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
Split 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') {
// VMM.DragSlider.createSlidePanel(drag_object, move_object, w, padding, sticky);
// 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;
VMM.DragSlider.width = w;
VMM.DragSlider.makeDraggable(drag_object, move_object);
VMM.DragSlider.drag_elem = drag_object;
/*
if (sticky != null && sticky != "") {
VMM.TouchSlider.sticky = sticky;
if ( constraint != null && constraint != "") {
drag.constraint = constraint;
} else {
VMM.TouchSlider.sticky = false;
drag.constraint = false;
}
*/
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();
if ( touch) {
drag.touch = touch;
} else {
drag.touch = false;
}
trace("TOUCH" + drag.touch);
if (drag.touch) {
dragevent = touchdrag;
} else {
dragevent = mousedrag;
}
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;
},
onDragLeave: function(e) {
VMM.unbindEvent(e.data.delement, VMM.DragSlider.onDragMove, "mousemove");
}
var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
e.preventDefault();
e.stopPropagation();
return true;
},
onDragStart: function(e) {
VMM.DragSlider.dragStart(e.data.element, e.data.delement, e);
if (drag.sliding) {
drag.sliding = false;
dragEnd(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.stopPropagation();
return true;
},
onDragEnd: function(e) {
}
var onDragEnd = function(e) {
e.preventDefault();
e.stopPropagation();
if (VMM.DragSlider.sliding) {
VMM.DragSlider.sliding = false;
VMM.DragSlider.dragEnd(e.data.element, e.data.delement, e);
if (drag.sliding) {
drag.sliding = false;
dragEnd(e.data.element, e.data.delement, e);
return false;
} else {
return true;
}
},
onDragMove: function(e) {
VMM.DragSlider.dragMove(e.data.element, e);
}
var onDragMove = function(e) {
dragMove(e.data.element, e);
e.preventDefault();
e.stopPropagation();
return false;
},
dragStart: function(elem, delem, e) {
VMM.DragSlider.startX = e.pageX;
VMM.DragSlider.startLeft = VMM.DragSlider.getLeft(elem);
VMM.DragSlider.dragStartTime = new Date().getTime();
VMM.DragSlider.dragWidth = VMM.Lib.width(delem);
// CANCEL CURRENT ANIMATION IF ANIMATING
var _newx = Math.round(VMM.DragSlider.startX - e.pageX - VMM.DragSlider.startLeft);
}
var dragStart = function(elem, delem, e) {
if (drag.touch) {
trace("IS TOUCH")
VMM.Lib.css(elem, '-webkit-transition-duration', '0');
drag.pagex.start = e.originalEvent.touches[0].screenX;
} else {
drag.pagex.start = e.pageX;
}
drag.left.start = getLeft(elem);
drag.time.start = new Date().getTime();
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]);
}
var dragEnd = function(elem, delem, e) {
VMM.unbindEvent(delem, onDragMove, dragevent.move);
dragMomentum(elem, e);
}
var dragMove = function(elem, e) {
drag.sliding = true;
if (drag.touch) {
drag.pagex.end = e.originalEvent.touches[0].screenX;
} 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);
}
},
dragMove: function(elem, e) {
if (!VMM.DragSlider.sliding) {
//elem.parent().addClass('sliding');
drag.pagex.end = e.pageX;
}
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;
//left: Math.min(0, newLeft),
var _r_object = {
left: Math.min(newLeft),
time: timeAdjust
if (drag.constraint) {
if (drag_info.left > drag.constraint.left) {
drag_info.left = drag.constraint.left;
if (drag_info.time > 5000) {
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]);
var _ease = "easeOutExpo";
if (_r_object.time > 0) {
VMM.Lib.animate(elem, _r_object.time, _ease, {"left": _r_object.left});
};
VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]);
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;
},
getLeft: function(elem) {
}
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,
$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) {
config.nav.contstraint.left = (config.width/2);
config.nav.contstraint.right = config.nav.contstraint.right_min - (config.width/2);
config.nav.constraint.left = (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($timenavindicator, "left", Math.round(config.width/2)-8);
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() {
VMM.DragSlider.cancelSlide();
$dragslide.cancelSlide();
if (config.nav.multiplier.current > config.nav.multiplier.min) {
if (config.nav.multiplier.current <= 1) {
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() {
VMM.DragSlider.cancelSlide();
$dragslide.cancelSlide();
if (config.nav.multiplier.current < config.nav.multiplier.max) {
if (config.nav.multiplier.current > 4) {
if (config.nav.multiplier.current > 16) {
@ -180,7 +183,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
}
function onBackHome(e) {
VMM.DragSlider.cancelSlide();
$dragslide.cancelSlide();
goToMarker(0);
upDate();
}
@ -212,10 +215,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
// Stop from scrolling too far
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;
} else if (scroll_to < config.nav.contstraint.right) {
scroll_to = config.nav.contstraint.right;
} else if (scroll_to < config.nav.constraint.right) {
scroll_to = config.nav.constraint.right;
}
VMM.Lib.stop($timenav);
@ -229,12 +232,15 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
positionEras(true);
positionInterval($timeinterval, interval_array, true, 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
================================================== */
function onMarkerClick(e) {
VMM.DragSlider.cancelSlide();
$dragslide.cancelSlide();
goToMarker(e.data.number);
upDate();
};
@ -985,13 +991,18 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
if (pos > config.nav.minor_width) {
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) {
config.nav.minor_left = pos;
config.nav.contstraint.right_min = pos;
config.nav.contstraint.right = config.nav.contstraint.right_min - (config.width/2);
//config.nav.constraint.right_min = pos;
//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.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"})
// MAKE TIMELINE TOUCHABLE
// MAKE TIMELINE DRAGGABLE/TOUCHABLE
$dragslide = new VMM.DragSlider;
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
VMM.TouchSlider.createPanel($timebackground, $timenav, config.width, config.spacing, false);
VMM.bindEvent($timenav, onTouchUpdate, "TOUCHUPDATE");
$dragslide.createPanel(layout, $timenav, config.nav.constraint, true);
} 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-out", onZoomOut, "click");
VMM.bindEvent(layout, onMouseScroll, 'DOMMouseScroll');

Write Preview
Loading…
Cancel
Save