tests, grunt, first build

Gruntfile.js

@@ -3,13 +3,35 @@ module.exports = function(grunt) {
 
   // Project configuration.
   grunt.initConfig({
+    meta: {
+        version: '0.1.0'
+    },
+    banner: '/*! On Input Change - v<%= meta.version %> - ' +
+      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+      '* http://github.com/bbarakaci/on-input-change\n' +
+      '* Licensed under the MIT license. ' + '*/\n',
     lint: {
-      files: ['Gruntfile.js', 'on-input-change.js']
+      files: ['Gruntfile.js', 'src/on-input-change.js']
     },
     watch: {
       files: '<config:lint.files>',
       tasks: 'lint qunit'
     },
+    concat: {
+      dist: {
+        src: ['<file_strip_banner:src/on-input-change.js>'],
+        dest: 'dist/on-input-change.js'
+      }
+    },
+    min: {
+      dist: {
+        src: ['<config:concat.dist.dest>'],
+        dest: 'dist/on-input-change.min.js'
+      }
+    },
+    qunit: {
+      files: ['test/**/*.html']
+    },
     jshint: {
       options: {
         curly: true,
@@ -31,6 +53,7 @@ module.exports = function(grunt) {
   });
 
   // Default task.
-  grunt.registerTask('default', 'lint');
+  grunt.registerTask('default', 'lint qunit');
+  grunt.registerTask('make', 'lint qunit concat min');
 
 };

README.md

@@ -1,13 +1,18 @@
 #On Input Change
 
-oninput event is not supported by ie lt 9 and is partially supported by ie9, in a funny way.
+oninput event is not supported by ie lt 9 and is buggy on ie9.
 
 This jQuery plugin will use the native oninput event, will fallback to setInterval method on Internet Explorer.
 
-This is a first draft. It has no tests. It is manually tested with modern browsers and ie 7,8,9. It should work in ie6 but not tested.
-
 There is a simple [demo/development](http://bbarakaci.github.com/on-input-change/) page to see it in action.
 
+##Download
+
+Download the [production version][min] or the [development version][max].
+
+[min]: https://raw.github.com/bbarakaci/on-input-change/master/dist/fixto.min.js
+[max]: https://raw.github.com/bbarakaci/on-input-change/master/dist/fixto.js
+
 ##Usage
     $('input').onInputChange(function(value, element){
         console.log(value);

on-input-change.js → dist/on-input-change.js

@@ -1,28 +1,22 @@
-/*
- * on-input-change
- * https://github.com/bbarakaci/on-input-change
- *
- * Copyright (c) 2012 Burak Barakaci
- * Licensed under the MIT license.
- */
-
-var onInputChange = (function(){
+/*! On Input Change - v0.1.0 - 2012-10-14
+* http://github.com/bbarakaci/on-input-change
+* Licensed under the MIT license. */
+var onInputChange = (function($){
 
     /*
-    var input = document.createElement('input');
-    var onInputSupport = input.oninput===null;
-    
     ie9 doesn't trigger oninput event when content is removed with BACKSPACE, ctrl+x etc... 
-    I will not bother with feature check. Sorry.
+    I will not bother with feature check.
     */
     var onInputSupport = (!$.browser.msie);
-    
+
     function OnInputChange(element, callback, options) {
         this.element = element;
         this.$element = $(element);
         this.value = element.value;
         this._callback = callback;
-        this.time = (options && options.time) ? options.time : 150;
+        this.options = $.extend({
+            time: 150
+        }, options);        
         $(element).on('focus', $.proxy(this._listen, this));
         $(element).on('blur', $.proxy(this._unlisten, this));
     }
@@ -34,8 +28,9 @@ var onInputChange = (function(){
                 this.$element.on('input', $.proxy(this._run, this));
             }
             else {
-                this._interval = window.setInterval($.proxy(this._check, this), this.time);
+                this._interval = window.setInterval($.proxy(this._check, this), this.options.time);
             }
+            return true;
         },
 
         _unlisten: function(){
@@ -45,6 +40,7 @@ var onInputChange = (function(){
             else {
                 window.clearInterval(this._interval);
             }
+            return true;
         },
 
         _run: function(){
@@ -70,6 +66,6 @@ var onInputChange = (function(){
         support:onInputSupport
     };
 
-})();
+})(window.jQuery);
 
 

index.html

@@ -4,7 +4,7 @@
 	<title>onInputChange</title>
 	<meta charset="utf-8" />
 	<script src="libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
-	<script src="on-input-change.js"></script>
+	<script src="src/on-input-change.js"></script>
 </head>
 <body>
 	<label for="textInput">#textInput</label>

src/on-input-change.js

@@ -0,0 +1,68 @@
+var onInputChange = (function($){
+
+    /*
+    ie9 doesn't trigger oninput event when content is removed with BACKSPACE, ctrl+x etc... 
+    I will not bother with feature check.
+    */
+    var onInputSupport = (!$.browser.msie);
+
+    function OnInputChange(element, callback, options) {
+        this.element = element;
+        this.$element = $(element);
+        this.value = element.value;
+        this._callback = callback;
+        this.options = $.extend({
+            time: 150
+        }, options);        
+        $(element).on('focus', $.proxy(this._listen, this));
+        $(element).on('blur', $.proxy(this._unlisten, this));
+    }
+
+    OnInputChange.prototype = {
+
+        _listen: function(){
+            if(onInputSupport){
+                this.$element.on('input', $.proxy(this._run, this));
+            }
+            else {
+                this._interval = window.setInterval($.proxy(this._check, this), this.options.time);
+            }
+            return true;
+        },
+
+        _unlisten: function(){
+            if(onInputSupport){
+                this.$element.off('input', this._run);
+            }
+            else {
+                window.clearInterval(this._interval);
+            }
+            return true;
+        },
+
+        _run: function(){
+            this.value = this.element.value;
+            this._callback(this.value, this.element);
+        },
+
+        _check: function(){
+            if(this.element.value != this.value) {
+                this._run();
+            }
+        }
+    };
+
+    $.fn.onInputChange = function(callback, options){
+        return this.each(function(){
+            new OnInputChange(this, callback, options);
+        });
+    };
+
+    return {
+        Constructor: OnInputChange,
+        support:onInputSupport
+    };
+
+})(window.jQuery);
+
+

test/on-input-change.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>On input change Test Suite</title>
+  <!-- Load local jQuery. -->
+  <script src="../libs/jquery/jquery.js"></script>
+  <!-- Remove access to $ for better real-world testing. -->
+  <script>jQuery.noConflict()</script>
+  <!-- Load local QUnit (grunt requires QUnit v1.0.0 or newer). -->
+  <link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
+  <script src="../libs/qunit/qunit.js"></script>
+  <!-- Load local lib and tests. -->
+  <script src="../src/on-input-change.js"></script>
+  <script src="on-input-change_test.js"></script>
+</head>
+<body>
+  <h1 id="qunit-header">Ftools Events Test Suite</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <div id="qunit-fixture">
+    <input id="textInput" type="text">
+  </div>
+</body>
+</html>

test/on-input-change_test.js

@@ -0,0 +1,112 @@
+/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
+/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
+/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
+(function($) {
+
+  /*
+    ======== A Handy Little QUnit Reference ========
+    http://docs.jquery.com/QUnit
+
+    Test methods:
+      expect(numAssertions)
+      stop(increment)
+      start(decrement)
+    Test assertions:
+      ok(value, [message])
+      equal(actual, expected, [message])
+      notEqual(actual, expected, [message])
+      deepEqual(actual, expected, [message])
+      notDeepEqual(actual, expected, [message])
+      strictEqual(actual, expected, [message])
+      notStrictEqual(actual, expected, [message])
+      raises(block, [expected], [message])
+  */
+
+
+
+
+    // I din't find a way to trigger input change event. I will test methods.
+    module('on input change', {
+        // This will run before each test in this module.
+        setup: function() {
+
+        }
+    });
+
+    test("functionality", function() {
+
+        var element = $('#textInput')[0];
+        var self = this;
+        var instance = new onInputChange.Constructor(element, function(value, element) {
+            self.resultValue = value;
+            self.resultElement = element;
+        }, {time:100});
+
+        equal(instance.options.time, 100, 'time option passed');
+
+        element.value = 'hello world';
+        var listening = instance._listen();
+
+        ok(listening, 'assume listening');
+
+        instance._check();
+
+        equal(this.resultValue, 'hello world', 'result should be passed and has new value');
+        equal(this.resultElement, element, 'element passed');
+
+        element.value = 'hello mars';
+
+        instance._check();
+
+        equal(this.resultValue, 'hello mars', 'result has new value');
+
+        var unlistening = instance._unlisten();
+
+        equal(unlistening, true, 'assume unlistening');
+    });
+
+    // Test interval version
+    if (!onInputChange.support) {
+
+        test("interval", function() {
+
+            var element = $('#textInput')[0];
+            var self = this;
+            var instance = new onInputChange.Constructor(element, function(value, element) {
+                self.resultValue = value;
+                self.resultElement = element;
+            }, {time:100});
+
+            equal(instance.options.time, 100, 'time option passed');
+
+            element.focus();
+
+            element.value = 'hello world';
+
+            stop();
+
+            setTimeout(function () {
+                equal(self.resultValue, 'hello world', 'result should be passed and has new value');
+                equal(self.resultElement, element, 'element passed');
+
+                element.value = 'hello mars';
+
+                setTimeout(function () {
+                    equal(self.resultValue, 'hello mars', 'result should have a new value');
+
+                    element.blur();
+                    element.value = 'hello there';
+
+                    setTimeout(function () {
+                        equal(self.resultValue, 'hello mars', 'result should not change');
+                        start();
+                    }, 150);
+                }, 150);
+            }, 150);
+        });        
+
+    }
+
+
+
+}(jQuery));