clearInput/main.js at master · nelmio/clearInput · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/*jslint browser: true, nomen: true */
/*global $, Backbone: false, _:false, define: false */
define(function (require) {
    "use strict";

    var Backbone = require('backbone'),
        $ = require('jquery'),
        _ = require('underscore');

    return Backbone.View.extend({
        template: '<div><i class="icon-remove icon-white">x</i></div>',
        tagName: 'button',
        attributes: {
            tabindex: '-1'
        },
        className: 'clear-button hidden',
        events: {
            'mousedown': 'clear'
        },
        _inputElement: null,
        overriddenEl: false,
        initialize: function (opts) {
            opts = opts || {};

            if (opts.el && opts.el.className.indexOf('hidden') === -1) {
                $(opts.el).addClass('hidden');
                this.overriddenEl = true;
            }

            if (opts.input) {
                this.setInputElement(opts.input);
            }
            this.render();
        },

        _onFocus: function (e) {
            if (this._inputElement.val()) {
                this.show();
            }
        },

        _onBlur: function (e) {
            this.hide();
        },

        _onKeyUp: function (e) {
            if (this._inputElement.val()) {
                this.show();
            }
        },

        setInputElement: function (input) {
            // remove the currently set input element if a new one is set
            if (this._inputElement && input !== this._inputElement[0]) {
                this.unbindInputElement();
                this._inputElement = null;
            }

            // we have to bind them at runtime as we _need_ the reference
            // later for unbinding, but it need to be bound to this instance,
            // not the element it's listening on
            this.onFocus = _.bind(this._onFocus, this);
            this.onBlur = _.bind(this._onBlur, this);
            this.onKeyUp = _.bind(this._onKeyUp, this);

            this._inputElement = $(input);
            this._inputElement.on({
                focus: this.onFocus,
                blur: this.onBlur,
                keyup: this.onKeyUp
            });
        },

        unbindInputElement: function () {
            this._inputElement.off({
                focus: this.onFocus,
                blur: this.onBlur,
                keyup: this.onKeyUp
            });
        },

        remove: function () {
            if (this._inputElement && this._inputElement.off) {
                this.unbindInputElement();
                delete this._inputElement;
            }
            Backbone.View.prototype.remove.apply(this, arguments);
        },

        render: function () {
            if (!this.overriddenEl) {
                this.el.innerHTML = this.template;
            }

            return this;
        },

        clear: function (e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            if (this._inputElement && this._inputElement.val()) {
                this._inputElement.val('');
            }
            this.hide();
            if (this._inputElement) {
                this._inputElement.focus();
            }
            this.trigger('clear');
        },

        show: function () {
            this.$el.removeClass('hidden');
        },

        hide: function () {
            this.$el.addClass('hidden');
        }
    });
});