From c854a8c29bf55e07cc1a2412c568a245f4e7ed74 Mon Sep 17 00:00:00 2001 From: Mark Schouten Date: Fri, 5 Aug 2016 12:42:31 +0200 Subject: [PATCH] Squashed 'js/addclear/' content from commit 25686e8 git-subtree-dir: js/addclear git-subtree-split: 25686e8ec19b1fee953c72971ffdb9a1abec166d --- .gitignore | 2 + LICENSE | 22 ++++++ README.markdown | 93 +++++++++++++++++++++++ add-clear.jquery.json | 36 +++++++++ addclear.js | 168 ++++++++++++++++++++++++++++++++++++++++++ addclear.min.js | 38 ++++++++++ bower.json | 24 ++++++ index.html | 71 ++++++++++++++++++ package.json | 28 +++++++ 9 files changed, 482 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.markdown create mode 100644 add-clear.jquery.json create mode 100644 addclear.js create mode 100644 addclear.min.js create mode 100644 bower.json create mode 100644 index.html create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..090a1f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +.DS_Store diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..ef57487 --- /dev/null +++ b/LICENSE @@ -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. + diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..348c155 --- /dev/null +++ b/README.markdown @@ -0,0 +1,93 @@ +**Author:** Stephen Korecky
+**Website:** http://stephenkorecky.com
+**Plugin Website:** https://github.com/skorecky/Add-Clear
+**NPM jQuery Plugin:** https://www.npmjs.com/package/add-clear
+_jQuery Plugin website is outdated and read-only now. Please use NPM_
+**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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefaultType
closeSymbol✖string
top1number
right4number
returnFocustrueboolean
showOnLoadfalseboolean
hideOnBlurfalseboolean
tabbabletrueboolean
onClearnullfunction
paddingRight20pxstring
+ +### 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 diff --git a/add-clear.jquery.json b/add-clear.jquery.json new file mode 100644 index 0000000..c3d9915 --- /dev/null +++ b/add-clear.jquery.json @@ -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" + } +} diff --git a/addclear.js b/addclear.js new file mode 100644 index 0000000..1010ef6 --- /dev/null +++ b/addclear.js @@ -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: "✖", + 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(""); + var tabIndex = options.tabbable ? "" : " tabindex='-1'"; + $clearButton = $("" + options.closeSymbol + ""); + $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); diff --git a/addclear.min.js b/addclear.min.js new file mode 100644 index 0000000..229af40 --- /dev/null +++ b/addclear.min.js @@ -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:"✖",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("") +var a=s.tabbable?"":" tabindex='-1'" +t=n(""+s.closeSymbol+""),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) diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..c75816e --- /dev/null +++ b/bower.json @@ -0,0 +1,24 @@ +{ + "name": "Add-Clear", + "authors": [ + "Stephen Korecky " + ], + "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" + ] +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..83be9c2 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + Add Clear - jQuery Plugin - Demo + + + + + + + +
+

Add Clear - jQuery Plugin

+ +

Github Project Page | @skorecky

+
+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..b71a2b9 --- /dev/null +++ b/package.json @@ -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" +}