Browse Source

Cleanup and fix touch scrolling of Timeline and general touch device animation fixes

pull/177/head
Zach Wise 13 years ago
parent
commit
5c1d1bab17
  1. 10
      compiled/js/timeline-min.js
  2. 116
      compiled/js/timeline.js
  3. 1
      examples/model.json
  4. 27
      source/js/Core/VMM.Library.js
  5. 36
      source/js/Slider/VMM.DragSlider.js
  6. 48
      source/js/VMM.Timeline.TimeNav.js
  7. 5
      source/js/VMM.Timeline.js

10
compiled/js/timeline-min.js vendored

File diff suppressed because one or more lines are too long

116
compiled/js/timeline.js

@ -851,23 +851,20 @@ if(typeof VMM != 'undefined') {
var _tdd = Math.round((_duration/1500)*10)/10, var _tdd = Math.round((_duration/1500)*10)/10,
__duration = _tdd + 's'; __duration = _tdd + 's';
VMM.Lib.css(element, '-webkit-transition', 'all '+ __duration + ' ease'); _ease = " cubic-bezier(0.33, 0.66, 0.66, 1)";
VMM.Lib.css(element, '-moz-transition', 'all '+ __duration + ' ease'); //_ease = " ease-in-out";
VMM.Lib.css(element, '-o-transition', 'all '+ __duration + ' ease'); for (x in _att) {
VMM.Lib.css(element, '-ms-transition', 'all '+ __duration + ' ease'); if (Object.prototype.hasOwnProperty.call(_att, x)) {
VMM.Lib.css(element, 'transition', 'all '+ __duration + ' ease'); trace(x + " to " + _att[x]);
VMM.Lib.cssmultiple(element, _att); VMM.Lib.css(element, '-webkit-transition', x + ' ' + __duration + _ease);
VMM.Lib.css(element, '-moz-transition', x + ' ' + __duration + _ease);
//callback_function(); VMM.Lib.css(element, '-o-transition', x + ' ' + __duration + _ease);
/* VMM.Lib.css(element, '-ms-transition', x + ' ' + __duration + _ease);
if( typeof( jQuery ) != 'undefined' ){ VMM.Lib.css(element, 'transition', x + ' ' + __duration + _ease);
if (callback_function != null && callback_function != "") {
jQuery(element).animate(_att, {queue:false, duration:_duration, easing:_ease, complete:callback_function} );
} else {
jQuery(element).animate(_att, {queue:false, duration:_duration, easing:_ease} );
} }
} }
*/
VMM.Lib.cssmultiple(element, _att);
} else { } else {
if( typeof( jQuery ) != 'undefined' ){ if( typeof( jQuery ) != 'undefined' ){
@ -4125,7 +4122,8 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
start: 0, start: 0,
end: 0 end: 0
}, },
touch: false touch: false,
ease: "easeOutExpo"
}, },
dragevent = { dragevent = {
down: "mousedown", down: "mousedown",
@ -4188,7 +4186,9 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
var onDragLeave = function(e) { var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move); VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) { if (drag.sliding) {
drag.sliding = false; drag.sliding = false;
@ -4201,13 +4201,17 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
var onDragStart = function(e) { var onDragStart = function(e) {
dragStart(e.data.element, e.data.delement, e); dragStart(e.data.element, e.data.delement, e);
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
return true; return true;
} }
var onDragEnd = function(e) { var onDragEnd = function(e) {
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) { if (drag.sliding) {
drag.sliding = false; drag.sliding = false;
@ -4251,6 +4255,7 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
drag.left.end = getLeft(elem); drag.left.end = getLeft(elem);
VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start)); VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start));
} }
var dragMomentum = function(elem, e) { var dragMomentum = function(elem, e) {
var drag_info = { var drag_info = {
@ -4261,10 +4266,9 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
}, },
time: (new Date().getTime() - drag.time.start) * 10, time: (new Date().getTime() - drag.time.start) * 10,
time_adjust: (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)); drag_info.change.x = 3000 * (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_adjust = Math.round(drag_info.change.x / drag_info.time);
@ -4286,15 +4290,22 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]); VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]);
if (drag_info.time > 0) { if (drag_info.time > 0) {
if (drag.touch) { if (drag.touch) {
VMM.Lib.css(elem, '-webkit-transition-property', 'left'); //VMM.Lib.css(elem, '-webkit-transition-property', 'left');
VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time); //VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time);
VMM.Lib.css(elem, 'left', drag_info.left); //VMM.Lib.css(elem, 'left', drag_info.left);
//VMM.Lib.animate(elem, drag_info.time, "easeOutQuad", {"left": drag_info.left});
VMM.Lib.animate(elem, drag_info.time, "easeOutCirc", {"left": drag_info.left});
//VMM.Lib.css(elem, 'webkitTransition', '');
//VMM.Lib.css(elem, 'webkitTransition', '-webkit-transform ' + drag_info.time + 'ms cubic-bezier(0.33, 0.66, 0.66, 1)');
//VMM.Lib.css(elem, 'webkitTransform', 'translate3d(' + drag_info.left + 'px, 0, 0)');
} else { } else {
VMM.Lib.animate(elem, drag_info.time, ease, {"left": drag_info.left}); VMM.Lib.animate(elem, drag_info.time, drag.ease, {"left": drag_info.left});
} }
} }
@ -6427,6 +6438,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}, },
id: timeline_id, id: timeline_id,
type: "timeline", type: "timeline",
touch: false,
maptype: "toner", maptype: "toner",
preload: 4, preload: 4,
current_slide: 0, current_slide: 0,
@ -6552,6 +6564,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
} }
} }
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
config.touch = true;
}
config.nav.width = config.width; config.nav.width = config.width;
config.nav.height = 200; config.nav.height = 200;
config.feature.width = config.width; config.feature.width = config.width;
@ -7166,9 +7182,15 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
e.returnValue = false; e.returnValue = false;
} }
// Webkit // Webkit
if (typeof e.wheelDeltaY != 'undefined' ) { if (typeof e.wheelDeltaX != 'undefined' ) {
delta = e.wheelDeltaY/6; delta = e.wheelDeltaY/6;
if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) {
delta = e.wheelDeltaX/6;
} else {
delta = e.wheelDeltaY/6;
}
} }
// 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;
@ -8225,10 +8247,9 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
positionMarkers(); positionMarkers();
positionEras(); positionEras();
positionInterval($timeinterval, interval_array, false, true); positionInterval($timeinterval, interval_array, false, true);
positionInterval($timeintervalmajor, interval_major_array); positionInterval($timeintervalmajor, interval_major_array);
//reSize(true);
if (config.start_page) { if (config.start_page) {
$backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>"); $backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>");
@ -8239,31 +8260,30 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
$zoomin = VMM.appendAndGetElement($toolbar, "<div>", "zoom-in", "<div class='icon'></div>"); $zoomin = VMM.appendAndGetElement($toolbar, "<div>", "zoom-in", "<div class='icon'></div>");
$zoomout = VMM.appendAndGetElement($toolbar, "<div>", "zoom-out", "<div class='icon'></div>"); $zoomout = VMM.appendAndGetElement($toolbar, "<div>", "zoom-out", "<div class='icon'></div>");
VMM.Lib.attribute($zoomin, "title", VMM.master_config.language.messages.expand_timeline);
VMM.Lib.attribute($zoomin, "rel", "tooltip");
VMM.Lib.attribute($zoomout, "title", VMM.master_config.language.messages.contract_timeline);
VMM.Lib.attribute($zoomout, "rel", "tooltip");
$toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"})
// MAKE TIMELINE DRAGGABLE/TOUCHABLE // MAKE TIMELINE DRAGGABLE/TOUCHABLE
$dragslide = new VMM.DragSlider; $dragslide = new VMM.DragSlider;
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") { $dragslide.createPanel(layout, $timenav, config.nav.constraint, config.touch);
$dragslide.createPanel(layout, $timenav, config.nav.constraint, true);
} else {
$dragslide.createPanel(layout, $timenav, config.nav.constraint);
}
// ZOOM EVENTS
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, 'mousewheel'); if (!config.touch) {
// TOOLTIP
VMM.Lib.attribute($zoomin, "title", VMM.master_config.language.messages.expand_timeline);
VMM.Lib.attribute($zoomin, "rel", "tooltip");
VMM.Lib.attribute($zoomout, "title", VMM.master_config.language.messages.contract_timeline);
VMM.Lib.attribute($zoomout, "rel", "tooltip");
$toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"});
// MOUSE EVENTS
VMM.bindEvent(layout, onMouseScroll, 'DOMMouseScroll');
VMM.bindEvent(layout, onMouseScroll, 'mousewheel');
}
VMM.fireEvent(layout, "LOADED"); VMM.fireEvent(layout, "LOADED");
_active = true; _active = true;

