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. |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 4 | * |
| 5 | * The buttons are associated with the panel's views, |
| 6 | * though they are integrated independently |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 7 | */ |
| 8 | define(['buttongroup', 'util'], function (buttonGroupClass) { |
| 9 | |
| 10 | return { |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 11 | create : function (classes) { |
| 12 | return Object.create(this)._init(classes); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 13 | }, |
| 14 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 15 | |
| 16 | // Override by inheriting object |
| 17 | _init : function (classes) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 18 | this.views = []; |
| 19 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 20 | /** |
| 21 | * Main action buttons for the panel, |
| 22 | * may be at the bottom (for matches) |
| 23 | * or as tabs (for the result). |
| 24 | */ |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 25 | |
| 26 | this._classes = classes; |
| 27 | var c = ['action', 'button-panel']; |
| 28 | if (classes) |
| 29 | c.push.apply(c,classes); |
| 30 | this.actions = buttonGroupClass.create(c).bind(this); |
| 31 | |
| 32 | // Warning: This is circular |
| 33 | this.actions.panel = this; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 34 | return this; |
| 35 | }, |
| 36 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 37 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 38 | /** |
| 39 | * The element of the panel |
| 40 | */ |
| 41 | element : function () { |
| 42 | if (this._element) |
| 43 | return this._element; |
| 44 | |
| 45 | // Create panel element |
| 46 | var e = document.createElement('div'); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 47 | var cl = e.classList; |
| 48 | cl.add('panel'); |
| 49 | |
| 50 | if (this._classes) |
| 51 | cl.add.apply(cl, this._classes); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 52 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 53 | this._viewE = e.addE('div'); |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 54 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 55 | // Per default the action buttons are below the view |
| 56 | // and integrated |
| 57 | var aElem = this.actions.element(); |
| 58 | if (!aElem.parentNode) |
| 59 | e.appendChild(aElem); |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 60 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 61 | this._element = e; |
| 62 | return e; |
| 63 | }, |
| 64 | |
| 65 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 66 | /* |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 67 | * The element of the views |
| 68 | */ |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 69 | _viewElement : function () { |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 70 | this.element(); |
| 71 | return this._viewE; |
| 72 | }, |
| 73 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 74 | /** |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 75 | * Add a view to the panel |
| 76 | */ |
| 77 | add : function (view) { |
| 78 | |
| 79 | // Add view to views list |
| 80 | this.views.push(view); |
| 81 | |
| 82 | // Append element to panel element |
| 83 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 84 | this._viewElement().appendChild( |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 85 | view.element() |
| 86 | ); |
| 87 | |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 88 | if (view.afterEmbed) |
| 89 | view.afterEmbed(); |
| 90 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 91 | view.panel = this; |
| 92 | }, |
| 93 | |
| 94 | /** |
| 95 | * Delete a closed view from panel |
| 96 | */ |
| 97 | delView : function (view) { |
| 98 | for (i in this.views) { |
| 99 | if (this.views[i] === view) { |
| 100 | this.views[i] = undefined; |
| 101 | } |
| 102 | } |
| 103 | }, |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 104 | |
| 105 | /** |
| 106 | * Upgrade this object to another object, |
| 107 | * while private data stays intact. |
| 108 | * |
| 109 | * @param {Object] An object with properties. |
| 110 | */ |
| 111 | upgradeTo : function (props) { |
| 112 | for (var prop in props) { |
| 113 | this[prop] = props[prop]; |
| 114 | }; |
| 115 | return this; |
| 116 | } |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 117 | } |
| 118 | }); |