polymer 扩展标签库iron介绍 (二) iron-a11y-keys

iron-a11y-keys介绍

iron-a11y-keys提供一个符合WAI-ARIA best practices处理键盘命令的一个规范化的接口，元素负责浏览器键盘事件差异和使用一个表达语法过滤按键。
使用的键属性表达组合键将触发事件触发
使用目标属性在一个特定的节点设置事件处理程序。按下一个组合键设置键属性触发对应的按键事件。

Example:

这个元素将在以下符号元素按下时触发arrowHandler:

<iron-a11y-keys target="{{}}" keys="up down left right" 
    on-keys-pressed="{{arrowHandler}}">
</iron-a11y-keys>

键语法:
键属性可以接受一个空格分离 +连接组修饰键和一些常见的键盘键

键盘可以用以下按键: a-z, 0-9 (top row and number pad), * (shift 8 and number pad), F1-F12, Page Up, Page Down, Left Arrow, Right Arrow, Down Arrow, Up Arrow, Home, End, Escape, Space, Tab, and Enter keys

修饰键可以用以下按键: Shift, Control, and Alt

所有键盘键可以使用小写和简写: Left Arrow is left, Page Down is pagedown, Control is ctrl, F1 is f1, Escape is esc etc.

给键盘设置以下属性 "ctrl+shift+f7 up pagedown esc space alt+m", <iron-a11y-keys> 元素设置keys-pressed事件 当以下按键按下: Control and Shift and F7 keys, Up Arrow key, Page Down key, Escape key, Space key, Alt and M key.

Keys Syntax Grammar:
键盘语法规定:

EBNF语法的关键属性 .

modifier = "shift" | "ctrl" | "alt";
ascii = ? /[a-z0-9]/ ? ;
fnkey = ? f1 through f12 ? ;
arrow = "up" | "down" | "left" | "right" ;
key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | "home" | "end" | arrow | ascii | fnkey ;
keycombo = { modifier, "+" }, key ;
keys = keycombo, { " ", keycombo } ;

API 参考

Properties	---	---
keys	String	default: ''
target	?Node

iron-a11y-keys安装

bower install --save PolymerElements/iron-a11y-keys#^1.0.0

恩 iron-a11y-keys 还要安装依赖库 iron-a11y-keys-behavior

bower install --save PolymerElements/iron-a11y-keys-behavior#^1.0.0

分析以下代码 iron-a11y-keys

  Polymer({
    is: 'iron-a11y-keys',

    behaviors: [
      Polymer.IronA11yKeysBehavior
    ],

    properties: {
      /** @type {?Node} */
      target: {
        type: Object,
        observer: '_targetChanged'
      },

      keys: {
        type: String,
        reflectToAttribute: true,
        observer: '_keysChanged'
      }
    },

    attached: function() {
      if (!this.target) {
        this.target = this.parentNode;
      }
    },

    _targetChanged: function(target) {
      this.keyEventTarget = target;
    },

    _keysChanged: function() {
      this.removeOwnKeyBindings();
      this.addOwnKeyBinding(this.keys, '_fireKeysPressed');
    },

    _fireKeysPressed: function(event) {
      this.fire('keys-pressed', event.detail, {});
    }
  });

观察属性发现target {?Node} 是一个 dom node 元素??? 搞什么 querySelector 怎么办

behaviors

polymer支持扩展定制元素的原型与共享的代码模块,称为行为 恩 有点像mixin 一个行为是一个对象,类似于一个典型的聚合物原型 可以定义行为lifecycle callbacks , declared properties, default attributes, observers, and listeners.

behaviors 是polymer的属性 类型array 放置behavior

Polymer({
  is: 'super-element',
  behaviors: [SuperBehavior]
})

polymer先执行当前元素的生命循环 在执行behviors里的生命循环

行为对象上的任何非周期函数混入基原型。这些可能是添加的API或实施的行为规定观察员或事件侦听器回调很有用的。在原型定义的函数总是优先于一个行为定义的函数。如果有多个行为定义相同的功能， 最后在行为中的行为排列优先。

可以参照元素定义来定义行为

highlight-behavior.html:

<script>
    HighlightBehavior = {

      properties: {
        isHighlighted: {
          type: Boolean,
          value: false,
          notify: true,
          observer: '_highlightChanged'
        }
      },

      listeners: {
        click: '_toggleHighlight'
      },

      created: function() {
        console.log('Highlighting for ', this, 'enabled!');
      },

      _toggleHighlight: function() {
        this.isHighlighted = !this.isHighlighted;
      },

      _highlightChanged: function(value) {
        this.toggleClass('highlighted', value);
      }

    };
</script>

my-element.html:

<link rel="import" href="highlight-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [HighlightBehavior]
  });
</script>

使用命名空间保护自己的行为不冲突

MyBehaviors = MyBehaviors || {};
MyBehaviors.HighlightBehavior = { ... }    

Extending behaviors：

<!-- import an existing behavior -->
<link rel="import" href="oldbehavior.html">

<script>
  // Implement the extended behavior
  NewBehaviorImpl = {
    // new stuff here 
  }

  // Define the behavior
  NewBehavior = [ OldBehavior, NewBehaviorImpl ]
</script>

reflectToAttribute

类型: boolean
设置为'真'，当property值发生变化以使相应的attribute上变化。如果属性值是布尔值，使用标准的HTML布尔属性（如果是真则设置，如果是假的则不设置）。对于其他的属性类型，属性值是属性值的字符串表示。

observer

类型: String
设置一个观察者函数

        properties: {
          /** @type {?Node} */
          target: {
            type: Object,
            observer: '_targetChanged'
          },

          keys: {
            type: String,
            reflectToAttribute: true,
            observer: '_keysChanged'
          }
        },

恩 没有target 我也自己找一个

    attached: function() {
      if (!this.target) {
        this.target = this.parentNode;
      }
    },

keyEventTarget 是由iron-a11y-keys-behavior混合过来的
当_keysChanged时触发_fireKeysPressed事件

    _targetChanged: function(target) {
      this.keyEventTarget = target;
    },

    _keysChanged: function() {
      this.removeOwnKeyBindings();
      this.addOwnKeyBinding(this.keys, '_fireKeysPressed');
    },

    _fireKeysPressed: function(event) {
      this.fire('keys-pressed', event.detail, {});
    }