1
examples/model.json

@ -19,6 +19,7 @@
"tag":"This is Optional", "tag":"This is Optional",
"asset": { "asset": {
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
"thumbnail":"optional-32x32px.jpg",
"credit":"Credit Name Goes Here", "credit":"Credit Name Goes Here",
"caption":"Caption text goes here" "caption":"Caption text goes here"
} }

27
source/js/Core/VMM.Library.js

@ -458,23 +458,20 @@ if(typeof VMM != 'undefined') {
var _tdd = Math.round((_duration/1500)*10)/10, var _tdd = Math.round((_duration/1500)*10)/10,
__duration = _tdd + 's'; __duration = _tdd + 's';
VMM.Lib.css(element, '-webkit-transition', 'all '+ __duration + ' ease'); _ease = " cubic-bezier(0.33, 0.66, 0.66, 1)";
VMM.Lib.css(element, '-moz-transition', 'all '+ __duration + ' ease'); //_ease = " ease-in-out";
VMM.Lib.css(element, '-o-transition', 'all '+ __duration + ' ease'); for (x in _att) {
VMM.Lib.css(element, '-ms-transition', 'all '+ __duration + ' ease'); if (Object.prototype.hasOwnProperty.call(_att, x)) {
VMM.Lib.css(element, 'transition', 'all '+ __duration + ' ease'); trace(x + " to " + _att[x]);
VMM.Lib.cssmultiple(element, _att); VMM.Lib.css(element, '-webkit-transition', x + ' ' + __duration + _ease);
VMM.Lib.css(element, '-moz-transition', x + ' ' + __duration + _ease);
//callback_function(); VMM.Lib.css(element, '-o-transition', x + ' ' + __duration + _ease);
/* VMM.Lib.css(element, '-ms-transition', x + ' ' + __duration + _ease);
if( typeof( jQuery ) != 'undefined' ){ VMM.Lib.css(element, 'transition', x + ' ' + __duration + _ease);
if (callback_function != null && callback_function != "") {
jQuery(element).animate(_att, {queue:false, duration:_duration, easing:_ease, complete:callback_function} );
} else {
jQuery(element).animate(_att, {queue:false, duration:_duration, easing:_ease} );
} }
} }
*/
VMM.Lib.cssmultiple(element, _att);
} else { } else {
if( typeof( jQuery ) != 'undefined' ){ if( typeof( jQuery ) != 'undefined' ){

36
source/js/Slider/VMM.DragSlider.js

@ -22,7 +22,8 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
start: 0, start: 0,
end: 0 end: 0
}, },
touch: false touch: false,
ease: "easeOutExpo"
}, },
dragevent = { dragevent = {
down: "mousedown", down: "mousedown",
@ -85,7 +86,9 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
var onDragLeave = function(e) { var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move); VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) { if (drag.sliding) {
drag.sliding = false; drag.sliding = false;
@ -98,13 +101,17 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
var onDragStart = function(e) { var onDragStart = function(e) {
dragStart(e.data.element, e.data.delement, e); dragStart(e.data.element, e.data.delement, e);
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
return true; return true;
} }
var onDragEnd = function(e) { var onDragEnd = function(e) {
e.preventDefault(); if (!drag.touch) {
e.preventDefault();
}
e.stopPropagation(); e.stopPropagation();
if (drag.sliding) { if (drag.sliding) {
drag.sliding = false; drag.sliding = false;
@ -148,6 +155,7 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
drag.left.end = getLeft(elem); drag.left.end = getLeft(elem);
VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start)); VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start));
} }
var dragMomentum = function(elem, e) { var dragMomentum = function(elem, e) {
var drag_info = { var drag_info = {
@ -158,10 +166,9 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
}, },
time: (new Date().getTime() - drag.time.start) * 10, time: (new Date().getTime() - drag.time.start) * 10,
time_adjust: (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)); drag_info.change.x = 3000 * (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_adjust = Math.round(drag_info.change.x / drag_info.time);
@ -183,15 +190,22 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]); VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]);
if (drag_info.time > 0) { if (drag_info.time > 0) {
if (drag.touch) { if (drag.touch) {
VMM.Lib.css(elem, '-webkit-transition-property', 'left'); //VMM.Lib.css(elem, '-webkit-transition-property', 'left');
VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time); //VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time);
VMM.Lib.css(elem, 'left', drag_info.left); //VMM.Lib.css(elem, 'left', drag_info.left);
//VMM.Lib.animate(elem, drag_info.time, "easeOutQuad", {"left": drag_info.left});
VMM.Lib.animate(elem, drag_info.time, "easeOutCirc", {"left": drag_info.left});
//VMM.Lib.css(elem, 'webkitTransition', '');
//VMM.Lib.css(elem, 'webkitTransition', '-webkit-transform ' + drag_info.time + 'ms cubic-bezier(0.33, 0.66, 0.66, 1)');
//VMM.Lib.css(elem, 'webkitTransform', 'translate3d(' + drag_info.left + 'px, 0, 0)');
} else { } else {
VMM.Lib.animate(elem, drag_info.time, ease, {"left": drag_info.left}); VMM.Lib.animate(elem, drag_info.time, drag.ease, {"left": drag_info.left});
} }
} }

