1d9efd875e263cbab771c8e2fd82ea4eb490b3c0
[Packages/TYPO3.CMS.git] / typo3 / contrib / jquery / jquery.clearable.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * This file provides a jQuery plugin for generating 'clearable' input fields.
16 * These fields show a "clear"-button when someone hovers over them and
17 * they are not empty.
18 * Options:
19 * * 'onClear': Function that is called after clearing. Takes no arguments,
20 * 'this' is set to the clearable input element. Defaults to an
21 * empty function.
22 */
23 (function($) {
24 $.fn.clearable = function(options) {
25
26 var defaults = {
27 'onClear': function() {}
28 };
29
30 // Merge defaults and given options. Given options have higher priority
31 // because they are the last argument.
32 var settings = $.extend({}, defaults, options);
33
34 // Iterate over the list of inputs and make each clearable. Return
35 // the list to allow chaining.
36 return this.each(function() {
37
38 // The input element to make clearable.
39 var $input = $(this);
40
41 // make sure the input field is not used twice for a clearable
42 if (!$input.data('clearable')) {
43 $input.data('clearable', 'loaded');
44
45 // Wrap it with a div and add a span that is the trigger for
46 // clearing.
47 $input.wrap('<div class="form-control-clearable" />');
48 $input.after('<button type="button" class="close"><span class="fa fa-times" /></button>');
49 $input.addClass('t3js-clearable');
50
51 var $clearer = $input.next();
52
53 // Register a listener the various events triggering the clearer to
54 // be shown or hidden.
55 var handler = function() {
56 var $element = $(this);
57 if ($element.next('input[type=hidden]').length) {
58 $element = $element.next('input[type=hidden]');
59 }
60 var value = $element.val();
61 var hasEmptyValue = (value.length === 0);
62 if (value === "0" && $element.closest('.t3js-datetimepicker').length) {
63 hasEmptyValue = true;
64 }
65
66 // only show the clearing button if the value is set, or if the value is not "0" on a datetime field
67 if (!hasEmptyValue) {
68 $clearer.show();
69 } else {
70 $clearer.hide();
71 }
72 };
73 $input.on('keyup', handler);
74 $input.on('mouseenter', handler);
75 $input.on('change', handler);
76 $input.on('initialize', handler);
77
78 // The actual clearing action. Focus the input element afterwards,
79 // the user probably wants to type into it after clearing.
80 $clearer.click(function(e) {
81 e.preventDefault();
82 $input.val('').change();
83 if (!$input.hasClass("t3js-datetimepicker")) {
84 $input.focus();
85 }
86 $input.trigger('keyup');
87
88 if ('function' === typeof(settings.onClear)) {
89 settings.onClear.call($input.get());
90 }
91 });
92
93 $input.trigger('initialize');
94 }
95 });
96 };
97 })(jQuery || TYPO3.jQuery);