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, {});
    }