48
source/js/VMM.Timeline.TimeNav.js

@ -209,9 +209,15 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
e.returnValue = false; e.returnValue = false;
} }
// Webkit // Webkit
if (typeof e.wheelDeltaY != 'undefined' ) { if (typeof e.wheelDeltaX != 'undefined' ) {
delta = e.wheelDeltaY/6; delta = e.wheelDeltaY/6;
if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) {
delta = e.wheelDeltaX/6;
} else {
delta = e.wheelDeltaY/6;
}
} }
// 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;
@ -1268,10 +1274,9 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
positionMarkers(); positionMarkers();
positionEras(); positionEras();
positionInterval($timeinterval, interval_array, false, true); positionInterval($timeinterval, interval_array, false, true);
positionInterval($timeintervalmajor, interval_major_array); positionInterval($timeintervalmajor, interval_major_array);
//reSize(true);
if (config.start_page) { if (config.start_page) {
$backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>"); $backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>");
@ -1282,31 +1287,30 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
} }
$zoomin = VMM.appendAndGetElement($toolbar, "<div>", "zoom-in", "<div class='icon'></div>"); $zoomin = VMM.appendAndGetElement($toolbar, "<div>", "zoom-in", "<div class='icon'></div>");
$zoomout = VMM.appendAndGetElement($toolbar, "<div>", "zoom-out", "<div class='icon'></div>"); $zoomout = VMM.appendAndGetElement($toolbar, "<div>", "zoom-out", "<div class='icon'></div>");
VMM.Lib.attribute($zoomin, "title", VMM.master_config.language.messages.expand_timeline);
VMM.Lib.attribute($zoomin, "rel", "tooltip");
VMM.Lib.attribute($zoomout, "title", VMM.master_config.language.messages.contract_timeline);
VMM.Lib.attribute($zoomout, "rel", "tooltip");
$toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"})
// MAKE TIMELINE DRAGGABLE/TOUCHABLE // MAKE TIMELINE DRAGGABLE/TOUCHABLE
$dragslide = new VMM.DragSlider; $dragslide = new VMM.DragSlider;
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") { $dragslide.createPanel(layout, $timenav, config.nav.constraint, config.touch);
$dragslide.createPanel(layout, $timenav, config.nav.constraint, true);
} else {
$dragslide.createPanel(layout, $timenav, config.nav.constraint);
}
// ZOOM EVENTS
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, 'mousewheel'); if (!config.touch) {
// TOOLTIP
VMM.Lib.attribute($zoomin, "title", VMM.master_config.language.messages.expand_timeline);
VMM.Lib.attribute($zoomin, "rel", "tooltip");
VMM.Lib.attribute($zoomout, "title", VMM.master_config.language.messages.contract_timeline);
VMM.Lib.attribute($zoomout, "rel", "tooltip");
$toolbar.tooltip({selector: "div[rel=tooltip]", placement: "right"});
// MOUSE EVENTS
VMM.bindEvent(layout, onMouseScroll, 'DOMMouseScroll');
VMM.bindEvent(layout, onMouseScroll, 'mousewheel');
}
VMM.fireEvent(layout, "LOADED"); VMM.fireEvent(layout, "LOADED");
_active = true; _active = true;

5
source/js/VMM.Timeline.js

@ -98,6 +98,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}, },
id: timeline_id, id: timeline_id,
type: "timeline", type: "timeline",
touch: false,
maptype: "toner", maptype: "toner",
preload: 4, preload: 4,
current_slide: 0, current_slide: 0,
@ -223,6 +224,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
} }
} }
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
config.touch = true;
}
config.nav.width = config.width; config.nav.width = config.width;
config.nav.height = 200; config.nav.height = 200;
config.feature.width = config.width; config.feature.width = config.width;

Loading…
Cancel
Save