Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 1 | /** |
| 2 | * Create a panel for a certain aspect of the system, like |
| 3 | * the result, a match, or the VC. |
| 4 | */ |
| 5 | define(['buttongroup', 'util'], function (buttonGroupClass) { |
| 6 | |
| 7 | return { |
| 8 | |
| 9 | // TODO: |
| 10 | // Support classes |
Akron | 3b253d3 | 2018-07-15 10:16:06 +0200 | [diff] [blame^] | 11 | create : function (viewpos = 'up') { |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 12 | return Object.create(this)._init(viewpos); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 13 | }, |
| 14 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 15 | _init : function (viewpos) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 16 | this.views = []; |
| 17 | |
Akron | 3b253d3 | 2018-07-15 10:16:06 +0200 | [diff] [blame^] | 18 | this._viewpos = viewpos; |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 19 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 20 | |
| 21 | /** |
| 22 | * Main action buttons for the panel, |
| 23 | * may be at the bottom (for matches) |
| 24 | * or as tabs (for the result). |
| 25 | */ |
| 26 | this.actions = buttonGroupClass.create(['action', 'panel']); |
| 27 | return this; |
| 28 | }, |
| 29 | |
| 30 | /** |
| 31 | * The element of the panel |
| 32 | */ |
| 33 | element : function () { |
| 34 | if (this._element) |
| 35 | return this._element; |
| 36 | |
| 37 | // Create panel element |
| 38 | var e = document.createElement('div'); |
| 39 | e.classList.add('panel'); |
| 40 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 41 | if (this._viewpos == 'up') { |
| 42 | this._viewE = e.addE('div'); |
| 43 | }; |
| 44 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 45 | e.appendChild(this.actions.element()); |
| 46 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 47 | if (this._viewpos == 'down') { |
| 48 | this._viewE = e.addE('div'); |
| 49 | }; |
| 50 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 51 | this._element = e; |
| 52 | return e; |
| 53 | }, |
| 54 | |
| 55 | |
| 56 | /** |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 57 | * The element of the views |
| 58 | */ |
| 59 | viewElement : function () { |
| 60 | this.element(); |
| 61 | return this._viewE; |
| 62 | }, |
| 63 | |
| 64 | |
| 65 | /** |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 66 | * Add a view to the panel |
| 67 | */ |
| 68 | add : function (view) { |
| 69 | |
| 70 | // Add view to views list |
| 71 | this.views.push(view); |
| 72 | |
| 73 | // Append element to panel element |
| 74 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 75 | this.viewElement().appendChild( |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 76 | view.element() |
| 77 | ); |
| 78 | |
| 79 | view.panel = this; |
| 80 | }, |
| 81 | |
| 82 | /** |
| 83 | * Delete a closed view from panel |
| 84 | */ |
| 85 | delView : function (view) { |
| 86 | for (i in this.views) { |
| 87 | if (this.views[i] === view) { |
| 88 | this.views[i] = undefined; |
| 89 | } |
| 90 | } |
| 91 | }, |
| 92 | |
| 93 | /** |
| 94 | * Elements before the action buttons |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 95 | * TODO: |
| 96 | * Maybe rename actionLine? |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 97 | */ |
| 98 | beforeActions : function (element) { |
| 99 | if (arguments.length > 0) |
| 100 | this._beforeActions = element; |
| 101 | |
| 102 | return this._beforeActions; |
| 103 | }, |
| 104 | |
| 105 | /** |
| 106 | * Element after the action buttons |
| 107 | */ |
| 108 | afterActions : function (element) { |
| 109 | if (arguments.length > 0) |
| 110 | this._afterActions = element; |
| 111 | |
| 112 | return this._afterActions; |
| 113 | } |
| 114 | } |
| 115 | }); |