Skip to content

Commit

Permalink
[TR-3] - preparing structure for tests, first test
Browse files Browse the repository at this point in the history
  • Loading branch information
Michał Sajnóg committed Oct 17, 2015
1 parent b643601 commit 6ffc417
Show file tree
Hide file tree
Showing 21 changed files with 293 additions and 257 deletions.
2 changes: 1 addition & 1 deletion dist/aos.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/aos.js.map

Large diffs are not rendered by default.

14 changes: 12 additions & 2 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
var mocha = require('gulp-mocha');

// Browserify & watchify

Expand Down Expand Up @@ -54,6 +55,14 @@ gulp.task('sass', function () {
.pipe(reload({stream:true}));
});

// Mocha

gulp.task('mocha', function() {
return gulp.src(['./test/**/*.js'], { read: false })
.pipe(mocha({ reporter: 'list' }));
//.on('error', gutil.log);
});

// Static server

gulp.task('browser-sync', function() {
Expand All @@ -72,7 +81,8 @@ gulp.task('bs-reload', function () {

// Task for `gulp` command

gulp.task('default',['browser-sync', 'bundle'], function() {
gulp.watch('src/sass/*.scss',['sass']);
gulp.task('default',['browser-sync', 'bundle', 'mocha'], function() {
gulp.watch('./src/sass/**/*.scss',['sass']);
gulp.watch('*.html', ['bs-reload']);
gulp.watch(['./src/js/**/*.js', './test/**/*.js'], ['mocha']);
});
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@
"devDependencies": {
"browser-sync": "~2.0.1",
"browserify": "^11.2.0",
"chai": "^3.3.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.1",
"gulp-concat": "~2.4.3",
"gulp-imagemin": "~2.2.0",
"gulp-minify-css": "^1.2.0",
"gulp-sass": "~1.3.3",
"gulp-mocha": "^2.1.3",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "~1.1.0",
"gulp-util": "^3.0.6",
"jsdom": "^6.5.1",
"lodash.assign": "^3.2.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
Expand Down
148 changes: 148 additions & 0 deletions src/js/aos-core.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
var core = function (window) {
var document = window.document;

/**
* Modules & helpers
*/
var _throttle = require('lodash.throttle');
var _debounce = require('lodash.debounce');
var _extend = require('lodash.assign');

var observe = require('./libs/observer')(window);
var classListShim = require('./libs/classList-shim')(window);

var detect = require('./helpers/detector');
var calculateOffset = require('./helpers/calculateOffset');
var handleScroll = require('./helpers/handleScroll');
var prepare = require('./helpers/prepare');
var elements = require('./helpers/elements');

/**
* Private variables
*/
var $aosElements = [];
var initialized = false;

/**
* Default options
*/
var options = {
offset: 120,
delay: 0,
easing: 'ease',
duration: 400,
disable: false,
once: false,
startEvent: 'DOMContentLoaded'
};

/**
* Refresh AOS
*/
var refresh = function() {
// Allow refresh only when it was first initialized on startEvent
if (initialized) {
// Extend elements objects in $aosElements with their positions
$aosElements = prepare($aosElements);
// Perform scroll event, to refresh view and show/hide elements
handleScroll($aosElements, options.once);
}
};

/**
* Initializing AOS
* - Create options merging defaults with user defined options
* - Set attributes on <body> as global setting - css relies on it
* - Attach preparing elements to options.startEvent,
* window resize and orientation change
* - Attach function that handle scroll and everything connected to it
* to window scroll event and fire once document is ready to set initial state
*/
var init = function(settings) {
options = _extend(options, settings);

// Create initial array with elements -> to be fullfilled later with prepare()
$aosElements = elements();

/**
* Check options.disable
* and do not init plugin if conditions are true
*/
if (options.disable) {
if (
options.disable === true ||
(options.disable === 'mobile' && detect.mobile()) ||
(options.disable === 'phone' && detect.phone()) ||
(options.disable === 'tablet' && detect.tablet()) ||
(typeof options.disable === 'function' && options.disable() === true)
) {
[].forEach.call($aosElements, function(el, i) {
el.node.removeAttribute('aos');
el.node.removeAttribute('aos-easing');
el.node.removeAttribute('aos-duration');
el.node.removeAttribute('aos-delay');
});
return false;
}
}

/**
* Set global settings on body, based on options
* so CSS can use it
*/
document.querySelector('body').setAttribute('aos-easing', options.easing);
document.querySelector('body').setAttribute('aos-duration', options.duration);
document.querySelector('body').setAttribute('aos-delay', options.delay);

/**
* Listen to options.startEvent and fire first refresh
*/
document.addEventListener(options.startEvent, function() {
initialized = true;
refresh();
});

/**
* Refresh plugin on window resize or orientation change
*/
window.addEventListener('resize orientationchange', _debounce(refresh, 50, true));

/**
* Handle scroll event to animate elements on scroll
*/
window.addEventListener('scroll', _throttle(function() {
handleScroll($aosElements, options.once);
}, 99));

/**
* Watch if nodes are removed
* If so refresh plugin
*/
document.addEventListener('DOMNodeRemoved', function(event) {
var el = event.target;
if (el && el.nodeType === 1 && el.hasAttribute && event.target.hasAttribute('aos')) {
_debounce(refresh, 50, true)
}
});

/**
* Observe [aos] elements
* If something is loaded by AJAX
* it'll refresh plugin automatically
*/
observe('[aos]', refresh);

};

/**
* Public API
*/
var AOS = {
init: init,
refresh: refresh
};

return AOS;
}

module.exports = core;
157 changes: 4 additions & 153 deletions src/js/aos.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,157 +3,8 @@
* made to animate elements on scroll in both directions
*/

;
(function(window, document, undefined) {
/**
* Modules & helpers
*/
var _throttle = require('lodash.throttle');
var _debounce = require('lodash.debounce');
var _extend = require('lodash.assign');
var observe = require('./modules/observer');
var detect = require('./modules/detector');
var classListShim = require('./modules/classList-shim');
var calculateOffset = require('./modules/calculateOffset');
var handleScroll = require('./modules/handleScroll');
var prepare = require('./modules/prepare');
var elements = require('./modules/elements');
var core = require('./aos-core');

/**
* Private variables
*/
var $aosElements = [];
var initialized = false;

/**
* Default options
*/
var options = {
offset: 120,
delay: 0,
easing: 'ease',
duration: 400,
disable: false,
once: false,
startEvent: 'DOMContentLoaded'
};

/**
* Refresh AOS
*/
var refresh = function() {
// Allow refresh only when it was first initialized on startEvent
if (initialized) {
// Extend elements objects in $aosElements with their positions
$aosElements = prepare($aosElements);
// Perform scroll event, to refresh view and show/hide elements
handleScroll($aosElements, options.once);
}
};

/**
* Initializing AOS
* - Create options merging defaults with user defined options
* - Set attributes on <body> as global setting - css relies on it
* - Attach preparing elements to options.startEvent,
* window resize and orientation change
* - Attach function that handle scroll and everything connected to it
* to window scroll event and fire once document is ready to set initial state
*/
var init = function(settings) {
options = _extend(options, settings);

// Create initial array with elements -> to be fullfilled later with prepare()
$aosElements = elements();

/**
* Check options.disable
* and do not init plugin if conditions are true
*/
if (options.disable) {
if (
options.disable === true ||
(options.disable === 'mobile' && detect.mobile()) ||
(options.disable === 'phone' && detect.phone()) ||
(options.disable === 'tablet' && detect.tablet()) ||
(typeof options.disable === 'function' && options.disable() === true)
) {
[].forEach.call($aosElements, function(el, i) {
el.node.removeAttribute('aos');
el.node.removeAttribute('aos-easing');
el.node.removeAttribute('aos-duration');
el.node.removeAttribute('aos-delay');
});
return false;
}
}

/**
* Set global settings on body, based on options
* so CSS can use it
*/
document.querySelector('body').setAttribute('aos-easing', options.easing);
document.querySelector('body').setAttribute('aos-duration', options.duration);
document.querySelector('body').setAttribute('aos-delay', options.delay);

/**
* Listen to options.startEvent and fire first refresh
*/
document.addEventListener(options.startEvent, function() {
initialized = true;
refresh();
});

/**
* Refresh plugin on window resize or orientation change
*/
window.addEventListener('resize orientationchange', _debounce(refresh, 50, true));

/**
* Handle scroll event to animate elements on scroll
*/
window.addEventListener('scroll', _throttle(function() {
handleScroll($aosElements, options.once);
}, 99));

/**
* Watch if nodes are removed
* If so refresh plugin
*/
document.addEventListener('DOMNodeRemoved', function(event) {
var el = event.target;
if (el && el.nodeType === 1 && el.hasAttribute && event.target.hasAttribute('aos')) {
_debounce(refresh, 50, true)
}
});

/**
* Observe [aos] elements
* If something is loaded by AJAX
* it'll refresh plugin automatically
*/
observe('[aos]', refresh);

};

/**
* Public API
*/
var AOS = {
init: init,
refresh: refresh
};

/**
* Expose AOS as a global or module
*/
window.AOS = AOS;
if (typeof define === 'function' && define.amd) {
define([], function() {
return AOS;
});
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = AOS;
}

})(window, document);
;(function() {
window.AOS = core(window);
})();
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* @return {Integer} [Final offset that will be used to trigger animation in good position]
*/

var getOffset = require('./offset');
var getOffset = require('./../libs/offset');

var calculateOffset = function(el) {
var elementOffsetTop = 0;
Expand Down
File renamed without changes.
4 changes: 2 additions & 2 deletions src/js/modules/elements.js → src/js/helpers/elements.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* This array will be extended later with elements attributes values
* like 'position'
*/
var createArrayWithElements = function () {
var elements = document.querySelectorAll('[aos]');
var createArrayWithElements = function (elements) {
var elements = elements || document.querySelectorAll('[aos]');
var finalElements = [];

[].forEach.call(elements, function(el, i) {
Expand Down
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 6ffc417

Please sign in to comment.