Navigation Menu

Skip to content

Commit

Permalink
Add compression to build
Browse files Browse the repository at this point in the history 
Build now creates a zip file for easy downloading. Also better
modularized the watch tasks.
  • Loading branch information
@michaelbromley
michaelbromley committed Aug 7, 2014
1 parent 694d7ab commit 155744f
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 55 deletions.
35 changes: 28 additions & 7 deletions Gruntfile.js
View file
Expand Up @@ -84,14 +84,34 @@ module.exports = function(grunt) {
}
}
},
compress: {
main: {
options: {
mode: 'zip',
archive: 'dist/horizonal.zip'
},
expand: true,
cwd: 'dist/',
src: ['*.js', '*.css'],
flatten: true
}
},
watch: {
js: {
files: ['src/**/*.js'],
tasks: ['jshint', 'concat', 'uglify']
coreJs: {
files: ['src/*.js'],
tasks: ['jshint', 'concat:core', 'uglify', 'compress']
},
themeJs: {
files: ['src/demo-themes/**/*.js'],
tasks: ['jshint', 'concat:themes']
},
coreCss: {
files: ['src/horizonal.src.css'],
tasks: ['autoprefixer:core', 'compress']
},
css: {
files: ['src/**/*.css'],
tasks: ['autoprefixer']
themeCss: {
files: ['src/demo-themes/**/*.css'],
tasks: ['autoprefixer:themes']
}
}
});
Expand All @@ -102,7 +122,8 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-compress');

grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'autoprefixer']);
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'autoprefixer', 'compress']);

};
129 changes: 84 additions & 45 deletions dist/horizonal.debug.js
View file
Expand Up @@ -108,7 +108,7 @@ function Horizonal() {
}

