Switch to spin.js v4 and drop support for IE 9

Author: theodorejb

.gitignore

@@ -1,5 +1,3 @@
-/node_modules
-/.sass-cache
-/dist
-package-lock.json
+/node_modules/
+/dist/
 /test/*-bundle.js

.npmignore

@@ -0,0 +1 @@
+package-lock=false

.npmrc

@@ -8,8 +8,7 @@ module.exports = function(grunt) {
 		sass: {
 			main: {
 				options: {
-					style: 'compressed',
-					sourcemap: 'none'
+					outputStyle: 'compressed',
 				},
 				files: {
 					'dist/ladda.min.css': [ 'css/ladda-themed.scss' ],
@@ -77,7 +76,7 @@ module.exports = function(grunt) {
 	// Dependencies
 	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
 	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-contrib-sass' );
+	grunt.loadNpmTasks( 'grunt-sass' );
 	grunt.loadNpmTasks( 'grunt-contrib-connect' );
 
 	// Default task

Gruntfile.js

@@ -28,9 +28,9 @@ Buttons accept the following attributes:
 - **data-style**: one of the button styles, full list in [demo](http://lab.hakim.se/ladda/) *[required]*
 - **data-color**: green/red/blue/purple/mint
 - **data-size**: xs/s/l/xl, defaults to medium
-- **data-spinner-size**: 40, pixel dimensions of spinner, defaults to dynamic size based on the button height
-- **data-spinner-color**: A hex code or any [named CSS color](http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/).
-- **data-spinner-lines**: 12, the number of lines the for the spinner, defaults to 12
+- **data-spinner-size**: pixel dimensions of spinner, defaults to dynamic size based on the button height
+- **data-spinner-color**: a hex code or any [named CSS color](https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/)
+- **data-spinner-lines**: the number of lines the for the spinner, defaults to 12
 
 ### JavaScript
 
@@ -40,7 +40,7 @@ Start by importing the Ladda module:
 import * as Ladda from 'ladda';
 ```
 
-If you want JavaScript control over your buttons you can use the following approach:
+The following approach is recommended for JavaScript control over your buttons:
 
 ```javascript
 // Create a new instance of ladda for the specified button
@@ -65,7 +65,7 @@ l.isLoading();
 l.remove();
 ```
 
-If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the `bind()` method:
+To show the loading animation for a form that is submitted to the server (always resulting in a page reload) the `bind()` method can be used:
 
 ```javascript
 // Automatically trigger the loading animation on click
@@ -85,7 +85,12 @@ Ladda.stopAll();
 
 ## Browser support
 
-The project is tested in Chrome, Firefox, and Edge. It Should Work™ in the current stable releases of Chrome, Firefox, Edge, and Safari, as well as IE9 and up.
+Ladda has been tested in Chrome, Firefox, Edge, and Internet Explorer 11.
+It also Should Work™ in Safari and Internet Explorer 10.
+
+Note: Ladda 2.x is distributed as an ES6 module, but not all browsers support importing native ES6 modules.
+For full browser compatibility, use a module bundler such as <a href="https://webpack.js.org/">Webpack</a>
+or <a href="https://rollupjs.org/">Rollup</a> to create a production-ready code bundle.
 
 ## Changelog
 

README.md

@@ -3,7 +3,7 @@
  * http://lab.hakim.se/ladda
  * MIT licensed
  *
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  */
 
 
@@ -18,28 +18,12 @@ $spinnerSize: 32px;
  * MIXINS
  */
 
-@mixin prefix ( $property, $value ) {
-	-webkit-#{$property}: $value;
-	   -moz-#{$property}: $value;
-	    -ms-#{$property}: $value;
-	     -o-#{$property}: $value;
-	        #{$property}: $value;
-}
-
 @mixin transition( $value ) {
-	-webkit-transition: $value !important; // important to override bootstrap
-	   -moz-transition: $value !important;
-	    -ms-transition: $value !important;
-	     -o-transition: $value !important;
-	        transition: $value !important;
+	transition: $value !important;
 }
 
 @mixin transform( $value ) {
-	@include prefix( transform, $value );
-}
-
-@mixin transform-origin( $value ) {
-	@include prefix( transform-origin, $value );
+	transform: $value;
 }
 
 @mixin buttonColor( $name, $color ) {
@@ -53,6 +37,20 @@ $spinnerSize: 32px;
 }
 
 
+/*************************************
+ * Opacity animation for spin.js
+ */
+
+@keyframes ladda-spinner-line-fade {
+  0%, 100% {
+    opacity: 0.22; /* minimum opacity */
+  }
+  1% {
+    opacity: 1;
+  }
+}
+
+
 /*************************************
  * BUTTON BASE
  */

css/ladda.scss

@@ -34,22 +34,22 @@ <h1>Ladda</h1>
 
 			<section class="button-demo">
 				<h3>expand-left</h3>
-				<button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>
+				<button data-color="green" data-style="expand-left">Submit</button>
 			</section>
 
 			<section class="button-demo">
 				<h3>expand-right</h3>
