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.
 
 
 
 

247 lines
5.9 KiB

/* DRAG SLIDER
================================================== */
if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
VMM.DragSlider = function() {
var drag = {
element: "",
element_move: "",
constraint: "",
sliding: false,
pagex: {
start: 0,
end: 0
},
pagey: {
start: 0,
end: 0
},
left: {
start: 0,
end: 0
},
time: {
start: 0,
end: 0
},
touch: false,
ease: "easeOutExpo"
},
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"
},
dragslider = this,
is_sticky = false;
/* PUBLIC FUNCTIONS
================================================== */
this.createPanel = function(drag_object, move_object, constraint, touch, sticky) {
drag.element = drag_object;
drag.element_move = move_object;
//dragslider = drag_object;
if ( sticky != null && sticky != "") {
is_sticky = sticky;
}
if ( constraint != null && constraint != "") {
drag.constraint = constraint;
} else {
drag.constraint = false;
}
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;
}
this.cancelSlide = function(e) {
VMM.unbindEvent(drag.element, onDragMove, dragevent.move);
return true;
}
/* PRIVATE FUNCTIONS
================================================== */
function makeDraggable(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});
}
function onDragLeave(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation();
if (drag.sliding) {
drag.sliding = false;
dragEnd(e.data.element, e.data.delement, e);
return false;
} else {
return true;
}
}
function onDragStart(e) {
dragStart(e.data.element, e.data.delement, e);
if (!drag.touch) {
e.preventDefault();
}
//e.stopPropagation();
return true;
}
function onDragEnd(e) {
if (!drag.touch) {
e.preventDefault();
}
//e.stopPropagation();
if (drag.sliding) {
drag.sliding = false;
dragEnd(e.data.element, e.data.delement, e);
return false;
} else {
return true;
}
}
function onDragMove(e) {
dragMove(e.data.element, e);
}
function dragStart(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;
drag.pagey.start = e.originalEvent.touches[0].screenY;
} else {
drag.pagex.start = e.pageX;
drag.pagey.start = e.pageY;
}
drag.left.start = getLeft(elem);
drag.time.start = new Date().getTime();
VMM.Lib.stop(elem);
VMM.bindEvent(delem, onDragMove, dragevent.move, {element: elem});
}
function dragEnd(elem, delem, e) {
VMM.unbindEvent(delem, onDragMove, dragevent.move);
dragMomentum(elem, e);
}
function dragMove(elem, e) {
var drag_to, drag_to_y;
drag.sliding = true;
if (drag.touch) {
drag.pagex.end = e.originalEvent.touches[0].screenX;
drag.pagey.end = e.originalEvent.touches[0].screenY;
} else {
drag.pagex.end = e.pageX;
drag.pagey.end = e.pageY;
}
drag.left.end = getLeft(elem);
drag_to = -(drag.pagex.start - drag.pagex.end - drag.left.start);
if (Math.abs(drag.pagey.start) - Math.abs(drag.pagey.end) > 10) {
trace("SCROLLING Y")
trace(Math.abs(drag.pagey.start) - Math.abs(drag.pagey.end));
}
if (Math.abs(drag_to - drag.left.start) > 10) {
VMM.Lib.css(elem, 'left', drag_to);
e.preventDefault();
e.stopPropagation();
}
}
function dragMomentum(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
},
multiplier = 3000;
if (drag.touch) {
multiplier = 6000;
}
drag_info.change.x = multiplier * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
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);
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(dragslider, "DRAGUPDATE", [drag_info]);
if (!is_sticky) {
if (drag_info.time > 0) {
if (drag.touch) {
VMM.Lib.animate(elem, drag_info.time, "easeOutCirc", {"left": drag_info.left});
} else {
VMM.Lib.animate(elem, drag_info.time, drag.ease, {"left": drag_info.left});
}
}
}
}
function getLeft(elem) {
return parseInt(VMM.Lib.css(elem, 'left').substring(0, VMM.Lib.css(elem, 'left').length - 2), 10);
}
}
}