summaryrefslogtreecommitdiff
path: root/chromium/ui/keyboard/resources/elements/kb-key-base.html
blob: 497da30f6c45a621e0ce10be776290051aa52a0a (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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!--
  -- Copyright 2013 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<polymer-element name="kb-key-base"
    on-pointerdown="down" on-pointerup="up" on-pointerout="out"
    attributes="accents char invert repeat superscript toKeyset toLayout">
  <script>
    /**
     * The long-press delay in milliseconds before long-press handler is
     * invoked.
     * @const
     * @type {number}
     */
    var LONGPRESS_DELAY_MSEC = 500;

    /**
     * The maximum number of elements in one keyset rule.
     * @const
     * @type {number}
     */
    var MAXIMUM_NUM_OF_RULE_ELEMENTS = 3;

    /**
     * The minumum number of elements in one keyset rule.
     * @const
     * @type {number}
     */
    var MINIMUM_NUM_OF_RULE_ELEMENTS = 2;

    /**
     * The index of event type element in the splitted keyset rule.
     * @const
     * @type {number}
     */
    var EVENT_TYPE = 0;

    /**
     * The index of toKeyset element in the splitted keyset rule.
     * @const
     * @type {number}
     */
    var TO_KEYSET = 1;

    /**
     * The index of nextKeyset element in the splitted keyset rule.
     * @const
     * @type {number}
     */
    var NEXT_KEYSET = 2;

    /**
     * The index offset of toKeyset and nextKeyset elements in splitted keyset
     * rule array and the array in keysetRules.
     * @const
     * @type {number}
     */
    var OFFSET = 1;

    /**
     * The minumum number of elements in one keyset rule.
     * @const {number}
     */
    var MINIMUM_NUM_OF_RULE_ELEMENTS = 2;

    Polymer('kb-key-base', {
      repeat: false,
      invert: false,
      longPressTimer: null,

      /**
       * The keyset transition rules. It defines which keyset to transit to on
       * which key events. It consists at most four rules (down, up, long, dbl).
       * If no rule is defined for a key event, the event wont trigger a keyset
       * change.
       * @type {Object.<string, Array.<string>}
       */
      keysetRules: null,

      ready: function() {
        if (this.toKeyset) {
          // Parsing keyset rules from toKeyset attribute string.
          // An rule can be defined as: (down|up|long|dbl):keysetid[:keysetid]
          // and each rule are separated by a semicolon. The first element
          // defines the event this rule applies to. The second element defines
          // what keyset to transit to after event received. The third optional
          // element defines what keyset to transit to after a key is pressed in
          // the new keyset. It is useful when you want to transit to a not
          // locked keyset. For example, after transit to a upper case keyset,
          // it may make sense to transit back to lower case after user typed
          // any key at the upper case keyset.
          var rules =
              this.toKeyset.replace(/(\r\n|\n|\r| )/g, '').split(';');
          this.keysetRules = {};
          var self = this;
          rules.forEach(function(element) {
            if (element == '')
              return;
            var keyValues = element.split(':', MAXIMUM_NUM_OF_RULE_ELEMENTS);
            if (keyValues.length < MINIMUM_NUM_OF_RULE_ELEMENTS) {
              console.error('Invalid keyset rules: ' + element);
              return;
            }
            self.keysetRules[keyValues[EVENT_TYPE]] = [keyValues[TO_KEYSET],
                (keyValues[NEXT_KEYSET] ? keyValues[NEXT_KEYSET] : null)];
          });
        }
      },
      down: function(event) {
        var detail = {
            char: this.char || this.textContent,
            toLayout: this.toLayout,
            repeat: this.repeat
        };
        if (this.keysetRules && this.keysetRules.down != undefined) {
          detail.toKeyset = this.keysetRules.down[TO_KEYSET - OFFSET];
          detail.nextKeyset = this.keysetRules.down[NEXT_KEYSET - OFFSET];
        }
        this.fire('key-down', detail);
        this.longPressTimer = this.asyncMethod(function() {
          var detail = {
            char: this.char || this.textContent,
            superscript: this.superscript
          };
          if (this.keysetRules && this.keysetRules.long != undefined) {
            detail.toKeyset = this.keysetRules.long[TO_KEYSET - OFFSET];
            detail.nextKeyset = this.keysetRules.long[NEXT_KEYSET - OFFSET];
          }
          this.fire('key-longpress', detail);
        }, null, LONGPRESS_DELAY_MSEC);
      },
      out: function(event) {
        clearTimeout(this.longPressTimer);
      },
      up: function(event) {
        clearTimeout(this.longPressTimer);
        var detail = {
            char: this.char || this.textContent,
            toLayout: this.toLayout
        };
        if (this.keysetRules && this.keysetRules.up != undefined) {
          detail.toKeyset = this.keysetRules.up[TO_KEYSET - OFFSET];
          detail.nextKeyset = this.keysetRules.up[NEXT_KEYSET - OFFSET];
        }
        this.fire('key-up', detail);
      }
    });
  </script>
</polymer-element>