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 | |
hebasta | d025eb9 | 2019-12-07 21:04:42 +0100 | [diff] [blame] | 32 | //prepend or append views of the panel |
| 33 | this.prepend = false; |
| 34 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 35 | // Warning: This is circular |
| 36 | this.actions.panel = this; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 37 | return this; |
| 38 | }, |
| 39 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 40 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 41 | /** |
| 42 | * The element of the panel |
| 43 | */ |
| 44 | element : function () { |
| 45 | if (this._element) |
| 46 | return this._element; |
| 47 | |
| 48 | // Create panel element |
| 49 | var e = document.createElement('div'); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 50 | var cl = e.classList; |
| 51 | cl.add('panel'); |
| 52 | |
| 53 | if (this._classes) |
| 54 | cl.add.apply(cl, this._classes); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 55 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 56 | this._viewE = e.addE('div'); |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 57 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 58 | // Per default the action buttons are below the view |
| 59 | // and integrated |
| 60 | var aElem = this.actions.element(); |
| 61 | if (!aElem.parentNode) |
| 62 | e.appendChild(aElem); |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 63 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 64 | this._element = e; |
| 65 | return e; |
| 66 | }, |
| 67 | |
| 68 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 69 | /* |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 70 | * The element of the views |
| 71 | */ |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 72 | _viewElement : function () { |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 73 | this.element(); |
| 74 | return this._viewE; |
| 75 | }, |
| 76 | |
Akron | 3967d34 | 2018-07-14 08:35:12 +0200 | [diff] [blame] | 77 | /** |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 78 | * Add a view to the panel |
| 79 | */ |
| 80 | add : function (view) { |
| 81 | |
| 82 | // Add view to views list |
| 83 | this.views.push(view); |
| 84 | |
hebasta | d025eb9 | 2019-12-07 21:04:42 +0100 | [diff] [blame] | 85 | // Append or prepend element to panel element |
Akron | 7f1e07e | 2020-08-24 20:12:14 +0200 | [diff] [blame] | 86 | if (this.prepend){ |
hebasta | d025eb9 | 2019-12-07 21:04:42 +0100 | [diff] [blame] | 87 | this._viewElement().prepend( |
Akron | 7f1e07e | 2020-08-24 20:12:14 +0200 | [diff] [blame] | 88 | view.element() |
| 89 | ); |
| 90 | } |
hebasta | d025eb9 | 2019-12-07 21:04:42 +0100 | [diff] [blame] | 91 | else{ |
Akron | 7f1e07e | 2020-08-24 20:12:14 +0200 | [diff] [blame] | 92 | this._viewElement().appendChild( |
| 93 | view.element() |
| 94 | ); |
hebasta | d025eb9 | 2019-12-07 21:04:42 +0100 | [diff] [blame] | 95 | } |
| 96 | |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 97 | if (view.afterEmbed) |
| 98 | view.afterEmbed(); |
| 99 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 100 | view.panel = this; |
| 101 | }, |
| 102 | |
| 103 | /** |
| 104 | * Delete a closed view from panel |
| 105 | */ |
| 106 | delView : function (view) { |
Akron | 678c26f | 2020-10-09 08:52:50 +0200 | [diff] [blame^] | 107 | this.views.forEach(function(e, i, a) { |
| 108 | if (e === view) |
| 109 | a[i] = undefined; |
| 110 | }); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 111 | }, |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 112 | |
| 113 | /** |
| 114 | * Upgrade this object to another object, |
| 115 | * while private data stays intact. |
| 116 | * |
| 117 | * @param {Object] An object with properties. |
| 118 | */ |
| 119 | upgradeTo : function (props) { |
| 120 | for (var prop in props) { |
| 121 | this[prop] = props[prop]; |
| 122 | }; |
| 123 | return this; |
| 124 | } |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 125 | } |
| 126 | }); |