Squashed 'js/addclear/' content from commit 25686e8

git-subtree-dir: js/addclear
git-subtree-split: 25686e8ec19b1fee953c72971ffdb9a1abec166d
This commit is contained in:
Mark Schouten 2016-08-05 12:42:31 +02:00
commit c854a8c29b
9 changed files with 482 additions and 0 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
.idea
.DS_Store

22
LICENSE Normal file
View file

@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015 Stephen Korecky
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

93
README.markdown Normal file
View file

@ -0,0 +1,93 @@
**Author:** Stephen Korecky <br>
**Website:** http://stephenkorecky.com <br>
**Plugin Website:** https://github.com/skorecky/Add-Clear <br>
**NPM jQuery Plugin:** https://www.npmjs.com/package/add-clear <br>
_jQuery Plugin website is outdated and read-only now. Please use NPM_<br>
**jQuery Plugin:** http://plugins.jquery.com/add-clear/
## About
Add Clear is a jQuery plugin that adds a input clearing button on any input you
apply it to. It clears the value, and returns focus to that field.
## How to use
- Load jQuery into your project
- Load Add Clear plugin into your project
- Setup which elements you would like to apply this plugin to.
### Usage
```javascript
$(function(){
$("input").addClear();
});
// Example onClear option usage
$("input").addClear({
onClear: function(){
alert("call back!");
}
});
```
### Available Options
<table>
<tr>
<th>Option</th>
<th>Default</th>
<th>Type</th>
</tr>
<tr>
<td>closeSymbol</td>
<td>&#10006;</td>
<td>string</td>
</tr>
<tr>
<td>top</td>
<td>1</td>
<td>number</td>
</tr>
<tr>
<td>right</td>
<td>4</td>
<td>number</td>
</tr>
<tr>
<td>returnFocus</td>
<td>true</td>
<td>boolean</td>
</tr>
<tr>
<td>showOnLoad</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>hideOnBlur</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>tabbable</td>
<td>true</td>
<td>boolean</td>
</tr>
<tr>
<td>onClear</td>
<td>null</td>
<td>function</td>
</tr>
<tr>
<td>paddingRight</td>
<td>20px</td>
<td>string</td>
</tr>
</table>
### Note about Microsoft Browsers
The more modern Microsoft browsers (IE10+ and Edge) have built-in clear buttons that appear
automatically on text inputs. To prevent those buttons from interfering with Add Clear, you must
use the `::-ms-clear` CSS pseudo-element in your styles, as described here:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear

36
add-clear.jquery.json Normal file
View file

