From 9d7e1ac3a5c71e524e8cccd11a6b20ad5be768d2 Mon Sep 17 00:00:00 2001 From: Ivan Gromov Date: Fri, 19 Feb 2016 23:14:05 +0500 Subject: [PATCH] An attpempt to rewrite library in CommonJS style --- gulpfile.js | 24 ++++++++++---------- package.json | 10 ++++++++- src/adapters/jquery-zepto-fn-extension.js | 12 ++-------- src/adapters/jquery.js | 18 ++++++--------- src/adapters/noframework.js | 13 ++++------- src/adapters/zepto.js | 27 +++++++++-------------- src/context.js | 18 +++++++-------- src/debug.js | 11 ++++----- src/entries/debug.js | 4 ++++ src/entries/noframework.js | 14 ++++++++++++ src/entries/shortcuts.inview.js | 4 ++++ src/group.js | 6 ++--- src/shortcuts/infinite.js | 8 +++---- src/shortcuts/inview.js | 8 +++---- src/shortcuts/sticky.js | 8 +++---- src/waypoint.js | 8 +++---- 16 files changed, 93 insertions(+), 100 deletions(-) create mode 100644 src/entries/debug.js create mode 100644 src/entries/noframework.js create mode 100644 src/entries/shortcuts.inview.js diff --git a/gulpfile.js b/gulpfile.js index 2eb60bc..3507316 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,3 +1,6 @@ +var browserify = require('browserify') +var source = require('vinyl-source-stream') +var buffer = require('vinyl-buffer') var gulp = require('gulp') var eslint = require('gulp-eslint') var concat = require('gulp-concat') @@ -33,18 +36,15 @@ gulp.task('lint', function() { }) gulp.task('build-core', function() { - var streams = ['noframework', 'jquery', 'zepto'].map(function(adapter) { - var sources = [ - 'src/waypoint.js', - 'src/context.js', - 'src/group.js', - 'src/adapters/' + adapter + '.js' - ] - if (['jquery', 'zepto'].indexOf(adapter) > -1) { - sources.push('src/adapters/jquery-zepto-fn-extension.js') - } - return gulp.src(sources) - .pipe(concat(adapter + '.waypoints.js', { newLine: ';' })) + var streams = ['noframework'/* TODO: , 'jquery', 'zepto'*/].map(function(adapter) { + var b = browserify({ + entries: './src/entries/' + adapter + '.js', + debug: true + }); + + return b.bundle() + .pipe(source(adapter + '.waypoints.js')) + .pipe(buffer()) .pipe(header(fileHeader('Waypoints'))) .pipe(footer(';')) .pipe(gulp.dest('lib/')) diff --git a/package.json b/package.json index 22a8516..37c9829 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "scroll" ], "devDependencies": { + "browserify": "^13.0.0", "eslint": "^0.6.2", "gulp": "^3.6.2", "gulp-concat": "^2.2.0", @@ -28,7 +29,14 @@ "gulp-tap": "^0.1.1", "gulp-uglify": "^0.3.1", "merge-stream": "^0.1.1", - "testem": "^0.6.24" + "testem": "^0.6.24", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0" }, + "optionalDependencies": { + "jquery": "^1.12.0", + "zepto": "^1.0.1" + }, + "main": "entries/noframework", "license": "MIT" } diff --git a/src/adapters/jquery-zepto-fn-extension.js b/src/adapters/jquery-zepto-fn-extension.js index 8857569..b88b906 100644 --- a/src/adapters/jquery-zepto-fn-extension.js +++ b/src/adapters/jquery-zepto-fn-extension.js @@ -1,7 +1,5 @@ -(function() { 'use strict' - - var Waypoint = window.Waypoint + var Waypoint = require('../waypoint') function createExtension(framework) { return function() { @@ -27,10 +25,4 @@ } } - if (window.jQuery) { - window.jQuery.fn.waypoint = createExtension(window.jQuery) - } - if (window.Zepto) { - window.Zepto.fn.waypoint = createExtension(window.Zepto) - } -}()) + module.exports = createExtension diff --git a/src/adapters/jquery.js b/src/adapters/jquery.js index ac71236..2a0777e 100644 --- a/src/adapters/jquery.js +++ b/src/adapters/jquery.js @@ -1,14 +1,12 @@ -(function() { 'use strict' - var $ = window.jQuery - var Waypoint = window.Waypoint + var jquery = global.jQuery //require('jquery') function JQueryAdapter(element) { - this.$element = $(element) + this.$element = jquery(element) } - $.each([ + jquery.each([ 'innerHeight', 'innerWidth', 'off', @@ -25,17 +23,15 @@ } }) - $.each([ + jquery.each([ 'extend', 'inArray', 'isEmptyObject' ], function(i, method) { - JQueryAdapter[method] = $[method] + JQueryAdapter[method] = jquery[method] }) - Waypoint.adapters.push({ + module.exports = { name: 'jquery', Adapter: JQueryAdapter - }) - Waypoint.Adapter = JQueryAdapter -}()) + } diff --git a/src/adapters/noframework.js b/src/adapters/noframework.js index bac75ea..890dbee 100644 --- a/src/adapters/noframework.js +++ b/src/adapters/noframework.js @@ -1,8 +1,5 @@ -(function() { 'use strict' - var Waypoint = window.Waypoint - function isWindow(element) { return element === element.window } @@ -101,7 +98,7 @@ var computedStyle if (includeMargin && !isWindow(this.element)) { - computedStyle = window.getComputedStyle(this.element) + computedStyle = global.getComputedStyle(this.element) height += parseInt(computedStyle.marginTop, 10) height += parseInt(computedStyle.marginBottom, 10) } @@ -114,7 +111,7 @@ var computedStyle if (includeMargin && !isWindow(this.element)) { - computedStyle = window.getComputedStyle(this.element) + computedStyle = global.getComputedStyle(this.element) width += parseInt(computedStyle.marginLeft, 10) width += parseInt(computedStyle.marginRight, 10) } @@ -165,9 +162,7 @@ return true } - Waypoint.adapters.push({ + module.exports = { name: 'noframework', Adapter: NoFrameworkAdapter - }) - Waypoint.Adapter = NoFrameworkAdapter -}()) + } diff --git a/src/adapters/zepto.js b/src/adapters/zepto.js index 203e40e..330812b 100644 --- a/src/adapters/zepto.js +++ b/src/adapters/zepto.js @@ -1,15 +1,12 @@ -(function() { 'use strict' - - var $ = window.Zepto - var Waypoint = window.Waypoint + var Zepto = global.Zepto //require('zepto') function ZeptoAdapter(element) { this.element = element - this.$element = $(element) + this.$element = Zepto(element) } - $.each([ + Zepto.each([ 'off', 'on', 'scrollLeft', @@ -28,7 +25,7 @@ } // Adapted from https://gist.github.com/wheresrhys/5823198 - $.each([ + Zepto.each([ 'width', 'height' ], function(i, dimension) { @@ -41,7 +38,7 @@ height: ['top', 'bottom'] } - $.each(sides[dimension], function(i, side) { + Zepto.each(sides[dimension], function(i, side) { size += parseInt($element.css('padding-' + side), 10) if (includeBorder) { size += parseInt($element.css('border-' + side + '-width'), 10) @@ -54,18 +51,18 @@ } } - var innerMethod = $.camelCase('inner-' + dimension) - var outerMethod = $.camelCase('outer-' + dimension) + var innerMethod = Zepto.camelCase('inner-' + dimension) + var outerMethod = Zepto.camelCase('outer-' + dimension) ZeptoAdapter.prototype[innerMethod] = createDimensionMethod(false) ZeptoAdapter.prototype[outerMethod] = createDimensionMethod(true) }) - $.each([ + Zepto.each([ 'extend', 'inArray' ], function(i, method) { - ZeptoAdapter[method] = $[method] + ZeptoAdapter[method] = Zepto[method] }) ZeptoAdapter.isEmptyObject = function(obj) { @@ -76,9 +73,7 @@ return true } - Waypoint.adapters.push({ + module.exports = { name: 'zepto', Adapter: ZeptoAdapter - }) - Waypoint.Adapter = ZeptoAdapter -}()) + } diff --git a/src/context.js b/src/context.js index 5e3551b..ba142f0 100644 --- a/src/context.js +++ b/src/context.js @@ -1,14 +1,13 @@ -(function() { 'use strict' + var Waypoint = require('./waypoint') function requestAnimationFrameShim(callback) { - window.setTimeout(callback, 1000 / 60) + global.setTimeout(callback, 1000 / 60) } var keyCounter = 0 var contexts = {} - var Waypoint = window.Waypoint - var oldWindowLoad = window.onload + var oldWindowLoad = global.onload /* http://imakewebthings.com/waypoints/api/context */ function Context(element) { @@ -282,7 +281,7 @@ return contexts[element.waypointContextKey] } - window.onload = function() { + global.onload = function() { if (oldWindowLoad) { oldWindowLoad() } @@ -290,11 +289,10 @@ } Waypoint.requestAnimationFrame = function(callback) { - var requestFn = window.requestAnimationFrame || - window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || + var requestFn = global.requestAnimationFrame || + global.mozRequestAnimationFrame || + global.webkitRequestAnimationFrame || requestAnimationFrameShim requestFn.call(window, callback) } - Waypoint.Context = Context -}()) + module.exports = Context diff --git a/src/debug.js b/src/debug.js index be9510b..b68369a 100644 --- a/src/debug.js +++ b/src/debug.js @@ -1,6 +1,4 @@ -(function() { 'use strict' - var displayNoneMessage = [ 'You have a Waypoint element with display none. For more information on ', 'why this is a bad idea read ', @@ -13,13 +11,13 @@ ].join('') function checkWaypointStyles() { - var originalRefresh = window.Waypoint.Context.prototype.refresh + var originalRefresh = global.Waypoint.Context.prototype.refresh - window.Waypoint.Context.prototype.refresh = function() { + global.Waypoint.Context.prototype.refresh = function() { for (var axis in this.waypoints) { for (var key in this.waypoints[axis]) { var waypoint = this.waypoints[axis][key] - var style = window.getComputedStyle(waypoint.element) + var style = global.getComputedStyle(waypoint.element) if (!waypoint.enabled) { continue } @@ -35,5 +33,4 @@ } } - checkWaypointStyles() -}()) + module.exports = checkWaypointStyles diff --git a/src/entries/debug.js b/src/entries/debug.js new file mode 100644 index 0000000..83eaaf7 --- /dev/null +++ b/src/entries/debug.js @@ -0,0 +1,4 @@ +'use strict' +var Debug = require('../debug') +Debug() +module.exports = Debug diff --git a/src/entries/noframework.js b/src/entries/noframework.js new file mode 100644 index 0000000..c8885a5 --- /dev/null +++ b/src/entries/noframework.js @@ -0,0 +1,14 @@ +'use strict' +var Waypoint = require('../waypoint') +var Context = require('../context') +var Group = require('../group') +var NoFrameworkAdapter = require('../adapters/noframework') +var Inview = require('../shortcuts/inview') + +Waypoint.Context = Context +Waypoint.Group = Group +Waypoint.adapters.push(NoFrameworkAdapter) +Waypoint.Adapter = NoFrameworkAdapter.Adapter +Waypoint.Inview = Inview + +module.exports = Waypoint diff --git a/src/entries/shortcuts.inview.js b/src/entries/shortcuts.inview.js new file mode 100644 index 0000000..549677e --- /dev/null +++ b/src/entries/shortcuts.inview.js @@ -0,0 +1,4 @@ +var InView = require('../shortcuts/inview') + +global.Waypoint.Inview = InView +module.exports = InView diff --git a/src/group.js b/src/group.js index 57c3038..1426106 100644 --- a/src/group.js +++ b/src/group.js @@ -1,5 +1,5 @@ -(function() { 'use strict' + var Waypoint = require('./waypoint') function byTriggerPoint(a, b) { return a.triggerPoint - b.triggerPoint @@ -13,7 +13,6 @@ vertical: {}, horizontal: {} } - var Waypoint = window.Waypoint /* http://imakewebthings.com/waypoints/api/group */ function Group(options) { @@ -101,5 +100,4 @@ return groups[options.axis][options.name] || new Group(options) } - Waypoint.Group = Group -}()) + module.exports = Group diff --git a/src/shortcuts/infinite.js b/src/shortcuts/infinite.js index a904dab..1b6f99a 100644 --- a/src/shortcuts/infinite.js +++ b/src/shortcuts/infinite.js @@ -1,8 +1,7 @@ -(function() { 'use strict' - var $ = window.jQuery - var Waypoint = window.Waypoint + var $ = global.jQuery //require('jquery') + var Waypoint = global.Waypoint // require('../waypoint') /* http://imakewebthings.com/waypoints/shortcuts/infinite-scroll */ function Infinite(options) { @@ -73,5 +72,4 @@ onAfterPageLoad: $.noop } - Waypoint.Infinite = Infinite -}()) + module.exports = Infinite diff --git a/src/shortcuts/inview.js b/src/shortcuts/inview.js index cda4b1f..54ce914 100644 --- a/src/shortcuts/inview.js +++ b/src/shortcuts/inview.js @@ -1,9 +1,8 @@ -(function() { 'use strict' + var Waypoint = global.Waypoint //require('../waypoint') function noop() {} - var Waypoint = window.Waypoint /* http://imakewebthings.com/waypoints/shortcuts/inview */ function Inview(options) { @@ -101,7 +100,7 @@ } Inview.defaults = { - context: window, + context: global, enabled: true, enter: noop, entered: noop, @@ -109,5 +108,4 @@ exited: noop } - Waypoint.Inview = Inview -}()) + module.exports = Inview diff --git a/src/shortcuts/sticky.js b/src/shortcuts/sticky.js index 7dc7054..b1d68e7 100644 --- a/src/shortcuts/sticky.js +++ b/src/shortcuts/sticky.js @@ -1,8 +1,7 @@ -(function() { 'use strict' - var $ = window.jQuery - var Waypoint = window.Waypoint + var $ = global.jQuery //require('jquery') + var Waypoint = global.Waypoint // require('../waypoint') /* http://imakewebthings.com/waypoints/shortcuts/sticky-elements */ function Sticky(options) { @@ -59,5 +58,4 @@ direction: 'down right' } - Waypoint.Sticky = Sticky -}()) + module.exports = Sticky diff --git a/src/waypoint.js b/src/waypoint.js index 7f76f1d..6ae74fd 100644 --- a/src/waypoint.js +++ b/src/waypoint.js @@ -1,4 +1,3 @@ -(function() { 'use strict' var keyCounter = 0 @@ -127,7 +126,7 @@ /* Public */ /* http://imakewebthings.com/waypoints/api/viewport-height */ Waypoint.viewportHeight = function() { - return window.innerHeight || document.documentElement.clientHeight + return global.innerHeight || document.documentElement.clientHeight } /* Public */ @@ -139,7 +138,7 @@ Waypoint.adapters = [] Waypoint.defaults = { - context: window, + context: global, continuous: true, enabled: true, group: 'default', @@ -156,5 +155,4 @@ } } - window.Waypoint = Waypoint -}()) + module.exports = Waypoint