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

Finally finished swipe/slide to move next and previous in the slider. closes #209

pull/246/head
Zach Wise 12 years ago
parent
457aed15e9
commit
c88f11351e
6 changed files with 158 additions and 62 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. 11
      compiled/js/storyjs-embed.js
  2. 8
      compiled/js/timeline-min.js
  3. 179
      compiled/js/timeline.js
  4. 2
      source/js/Core
  5. 2
      source/js/VMM.Timeline.License.js
  6. 16
      source/js/VMM.Timeline.js

11
compiled/js/storyjs-embed.js
Unescape View File

@ -1,4 +1,13 @@
/*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false *//** /*!
StoryJS
Designed and built by Zach Wise at VéritéCo
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*//* **********************************************
Begin LazyLoad.js
********************************************** *//*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false *//*
LazyLoad makes it easy and painless to lazily load one or more external LazyLoad makes it easy and painless to lazily load one or more external
JavaScript or CSS files on demand either during or after the rendering of a web JavaScript or CSS files on demand either during or after the rendering of a web
page. page.

8
compiled/js/timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

179
compiled/js/timeline.js
Unescape View File

@ -1,6 +1,6 @@
/*! /*!
TimelineJS TimelineJS
Version 2.15 Version 2.16
Designed and built by Zach Wise at VéritéCo Designed and built by Zach Wise at VéritéCo
This Source Code Form is subject to the terms of the Mozilla Public This Source Code Form is subject to the terms of the Mozilla Public
@ -2070,7 +2070,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
/*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false */ /*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false */
/** /*
LazyLoad makes it easy and painless to lazily load one or more external LazyLoad makes it easy and painless to lazily load one or more external
JavaScript or CSS files on demand either during or after the rendering of a web JavaScript or CSS files on demand either during or after the rendering of a web
page. page.
@ -4519,12 +4519,19 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
up: "touchend", up: "touchend",
leave: "mouseleave", leave: "mouseleave",
move: "touchmove" move: "touchmove"
}; },
dragslider = this,
is_sticky = false;
this.createPanel = function(drag_object, move_object, constraint, touch) { /* PUBLIC FUNCTIONS
================================================== */
this.createPanel = function(drag_object, move_object, constraint, touch, sticky) {
drag.element = drag_object; drag.element = drag_object;
drag.element_move = move_object; drag.element_move = move_object;
//dragslider = drag_object;
if ( sticky != null && sticky != "") {
is_sticky = sticky;
}
if ( constraint != null && constraint != "") { if ( constraint != null && constraint != "") {
drag.constraint = constraint; drag.constraint = constraint;
} else { } else {
@ -4550,18 +4557,22 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
drag.constraint = constraint; drag.constraint = constraint;
} }
var makeDraggable = function(drag_object, move_object) { 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, 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, onDragEnd, dragevent.up, {element: move_object, delement: drag_object});
VMM.bindEvent(drag_object, onDragLeave, dragevent.leave, {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); function onDragLeave(e) {
return true;
}
var onDragLeave = function(e) {
VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move); VMM.unbindEvent(e.data.delement, onDragMove, dragevent.move);
if (!drag.touch) { if (!drag.touch) {
e.preventDefault(); e.preventDefault();
@ -4576,7 +4587,7 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
} }
var onDragStart = function(e) { function onDragStart(e) {
dragStart(e.data.element, e.data.delement, e); dragStart(e.data.element, e.data.delement, e);
if (!drag.touch) { if (!drag.touch) {
e.preventDefault(); e.preventDefault();
@ -4585,7 +4596,7 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
return true; return true;
} }
var onDragEnd = function(e) { function onDragEnd(e) {
if (!drag.touch) { if (!drag.touch) {
e.preventDefault(); e.preventDefault();
} }
@ -4598,13 +4609,19 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
return true; return true;
} }
} }
var onDragMove = function(e) {
function onDragMove(e) {
dragMove(e.data.element, e); dragMove(e.data.element, e);
e.preventDefault();
e.stopPropagation(); if (Math.abs(drag.left.start) > getLeft(elem)) {
}
return false; return false;
} }
var dragStart = function(elem, delem, e) {
function dragStart(elem, delem, e) {
if (drag.touch) { if (drag.touch) {
trace("IS TOUCH") trace("IS TOUCH")
VMM.Lib.css(elem, '-webkit-transition-duration', '0'); VMM.Lib.css(elem, '-webkit-transition-duration', '0');
@ -4619,22 +4636,33 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
VMM.bindEvent(delem, onDragMove, dragevent.move, {element: elem}); VMM.bindEvent(delem, onDragMove, dragevent.move, {element: elem});
} }
var dragEnd = function(elem, delem, e) {
function dragEnd(elem, delem, e) {
VMM.unbindEvent(delem, onDragMove, dragevent.move); VMM.unbindEvent(delem, onDragMove, dragevent.move);
dragMomentum(elem, e); dragMomentum(elem, e);
} }
var dragMove = function(elem, e) {
function dragMove(elem, e) {
var drag_to;
drag.sliding = true; drag.sliding = true;
if (drag.touch) { if (drag.touch) {
drag.pagex.end = e.originalEvent.touches[0].screenX; drag.pagex.end = e.originalEvent.touches[0].screenX;
} else { } else {
drag.pagex.end = e.pageX; drag.pagex.end = e.pageX;
} }
drag.left.end = getLeft(elem); drag.left.end = getLeft(elem);
VMM.Lib.css(elem, 'left', -(drag.pagex.start - drag.pagex.end - drag.left.start)); drag_to = -(drag.pagex.start - drag.pagex.end - drag.left.start);
if (Math.abs(drag_to - drag.left.start) > 10) {
VMM.Lib.css(elem, 'left', drag_to);
e.preventDefault();
e.stopPropagation();
}
//VMM.Lib.css(elem, 'left', drag_to);
} }
var dragMomentum = function(elem, e) {
function dragMomentum(elem, e) {
var drag_info = { var drag_info = {
left: drag.left.end, left: drag.left.end,
left_adjust: 0, left_adjust: 0,
@ -4671,30 +4699,34 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
} }
} }
VMM.fireEvent(elem, "DRAGUPDATE", [drag_info]); VMM.fireEvent(dragslider, "DRAGUPDATE", [drag_info]);
if (drag_info.time > 0) { if (!is_sticky) {
if (drag.touch) { if (drag_info.time > 0) {
//VMM.Lib.css(elem, '-webkit-transition-property', 'left'); if (drag.touch) {
//VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time); //VMM.Lib.css(elem, '-webkit-transition-property', 'left');
//VMM.Lib.css(elem, 'left', drag_info.left); //VMM.Lib.css(elem, '-webkit-transition-duration', drag_info.time);
//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, "easeOutQuad", {"left": drag_info.left});
VMM.Lib.animate(elem, drag_info.time, "easeOutCirc", {"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', '');
//VMM.Lib.css(elem, 'webkitTransition', '-webkit-transform ' + drag_info.time + 'ms cubic-bezier(0.33, 0.66, 0.66, 1)'); //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)'); //VMM.Lib.css(elem, 'webkitTransform', 'translate3d(' + drag_info.left + 'px, 0, 0)');
} else { } else {
VMM.Lib.animate(elem, drag_info.time, drag.ease, {"left": drag_info.left}); VMM.Lib.animate(elem, drag_info.time, drag.ease, {"left": drag_info.left});
}
} }
} }
} }
var getLeft = function(elem) {
function getLeft(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);
} }
} }
} }
@ -4719,6 +4751,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
$slider_mask, $slider_mask,
$slider_container, $slider_container,
$slides_items, $slides_items,
$dragslide,
events = {}, events = {},
data = [], data = [],
slides = [], slides = [],
@ -4922,11 +4955,43 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
} }
function onDragFinish(e, d) {
trace("DRAG FINISH");
trace(d.left_adjust);
trace((config.slider.width / 2));
if (d.left_adjust < 0 ) {
if (Math.abs(d.left_adjust) > (config.slider.width / 2) ) {
//onNextClick(e);
if (current_slide == slides.length - 1) {
backToCurrentSlide();
} else {
goToSlide(current_slide+1, "easeOutExpo");
upDate();
}
} else {
backToCurrentSlide();
}
} else if (Math.abs(d.left_adjust) > (config.slider.width / 2) ) {
if (current_slide == 0) {
backToCurrentSlide();
} else {
goToSlide(current_slide-1, "easeOutExpo");
upDate();
}
} else {
backToCurrentSlide();
}
}
/* NAVIGATION /* NAVIGATION
================================================== */ ================================================== */
function onNextClick(e) { function onNextClick(e) {
if (current_slide == slides.length - 1) { if (current_slide == slides.length - 1) {
VMM.Lib.animate($slider_container, config.duration, config.ease, {"left": -(slides[current_slide].leftpos()) } ); backToCurrentSlide();
} else { } else {
goToSlide(current_slide+1); goToSlide(current_slide+1);
upDate(); upDate();
@ -4935,7 +5000,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
function onPrevClick(e) { function onPrevClick(e) {
if (current_slide == 0) { if (current_slide == 0) {
goToSlide(current_slide); backToCurrentSlide();
} else { } else {
goToSlide(current_slide-1); goToSlide(current_slide-1);
upDate(); upDate();
@ -5264,7 +5329,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* GO TO SLIDE /* GO TO SLIDE
goToSlide(n, ease, duration); goToSlide(n, ease, duration);
================================================== */ ================================================== */
var goToSlide = function(n, ease, duration, fast, firstrun) { function goToSlide(n, ease, duration, fast, firstrun) {
var _ease = config.ease, var _ease = config.ease,
_duration = config.duration, _duration = config.duration,
is_last = false, is_last = false,
@ -5366,6 +5431,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
preloadSlides(); preloadSlides();
} }
function backToCurrentSlide() {
VMM.Lib.stop($slider_container);
VMM.Lib.animate($slider_container, config.duration, "easeOutExpo", {"left": -(slides[current_slide].leftpos()) + config.slider.content.padding} );
}
/* BUILD NAVIGATION /* BUILD NAVIGATION
================================================== */ ================================================== */
var buildNavigation = function() { var buildNavigation = function() {
@ -5408,18 +5477,16 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// ATTACH SLIDES // ATTACH SLIDES
buildSlides(data); buildSlides(data);
/* MAKE SLIDER TOUCHABLE /* MAKE SLIDER DRAGGABLE/TOUCHABLE
================================================== */ ================================================== */
if (VMM.Browser.device == "tablet" || VMM.Browser.device == "mobile") { if (VMM.Browser.device == "tablet" || VMM.Browser.device == "mobile") {
config.duration = 500; config.duration = 500;
__duration = 1000; __duration = 1000;
//VMM.TouchSlider.createPanel($slider_container, $slider_container, VMM.Lib.width(slides[0]), config.spacing, true); $dragslide = new VMM.DragSlider();
//VMM.TouchSlider.createPanel($slider_container, $slider_container, slides[0].width(), config.spacing, true); $dragslide.createPanel($slider_mask, $slider_container, "", config.touch, true);
//VMM.bindEvent($slider_container, onTouchUpdate, "TOUCHUPDATE"); VMM.bindEvent($dragslide, onDragFinish, 'DRAGUPDATE');
} else if (VMM.Browser.device == "mobile") { //"<div class='vco-loading'><div class='vco-loading-container'><div class='vco-loading-icon'></div>" + "<div class='vco-message'><p>" + "Slide" + "</p></div></div></div>"
} else {
//VMM.DragSlider.createPanel($slider_container, $slider_container, VMM.Lib.width(slides[0]), config.spacing, true);
} }
reSize(false, true); reSize(false, true);
@ -6822,6 +6889,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timenav.setMarker(config.current_slide, config.ease,config.duration); timenav.setMarker(config.current_slide, config.ease,config.duration);
}; };
function onSliderMessage(e, d) {
};
function onMarkerUpdate(e) { function onMarkerUpdate(e) {
is_moving = true; is_moving = true;
config.current_slide = timenav.getCurrentNumber(); config.current_slide = timenav.getCurrentNumber();
@ -6938,7 +7009,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
if (type.of(config.source) == "string" || type.of(config.source) == "object") { if (type.of(config.source) == "string" || type.of(config.source) == "object") {
VMM.Timeline.DataObj.getData(config.source); VMM.Timeline.DataObj.getData(config.source);
} else { } else {
VMM.Timeline.DataObj.getData(VMM.getElement(timeline_id)); VMM.fireEvent(global, config.events.messege, "No data source provided");
//VMM.Timeline.DataObj.getData(VMM.getElement(timeline_id));
} }
@ -6969,10 +7041,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
/* MESSEGES /* MESSEGES
================================================== */ ================================================== */
function showMessege(e, msg) { function showMessege(e, msg, other) {
trace("showMessege " + msg); trace("showMessege " + msg);
//VMM.attachElement($messege, msg); //VMM.attachElement($messege, msg);
VMM.attachElement($feedback, VMM.MediaElement.loadingmessage(msg)); if (other) {
VMM.attachElement($feedback, msg);
} else{
VMM.attachElement($feedback, VMM.MediaElement.loadingmessage(msg));
}
}; };
function hideMessege() { function hideMessege() {
@ -7010,6 +7086,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.bindEvent($slider, onSliderLoaded, "LOADED"); VMM.bindEvent($slider, onSliderLoaded, "LOADED");
VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED"); VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED");
VMM.bindEvent($slider, onSlideUpdate, "UPDATE"); VMM.bindEvent($slider, onSlideUpdate, "UPDATE");
VMM.bindEvent($slider, onSliderMessage, "MESSAGE");
VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE"); VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE");
// INITIALIZE COMPONENTS // INITIALIZE COMPONENTS

2
source/js/Core

@ -1 +1 @@
Subproject commit a3555656b3a648af2a1122283c9bfc119709fbe0 Subproject commit 44892210e8938052d451e8344ba4b05c2d61f297

2
source/js/VMM.Timeline.License.js
Unescape View File

@ -1,6 +1,6 @@
/*! /*!
TimelineJS TimelineJS
Version 2.15 Version 2.16
Designed and built by Zach Wise at VéritéCo Designed and built by Zach Wise at VéritéCo
This Source Code Form is subject to the terms of the Mozilla Public This Source Code Form is subject to the terms of the Mozilla Public

16
source/js/VMM.Timeline.js
Unescape View File

@ -322,6 +322,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timenav.setMarker(config.current_slide, config.ease,config.duration); timenav.setMarker(config.current_slide, config.ease,config.duration);
}; };
function onSliderMessage(e, d) {
};
function onMarkerUpdate(e) { function onMarkerUpdate(e) {
is_moving = true; is_moving = true;
config.current_slide = timenav.getCurrentNumber(); config.current_slide = timenav.getCurrentNumber();
@ -438,7 +442,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
if (type.of(config.source) == "string" || type.of(config.source) == "object") { if (type.of(config.source) == "string" || type.of(config.source) == "object") {
VMM.Timeline.DataObj.getData(config.source); VMM.Timeline.DataObj.getData(config.source);
} else { } else {
VMM.Timeline.DataObj.getData(VMM.getElement(timeline_id)); VMM.fireEvent(global, config.events.messege, "No data source provided");
//VMM.Timeline.DataObj.getData(VMM.getElement(timeline_id));
} }
@ -469,10 +474,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
/* MESSEGES /* MESSEGES
================================================== */ ================================================== */
function showMessege(e, msg) { function showMessege(e, msg, other) {
trace("showMessege " + msg); trace("showMessege " + msg);
//VMM.attachElement($messege, msg); //VMM.attachElement($messege, msg);
VMM.attachElement($feedback, VMM.MediaElement.loadingmessage(msg)); if (other) {
VMM.attachElement($feedback, msg);
} else{
VMM.attachElement($feedback, VMM.MediaElement.loadingmessage(msg));
}
}; };
function hideMessege() { function hideMessege() {
@ -510,6 +519,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.bindEvent($slider, onSliderLoaded, "LOADED"); VMM.bindEvent($slider, onSliderLoaded, "LOADED");
VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED"); VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED");
VMM.bindEvent($slider, onSlideUpdate, "UPDATE"); VMM.bindEvent($slider, onSlideUpdate, "UPDATE");
VMM.bindEvent($slider, onSliderMessage, "MESSAGE");
VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE"); VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE");
// INITIALIZE COMPONENTS // INITIALIZE COMPONENTS

Write Preview
Loading…
Cancel
Save