@ -0,0 +1,36 @@
{
"name": "add-clear",
"title": "jQuery Add Clear",
"description": "jQuery plugin for adding a clear action to the end of a text input",
"keywords": [
"input",
"close",
"text",
"clear"
],
"version": "2.0.6",
"author": {
"name": "Stephen Korecky",
"url": "http://stephenkorecky.com"
},
"maintainers": [
{
"name": "Stephen Korecky",
"email": "skorecky@gmail.com",
"url": "http://stephenkorecky.com"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/skorecky/Add-Clear/issues",
"homepage": "http://github.com/skorecky/Add-Clear ",
"docs": "https://github.com/skorecky/Add-Clear",
"download": "http://code.jquery.com/#add-clear",
"dependencies": {
"jquery": ">=1.8"
}
}

168
addclear.js Normal file
View file

@ -0,0 +1,168 @@
/*!
Author: Stephen Korecky
Website: http://stephenkorecky.com
Plugin Website: http://github.com/skorecky/Add-Clear
Version: 2.0.6
The MIT License (MIT)
Copyright (c) 2015 Stephen Korecky
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
;(function($, window, document, undefined) {
// Create the defaults once
var pluginName = "addClear",
defaults = {
closeSymbol: "&#10006;",
color: "#CCC",
top: 1,
right: 4,
returnFocus: true,
showOnLoad: false,
onClear: null,
hideOnBlur: false,
tabbable: true,
paddingRight: '20px'
};
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var $this = $(this.element),
$clearButton,
me = this,
options = this.options;
$this.wrap("<span style='position:relative;' class='add-clear-span'></span>");
var tabIndex = options.tabbable ? "" : " tabindex='-1'";
$clearButton = $("<a href='#clear' style='display: none;'" + tabIndex + ">" + options.closeSymbol + "</a>");
$this.after($clearButton);
$this.next().css({
color: options.color,
'text-decoration': 'none',
display: 'none',
'line-height': 1,
overflow: 'hidden',
position: 'absolute',
right: options.right,
top: options.top
}, this);
if (options.paddingRight) {
$this.css({
'padding-right': options.paddingRight
});
}
if ($this.val().length >= 1 && options.showOnLoad === true) {
$clearButton.css({display: 'block'});
}
$this.focus(function() {
if ($(this).val().length >= 1) {
$clearButton.css({display: 'block'});
}
});
$this.blur(function(e) {
if (options.hideOnBlur) {
setTimeout(function() {
var relatedTarget = e.relatedTarget || e.explicitOriginalTarget || document.activeElement;
if (relatedTarget !== $clearButton[0]) {
$clearButton.css({display: 'none'});
}
}, 0);
}
});
var handleUserInput = function() {
if ($(this).val().length >= 1) {
$clearButton.css({display: 'block'});
} else {
$clearButton.css({display: 'none'});
}
};
var handleInput = function () {
$this.off('keyup', handleUserInput);
$this.off('cut', handleUserInput);
handleInput = handleUserInput;
handleUserInput.call(this);
};
$this.on('keyup', handleUserInput);
$this.on('cut', function () {
var self = this;
setTimeout(function () {
handleUserInput.call(self);
}, 0);
});
$this.on('input', function () {
handleInput.call(this);
});
if (options.hideOnBlur) {
$clearButton.blur(function () {
$clearButton.css({display: 'none'});
});
}
$clearButton.click(function(e) {
var $input = $(me.element);
$input.val("");
$(this).css({display: 'none'});
if (options.returnFocus === true) {
$input.focus();
}
if (options.onClear) {
options.onClear($input);
}
e.preventDefault();
});
}
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new Plugin(this, options));
}
});
};
})(jQuery, window, document);

38
addclear.min.js vendored Normal file
View file

@ -0,0 +1,38 @@
/*!
Author: Stephen Korecky
Website: http://stephenkorecky.com
Plugin Website: http://github.com/skorecky/Add-Clear
Version: 2.0.6
The MIT License (MIT)
Copyright (c) 2015 Stephen Korecky
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
!function(n,t,i,e){function o(t,i){this.element=t,this.options=n.extend({},a,i),this._defaults=a,this._name=s,this.init()}var s="addClear",a={closeSymbol:"&#10006;",color:"#CCC",top:1,right:4,returnFocus:!0,showOnLoad:!1,onClear:null,hideOnBlur:!1,tabbable:!0,paddingRight:"20px"}
o.prototype={init:function(){var t,e=n(this.element),o=this,s=this.options
e.wrap("<span style='position:relative;' class='add-clear-span'></span>")
var a=s.tabbable?"":" tabindex='-1'"
t=n("<a href='#clear' style='display: none;'"+a+">"+s.closeSymbol+"</a>"),e.after(t),e.next().css({color:s.color,"text-decoration":"none",display:"none","line-height":1,overflow:"hidden",position:"absolute",right:s.right,top:s.top},this),s.paddingRight&&e.css({"padding-right":s.paddingRight}),e.val().length>=1&&s.showOnLoad===!0&&t.css({display:"block"}),e.focus(function(){n(this).val().length>=1&&t.css({display:"block"})}),e.blur(function(n){s.hideOnBlur&&setTimeout(function(){var e=n.relatedTarget||n.explicitOriginalTarget||i.activeElement
e!==t[0]&&t.css({display:"none"})},0)})
var l=function(){t.css(n(this).val().length>=1?{display:"block"}:{display:"none"})},c=function(){e.off("keyup",l),e.off("cut",l),c=l,l.call(this)}
e.on("keyup",l),e.on("cut",function(){var n=this
setTimeout(function(){l.call(n)},0)}),e.on("input",function(){c.call(this)}),s.hideOnBlur&&t.blur(function(){t.css({display:"none"})}),t.click(function(t){var i=n(o.element)
i.val(""),n(this).css({display:"none"}),s.returnFocus===!0&&i.focus(),s.onClear&&s.onClear(i),t.preventDefault()})}},n.fn[s]=function(t){return this.each(function(){n.data(this,"plugin_"+s)||n.data(this,"plugin_"+s,new o(this,t))})}}(jQuery,window,document)

24
bower.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "Add-Clear",
"authors": [
"Stephen Korecky <http://stephenkorecky.com>"
],
"description": "jQuery Plugin to add a (x) clear button to your input fields",
"main": "addclear.js",
"keywords": [
"forms",
"clear",
"input",
"text",
"search"
],
"license": "MIT",
"homepage": "http://skorecky.github.io/Add-Clear/",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

71
index.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Add Clear - jQuery Plugin - Demo</title>
<meta name="author" content="Stephen Korecky">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="addclear.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("input").addClear();
});
</script>
<style type="text/css" media="screen">
body {
font:normal 16px/1.5 "Helvetica Neue", Helvetica, sans-serif;
}
#wrapper {
margin:100px auto 0;
width:500px;
}
#wrapper h1 {
border-bottom:1px solid #EEE;
color:#666;
font-size:28px;
}
#wrapper #search {
background:#F5F5F5;
border-radius: 2px;
font-weight:bold;
padding:10px;
}
#wrapper #search label {
color:#999;
font-weight:bold;
margin:0 5px;
}
#wrapper #search input {
font-size: 18px;
width:200px;
}
#wrapper #search span.note {
color:#CCC;
display:block;
font-size:12px;
font-weight:normal;
margin:5px 0 0 ;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Add Clear - jQuery Plugin</h1>
<p id="search">
<label for="search_input">Search</label>
<input type="text" name="search" value="" id="search_input">
<span class="note">When you type something in this box, the clear button will appear.</span>
</p>
<p><a href="http://github.com/skorecky/Add-Clear">Github Project Page</a> | <a href="http://twitter.com/skorecky">@skorecky</a></p>
</div>
</body>
</html>

28
package.json Normal file
View file

@ -0,0 +1,28 @@
{
"name": "add-clear",
"version": "2.0.6",
"description": "jQuery plugin to add a clear button to text input fields",
"main": "addclear.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/skorecky/Add-Clear.git"
},
"keywords": [
"jquery-plugin",
"ecosystem:jquery",
"add",
"clear",
"text",
"input",
"field"
],
"author": "Stephen Korecky",
"license": "MIT",
"bugs": {
"url": "https://github.com/skorecky/Add-Clear/issues"
},
"homepage": "https://github.com/skorecky/Add-Clear#readme"
}