- Done some serious refactoring.

  Low-level details moved to a separate functions, so the main logic became more abstract and readable.
  Performance and memory footprint should also improve

- Fixed bug when empty element would not recover it's master value when reset is invoked on the parent form

- Introduced distribution files (normal and minified versions) and a proper build process using **Gulp**

- Improved README

Author: Slava Fomin II

.gitignore

@@ -1 +1,2 @@
-/.idea
+/.idea
+/node_modules

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "angular-input-modified",
     "description": "AngularJS module to detect and indicate input modifications",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "main": "src/angular-input-modified.js",
     "dependencies": {
         "angular": "~1.2.26"

changelog.md

@@ -1,9 +1,20 @@
 # angular-input-modified changelog
 
+## Version 1.1.3
+(13 October 2014)
+
+- Done some serious refactoring.
+  Low-level details moved to a separate functions, so the main logic became more abstract and readable.
+  Performance and memory footprint should also improve
+- Fixed bug when empty element would not recover it's master value when reset is invoked on the parent form
+- Introduced distribution files (normal and minified versions) and a proper build process using **Gulp**
+- Improved README
+
 ## Version 1.1.2
 (13 October 2014)
 
 - Updated README (no code changes)
+- Added new Demo via **Plunker**
 
 ## Version 1.1.1
 (08 October 2014)

dist/angular-input-modified.js

@@ -0,0 +1,296 @@
+/**
+ * AngularJS module "angular-input-modified".
+ *
+ * @version 1.1.3
+ * @author Slava Fomin II <[email protected]>
+ * @licence MIT
+ * @copyright Slava Fomin II, Better Solutions, 2014
+ */
+(function(window, angular) {
+
+    'use strict';
+
+    var modifiedClassName = 'ng-modified';
+    var notModifiedClassName = 'ng-not-modified';
+
+    var directiveSpecification = ['$animate', inputModifiedDirective];
+
+    // Registering AngularJS module.
+    angular.module('ngInputModified', ['ng'])
+        .directive('input',    directiveSpecification)
+        .directive('textarea', directiveSpecification)
+        .directive('select',   directiveSpecification)
+    ;
+
+    function inputModifiedDirective($animate)
+    {
+        return {
+            restrict: 'E',
+            require: ['?ngModel', '?^form'],
+            link: function($scope, $element, attrs, controllers) {
+
+                var modelName = attrs.ngModel;
+
+                // Handling controllers.
+                var ngModel = controllers[0];
+                var ngForm = controllers[1];
+
+                // ngModel is required for this directive to operate.
+                // ngForm is optional.
+                if (null === ngModel) {
+                    return;
+                }
+
+                /**
+                 * Decorates element with proper CSS classes.
+                 */
+                var toggleCssClasses = function() {
+                    $animate.addClass($element, (ngModel.modified ? modifiedClassName : notModifiedClassName));
+                    $animate.removeClass($element, (ngModel.modified ? notModifiedClassName : modifiedClassName));
+                };
+
+                /**
+                 * This handler is called when form element is modified.
+                 *
+                 * @param {string} modelName
+                 * @param {boolean} modified
+                 */
+                var onElementModified = function(modelName, modified) {
+
+                    // Updating form when one of the inputs is modified.
+                    if (ngForm) {
+                        var index = ngForm.modifiedModels.indexOf(modelName);
+                        var exists = (-1 !== index);
+
+                        if (modified && !exists) {
+                            // Adding model name to the list of modified models.
+                            ngForm.modifiedModels.push(modelName);
+                            ngForm.modifiedCount++;
+                        } else if (!modified && exists) {
+                            // Removing model name from the list of modified models.
+                            ngForm.modifiedModels.splice(index, 1);
+                            ngForm.modifiedCount--;
+                        }
+
+                        // Form is considered modified when it has at least one modified element.
+                        ngForm.modified = (ngForm.modifiedCount > 0);
+                    }
+                };
+
+                /**
+                 * Sets proper modification state for model controller according to current and master value.
+                 */
+                var onInputValueChanged = function() {
+
+                    // If master value is not set.
+                    if ('undefined' === typeof ngModel.masterValue) {
+
+                        // Initializing the master value.
+                        ngModel.masterValue = ngModel.$modelValue;
+
+                        // Initially decorating the element.
+                        toggleCssClasses();
+
+                    } else {
+
+                        // Comparing current input value with preserved master value
+                        // to determine if it's changed.
+                        var modified = !valuesEqual(ngModel.$modelValue, ngModel.masterValue);
+
+                        // If modified flag is changed.
+                        if (ngModel.modified !== modified) {
+
+                            onElementModified(modelName, modified);
+
+                            // Setting new flag.
+                            ngModel.modified = modified;
+
+                            // Re-decorating the element.
+                            toggleCssClasses();
+                        }
+                    }
+                };
+
+                // Saving handle to original $setPristine method.
+                var originalSetPristine = ngModel.$setPristine;
+
+                /**
+                 * This flag will show if input value was modified.
+                 *
+                 * @type {boolean}
+                 */
+                ngModel.modified = false;
+
+                /**
+                 * This property contains current master value for this input field.
+                 *
+                 * @type {*}
+                 */
+                ngModel.masterValue = undefined;
+
+                /**
+                 * Augmentation for original $setPristine method.
+                 */
+                ngModel.$setPristine = function() {
+
+                    // Calling original $setPristine method.
+                    originalSetPristine.apply(this, arguments);
+
+                    // Updating parameters.
+                    ngModel.masterValue = ngModel.$modelValue;
+                    ngModel.modified = false;
+
+                    if (ngModel.modified) {
+                        onElementModified(modelName, false);
+                    }
+
+                    // Re-decorating the element.
+                    toggleCssClasses();
+                };
+
+                /**
+                 * Resets input value to the master.
+                 */
+                ngModel.reset = function() {
+                    eval('$scope.' + modelName + ' = ngModel.masterValue;');
+                };
+
+                // If parent form element is present for this input and
+                // is not yet initialized.
+                if (ngForm && !isFormInitialized(ngForm)) {
+                    initializeForm(ngForm);
+                }
+
+                // Watching for model value changes.
+                $scope.$watch(modelName, onInputValueChanged);
+            }
+        };
+    }
+
+    /**
+     * Returns true if specified parameter is Angular model controller,
+     * false otherwise.
+     *
+     * @param {*} ngModel
+     *
+     * @returns {boolean}
+     */
+    function isModelController(ngModel) {
+        return (
+               'object' === typeof ngModel
+            && '$modelValue' in ngModel
+        );
+    }
+
+    /**
+     * Returns true if specified parameter is initialized model controller,
+     * false otherwise.
+     *
+     * @param {*} ngModel
+     *
+     * @returns {boolean}
+     */
+    function isModelControllerInitialized(ngModel) {
+        return ('modified' in ngModel);
+    }
+
+    /**
+     * Iterates child model controllers of specified form controller,
+     * call specified iterator with every model controller.
+     *
+     * @param {object} ngForm
+     * @param {function} iterator
+     */
+    function iterateFormElements(ngForm, iterator) {
+        angular.forEach(ngForm, function(element) {
+            if (isModelController(element)) {
+                iterator(element);
+            }
+        });
+    }
+
+    /**
+     * Initializes specified form controller.
+     *
+     * @param {object} ngForm
+     */
+    function initializeForm(ngForm) {
+
+        ngForm.modified = false;
+        ngForm.modifiedCount = 0;
+
+        // List of modified models.
+        ngForm.modifiedModels = [];
+
+        /**
+         * Resets all form inputs to it's master values.
+         */
+        ngForm.reset = function() {
+            iterateFormElements(ngForm, function(ngModel) {
+                if (isModelControllerInitialized(ngModel)) {
+                    ngModel.reset();
+                }
+            });
+        };
+    }
+
+    /**
+     * Returns true if specified form controller is initialized, false otherwise.
+     *
+     * @param {object} ngForm
+     *
+     * @returns {boolean}
+     */
+    function isFormInitialized(ngForm) {
+        return ('undefined' !== typeof ngForm.modified);
+    }
+
+    /**
+     * Returns true if specified values are equal, false otherwise.
+     * Supports date comparison.
+     *
+     * @param {*} value1
+     * @param {*} value2
+     *
+     * @returns {boolean}
+     */
+    function valuesEqual(value1, value2)
+    {
+        value1 = unifyValue(value1);
+        value2 = unifyValue(value2);
+
+        if ('object' === typeof value1 && 'object' === typeof value2) {
+            if (value1 instanceof Date && value2 instanceof Date) {
+                // Comparing two dates.
+                return (value1.getTime() === value2.getTime());
+            } else {
+                // Comparing two generic objects using strong comparison.
+                return (value1 === value2);
+            }
+        }
+
+        // In all other cases using weak comparison.
+        return (value1 == value2);
+    }
+
+    /**
+     * Casting all null-like values to actual null for guaranteed comparison.
+     *
+     * @param {*} value
+     *
+     * @returns {*}
+     */
+    function unifyValue(value)
+    {
+        if (undefined === value) {
+            return null;
+        }
+
+        if ('' === value) {
+            return null;
+        }
+
+        return value;
+    }
+
+})(window, angular);

dist/angular-input-modified.min.js

@@ -0,0 +1,23 @@
+var del    = require('del');
+var gulp   = require('gulp');
+var clean  = require('gulp-clean');
+var rename = require('gulp-rename');
+var uglify = require('gulp-uglify');
+var gutil  = require('gulp-util');
+
+gulp.task('clean', function (callback) {
+    del(['dist'], callback);
+});
+
+gulp.task('build', function () {
+    gulp.src('src/angular-input-modified.js')
+        .pipe(rename('angular-input-modified.js'))
+        .pipe(gulp.dest('dist'))
+        .pipe(uglify())
+        .pipe(rename('angular-input-modified.min.js'))
+        .pipe(gulp.dest('dist'))
+        .on('error', gutil.log)
+    ;
+});
+
+gulp.task('default', ['clean', 'build']);

gulpfile.js

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "del": "^0.1.3",
+    "gulp": "^3.8.8",
+    "gulp-rename": "^1.2.0",
+    "gulp-uglify": "^0.3.0",
+    "gulp-util": "^2.2.14"
+  }
+}