basic-keyboard-direction/basic-keyboard-direction.html at master · basic-web-components/basic-keyboard-direction · 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
<!--
Aspect which maps direction keys (Left, Right, etc.) to direction semantics
(goLeft, goRight, etc.).

@element basic-keyboard-direction
-->

<link rel="import" href="../basic-aspect/basic-aspect.html">

<script>
window.Basic = window.Basic || {};

window.Basic.KeyboardDirection = {

  contribute: {

    // Default implementations. These will typically be handled by other aspects
    // in the collective.
    goDown: Basic.Collective.defaultMethod,
    goEnd: Basic.Collective.defaultMethod,
    goLeft: Basic.Collective.defaultMethod,
    goRight: Basic.Collective.defaultMethod,
    goStart: Basic.Collective.defaultMethod,
    goUp: Basic.Collective.defaultMethod,

    keydown: function(event) {

      var handled = false;

      switch (event.keyCode) {
        case 35: // End
          handled = this.collective.goEnd();
          break;
        case 36: // Home
          handled = this.collective.goStart();
          break;
        case 37: // Left
          handled = this.collective.goLeft();
          break;
        case 38: // Up
          handled = event.altKey ? this.collective.goStart() : this.collective.goUp();
          break;
        case 39: // Right
          handled = this.collective.goRight();
          break;
        case 40: // Down
          handled = event.altKey ? this.collective.goEnd() : this.collective.goDown();
          break;
      }

      if (handled) {
        event.preventDefault();
        event.stopPropagation();
      }
    }

  },

  name: 'KeyboardDirection'

};


Polymer({

  aspects: [Basic.KeyboardDirection],

  behaviors: [Basic.Aspect],

  is: 'basic-keyboard-direction',

  goDown: function() {
    this.collective.goDown();
  },

  goEnd: function() {
    this.collective.goEnd();
  },

  goLeft: function() {
    this.collective.goLeft();
  },

  goRight: function() {
    this.collective.goRight();
  },

  goStart: function() {
    this.collective.goStart();
  },

  goUp: function() {
    this.collective.goUp();
  }

});
</script>