summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/droplab/hook_input.js
blob: 05082334045d35d5427ae4abac59ccb71b165630 (plain)
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
/* eslint-disable */

import Hook from './hook';

var HookInput = function(trigger, list, plugins, config) {
  Hook.call(this, trigger, list, plugins, config);

  this.type = 'input';
  this.event = 'input';

  this.eventWrapper = {};

  this.addEvents();
  this.addPlugins();
};

Object.assign(HookInput.prototype, {
  addPlugins: function() {
    this.plugins.forEach(plugin => plugin.init(this));
  },

  addEvents: function(){
    this.eventWrapper.mousedown = this.mousedown.bind(this);
    this.eventWrapper.input = this.input.bind(this);
    this.eventWrapper.keyup = this.keyup.bind(this);
    this.eventWrapper.keydown = this.keydown.bind(this);

    this.trigger.addEventListener('mousedown', this.eventWrapper.mousedown);
    this.trigger.addEventListener('input', this.eventWrapper.input);
    this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
    this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
  },

  removeEvents: function() {
    this.hasRemovedEvents = true;

    this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
    this.trigger.removeEventListener('input', this.eventWrapper.input);
    this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
    this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
  },

  input: function(e) {
    if(this.hasRemovedEvents) return;

    this.list.show();

    const inputEvent = new CustomEvent('input.dl', {
      detail: {
        hook: this,
        text: e.target.value,
      },
      bubbles: true,
      cancelable: true
    });
    e.target.dispatchEvent(inputEvent);
  },

  mousedown: function(e) {
    if (this.hasRemovedEvents) return;

    const mouseEvent = new CustomEvent('mousedown.dl', {
      detail: {
        hook: this,
        text: e.target.value,
      },
      bubbles: true,
      cancelable: true,
    });
    e.target.dispatchEvent(mouseEvent);
  },

  keyup: function(e) {
    if (this.hasRemovedEvents) return;

    this.keyEvent(e, 'keyup.dl');
  },

  keydown: function(e) {
    if (this.hasRemovedEvents) return;

    this.keyEvent(e, 'keydown.dl');
  },

  keyEvent: function(e, eventName) {
    this.list.show();

    const keyEvent = new CustomEvent(eventName, {
      detail: {
        hook: this,
        text: e.target.value,
        which: e.which,
        key: e.key,
      },
      bubbles: true,
      cancelable: true,
    });
    e.target.dispatchEvent(keyEvent);
  },

  restoreInitialState: function() {
    this.list.list.innerHTML = this.list.initialState;
  },

  removePlugins: function() {
    this.plugins.forEach(plugin => plugin.destroy());
  },

  destroy: function() {
    this.restoreInitialState();

    this.removeEvents();
    this.removePlugins();

    this.list.destroy();
  }
});

export default HookInput;