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) { |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 19 | const obj = Object.create(menuClass) |
| 20 | .upgradeTo(this) |
| 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 | |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 24 | const 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 | |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 39 | |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 40 | /** |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame] | 41 | * The panel object of the menu. |
Nils Diewald | 7148c6f | 2015-05-04 15:07:53 +0000 | [diff] [blame] | 42 | */ |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame] | 43 | panel :function (panelVar) { |
| 44 | if (panelVar !== undefined) |
| 45 | this._panel = panelVar; |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 46 | |
Akron | 7f9a6a3 | 2018-07-18 15:05:23 +0200 | [diff] [blame] | 47 | return this._panel; |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 48 | }, |
| 49 | |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 50 | |
Akron | bec4a6a | 2018-07-10 14:45:15 +0200 | [diff] [blame] | 51 | // Attach menu to button |
Akron | 52ed22d | 2018-07-11 17:05:19 +0200 | [diff] [blame] | 52 | button : function (btn) { |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 53 | |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 54 | this._button = btn; |
| 55 | |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 56 | this._repos(this._button); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 57 | this.slider().reInit(); |
| 58 | |
| 59 | /* |
| 60 | * This is a suboptimal scrolling solution, see |
| 61 | * see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects |
| 62 | */ |
| 63 | if (this._onscroll !== undefined) { |
| 64 | window.removeEventListener('scroll', this._onscroll); |
| 65 | }; |
| 66 | |
| 67 | this._onscroll = function () { |
Akron | 1801c5c | 2018-07-16 18:15:48 +0200 | [diff] [blame] | 68 | this._repos(this._button); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 69 | }.bind(this); |
| 70 | |
| 71 | window.addEventListener('scroll', this._onscroll); |
| 72 | }, |
| 73 | |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 74 | |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 75 | // Overwrite onHide method |
| 76 | onHide : function () { |
| 77 | |
| 78 | // Remove listener |
| 79 | if (this._onscroll !== undefined) { |
| 80 | window.removeEventListener('scroll', this._onscroll); |
| 81 | }; |
Akron | c296ca2 | 2018-04-24 16:35:26 +0200 | [diff] [blame] | 82 | this.element().blur(); |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 83 | }, |
| 84 | |
| 85 | _repos : function (e) { |
Akron | bf713fc | 2020-10-13 10:44:35 +0200 | [diff] [blame^] | 86 | const bounding = e.getBoundingClientRect(); |
Akron | eaba63e | 2018-01-26 19:49:30 +0100 | [diff] [blame] | 87 | this._element.style.left = bounding.left + "px"; |
Akron | 257aa85 | 2018-02-06 19:29:51 +0100 | [diff] [blame] | 88 | this._element.style.top = ( |
| 89 | bounding.top + |
| 90 | bounding.height - |
| 91 | this._element.clientHeight |
| 92 | ) + "px"; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 93 | } |
| 94 | }; |
| 95 | }); |