function registerEventHandlers() {
$(window).on('resize', debounce(resizeHandler, 250));
$(window).on('resize', resizeHandler);
$(window).on('keydown', keydownHandler);
$(window).on('scroll', scrollHandler);
$(window).on('hashchange', hashChangeHandler);
Expand All @@ -118,7 +118,7 @@ function Horizonal() {
}

function unregisterEventHandlers() {
$(window).off('resize', debounce(resizeHandler, 250));
$(window).off('resize', resizeHandler);
$(window).off('keydown', keydownHandler);
$(window).off('scroll', scrollHandler);
$(window).off('hashchange', hashChangeHandler);
Expand Down Expand Up @@ -265,17 +265,19 @@ function shuffle(o){
function noop() {}
/**
* When the window is re-sized, we need to re-calculate the layout of the all the elements.
* To ensure that we get the same results as the initial load, we simple purge the entire <body> element
* To ensure that we get the same results as the initial load, we simple purge the entire ROOT element
* and replace it with the clone that we made right at the start of the init() method.
*/
function resizeHandler() {
var currentScroll = PAGE_COLLECTION.getCurrent().nodes[0].layout.top / OPTIONS.scrollbarShortenRatio;
ROOT.replaceWith(ROOT_CLONE.clone());
composePage(currentScroll).then(function() {
$(window).scrollTop(currentScroll);
updatePageCount();
OPTIONS.onResize();
});
debounce(function() {
var currentScroll = PAGE_COLLECTION.getCurrent().nodes[0].layout.top / OPTIONS.scrollbarShortenRatio;
ROOT.replaceWith(ROOT_CLONE.clone());
composePage(currentScroll).then(function() {
$(window).scrollTop(currentScroll);
updatePageCount();
OPTIONS.onResize();
});
}, 250)();
}

/**
Expand Down Expand Up @@ -331,6 +333,10 @@ function scrollHandler() {
}
}

/**
* To allow URL fragments (#) to work, we need to find the location of the element with the ID
* matching the fragment, figure out what page it is on, and then go to that page.
*/
function hashChangeHandler() {
var hash = window.location.hash;
if (hash !== "") {
Expand All @@ -344,6 +350,11 @@ function hashChangeHandler() {

var _touchStartPos;
var _touchStartTime;
/**
* At the start of a touch we simply need to record the time and position of the touch,
* to use later in working out how to handle it.
* @param e
*/
function touchstartHandler(e) {
if (isValidTouchEvent(e)) {
_touchStartPos = {
Expand All @@ -354,12 +365,23 @@ function touchstartHandler(e) {
}
}

/**
* We prevent the default touchmove behaviour because we don't want the page to scroll naturally - we
* want to control the scrolling programmatically to ensure only one page is advanced per swipe.
* @param e
*/
function touchmoveHandler(e) {
if (isValidTouchEvent(e)) {
e.preventDefault();
}
}

/**
* At the end of the touch, we again record the time and position, and then use these data to figure out
* if we should treat this as a "swipe", and if so, in what direction the swipe was. Then we can
* move to the next or previous page as appropriate.
* @param e
*/
function touchendHandler(e) {
if (isValidTouchEvent(e)) {
var scrollTo;
Expand Down Expand Up @@ -429,6 +451,14 @@ function isValidSwipe(startTime, endTime, startPos, endPos) {
}
}

/**
* Given a pair of coordinates corresponding to the start and end positions of the swipe, we can
* calculate a vector and its angle relative to the x-axis. Using this information we can figure
* out the direction of the swipe (up, down, left or right).
* @param startPos
* @param endPos
* @returns {*}
*/
function getSwipeDirection(startPos, endPos) {
var dX = endPos.x - startPos.x;
var dY = endPos.y - startPos.y;
Expand All @@ -446,6 +476,12 @@ function getSwipeDirection(startPos, endPos) {
return direction;
}

/**
* Internet Explorer uses a different model for touch events from Webkit browsers and others,
* so we need to do a small check to get the correct positions of touch events.
* @param e
* @returns {*}
*/
function getTouchX(e) {
var x;
if (e.originalEvent.hasOwnProperty('changedTouches')) {
Expand All @@ -465,6 +501,12 @@ function getTouchY(e) {
}
return y;
}
/**
* A Node object represents a DOM element. An actual reference to the HTMLElement object is contained in the 'domNode' property.
* @param domNode
* @param index
* @constructor
*/
function Node(domNode, index) {
this.domNode = domNode;
this.index = index;
Expand Down Expand Up @@ -578,22 +620,25 @@ Node.prototype = {
});
},

/**
* If the staggerDelay option is set, then we check to see if this node has either a CSS transition or CSS animation
* style rule applied to it. If so, we dynamically set the transition-delay or animation-delay value to give the
* stagger effect.
*/
setTransitionDelay: function() {
var stagger = this.getStaggerDelay();
if (0 < stagger) {
var cssProp = $(this.domNode).css.bind($(this.domNode));
var transitionDurationIsDefined = existsAndIsNotZero(cssProp('transition-duration')) || existsAndIsNotZero(cssProp('-webkit-transition-duration'));
var animationDurationIsDefined = existsAndIsNotZero(cssProp('animation-duration')) || existsAndIsNotZero(cssProp('-webkit-animation-duration'));
var css = $(this.domNode).css.bind($(this.domNode));
var transitionDurationIsDefined = existsAndIsNotZero(css('transition-duration')) || existsAndIsNotZero(css('-webkit-transition-duration'));
var animationDurationIsDefined = existsAndIsNotZero(css('animation-duration')) || existsAndIsNotZero(css('-webkit-animation-duration'));
if (transitionDurationIsDefined) {
$(this.domNode).css({
css({
'transition-delay': stagger + 's',
'-webkit-transition-delay': stagger + 's'
});
this.domNode.style.transitionDelay = stagger + 's';
this.domNode.style.webkitTransitionDelay = stagger + 's';
}
if (animationDurationIsDefined) {
$(this.domNode).css({
css({
'animation-delay': stagger + 's',
'-webkit-animation-delay': stagger + 's'
});
Expand All @@ -605,6 +650,11 @@ Node.prototype = {
}
},

getStaggerDelay: function() {
var delay = OPTIONS.staggerDelay * this.staggerOrder;
return Math.round(delay * 100) / 100;
},

/**
* In order to make the final rendered DOM node appear identical to how it did on the original page,
* we took a snapshot of all the computed CSS styles before making any changes to the page layout.
Expand Down Expand Up @@ -634,29 +684,18 @@ Node.prototype = {
return styleDiff;
},

getStaggerDelay: function() {
var delay = OPTIONS.staggerDelay * this.staggerOrder;
return Math.round(delay * 100) / 100;
},

moveToForeground: function() {
var self = this;
setTimeout(function() {
OPTIONS.onNodeTransition('toForeground', self.getPublicObject());
}, this.getStaggerDelay() * 1000);
},

moveToBackground: function() {
var self = this;
setTimeout(function() {
OPTIONS.onNodeTransition('toBackground', self.getPublicObject());
}, this.getStaggerDelay() * 1000);
},

moveToFocus: function() {
/**
* Trigger the onNodeTransition callback and pass this node and the type of transition:
* - toForeground
* - toBackground
* - toFocusFromFore
* - toFocusFromBack
* @param type
*/
moveTo: function(type) {
var self = this;
setTimeout(function() {
OPTIONS.onNodeTransition('toFocus', self.getPublicObject());
OPTIONS.onNodeTransition(type, self.getPublicObject());
}, this.getStaggerDelay() * 1000);
},

Expand Down Expand Up @@ -896,36 +935,36 @@ Page.prototype = {
$(this.domNode).addClass('hrz-fore').removeClass('hrz-back hrz-focus-from-back hrz-focus-from-fore');
this.hideAfterDelay();
this.nodes.forEach(function(node) {
node.moveToForeground();
node.moveTo('toForeground');
});
},

moveToBackground: function() {
$(this.domNode).addClass('hrz-back').removeClass('hrz-fore hrz-focus-from-back hrz-focus-from-fore');
this.hideAfterDelay();
this.nodes.forEach(function(node) {
node.moveToBackground();
node.moveTo('toBackground');
});
},

moveToFocusFromBackground: function() {
$(this.domNode).addClass('hrz-focus-from-back');
this.moveToFocus();
this._moveToFocus('toFocusFromBack');
},

moveToFocusFromForeground: function() {
$(this.domNode).addClass('hrz-focus-from-fore');
this.moveToFocus();
this._moveToFocus('toFocusFromFore');
},

moveToFocus: function() {
_moveToFocus: function(type) {
$(this.domNode).removeClass('hrz-fore hrz-back hrz-hidden');
if (this.hideTimer !== null) {
clearTimeout(this.hideTimer);
this.hideTimer = null;
}
this.nodes.forEach(function(node) {
node.moveToFocus();
node.moveTo(type);
});
},

Expand Down Expand Up @@ -1032,7 +1071,7 @@ var PageCollectionAPI = {
var newPageNumber = this.currentPage;

if (oldPageNumber === 0) {
this.getPage(newPageNumber).moveToFocus();
this.getPage(newPageNumber)._moveToFocus();
} else {
var i;
if (oldPageNumber < newPageNumber) {
Expand Down

0 comments on commit 155744f

Please sign in to comment.