Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 1 | /** |
| 2 | * Create a view that can be added to a panel, |
| 3 | * like a tree view or the metadata view. |
| 4 | */ |
| 5 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 6 | "use strict"; |
| 7 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 8 | define(['buttongroup', 'util'], function (buttonGroupClass) { |
| 9 | |
Akron | 56d4207 | 2018-07-24 11:17:24 +0200 | [diff] [blame] | 10 | const loc = KorAP.Locale; |
Akron | 362c11a | 2018-08-29 20:01:30 +0200 | [diff] [blame] | 11 | loc.CLOSE = loc.CLOSE || 'Close'; |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 12 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 13 | return { |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 14 | create : function (classes) { |
| 15 | return Object.create(this)._init(classes); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 16 | }, |
| 17 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 18 | // Override by inheriting object |
| 19 | _init : function (classes) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 20 | this.panel = undefined; |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 21 | this._classes = classes; |
| 22 | this._shown = false; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 23 | |
| 24 | // The buttonclass is bind to the view |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 25 | const c = ['action', 'button-view']; |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 26 | if (classes) |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 27 | c.push.apply(c,classes); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 28 | |
| 29 | this.actions = buttonGroupClass.create(c).bind(this); |
| 30 | |
Akron | 792b1a4 | 2020-09-14 18:56:38 +0200 | [diff] [blame] | 31 | this.actions.add(loc.CLOSE, {'cls':['button-icon','close']}, function (e) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 32 | this.close(); |
| 33 | }); |
| 34 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 35 | // Warning: This is circular |
| 36 | this.actions.view = this; |
| 37 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 38 | return this; |
| 39 | }, |
| 40 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 41 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 42 | /** |
| 43 | * Element of the view |
| 44 | */ |
| 45 | element : function () { |
Akron | 24aa005 | 2020-11-10 11:00:34 +0100 | [diff] [blame] | 46 | if (this._el) { |
| 47 | this._el.classList.add('show'); |
| 48 | return this._el; |
Akron | 3d9ce5e | 2020-10-01 15:18:36 +0200 | [diff] [blame] | 49 | }; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 50 | |
| 51 | // Create panel element |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 52 | const e = document.createElement('div'); |
| 53 | const cl = e.classList; |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 54 | |
Akron | 3d9ce5e | 2020-10-01 15:18:36 +0200 | [diff] [blame] | 55 | cl.add('view', 'show'); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 56 | if (this._classes) |
| 57 | cl.add.apply(cl, this._classes); |
| 58 | |
Akron | 56d4207 | 2018-07-24 11:17:24 +0200 | [diff] [blame] | 59 | // TODO: The show may need to be wrapped in another DIV! |
Akron | 24f48ea | 2020-07-01 09:37:19 +0200 | [diff] [blame] | 60 | if (this.show !== undefined) { |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 61 | const s = this.show(); |
Akron | 24f48ea | 2020-07-01 09:37:19 +0200 | [diff] [blame] | 62 | if (s) { |
| 63 | e.appendChild(s); |
| 64 | } else { |
| 65 | return e |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 66 | }; |
Akron | 24f48ea | 2020-07-01 09:37:19 +0200 | [diff] [blame] | 67 | } |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 68 | |
| 69 | this._shown = true; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 70 | |
| 71 | e.appendChild(this.actions.element()); |
| 72 | |
Akron | 24aa005 | 2020-11-10 11:00:34 +0100 | [diff] [blame] | 73 | return this._el = e; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 74 | }, |
| 75 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 76 | |
| 77 | /** |
| 78 | * Is the object shown? |
| 79 | */ |
| 80 | shown : function () { |
| 81 | return this._shown; |
| 82 | }, |
Akron | e6538cd | 2018-07-16 17:52:33 +0200 | [diff] [blame] | 83 | |
Akron | 3d9ce5e | 2020-10-01 15:18:36 +0200 | [diff] [blame] | 84 | |
| 85 | /** |
| 86 | * Hide the widget if shown. |
| 87 | */ |
| 88 | minimize : function () { |
Akron | 24aa005 | 2020-11-10 11:00:34 +0100 | [diff] [blame] | 89 | if (this._el) { |
| 90 | this._el.classList.remove("show"); |
Akron | 3d9ce5e | 2020-10-01 15:18:36 +0200 | [diff] [blame] | 91 | } |
| 92 | }, |
| 93 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 94 | |
Akron | e6538cd | 2018-07-16 17:52:33 +0200 | [diff] [blame] | 95 | // onClose : function () {}, |
| 96 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 97 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 98 | /** |
| 99 | * Close the view. |
| 100 | */ |
| 101 | close : function () { |
Akron | 22598cd | 2019-12-09 14:59:03 +0100 | [diff] [blame] | 102 | |
| 103 | // Close embedded things before |
| 104 | if (this.onClose) |
| 105 | this.onClose(); |
| 106 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 107 | const e = this.element(); |
Akron | 4a70387 | 2018-07-26 10:59:41 +0200 | [diff] [blame] | 108 | if (e.parentNode) { |
| 109 | e.parentNode.removeChild(e); |
| 110 | }; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 111 | this.panel.delView(this); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 112 | this._shown = false; |
| 113 | }, |
| 114 | |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 115 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 116 | /** |
| 117 | * Upgrade this object to another object, |
| 118 | * while private data stays intact. |
| 119 | * |
| 120 | * @param {Object] An object with properties. |
| 121 | */ |
| 122 | upgradeTo : function (props) { |
Akron | 0f6552f | 2020-10-20 10:06:46 +0200 | [diff] [blame] | 123 | for (let prop in props) { |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 124 | this[prop] = props[prop]; |
| 125 | }; |
| 126 | return this; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 127 | } |
| 128 | }; |
| 129 | }); |