/*globals window, define*/ /*jslint nomen:true, unparam: true*/ /** * Add a button to a input field that removes/resets the inserted value. * * The `de_epages.presentationUiInputaction()` adds a button to the DOM when the default value of the input changes. Clicking this button removes/resets the input field. * * ### Examples * Attach a presentationUiInputaction via metaparse to a input element. * * HTML: * <input type="name" class="placeholder-input ep-js" data-js=".presentationUiInputaction()" placeholder="0..7,5" value="" /> * * @class jQuery.ui.presentationUiInputaction * * @uses jquery * @uses de_epages * @uses ep.dict * @uses jQuery.ui.widget * * @since 6.17.19 */ /** * See `jQuery.ui.presentationUiInputaction` for details. * * @method presentationUiInputaction * @member jQuery * * @since 6.17.19 */ define("de_epages/presentation/ui/inputaction", [ 'jquery/ui/widget', "ep", "de_epages", "$dict!ep/dict" ], function ($, ep, de_epages, epDict) { // Widget. $.widget('ui.presentationUiInputaction', { // span, // initSize, options : { // onAfterReset: function(){}, // resize: false }, _create : function () { var self = this, elem = self.element, o = self.options; // create reset button element self.span = $('<span class="ep-inputaction-span fa fa-reply" title="' + epDict.translate('Reset') + '"></span>'); // register click event for reset button self.span.on('click', function () { // remove value elem.val(''); // hide reset button self.span.css('visibility', 'hidden'); // unset validation (if necessary) if (elem.data('uiUiValidate')) { elem.data('uiUiValidate')._setValidStatus(true); elem.data('uiUiValidate')._leave(); } if(typeof self.options.onAfterReset === 'function'){ self.options.onAfterReset(); } }); // toggle visibility of reset button depending on the content of the input field self.span.css('visibility', elem.val() ? 'visible' : 'hidden'); // append reset button after input element elem.after(self.span); // register keyup and paste event for input field elem.on('keyup.presentationUiInputaction paste.presentationUiInputaction', function () { var _this = this; // set timeout to ensure that the paste event works correctly window.setTimeout(function () { // toggle visibility of reset button depending on the content of the input field self.span.css('visibility', _this.value ? 'visible' : 'hidden'); }, 0); }); if (o.resize !== undefined && o.resize === true) { elem.on('change.presentationUiInputaction', function () { self._resize(self); }); } }, _resize: function (self) { var o = self.options, elem = self.element, dummy, width, inputLength; // get initial values if (self.initWidth === undefined) { self.initWidth = elem.width(); self.style = { fontFamily: elem.css('font-family'), fontSize: elem.css('font-size') }; } // create dummy element to calculate the dimension dummy = $('<span />'); dummy.html(elem.val()); dummy.css({ 'display': 'absolute', 'top': '-10000px', 'left': '-10000px', 'font-family': self.style.fontFamily, 'font-size': self.style.fontSize }); // append dummy to body and get its dimension $('body').append(dummy); width = dummy.width(); // get the dimension inputLength = (width > self.initWidth) ? (width + 30) : self.initWidth; // set new dimension elem.width(inputLength); // remove element from document again dummy.remove(); delete dummy; }, destroy : function () { var self = this, elem = this.element; // unregister click event for reset button self.span && self.span.off('click'); // remove reset button from DOM self.span.remove(); // unregister keyup and paste for input element elem && elem.off('keyup.presentationUiInputaction paste.presentationUiInputaction'); this._superApply(arguments); } }); return de_epages; });