Skip to content

Commit

Permalink
Updated to use Hammer.js v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@IanLunn
IanLunn committed Jan 15, 2015
1 parent 0e646dd commit 604457a
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 149 deletions.
4 changes: 2 additions & 2 deletions bower.json
View file
@@ -1,7 +1,7 @@
{
"name": "sequencejs",
"description": "CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications.",
"version": "2.0.0-beta.1",
"version": "2.0.0-alpha.6",
"main": "scripts/sequence.min.js",
"license": "MIT",
"homepage": "http://sequencejs.com/",
Expand Down Expand Up @@ -35,7 +35,7 @@
"tests"
],
"dependencies": {
"hammerjs": "1.1.3",
"hammerjs": "2.0.4",
"imagesloaded": "3.1.5",
"respond": "^1.4.2"
}
Expand Down
8 changes: 8 additions & 0 deletions index.html
View file
Expand Up @@ -33,6 +33,14 @@ <h3>Use the HTML and CSS syntax you're used to. No JavaScript knowledge required
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.


Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.


Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.

<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,7 +1,7 @@
{
"name": "sequencejs",
"description": "CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications.",
"version": "2.0.0-beta.1",
"version": "2.0.0-alpha.6",
"main": "scripts/sequence.min.js",
"license": "MIT",
"author": "Ian Lunn",
Expand Down
10 changes: 4 additions & 6 deletions scripts/hammer.min.js
View file

Large diffs are not rendered by default.

146 changes: 56 additions & 90 deletions scripts/sequence.js
View file
Expand Up @@ -187,17 +187,11 @@ function defineSequence(imagesLoaded, Hammer) {
// Events to run when the user swipes in a particular direction
swipeEvents: {
left: function(sequence) {sequence.next();},
right: function(sequence) {sequence.prev();},
up: false,
down: false
right: function(sequence) {sequence.prev();}
},

// Options to supply the third-party Hammer library See: https://github.com/EightMedia/hammer.js/wiki/Getting-Started
swipeHammerOptions: {
preventMouse: true,
dragMinDistance: 10,
stopBrowserBehavior: false
},
// Options to supply the third-party Hammer library See: http://hammerjs.github.io/recognizer-swipe/
swipeHammerOptions: {},


/* --- hashTags --- */
Expand All @@ -223,7 +217,7 @@ function defineSequence(imagesLoaded, Hammer) {
}
};

// See Sequence._animation.domDelay() for an explanation of this
// See sequence._animation.domDelay() for an explanation of this
var domThreshold = 50;

// Throttle the window resize event
Expand All @@ -246,31 +240,31 @@ function defineSequence(imagesLoaded, Hammer) {

// Translate step data-attributes to a CSS property and unit
var translateAttributes = {
"seqX": {
"sequenceX": {
"name": "translateX",
"unit": "px"
},
"seqY": {
"sequenceY": {
"name": "translateY",
"unit": "px"
},
"seqZ": {
"sequenceZ": {
"name": "translateZ",
"unit": "px"
},
"seqRotateX": {
"sequenceRotateX": {
"name": "rotateX",
"unit": "deg"
},
"seqRotateY": {
"sequenceRotateY": {
"name": "rotateY",
"unit": "deg"
},
"seqRotate": {
"sequenceRotate": {
"name": "rotateZ",
"unit": "deg"
},
"seqScale": {
"sequenceScale": {
"name": "scale",
"unit": ""
}
Expand Down Expand Up @@ -765,22 +759,22 @@ function defineSequence(imagesLoaded, Hammer) {
propertyName,
unit;

css += "translateX(" + properties.seqX + "px) ";
css += "translateY(" + properties.seqY + "px) ";
css += "translateZ(" + properties.seqZ + "px) ";
css += "translateX(" + properties.sequenceX + "px) ";
css += "translateY(" + properties.sequenceY + "px) ";
css += "translateZ(" + properties.sequenceZ + "px) ";

// Add rotate X/Y/Z and reverse them if necessary
if (polar !== true) {

css += "rotateX(" + properties.seqRotateX + "deg) ";
css += "rotateY(" + properties.seqRotateY + "deg) ";
css += "rotateZ(" + properties.seqRotate + "deg) ";
css += "scale(" + properties.seqScale + ")";
css += "rotateX(" + properties.sequenceRotateX + "deg) ";
css += "rotateY(" + properties.sequenceRotateY + "deg) ";
css += "rotateZ(" + properties.sequenceRotate + "deg) ";
css += "scale(" + properties.sequenceScale + ")";
} else {

css += "rotateZ(" + properties.seqRotate + "deg) ";
css += "rotateY(" + properties.seqRotateY + "deg) ";
css += "rotateX(" + properties.seqRotateX + "deg) ";
css += "rotateZ(" + properties.sequenceRotate + "deg) ";
css += "rotateY(" + properties.sequenceRotateY + "deg) ";
css += "rotateX(" + properties.sequenceRotateX + "deg) ";
}

return css;
Expand Down Expand Up @@ -913,23 +907,23 @@ function defineSequence(imagesLoaded, Hammer) {

// Default transforms
stepTransform = {
"seqX": 0,
"seqY": 0,
"seqZ": 0,
"seqRotateX": 0,
"seqRotateY": 0,
"seqRotate": 0,
"seqScale": 1
"sequenceX": 0,
"sequenceY": 0,
"sequenceZ": 0,
"sequenceRotateX": 0,
"sequenceRotateY": 0,
"sequenceRotate": 0,
"sequenceScale": 1
};

canvasTransform = {
"seqX": 0,
"seqY": 0,
"seqZ": 0,
"seqRotateX": 0,
"seqRotateY": 0,
"seqRotate": 0,
"seqScale": 1
"sequenceX": 0,
"sequenceY": 0,
"sequenceZ": 0,
"sequenceRotateX": 0,
"sequenceRotateY": 0,
"sequenceRotate": 0,
"sequenceScale": 1
};

// Get the computed styles for the step
Expand All @@ -943,7 +937,7 @@ function defineSequence(imagesLoaded, Hammer) {
attribute = stepAttributes[property];
stepTransform[property] = attribute;

if (property !== "seqScale") {
if (property !== "sequenceScale") {
attributeReversed = attribute * -1;
}else{
attributeReversed = 1 / attribute;
Expand All @@ -955,8 +949,8 @@ function defineSequence(imagesLoaded, Hammer) {

// Add the offset left/top onto the X/Y coordinates
// (after making them polar)
canvasTransform.seqX += step.offsetLeft * -1;
canvasTransform.seqY += step.offsetTop * -1;
canvasTransform.sequenceX += step.offsetLeft * -1;
canvasTransform.sequenceY += step.offsetTop * -1;

// Get the transform origins
transformOrigins = getStyle(step, [Modernizr.prefixed("transformOrigin")]);
Expand Down Expand Up @@ -1417,17 +1411,17 @@ function defineSequence(imagesLoaded, Hammer) {

// Get the step's X and Y transform origins, then flip the X/Y/Z
// values (positive to negative) and add them to the origins
var originX = origin.x + (canvasTransformProperties.seqX * -1),
originY = origin.y + (canvasTransformProperties.seqY * -1),
originZ = origin.z + (canvasTransformProperties.seqZ * -1);
var originX = origin.x + (canvasTransformProperties.sequenceX * -1),
originY = origin.y + (canvasTransformProperties.sequenceY * -1),
originZ = origin.z + (canvasTransformProperties.sequenceZ * -1);

// Turn the transform properties into a CSS string
transformCss = propertiesToCss(canvasTransformProperties, true);

return {
"origins": originX + "px " + originY + "px " + originZ + "px",
"string": transformCss,
"scale": canvasTransformProperties.seqScale
"scale": canvasTransformProperties.sequenceScale
};
},

Expand Down Expand Up @@ -3176,7 +3170,7 @@ function defineSequence(imagesLoaded, Hammer) {
if (self.manageEvent.list.hammer.length > 0 && document.querySelectorAll !== undefined) {

var handler = self.manageEvent.list.hammer[0].handler;
self.hammerTime.off("dragleft dragright release", handler);
self.hammerTime.off("swipeleft swiperight", handler);
}
break;

Expand Down Expand Up @@ -3303,14 +3297,14 @@ function defineSequence(imagesLoaded, Hammer) {

// The button controls one Sequence instance
// (defined via the rel attribute)
if (rel === self.container.id && element.getAttribute("data-seq-enabled") !== "true") {
if (rel === self.container.id && element.getAttribute("data-sequence") !== "true") {

element.setAttribute("data-seq-enabled", true);
element.setAttribute("data-sequence", true);
buttonEvent(element, rel, i);
}

// The button controls all Sequence instances
else if (rel === null && element.getAttribute("data-seq-enabled") !== "true") {
else if (rel === null && element.getAttribute("data-sequence") !== "true") {

buttonEvent(element, rel, i);
}
Expand Down Expand Up @@ -3438,50 +3432,22 @@ function defineSequence(imagesLoaded, Hammer) {

var handler = function(e) {

switch(e.type) {
switch(e.direction) {

// Prevent the browser scrolling will dragging left and right
case "dragleft":
case "dragright":
e.gesture.preventDefault();
case 2:
self.options.swipeEvents.left(self);
break;

// Execute a swipe event when the user releases their finger
case "release":

// Execute the swipe event if the user swipes more than the
// drag_min_distance option
if (Math.abs(e.gesture.deltaX) >= self.hammerTime.options.dragMinDistance || Math.abs(e.gesture.deltaY) >= self.hammerTime.options.dragMinDistance) {

switch(e.gesture.direction) {

case "left":
self.options.swipeEvents.left(self);
break;

case "right":
self.options.swipeEvents.right(self);
break;

case "up":
if (self.options.swipeEvents.up !== false) {
self.options.swipeEvents.up(self);
}
break;

case "down":
if (self.options.swipeEvents.down !== false) {
self.options.swipeEvents.down(self);
}
break;
}
}

case 4:
self.options.swipeEvents.right(self);
break;
}
};

self.hammerTime = new Hammer(self.container, self.options.swipeHammerOptions).on("dragleft dragright release", handler);
self.hammerTime = new Hammer(self.container).on("swipe", handler);

// Set Hammer's Swipe options
self.hammerTime.get("swipe").set(self.options.swipeHammerOptions);

self.manageEvent.list.hammer.push({"element": self.container, "handler": handler});
},
Expand Down Expand Up @@ -3762,7 +3728,7 @@ function defineSequence(imagesLoaded, Hammer) {
addClass(lastStep, "animate-in");

// Allow the same element to have Sequence initated on it in the future
element.setAttribute("data-seq-enabled", false);
element.setAttribute("data-sequence", false);

// Callback
self.destroyed(self);
Expand Down
5 changes: 3 additions & 2 deletions scripts/sequence.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion scripts/sequence.min.map
View file

Large diffs are not rendered by default.

0 comments on commit 604457a

Please sign in to comment.