11320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 21320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci Polymer('paper-focusable', { 31320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 41320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci publish: { 51320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 61320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 71320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * If true, the button is currently active either because the 81320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * user is holding down the button, or the button is a toggle 91320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * and is currently in the active state. 101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute active 121320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type boolean 131320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default false 141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 151320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci active: {value: false, reflect: true}, 161320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 171320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 181320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * If true, the element currently has focus due to keyboard 191320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * navigation. 201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 211320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute focused 221320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type boolean 231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default false 241320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 251320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci focused: {value: false, reflect: true}, 261320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 271320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * If true, the user is currently holding down the button. 291320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 301320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute pressed 311320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type boolean 321320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default false 331320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 341320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci pressed: {value: false, reflect: true}, 351320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 361320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 371320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * If true, the user cannot interact with this element. 381320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 391320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute disabled 401320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type boolean 411320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default false 421320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 431320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci disabled: {value: false, reflect: true}, 441320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 451320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 461320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * If true, the button toggles the active state with each tap. 471320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * Otherwise, the button becomes active when the user is holding 481320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * it down. 491320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 501320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute isToggle 511320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type boolean 521320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default false 531320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 541320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci isToggle: {value: false, reflect: false} 551320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 561320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 571320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 581320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci disabledChanged: function() { 591320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.disabled) { 601320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.removeAttribute('tabindex'); 611320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } else { 621320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.setAttribute('tabindex', 0); 631320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 641320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 651320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 661320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci downAction: function() { 671320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.pressed = true; 681320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.focused = false; 691320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 701320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.isToggle) { 711320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.active = !this.active; 721320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } else { 731320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.active = true; 741320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 761320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 771320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // Pulling up the context menu for an item should focus it; but we need to 781320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // be careful about how we deal with down/up events surrounding context 791320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // menus. The up event typically does not fire until the context menu 801320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // closes: so we focus immediately. 811320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // 821320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // This fires _after_ downAction. 831320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci contextMenuAction: function(e) { 841320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // Note that upAction may fire _again_ on the actual up event. 851320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.upAction(e); 861320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.focusAction(); 871320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 881320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 891320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci upAction: function() { 901320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.pressed = false; 911320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 921320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (!this.isToggle) { 931320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.active = false; 941320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 951320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 961320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 971320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci focusAction: function() { 981320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (!this.pressed) { 991320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // Only render the "focused" state if the element gains focus due to 1001320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // keyboard navigation. 1011320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.focused = true; 1021320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1031320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 1041320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1051320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci blurAction: function() { 1061320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.focused = false; 1071320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1081320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1091320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }); 1101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci