storm-equal-height - npm Package Compare versions

Comparing version 0.7.0 to 1.0.0

dist/storm-equal-height.js

 /**
  * @name storm-equal-height: Layout helper to equalise the height of a set of DOM elements
- * @version 0.6.0: Wed, 29 Jun 2016 11:54:47 GMT
- * @author stormid
+ * @version 0.7.0: Fri, 10 Mar 2017 15:25:40 GMT
+ * @author mjbp
  * @license MIT
- */(function(root, factory) {
-  if (typeof exports === 'object') {
-    module.exports = factory();
-  } else {
-    root.StormEqualHeight = factory();
-  }
-}(this, function() {
-	'use strict';
-    
-    var instances = [],
-        defaults = {
-            minWidth: 768 
-        },
-		StormEqualHeight = {
-			init: function() {
-				this.throttledEqualise = STORM.UTILS.throttle(this.equalise, 60);
-				window.setTimeout(this.equalise.bind(this), 0);
-        		window.addEventListener('resize', this.throttledEqualise.bind(this), false);
-			},
-			equalise: function() {
-				var max = 0;
-				this.DOMElements.forEach(function(el){
-					el.style.height = 'auto';
-					if(el.offsetHeight > max) {
-						max = el.offsetHeight;
-					}
-				});
+ */
+import throttle from 'lodash.throttle';
 
-				if(window.innerWidth < this.settings.minWidth) { return; }
+const defaults = {
+		minWidth: 768 
+	},
+	StormEqualHeight = {
+		init: function() {
+			this.throttledEqualise = throttle(this.equalise, 16);
+			window.setTimeout(this.equalise.bind(this), 0);
+			window.addEventListener('resize', this.throttledEqualise.bind(this), false);
+			return this;
+		},
+		equalise: function() {
+			let max = 0;
+			this.DOMElements.forEach(el => {
+				el.style.height = 'auto';
+				if(el.offsetHeight > max) {
+					max = el.offsetHeight;
+				}
+			});
 
-				this.DOMElements.forEach(function(el){
-					el.style.height = max + 'px';
-				});
-			}
-		};
-	
-    function init(sel, opts) {
-        var els = [].slice.call(document.querySelectorAll(sel));
-        
-        if(els.length === 0) {
-            throw new Error('Equal Height cannot be initialised, no augmentable elements found');
-        }
-        els.forEach(function(el, i){
-			instances[i] = Object.assign(Object.create(StormEqualHeight), {
-				DOMElements: [].slice.call(el.children),
-				settings: Object.assign({}, defaults, opts)
+			if(window.innerWidth < this.settings.minWidth) return;
+
+			this.DOMElements.forEach(el => {
+				el.style.height = max + 'px';
 			});
-			instances[i].init();
-		});
-        return instances;
-    }
-    
-    function reload(sel, opts) {
-		instances = [];
-		init(sel, opts)
-    }
-	
-	return {
-		init: init,
-        reload: reload
+		}
 	};
 	
- }));
+const init = (sel, opts) => {
+	let els = [].slice.call(document.querySelectorAll(sel));
+	
+	if(!els.length) throw new Error('Equal Height cannot be initialised, no augmentable elements found');
+
+	return els.map((el) => {
+		return Object.assign(Object.create(StormEqualHeight), {
+			DOMElements: [].slice.call(el.children),
+			settings: Object.assign({}, defaults, opts)
+		}).init();
+	});
+};
+
+export default { init };

example/src/app.js

@@ -1,27 +0,12 @@
-var UTILS = {
-		attributelist: require('storm-attributelist'),
-		throttle: require('lodash.throttle')
-	},
-	UI = (function(w, d) {
-		'use strict';
+import Load from 'storm-load';
 
-		var Equaliser = require('./libs/storm-equal-height'),
-			init = function() {
-				Equaliser.init('.js-edward-woodward', {
-					minWidth: 480
-				});
-			};
+const onDOMContentLoadedTasks = [() => {
 
-		return {
-			init: init
-		};
-
-	})(window, document, undefined);
-
-
-global.STORM = {
-    UTILS: UTILS,
-    UI: UI
-};
-
-if('addEventListener' in window) window.addEventListener('DOMContentLoaded', STORM.UI.init, false);
+	Load('./js/storm-equal-height.standalone.js')
+		.then(() => {
+			StormEqualHeight.init('.js-equal-height');
+		});
+	
+}];
+    
+if('addEventListener' in window) window.addEventListener('DOMContentLoaded', () => { onDOMContentLoadedTasks.forEach((fn) => fn()); });

example/src/libs/storm-equal-height.js

 /**
  * @name storm-equal-height: Layout helper to equalise the height of a set of DOM elements
- * @version 0.6.0: Wed, 29 Jun 2016 11:54:47 GMT
- * @author stormid
+ * @version 0.7.0: Fri, 10 Feb 2017 14:49:26 GMT
+ * @author mjbp
  * @license MIT
- */(function(root, factory) {
-  if (typeof exports === 'object') {
-    module.exports = factory();
-  } else {
-    root.StormEqualHeight = factory();
-  }
-}(this, function() {
-	'use strict';
-    
-    var instances = [],
-        defaults = {
-            minWidth: 768 
-        },
-		StormEqualHeight = {
-			init: function() {
-				this.throttledEqualise = STORM.UTILS.throttle(this.equalise, 60);
-				window.setTimeout(this.equalise.bind(this), 0);
-        		window.addEventListener('resize', this.throttledEqualise.bind(this), false);
-			},
-			equalise: function() {
-				var max = 0;
-				this.DOMElements.forEach(function(el){
-					el.style.height = 'auto';
-					if(el.offsetHeight > max) {
-						max = el.offsetHeight;
-					}
-				});
+ */
+import throttle from 'lodash.throttle';
 
-				if(window.innerWidth < this.settings.minWidth) { return; }
+const defaults = {
+		minWidth: 768 
+	},
+	StormEqualHeight = {
+		init: function() {
+			this.throttledEqualise = throttle(this.equalise, 16);
+			window.setTimeout(this.equalise.bind(this), 0);
+			window.addEventListener('resize', this.throttledEqualise.bind(this), false);
+			return this;
+		},
+		equalise: function() {
+			let max = 0;
+			this.DOMElements.forEach(el => {
+				el.style.height = 'auto';
+				if(el.offsetHeight > max) {
+					max = el.offsetHeight;
+				}
+			});
 
-				this.DOMElements.forEach(function(el){
-					el.style.height = max + 'px';
-				});
-			}
-		};
-	
-    function init(sel, opts) {
-        var els = [].slice.call(document.querySelectorAll(sel));
-        
-        if(els.length === 0) {
-            throw new Error('Equal Height cannot be initialised, no augmentable elements found');
-        }
-        els.forEach(function(el, i){
-			instances[i] = Object.assign(Object.create(StormEqualHeight), {
-				DOMElements: [].slice.call(el.children),
-				settings: Object.assign({}, defaults, opts)
+			if(window.innerWidth < this.settings.minWidth) return;
+
+			this.DOMElements.forEach(el => {
+				el.style.height = max + 'px';
 			});
-			instances[i].init();
-		});
-        return instances;
-    }
-    
-    function reload(sel, opts) {
-		instances = [];
-		init(sel, opts)
-    }
-	
-	return {
-		init: init,
-        reload: reload
+		}
 	};
 	
- }));
+const init = (sel, opts) => {
+	let els = [].slice.call(document.querySelectorAll(sel));
+	
+	if(!els.length) throw new Error('Equal Height cannot be initialised, no augmentable elements found');
+
+	return els.map((el) => {
+		return Object.assign(Object.create(StormEqualHeight), {
+			DOMElements: [].slice.call(el.children),
+			settings: Object.assign({}, defaults, opts)
+		}).init();
+	});
+};
+
+export default { init };

gulpfile.js

 /*global require*/
 /* Require the gulp and node packages */
+
 var gulp = require('gulp'),
-    pkg = require('./package.json'),
-    header = require('gulp-header'),
-    notify = require('gulp-notify'),
-    uglify = require('gulp-uglify'),
-    rename = require('gulp-rename'),
-    browserify = require('gulp-browserify'),
-    browserSync = require('browser-sync'),
-    ghPages = require('gulp-gh-pages'),
-    reload = browserSync.reload,
-    runSequence = require('run-sequence');
+	plumber = require('gulp-plumber'),
+	pkg = require('./package.json'),
+	header = require('gulp-header'),
+	wrap = require('gulp-wrap-umd'),
+	notify = require('gulp-notify'),
+	uglify = require('gulp-uglify'),
+	rollup = require('gulp-rollup'),
+	rollupNodeResolve = require('rollup-plugin-node-resolve'),
+    commonjs = require('rollup-plugin-commonjs'),
+	rename = require('gulp-rename'),
+	babel = require('gulp-babel'),
+	browserify = require('browserify'),
+	source = require('vinyl-source-stream'),
+	buffer = require('vinyl-buffer'),
+	babelify = require( 'babelify'),
+	browserSync = require('browser-sync'),
+	ghPages = require('gulp-gh-pages'),
+	runSequence = require('run-sequence'),
+	reload = browserSync.reload;
 
-
 /* Set up the banner */
 var banner = [
-    '/**',
-    ' * @name <%= pkg.name %>: <%= pkg.description %>',
-    ' * @version <%= pkg.version %>: <%= new Date().toUTCString() %>',
-    ' * @author <%= pkg.author %>',
-    ' * @license <%= pkg.license %>',
-    ' */'
+	'/**',
+	' * @name <%= pkg.name %>: <%= pkg.description %>',
+	' * @version <%= pkg.version %>: <%= new Date().toUTCString() %>',
+	' * @author <%= pkg.author %>',
+	' * @license <%= pkg.license %>',
+	' */\n'
 ].join('\n');
 
+/* Wrapper to support es5 window and commonjs with same syntax */ 
+var umdTemplate = ["(function(root, factory) {",
+                    "   var mod = {",
+                    "       exports: {}",
+                    "   };",
+                    "   if (typeof exports !== 'undefined'){",
+                    "       mod.exports = exports",
+                    "       factory(mod.exports)",
+                    "       module.exports = mod.exports.default",
+                    "   } else {",
+                    "       factory(mod.exports);",
+                    "       root.<%= namespace %> = mod.exports.default",
+                    "   }\n",
+                    "}(this, function(exports) {",
+                    "   <%= contents %>;",
+                    "}));\n"
+                    ].join('\n');
+
 /* Error notificaton*/
 var onError = function(err) {
-    notify.onError({
-        title:    "Gulp",
-        subtitle: "Failure!",
-        message:  "Error: <%= error.message %>",
-        sound:    "Beep"
-    })(err);
+	notify.onError({
+		title:    'Gulp',
+		subtitle: 'Failure!',
+		message:  'Error: <%= error.message %>',
+		sound:    'Beep'
+	})(err);
 
-    this.emit('end');
+	this.emit('end');
 };
 
 var componentName = function(){
-	return pkg.name.split('-').map(function(w){ return w.substr(0, 1).toUpperCase() + w.substr(1); }).join();
+	return pkg.name.split('-').map(function(w){ return w.substr(0, 1).toUpperCase() + w.substr(1); }).join('');
 };
@@ -45,48 +72,76 @@
  ************************/
-
-gulp.task('js:copy', function() {
+gulp.task('js:es5', function() {
     return gulp.src('src/*.js')
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(babel({
+			presets: ['es2015']
+		}))
+        .pipe(wrap({
+            namespace: componentName(),
+            template: umdTemplate
+        }))
         .pipe(header(banner, {pkg : pkg}))
+  		.pipe(rename({suffix: '.standalone'}))
 		.pipe(gulp.dest('dist/'));
 });
 
-gulp.task('js:async', function() {
-    return gulp.src('src/*.js')
+gulp.task('js:es5-rollup', function() {
+	return gulp.src('src/' + pkg.name + '.js')
+        .pipe(rollup({
+			allowRealFiles: true,
+            entry: 'src/' + pkg.name + '.js',
+			format: 'es',
+			plugins: [
+				rollupNodeResolve(),
+                commonjs()
+			]
+        }))
+        .pipe(babel({
+			presets: ['es2015']
+		}))
+        .pipe(wrap({
+            namespace: componentName(),
+            template: umdTemplate
+        }))
         .pipe(header(banner, {pkg : pkg}))
-		.pipe(browserify({
-          insertGlobals : true,
-          debug : false,
-		  standalone: componentName()
-        }))
-		.pipe(uglify())
-  		.pipe(rename({suffix: '.async.min'}))
-		.pipe(gulp.dest('dist'));
+  		.pipe(rename({suffix: '.standalone'}))
+		.pipe(gulp.dest('dist/'));
 });
 
-gulp.task('js:compress', function() {
+gulp.task('js:es6', function() {
     return gulp.src('src/*.js')
-		.pipe(header(banner, {pkg : pkg}))
-		.pipe(uglify())
-  		.pipe(rename({suffix: '.min'}))
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(header(banner, {pkg : pkg}))
 		.pipe(gulp.dest('dist/'));
 });
 
-gulp.task('js', ['js:copy', 'js:compress', 'js:async']);
+gulp.task('js', ['js:es6', 'js:es5-rollup']);
 
+
 gulp.task('copy', function() {
-    return gulp.src('dist/*.js')
-		.pipe(gulp.dest('example/src/libs/'));
+    return gulp.src('./dist/*.js')
+		.pipe(gulp.dest('./example/src/libs/'));
 });
 
-gulp.task('example', function() {
-    return gulp.src('example/src/app.js')
-		.pipe(browserify({
-          insertGlobals : true,
-          debug : true
-        }))
-		.pipe(gulp.dest('example/js'));
+gulp.task('example:import', function(){
+    return browserify({
+            entries: './example/src/app.js',
+            debug: true
+        })
+        .transform(babelify, {presets: ['es2015']})
+        .bundle()
+        .pipe(source('app.js'))
+        .pipe(buffer())
+        .pipe(gulp.dest('./example/js'));
 });
+gulp.task('example:async', function(){
+    return gulp.src('./dist/*.js')
+		.pipe(gulp.dest('./example/js/'));
+});
+gulp.task('example', ['example:import', 'example:async']);
 
-gulp.task('server', ['js', 'example'], function () {
-      browserSync({
+
+
+gulp.task('server', ['js', 'copy', 'example'], function() {
+    browserSync({
         notify: false,
@@ -96,3 +151,3 @@ // https: true,
         tunnel: false
-      });
+    });
 
@@ -103,2 +158,3 @@ gulp.watch(['src/*'], function(){
       gulp.watch(['example/**/*'], ['example', reload]);
+      
 });
@@ -116,2 +172,5 @@
 gulp.task('default', ['server']);
-gulp.task('serve', ['server']);
+gulp.task('serve', ['server']);
+gulp.task('build', function() {
+    runSequence('js', 'copy', 'example');
+});

package.json

 {
   "name": "storm-equal-height",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Layout helper to equalise the height of a set of DOM elements",
-  "author": "stormid",
+  "author": "mjbp",
   "license": "MIT",
@@ -14,29 +14,51 @@ "repository": {
   },
-  "main": "dist/storm-equal-height.min.js",
+  "main": "dist/storm-equal-height.js",
+  "keywords": [
+    "stormid",
+    "component",
+    "UI",
+    "equaliser",
+    "height",
+    "layout"
+  ],
+  "scripts": {
+    "build": "gulp build",
+    "start": "gulp",
+    "test": "istanbul cover _mocha --report lcovonly -- -R spec && codecov",
+    "test:watch": "NODE_ENV=test mocha --watch"
+  },
   "devDependencies": {
-    "browser-sync": "^2.11.1",
+    "babel": "^6.5.2",
+    "babel-core": "^6.7.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-es2015": "^6.5.0",
+    "babelify": "^7.3.0",
+    "browser-sync": "^2.17.5",
+    "browserify": "^13.1.0",
     "gulp": "^3.9.0",
-    "gulp-browserify": "^0.5.1",
+    "gulp-babel": "^6.1.2",
     "gulp-gh-pages": "^0.5.4",
     "gulp-header": "^1.2.2",
     "gulp-notify": "^2.2.0",
+    "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.4.2",
+    "gulp-rollup": "^2.10.0",
+    "gulp-uglify": "^2.0.0",
+    "gulp-wrap-umd": "^0.2.1",
+    "istanbul": "^1.1.0-alpha.1",
+    "jsdom": "^9.8.0",
+    "jsdom-global": "^2.1.0",
+    "mocha": "^3.1.2",
+    "object-assign": "^4.0.1",
+    "rollup-plugin-commonjs": "^7.0.0",
+    "rollup-plugin-node-resolve": "^2.0.0",
     "run-sequence": "^1.1.0",
-    "dom-classlist": "^1.0.1",
-    "lodash.throttle": "^4.0.0",
-    "merge": "^1.2.0",
-    "object-assign": "^4.0.1",
-    "storm-attributelist": "^0.2.0"
+    "should": "^11.1.1",
+    "storm-load": "^0.4.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
-  "keywords": [
-    "stormid",
-    "UI",
-    "equaliser",
-    "height",
-    "layout"
-  ],
   "dependencies": {
-    "storm-attributelist": "^0.2.0"
+    "lodash.throttle": "^4.1.1"
   }
 }

README.md

@@ -1,17 +0,77 @@
-#Storm Equal Height
+# Storm Equal Height
 
-Layout helper to equalise the height of a set of DOM elements
+[![Build Status](https://travis-ci.org/mjbp/storm-equal-height.svg?branch=master)](https://travis-ci.org/mjbp/storm-equal-height)
+[![codecov.io](http://codecov.io/github/mjbp/storm-equal-height/coverage.svg?branch=master)](http://codecov.io/github/mjbp/storm-equal-height?branch=master)
+[![npm version](https://badge.fury.io/js/storm-equal-height.svg)](https://badge.fury.io/js/storm-equal-height)
 
-##Usage
+Layout helper to equalise the height of a set of DOM elements. This is a last resort after CSS grid, flexbox, display:table, and min-heights have been discounted. If the elements contain asynchronously loaded assets, including imgs, you will need to inti this compononet after they have loaded.
+
+## Example
+[https://mjbp.github.io/storm-equal-height](https://mjbp.github.io/storm-equal-height)
+
+## Usage
+HTML
 ```
-npm install storm-equal-height
+<div class="js-equal-height">
+    <div>
+        ...
+    </div>
+    <div>
+        ...
+    </div>
+    <div>
+        ...
+    </div>
+</div>
 ```
 
-```javascript
-var equalHeight = require('storm-equal-height')
-equalHeight.init('js-equal-height',  {minWidth: 768});
+JS
 ```
-The selector class refers to the parent node, and equalises the height of all children.
+npm i -S storm-equal-height
+```
+either using es6 import
+```
+import EqualHeight from 'storm-equal-height';
 
-###Options
-minWidth, Number, minimum window width at which to apply equal height across elements
+EqualHeight.init('.js-equal-height');
+```
+aynchronous browser loading (use the .standalone version in the /dist folder)
+```
+import Load from 'storm-load';
+
+Load('/content/js/async/storm-equal-height.standalone.js')
+    .then(() => {
+        StormEqualHeight.init('.js-equal-height');
+    });
+```
+
+
+## Options
+```
+    {
+        minWidth: 768 
+    }
+```
+
+e.g.
+```
+EqualHeight.init('.js-equal-height');
+```
+
+## Tests
+```
+npm run test
+```
+
+## Browser support
+This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.
+
+This module depends upon Object.assign, element.classList, and Promises, available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.
+
+## Dependencies
+None external.
+
+Imports lodash.throttle.
+
+## License
+MIT

src/storm-equal-height.js

@@ -1,63 +0,43 @@
-(function(root, factory) {
-  if (typeof exports === 'object') {
-    module.exports = factory();
-  } else {
-    root.StormEqualHeight = factory();
-  }
-}(this, function() {
-	'use strict';
-    
-    var instances = [],
-        defaults = {
-            minWidth: 768 
-        },
-		StormEqualHeight = {
-			init: function() {
-				this.throttledEqualise = STORM.UTILS.throttle(this.equalise, 60);
-				window.setTimeout(this.equalise.bind(this), 0);
-        		window.addEventListener('resize', this.throttledEqualise.bind(this), false);
-			},
-			equalise: function() {
-				var max = 0;
-				this.DOMElements.forEach(function(el){
-					el.style.height = 'auto';
-					if(el.offsetHeight > max) {
-						max = el.offsetHeight;
-					}
-				});
+import throttle from 'lodash.throttle';
 
-				if(window.innerWidth < this.settings.minWidth) { return; }
+const defaults = {
+		minWidth: 768 
+	},
+	StormEqualHeight = {
+		init: function() {
+			this.throttledEqualise = throttle(this.equalise, 16);
+			window.setTimeout(this.equalise.bind(this), 0);
+			window.addEventListener('resize', this.throttledEqualise.bind(this), false);
+			return this;
+		},
+		equalise: function() {
+			let max = 0;
+			this.DOMElements.forEach(el => {
+				el.style.height = 'auto';
+				if(el.offsetHeight > max) {
+					max = el.offsetHeight;
+				}
+			});
 
-				this.DOMElements.forEach(function(el){
-					el.style.height = max + 'px';
-				});
-			}
-		};
-	
-    function init(sel, opts) {
-        var els = [].slice.call(document.querySelectorAll(sel));
-        
-        if(els.length === 0) {
-            throw new Error('Equal Height cannot be initialised, no augmentable elements found');
-        }
-        els.forEach(function(el, i){
-			instances[i] = Object.assign(Object.create(StormEqualHeight), {
-				DOMElements: [].slice.call(el.children),
-				settings: Object.assign({}, defaults, opts)
+			if(window.innerWidth < this.settings.minWidth) return;
+
+			this.DOMElements.forEach(el => {
+				el.style.height = max + 'px';
 			});
-			instances[i].init();
-		});
-        return instances;
-    }
-    
-    function reload(sel, opts) {
-		instances = [];
-		init(sel, opts)
-    }
-	
-	return {
-		init: init,
-        reload: reload
+		}
 	};
 	
- }));
+const init = (sel, opts) => {
+	let els = [].slice.call(document.querySelectorAll(sel));
+	
+	if(!els.length) throw new Error('Equal Height cannot be initialised, no augmentable elements found');
+
+	return els.map((el) => {
+		return Object.assign(Object.create(StormEqualHeight), {
+			DOMElements: [].slice.call(el.children),
+			settings: Object.assign({}, defaults, opts)
+		}).init();
+	});
+};
+
+export default { init };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

25

increased by56.25%

Number of low quality alerts

2

decreased by-50%

Number of lines in readme file

77

increased by352.94%

Worsened metrics

Total package byte prevSize

103080

decreased by-67.72%

Dev dependency count

29

increased by107.14%

Lines of code

1850

decreased by-33.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.throttle@^4.1.1

• + Addedlodash.throttle@4.1.1(transitive)

• - Removedstorm-attributelist@^0.2.0

• - Removedmerge@1.2.1(transitive)

• - Removedstorm-attributelist@0.2.0(transitive)