Merge pull request #17 from imgix/umd-output

UMD Output

Author: paulstraw

README.md

@@ -19,6 +19,8 @@ Easily add "zoom on hover" functionality to your site's images. Lightweight, no-
 * **Bower**: `bower install drift`
 * **Manual**: [Download](https://github.com/imgix/drift/archive/master.zip) and use `dist/Drift.min.js` or `dist/Drift.js`
 
+If your build process will re-run `dist/Drift.js` or `dist/Drift.min.js` through Browserify, you'll need to add `noParse: ['drift-zoom']` to your Browserify config. If you skip this, Browserify will attempt to re-require Drift's dependencies which have already been inlined.
+
 
 <a name="usage"></a>
 ## Usage

dist/Drift.js

@@ -1,14 +1,8 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-(function (global){
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Drift = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 'use strict';
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VERSION = undefined;
-
 var _dom = require('./util/dom');
 
 var _injectBaseStylesheet = require('./injectBaseStylesheet');
@@ -27,16 +21,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var VERSION = exports.VERSION = '0.1.6';
-
-var Drift = (function () {
+module.exports = (function () {
   function Drift(triggerEl) {
     var _this = this;
 
     var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 
     _classCallCheck(this, Drift);
 
+    this.VERSION = '0.1.6';
+
     this.destroy = function () {
       _this.trigger._unbindEvents();
     };
@@ -173,11 +167,6 @@ var Drift = (function () {
   return Drift;
 })();
 
-exports.default = Drift;
-
-global.Drift = Drift;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./Trigger":2,"./ZoomPane":3,"./injectBaseStylesheet":4,"./util/dom":5}],2:[function(require,module,exports){
 'use strict';
 
@@ -338,7 +327,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 // All officially-supported browsers have this, but it's easy to
 // account for, just in case.
-var HAS_ANIMATION = 'animation' in document.createElement('div').style;
+var HAS_ANIMATION = typeof document === 'undefined' ? false : 'animation' in document.createElement('div').style;
 
 var ZoomPane = (function () {
   function ZoomPane() {
@@ -633,4 +622,5 @@ function throwIfMissing() {
   throw new Error('Missing parameter');
 }
 
-},{}]},{},[1]);
+},{}]},{},[1])(1)
+});

dist/Drift.min.js

@@ -68,6 +68,7 @@ gulp.task('test-full', function(done) {
 
 gulp.task('build-js', function() {
   var b = browserify({
+    standalone: 'Drift',
     entries: paths.jsEntry,
     transform: [babelify]
   }).bundle();

gulpfile.js

@@ -4,9 +4,9 @@ import injectBaseStylesheet from './injectBaseStylesheet';
 import Trigger from './Trigger';
 import ZoomPane from './ZoomPane';
 
-export const VERSION = '0.1.6';
+module.exports = class Drift {
+  VERSION = '0.1.6'
 
-export default class Drift {
   constructor(triggerEl, options = {}) {
     this.triggerEl = triggerEl;
 
@@ -113,5 +113,3 @@ export default class Drift {
     this.trigger._unbindEvents();
   };
 }
-
-global.Drift = Drift;

src/js/Drift.js

@@ -3,7 +3,9 @@ import { addClasses, removeClasses } from './util/dom';
 
 // All officially-supported browsers have this, but it's easy to
 // account for, just in case.
-const HAS_ANIMATION = 'animation' in document.createElement('div').style;
+const HAS_ANIMATION = typeof document === 'undefined' ?
+  false :
+  'animation' in document.createElement('div').style;
 
 export default class ZoomPane {
   constructor(options = {}) {

src/js/ZoomPane.js

@@ -17,10 +17,6 @@ afterEach(function() {
 });
 
 describe('Core', () => {
-  it('exposes `Drift` on `window`', () => {
-    expect(window.Drift).toBeDefined();
-  });
-
   it('throws if no arguments are passed', () => {
     expect(() => {
       new Drift;