-				<button class="ladda-button" data-color="green" data-style="expand-right">Submit</button>
+				<button data-color="green" data-style="expand-right">Submit</button>
 			</section>
 
 			<section class="button-demo">
 				<h3>expand-up</h3>
-				<button class="ladda-button" data-color="green" data-style="expand-up">Submit</button>
+				<button data-color="green" data-style="expand-up">Submit</button>
 			</section>
 
 			<section class="button-demo">
 				<h3>expand-down</h3>
-				<button class="ladda-button" data-color="green" data-style="expand-down">Submit</button>
+				<button data-color="green" data-style="expand-down">Submit</button>
 			</section>
 
 

index.html

@@ -3,7 +3,7 @@
  * http://lab.hakim.se/ladda
  * MIT licensed
  *
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  */
 
  import {Spinner} from 'spin.js';
@@ -26,8 +26,8 @@ export function create( button ) {
 	}
 
 	// The button must have the class "ladda-button"
-	if( !/ladda-button/i.test( button.className ) ) {
-		button.className += ' ladda-button';
+	if ( !button.classList.contains('ladda-button') ) {
+		button.classList.add( 'ladda-button' );
 	}
 
 	// Style is required, default to "expand-right"
@@ -244,34 +244,6 @@ function getAncestorOfTagType( elem, type ) {
 
 }
 
-/**
- * Returns a list of all inputs in the given form that
- * have their `required` attribute set.
- *
- * @param form The from HTML element to look in
- *
- * @return A list of elements
- */
-function getRequiredFields( form ) {
-
-	var requirables = [ 'input', 'textarea', 'select' ];
-	var inputs = [];
-
-	requirables.forEach(function (r) {
-		var candidates = form.getElementsByTagName( r );
-
-		for( var j = 0; j < candidates.length; j++ ) {
-			// legacy browsers don't support required property
-			if ( candidates[j].hasAttribute('required') ) {
-				inputs.push( candidates[j] );
-			}
-		}
-	});
-
-	return inputs;
-
-}
-
 function createSpinner( button ) {
 
 	var height = button.offsetHeight,
@@ -314,6 +286,7 @@ function createSpinner( button ) {
 		radius: radius,
 		length: length,
 		width: width,
+		animation: 'ladda-spinner-line-fade',
 		zIndex: 'auto',
 		top: 'auto',
 		left: 'auto',
@@ -351,43 +324,6 @@ function bindElement( element, options ) {
 			if( typeof form.checkValidity === 'function' ) {
 				valid = form.checkValidity();
 			}
-			// Fallback to manual validation for old browsers
-			else {
-				var requireds = getRequiredFields( form );
-				for( var i = 0; i < requireds.length; i++ ) {
-					var field = requireds[i];
-
-					// The input type property will always return "text" for email and url fields in IE 9.
-					// Note that emulating IE 9 in IE 11 will also return "text" for the type attribute,
-					// but the actual IE 9 browser will return the correct attribute.
-					var fieldType = field.getAttribute('type');
-
-					if( field.value.replace( /^\s+|\s+$/g, '' ) === '' ) {
-						valid = false;
-					}
-
-					// Radiobuttons and Checkboxes need to be checked for the "checked" attribute
-					if( (fieldType === 'checkbox' || fieldType === 'radio' ) && !field.checked ) {
-						valid = false;
-					}
-
-					// Email field validation
-					if( fieldType === 'email' ) {
-						// regex from https://stackoverflow.com/a/7786283/1170489
-						valid = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i.test( field.value );
-					}
-
-					// URL field validation
-					if (fieldType === 'url') {
-						// regex from https://stackoverflow.com/a/10637803/1170489
-						valid = /^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test( field.value );
-					}
-
-					if (!valid) {
-						break;
-					}
-				}
-			}
 		}
 
 		if( valid ) {

js/ladda.js

@@ -1,8 +1,13 @@
 {
   "name": "ladda",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "Buttons with built-in loading indicators",
   "homepage": "http://lab.hakim.se/ladda",
+  "files": [
+    "dist/*.css",
+    "js/ladda.d.ts",
+    "js/ladda.js"
+  ],
   "main": "./js/ladda.js",
   "types": "./js/ladda.d.ts",
   "scripts": {
@@ -20,16 +25,16 @@
     "url": "git://github.com/hakimel/Ladda.git"
   },
   "devDependencies": {
-    "grunt": "^1.0.1",
+    "grunt": "^1.0.2",
     "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-jshint": "^1.1.0",
-    "grunt-contrib-sass": "^1.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "rollup": "^0.53.3",
-    "rollup-plugin-node-resolve": "^3.0.0"
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-sass": "^2.1.0",
+    "rollup": "^0.58.2",
+    "rollup-plugin-node-resolve": "^3.3.0"
   },
   "license": "MIT",
   "dependencies": {
-    "spin.js": "^3.1.0"
+    "spin.js": "^4.0.0"
   }
 }