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 | |
| 6 | define(['buttongroup', 'util'], function (buttonGroupClass) { |
| 7 | |
Akron | 56d4207 | 2018-07-24 11:17:24 +0200 | [diff] [blame] | 8 | const loc = KorAP.Locale; |
| 9 | loc.CLOSE = loc.CLOSE || 'Close'; |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 10 | |
| 11 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 12 | return { |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 13 | create : function (classes) { |
| 14 | return Object.create(this)._init(classes); |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 15 | }, |
| 16 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 17 | // Override by inheriting object |
| 18 | _init : function (classes) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 19 | this.panel = undefined; |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 20 | this._classes = classes; |
| 21 | this._shown = false; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 22 | |
| 23 | // The buttonclass is bind to the view |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 24 | var c = ['action', 'button-view']; |
| 25 | if (classes) |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 26 | c.push.apply(c,classes); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 27 | |
| 28 | this.actions = buttonGroupClass.create(c).bind(this); |
| 29 | |
Akron | bfe912c | 2018-07-17 19:30:52 +0200 | [diff] [blame] | 30 | this.actions.add(loc.CLOSE, ['button-icon','close'], function (e) { |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 31 | this.close(); |
| 32 | }); |
| 33 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 34 | // Warning: This is circular |
| 35 | this.actions.view = this; |
| 36 | |
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 | * Element of the view |
| 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 | |
| 51 | var cl = e.classList; |
| 52 | cl.add('view'); |
| 53 | if (this._classes) |
| 54 | cl.add.apply(cl, this._classes); |
| 55 | |
Akron | 56d4207 | 2018-07-24 11:17:24 +0200 | [diff] [blame] | 56 | // TODO: The show may need to be wrapped in another DIV! |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 57 | if (this.show !== undefined) |
| 58 | e.appendChild(this.show()); |
| 59 | |
| 60 | this._shown = true; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 61 | |
| 62 | e.appendChild(this.actions.element()); |
| 63 | |
| 64 | this._element = e; |
| 65 | return e; |
| 66 | }, |
| 67 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 68 | |
| 69 | /** |
| 70 | * Is the object shown? |
| 71 | */ |
| 72 | shown : function () { |
| 73 | return this._shown; |
| 74 | }, |
Akron | e6538cd | 2018-07-16 17:52:33 +0200 | [diff] [blame] | 75 | |
| 76 | // onClose : function () {}, |
| 77 | |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 78 | /** |
| 79 | * Close the view. |
| 80 | */ |
| 81 | close : function () { |
| 82 | var e = this.element(); |
Akron | 4a70387 | 2018-07-26 10:59:41 +0200 | [diff] [blame] | 83 | if (e.parentNode) { |
| 84 | e.parentNode.removeChild(e); |
| 85 | }; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 86 | this.panel.delView(this); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 87 | this._shown = false; |
Akron | e6538cd | 2018-07-16 17:52:33 +0200 | [diff] [blame] | 88 | if (this.onClose) |
| 89 | this.onClose(); |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 90 | }, |
| 91 | |
Akron | 4d926f1 | 2018-07-16 15:30:25 +0200 | [diff] [blame] | 92 | /** |
| 93 | * Upgrade this object to another object, |
| 94 | * while private data stays intact. |
| 95 | * |
| 96 | * @param {Object] An object with properties. |
| 97 | */ |
| 98 | upgradeTo : function (props) { |
| 99 | for (var prop in props) { |
| 100 | this[prop] = props[prop]; |
| 101 | }; |
| 102 | return this; |
Akron | 537bc52 | 2018-07-13 19:06:27 +0200 | [diff] [blame] | 103 | } |
| 104 | }; |
| 105 | }); |