Commit c4bed142fa8066403e204b2343a465ee7e51b64d
1 parent
ee45f928
Exists in
master
and in
27 other branches
Add jquery plugin TypeWatch
Showing
2 changed files
with
104 additions
and
1 deletions
Show diff stats
app/views/layouts/_javascript.html.erb
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | 'jquery-2.1.1.min', 'jquery-migrate-1.2.1', | 2 | 'jquery-2.1.1.min', 'jquery-migrate-1.2.1', |
| 3 | 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorbox', | 3 | 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorbox', |
| 4 | 'jquery-ui-1.10.4/js/jquery-ui-1.10.4.min', 'jquery.scrollTo', 'jquery.form.js', 'jquery-validation/jquery.validate', | 4 | 'jquery-ui-1.10.4/js/jquery-ui-1.10.4.min', 'jquery.scrollTo', 'jquery.form.js', 'jquery-validation/jquery.validate', |
| 5 | -'jquery.cookie', 'jquery.ba-bbq.min.js', 'reflection', 'jquery.tokeninput', | 5 | +'jquery.cookie', 'jquery.ba-bbq.min.js', 'reflection', 'jquery.tokeninput', 'jquery.typewatch', |
| 6 | 'add-and-join', 'report-abuse', 'catalog', 'manage-products', 'autogrow', | 6 | 'add-and-join', 'report-abuse', 'catalog', 'manage-products', 'autogrow', |
| 7 | 'jquery-timepicker-addon/dist/jquery-ui-timepicker-addon', 'application.js', 'rails.js', :cache => 'cache/application' %> | 7 | 'jquery-timepicker-addon/dist/jquery-ui-timepicker-addon', 'application.js', 'rails.js', :cache => 'cache/application' %> |
| 8 | 8 |
| @@ -0,0 +1,103 @@ | @@ -0,0 +1,103 @@ | ||
| 1 | +/* | ||
| 2 | +* TypeWatch 2.2.1 | ||
| 3 | +* | ||
| 4 | +* Examples/Docs: github.com/dennyferra/TypeWatch | ||
| 5 | +* | ||
| 6 | +* Copyright(c) 2014 | ||
| 7 | +* Denny Ferrassoli - dennyferra.com | ||
| 8 | +* Charles Christolini | ||
| 9 | +* | ||
| 10 | +* Dual licensed under the MIT and GPL licenses: | ||
| 11 | +* http://www.opensource.org/licenses/mit-license.php | ||
| 12 | +* http://www.gnu.org/licenses/gpl.html | ||
| 13 | +*/ | ||
| 14 | + | ||
| 15 | +!function(root, factory) { | ||
| 16 | + if (typeof define === 'function' && define.amd) { | ||
| 17 | + define(['jquery'], factory); | ||
| 18 | + } else if (typeof exports === 'object') { | ||
| 19 | + factory(require('jquery')); | ||
| 20 | + } else { | ||
| 21 | + factory(root.jQuery); | ||
| 22 | + } | ||
| 23 | +}(this, function($) { | ||
| 24 | + 'use strict'; | ||
| 25 | + $.fn.typeWatch = function(o) { | ||
| 26 | + // The default input types that are supported | ||
| 27 | + var _supportedInputTypes = | ||
| 28 | + ['TEXT', 'TEXTAREA', 'PASSWORD', 'TEL', 'SEARCH', 'URL', 'EMAIL', 'DATETIME', 'DATE', 'MONTH', 'WEEK', 'TIME', 'DATETIME-LOCAL', 'NUMBER', 'RANGE']; | ||
| 29 | + | ||
| 30 | + // Options | ||
| 31 | + var options = $.extend({ | ||
| 32 | + wait: 750, | ||
| 33 | + callback: function() { }, | ||
| 34 | + highlight: true, | ||
| 35 | + captureLength: 2, | ||
| 36 | + inputTypes: _supportedInputTypes | ||
| 37 | + }, o); | ||
| 38 | + | ||
| 39 | + function checkElement(timer, override) { | ||
| 40 | + var value = $(timer.el).val(); | ||
| 41 | + | ||
| 42 | + // Fire if text >= options.captureLength AND text != saved text OR if override AND text >= options.captureLength | ||
| 43 | + if ((value.length >= options.captureLength && value.toUpperCase() != timer.text) | ||
| 44 | + || (override && value.length >= options.captureLength)) | ||
| 45 | + { | ||
| 46 | + timer.text = value.toUpperCase(); | ||
| 47 | + timer.cb.call(timer.el, value); | ||
| 48 | + } | ||
| 49 | + }; | ||
| 50 | + | ||
| 51 | + function watchElement(elem) { | ||
| 52 | + var elementType = elem.type.toUpperCase(); | ||
| 53 | + if ($.inArray(elementType, options.inputTypes) >= 0) { | ||
| 54 | + | ||
| 55 | + // Allocate timer element | ||
| 56 | + var timer = { | ||
| 57 | + timer: null, | ||
| 58 | + text: $(elem).val().toUpperCase(), | ||
| 59 | + cb: options.callback, | ||
| 60 | + el: elem, | ||
| 61 | + wait: options.wait | ||
| 62 | + }; | ||
| 63 | + | ||
| 64 | + // Set focus action (highlight) | ||
| 65 | + if (options.highlight) { | ||
| 66 | + $(elem).focus( | ||
| 67 | + function() { | ||
| 68 | + this.select(); | ||
| 69 | + }); | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + // Key watcher / clear and reset the timer | ||
| 73 | + var startWatch = function(evt) { | ||
| 74 | + var timerWait = timer.wait; | ||
| 75 | + var overrideBool = false; | ||
| 76 | + var evtElementType = this.type.toUpperCase(); | ||
| 77 | + | ||
| 78 | + // If enter key is pressed and not a TEXTAREA and matched inputTypes | ||
| 79 | + if (typeof evt.keyCode != 'undefined' && evt.keyCode == 13 && evtElementType != 'TEXTAREA' && $.inArray(evtElementType, options.inputTypes) >= 0) { | ||
| 80 | + timerWait = 1; | ||
| 81 | + overrideBool = true; | ||
| 82 | + } | ||
| 83 | + | ||
| 84 | + var timerCallbackFx = function() { | ||
| 85 | + checkElement(timer, overrideBool) | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + // Clear timer | ||
| 89 | + clearTimeout(timer.timer); | ||
| 90 | + timer.timer = setTimeout(timerCallbackFx, timerWait); | ||
| 91 | + }; | ||
| 92 | + | ||
| 93 | + $(elem).on('keydown paste cut input', startWatch); | ||
| 94 | + } | ||
| 95 | + }; | ||
| 96 | + | ||
| 97 | + // Watch Each Element | ||
| 98 | + return this.each(function() { | ||
| 99 | + watchElement(this); | ||
| 100 | + }); | ||
| 101 | + | ||
| 102 | + }; | ||
| 103 | +}); |