Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 1 | /** |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 2 | * Menu to choose from in a button group. |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 3 | */ |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 4 | define(['menu'], function (menuClass) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 5 | "use strict"; |
| 6 | |
| 7 | return { |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 8 | |
| 9 | /** |
| 10 | * Create new menu object. |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame^] | 11 | * Pass the panel object |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 12 | * and the item parameters. |
| 13 | * |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame^] | 14 | * @param panel The panel object |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 15 | * @param params The match menu items |
| 16 | * as an array of arrays. |
| 17 | */ |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 18 | create : function (list, itemClass) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 19 | var obj = Object.create(menuClass) |
Akron | d67d45b | 2017-05-18 21:47:38 +0200 | [diff] [blame] | 20 | .upgradeTo(this) |
Akron | 0988d88 | 2017-11-10 16:13:12 +0100 | [diff] [blame] | 21 | ._init(list, {itemClass : itemClass}); |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 22 | obj.limit(6); |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 23 | |
| 24 | var e = obj.element(); |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 25 | |
| 26 | // This is only domspecific |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 27 | e.addEventListener('blur', function (e) { |
Akron | d67d45b | 2017-05-18 21:47:38 +0200 | [diff] [blame] | 28 | this.menu.hide(); |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 29 | }); |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 30 | |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 31 | e.classList.add('button-group-list'); |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 32 | |
| 33 | // Add menu to body |
| 34 | document.getElementsByTagName('body')[0].appendChild(e); |
| 35 | |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 36 | return obj; |
| 37 | }, |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 38 | |
| 39 | /** |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame^] | 40 | * The panel object of the menu. |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 41 | */ |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame^] | 42 | panel :function (panelVar) { |
| 43 | if (panelVar !== undefined) |
| 44 | this._panel = panelVar; |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 45 | |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame^] | 46 | return this._panel; |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 47 | }, |
| 48 | |
Akron | bec4a6a | 2018-07-10 14:45:15 +0200 | [diff] [blame] | 49 | // Attach menu to button |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 50 | button : function (btn) { |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 51 | |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 52 | this._button = btn; |
| 53 | |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 54 | // this._attached = e; |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 55 | this._repos(this._button); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 56 | this.slider().reInit(); |
| 57 | |
| 58 | /* |
| 59 | * This is a suboptimal scrolling solution, see |
| 60 | * see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects |
| 61 | */ |
| 62 | if (this._onscroll !== undefined) { |
| 63 | window.removeEventListener('scroll', this._onscroll); |
| 64 | }; |
| 65 | |
| 66 | this._onscroll = function () { |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 67 | this._repos(this._button); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 68 | }.bind(this); |
| 69 | |
| 70 | window.addEventListener('scroll', this._onscroll); |
| 71 | }, |
| 72 | |
| 73 | |
| 74 | // Overwrite onHide method |
| 75 | onHide : function () { |
| 76 | |
| 77 | // Remove listener |
| 78 | if (this._onscroll !== undefined) { |
| 79 | window.removeEventListener('scroll', this._onscroll); |
| 80 | }; |
Akron | c296ca2 | 2018-04-24 16:35:26 +0200 | [diff] [blame] | 81 | this.element().blur(); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 82 | }, |
| 83 | |
| 84 | _repos : function (e) { |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 85 | var bounding = e.getBoundingClientRect(); |
| 86 | this._element.style.left = bounding.left + "px"; |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 87 | this._element.style.top = ( |
| 88 | bounding.top + |
| 89 | bounding.height - |
| 90 | this._element.clientHeight |
| 91 | ) + "px"; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 92 | } |
| 93 | }; |
| 94 | }); |