1 |
|
/*!
|
2 |
|
Author: Stephen Korecky
|
3 |
|
Website: http://stephenkorecky.com
|
4 |
|
Plugin Website: http://github.com/skorecky/Add-Clear
|
5 |
|
Version: 2.0.6
|
6 |
|
|
7 |
|
The MIT License (MIT)
|
8 |
|
|
9 |
|
Copyright (c) 2015 Stephen Korecky
|
10 |
|
|
11 |
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
12 |
|
of this software and associated documentation files (the "Software"), to deal
|
13 |
|
in the Software without restriction, including without limitation the rights
|
14 |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
15 |
|
copies of the Software, and to permit persons to whom the Software is
|
16 |
|
furnished to do so, subject to the following conditions:
|
17 |
|
|
18 |
|
The above copyright notice and this permission notice shall be included in all
|
19 |
|
copies or substantial portions of the Software.
|
20 |
|
|
21 |
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
22 |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
23 |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
24 |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
25 |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
26 |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
27 |
|
SOFTWARE.
|
28 |
|
*/
|
29 |
|
|
30 |
|
;(function($, window, document, undefined) {
|
31 |
|
|
32 |
|
// Create the defaults once
|
33 |
|
var pluginName = "addClear",
|
34 |
|
defaults = {
|
35 |
|
closeSymbol: "✖",
|
36 |
|
color: "#CCC",
|
37 |
|
top: 1,
|
38 |
|
right: 4,
|
39 |
|
returnFocus: false,
|
40 |
|
showOnLoad: false,
|
41 |
|
onClear: null,
|
42 |
|
hideOnBlur: false,
|
43 |
|
tabbable: true,
|
44 |
|
paddingRight: '20px'
|
45 |
|
};
|
46 |
|
|
47 |
|
// The actual plugin constructor
|
48 |
|
function Plugin(element, options) {
|
49 |
|
this.element = element;
|
50 |
|
|
51 |
|
this.options = $.extend({}, defaults, options);
|
52 |
|
|
53 |
|
this._defaults = defaults;
|
54 |
|
this._name = pluginName;
|
55 |
|
|
56 |
|
this.init();
|
57 |
|
}
|
58 |
|
|
59 |
|
Plugin.prototype = {
|
60 |
|
|
61 |
|
init: function() {
|
62 |
|
var $this = $(this.element),
|
63 |
|
$clearButton,
|
64 |
|
me = this,
|
65 |
|
options = this.options;
|
66 |
|
|
67 |
|
$this.wrap("<span style='position:relative;' class='add-clear-span'></span>");
|
68 |
|
var tabIndex = options.tabbable ? "" : " tabindex='-1'";
|
69 |
|
$clearButton = $("<a href='#clear' style='display: none;'" + tabIndex + ">" + options.closeSymbol + "</a>");
|
70 |
|
$this.after($clearButton);
|
71 |
|
$this.next().css({
|
72 |
|
color: options.color,
|
73 |
|
'text-decoration': 'none',
|
74 |
|
display: 'none',
|
75 |
|
'line-height': 1,
|
76 |
|
overflow: 'hidden',
|
77 |
|
position: 'absolute',
|
78 |
|
right: options.right,
|
79 |
|
top: options.top
|
80 |
|
}, this);
|
81 |
|
|
82 |
|
if (options.paddingRight) {
|
83 |
|
$this.css({
|
84 |
|
'padding-right': options.paddingRight
|
85 |
|
});
|
86 |
|
}
|
87 |
|
|
88 |
|
if ($this.val().length >= 1 && options.showOnLoad === true) {
|
89 |
|
$clearButton.css({display: 'block'});
|
90 |
|
}
|
91 |
|
|
92 |
|
$this.focus(function() {
|
93 |
|
if ($(this).val().length >= 1) {
|
94 |
|
$clearButton.css({display: 'block'});
|
95 |
|
}
|
96 |
|
});
|
97 |
|
$this.change(function() {
|
98 |
|
if ($(this).val().length >= 1) {
|
99 |
|
$clearButton.css({display: 'block'});
|
100 |
|
}
|
101 |
|
});
|
102 |
|
|
103 |
|
$this.blur(function(e) {
|
104 |
|
if (options.hideOnBlur) {
|
105 |
|
setTimeout(function() {
|
106 |
|
var relatedTarget = e.relatedTarget || e.explicitOriginalTarget || document.activeElement;
|
107 |
|
if (relatedTarget !== $clearButton[0]) {
|
108 |
|
$clearButton.css({display: 'none'});
|
109 |
|
}
|
110 |
|
}, 0);
|
111 |
|
}
|
112 |
|
});
|
113 |
|
|
114 |
|
var handleUserInput = function() {
|
115 |
|
if ($(this).val().length >= 1) {
|
116 |
|
$clearButton.css({display: 'block'});
|
117 |
|
} else {
|
118 |
|
$clearButton.css({display: 'none'});
|
119 |
|
}
|
120 |
|
};
|
121 |
|
|
122 |
|
var handleInput = function () {
|
123 |
|
$this.off('keyup', handleUserInput);
|
124 |
|
$this.off('cut', handleUserInput);
|
125 |
|
handleInput = handleUserInput;
|
126 |
|
handleUserInput.call(this);
|
127 |
|
};
|
128 |
|
|
129 |
|
$this.on('keyup', handleUserInput);
|
130 |
|
|
131 |
|
$this.on('cut', function () {
|
132 |
|
var self = this;
|
133 |
|
setTimeout(function () {
|
134 |
|
handleUserInput.call(self);
|
135 |
|
}, 0);
|
136 |
|
});
|
137 |
|
|
138 |
|
$this.on('input', function () {
|
139 |
|
handleInput.call(this);
|
140 |
|
});
|
141 |
|
|
142 |
|
if (options.hideOnBlur) {
|
143 |
|
$clearButton.blur(function () {
|
144 |
|
$clearButton.css({display: 'none'});
|
145 |
|
});
|
146 |
|
}
|
147 |
|
|
148 |
|
$clearButton.click(function(e) {
|
149 |
|
var $input = $(me.element);
|
150 |
|
$input.val("");
|
151 |
|
$(this).css({display: 'none'});
|
152 |
|
if (options.returnFocus === true) {
|
153 |
|
$input.focus();
|
154 |
|
} else {
|
155 |
|
$input.trigger('change');
|
156 |
|
}
|
157 |
|
if (options.onClear) {
|
158 |
|
options.onClear($input);
|
159 |
|
}
|
160 |
|
e.preventDefault();
|
161 |
|
});
|
162 |
|
}
|
163 |
|
|
164 |
|
};
|
165 |
|
|
166 |
|
$.fn[pluginName] = function(options) {
|
167 |
|
return this.each(function() {
|
168 |
|
if (!$.data(this, "plugin_" + pluginName)) {
|
169 |
|
$.data(this, "plugin_" + pluginName,
|
170 |
|
new Plugin(this, options));
|
171 |
|
}
|
172 |
|
});
|
173 |
|
};
|
174 |
|
|
175 |
|
})(jQuery, window, document);
|