Source: admin/javascript/engine/widgets/input_counter.js

/* --------------------------------------------------------------
 input_counter.js 2016-08-25
 Gambio GmbH
 http://www.gambio.de
 Copyright (c) 2016 Gambio GmbH
 Released under the GNU General Public License (Version 2)
 [http://www.gnu.org/licenses/gpl-2.0.html]
 --------------------------------------------------------------
 */

/**
 * ## Input Counter Widget
 *
 * Adds a counter element to input and textarea elements.
 *
 * ### Options:
 *
 * **Persistence | `data-input_counter-persistent` | bool | Optional**
 *
 * Omits to hide the counter element. This option is optional and the default value is true, so
 * the counter element is permanent displayed.
 *
 * **Pull | `data-input_counter-persistent` | bool/string | Optional**
 *
 * The option gives the possibility to pull the counter element to whether the right or left side.
 *
 * ### Example
 * ```html
 * <!-- Default input counter element -->
 * <input type="text" data-gx-widget="input_counter">
 * <textarea data-gx-widget="input_counter"></textarea>
 *
 * <!-- Show element on focus and hide on blur -->
 * <input type="text" data-input_counter-persistent="false">
 *
 * <!-- Disable counter pull -->
 * <input type="text" data-input_counter-pull="false">
 *
 * <!-- Pull counter to left side -->
 * <input type="text" data-input_counter-pull="left">
 * ```
 *
 * @module Admin/Widgets/input_counter
 */

gx.widgets.module(
    'input_counter',

    [],

    function (data) {
        'use strict';

        // ------------------------------------------------------------------------
        // VARIABLE DEFINITION
        // ------------------------------------------------------------------------

        var
            /**
             * Widget Reference
             *
             * @type {object}
             */
            $this = $(this),

            /**
             * Default Widget Options
             *
             * @type {object}
             */
            defaults = {
                persistent: true,
                pull: 'right',
                label: false
            },

            /**
             * Final Widget Options
             *
             * @type {object}
             */
            options = $.extend(true, {}, defaults, data),

            /**
             * Module Object
             *
             * @type {object}
             */
            module = {},

            counterLabel = jse.core.lang.translate('COUNTER', 'admin_general'),

            $counter = $('<span/>');

        var _showCharCounter = function (event) {
            $this.parent().append($counter);
            if (options.max) {
                $counter.text($this.val().length + '/' + options.max);
                options.label ? $counter.append(` - ${counterLabel}`) : '';
            } else {
                $counter.text($this.val().length);
                options.label ? $counter.append(` - ${counterLabel}`) : '';
            }
        };

        // ------------------------------------------------------------------------
        // INITIALIZATION
        // ------------------------------------------------------------------------

        /**
         * Initialize method of the widget, called by the engine.
         */
        module.init = function (done) {
            // check and set handling of persistent pull
            if (options.pull) {
                $counter.addClass('pull-' + options.pull);
            }

            // check and set handling of persistent option
            if (options.persistent) {
                _showCharCounter();
            } else {
                $this.focus(_showCharCounter);
                $this.blur(function () {
                    $counter.remove();
                });
            }

            $this.on('keyup', _showCharCounter);
            done();
        };

        return module;
    }
);