bb-drummer /
siteapp
| @@ 16-240 (lines=225) @@ | ||
| 13 | * @namespace Siteapp |
|
| 14 | * @module Siteapp.Ui.Screenpanel |
|
| 15 | */ |
|
| 16 | import Module from '../module/siteapp.module'; |
|
| 17 | ||
| 18 | const Siteapp_Screenpanel_DEFAULTS = { |
|
| 19 | ||
| 20 | title : null, |
|
| 21 | ||
| 22 | body : null, |
|
| 23 | ||
| 24 | footer : null, |
|
| 25 | ||
| 26 | activeClass : 'active', |
|
| 27 | ||
| 28 | minimizedClass: 'minimized' |
|
| 29 | ||
| 30 | }; |
|
| 31 | ||
| 32 | ||
| 33 | const Screenpanel = class Screenpanel extends Module { |
|
| 34 | ||
| 35 | template ( vars ) { |
|
| 36 | var namespace = Siteapp.sys.functionName(this); |
|
| 37 | if (this.manager.options.namespacedModuleTriggers) { |
|
| 38 | namespace = this.application.appName+'-'+namespace; |
|
| 39 | } |
|
| 40 | ||
| 41 | // build flow panel item |
|
| 42 | var panelHTML = [ |
|
| 43 | '<div data-', namespace,'>', |
|
| 44 | '<div data-', namespace,'-header>', |
|
| 45 | ((vars.title == '') ? '' : ['<h2 class="title">', |
|
| 46 | vars.title, |
|
| 47 | '</h2>'].join('')), |
|
| 48 | '<div class="wm-button-group">', |
|
| 49 | '<button class="wm-previous" data-previous>', |
|
| 50 | '<i href="#" class="icon fa-caret-left"><span class="label">previous</span></i>', |
|
| 51 | '</button>', |
|
| 52 | '<button class="wm-next" data-next>', |
|
| 53 | '<i href="#" class="icon fa-caret-right"><span class="label">next</span></i>', |
|
| 54 | '</button>', |
|
| 55 | '<button class="wm-minimize" data-minimize disabled>', |
|
| 56 | '<i href="#" class="icon fa-window-minimize"><span class="label">minimize</span></i>', |
|
| 57 | '</button>', |
|
| 58 | '<button class="wm-maximize" data-maximize disabled>', |
|
| 59 | '<i href="#" class="icon fa-window-maximize"><span class="label">maximize</span></i>', |
|
| 60 | '</button>', |
|
| 61 | '<button class="wm-close" data-close>', |
|
| 62 | '<i href="#" class="icon fa-close"><span class="label">close</span></i>', |
|
| 63 | '</button>', |
|
| 64 | '</div>', |
|
| 65 | '</div>', |
|
| 66 | '<div data-', namespace,'-body>', |
|
| 67 | vars.body, |
|
| 68 | '</div>', |
|
| 69 | ((vars.footer == '') ? '' : ['<div data-', namespace,'-footer>', |
|
| 70 | vars.footer, |
|
| 71 | '</div>'].join('')), |
|
| 72 | '</div>' |
|
| 73 | ].join(''); |
|
| 74 | return ( $(panelHTML) ); |
|
| 75 | } |
|
| 76 | ||
| 77 | get title () { |
|
| 78 | if (this.options.title) { |
|
| 79 | return String(this.options.title); |
|
| 80 | } |
|
| 81 | return ''; |
|
| 82 | } |
|
| 83 | ||
| 84 | get body () { |
|
| 85 | if (this.options.body) { |
|
| 86 | return String(this.options.body); |
|
| 87 | } |
|
| 88 | return ''; |
|
| 89 | } |
|
| 90 | ||
| 91 | get footer () { |
|
| 92 | if (this.options.footer) { |
|
| 93 | return String(this.options.footer); |
|
| 94 | } |
|
| 95 | return ''; |
|
| 96 | } |
|
| 97 | ||
| 98 | /** |
|
| 99 | * Minimizes screen layer. |
|
| 100 | */ |
|
| 101 | minimize () { |
|
| 102 | this.$element.addClass(this.options.minimizedClass); |
|
| 103 | this.hide(); |
|
| 104 | this.trigger('minimize'); |
|
| 105 | } |
|
| 106 | ||
| 107 | /** |
|
| 108 | * Restores minimized screen layer. |
|
| 109 | */ |
|
| 110 | restore () { |
|
| 111 | this.$element.removeClass(this.options.minimizedClass); |
|
| 112 | this.show(); |
|
| 113 | this.trigger('restore'); |
|
| 114 | } |
|
| 115 | ||
| 116 | /** |
|
| 117 | * Sets screen layer active class and status flag. |
|
| 118 | */ |
|
| 119 | setActive () { |
|
| 120 | this._active = true; |
|
| 121 | this.$element.addClass(this.options.activeClass); |
|
| 122 | this.trigger('activate'); |
|
| 123 | } |
|
| 124 | ||
| 125 | /** |
|
| 126 | * Removes screen layer active class and status flag. |
|
| 127 | */ |
|
| 128 | setInactive () { |
|
| 129 | this._active = false; |
|
| 130 | this.$element.removeClass(this.options.activeClass); |
|
| 131 | this.trigger('deactivate'); |
|
| 132 | } |
|
| 133 | ||
| 134 | /** |
|
| 135 | * Gets current 'active' status flag. |
|
| 136 | */ |
|
| 137 | get isActive () { |
|
| 138 | return this._active === true; |
|
| 139 | } |
|
| 140 | ||
| 141 | /** |
|
| 142 | * Create a new instance of the screen layer. |
|
| 143 | * @class |
|
| 144 | * @name Screenpanel |
|
| 145 | * @extends Module |
|
| 146 | * @param {jQuery} element - jQuery object to apply the module to. |
|
| 147 | * @param {Object} options - Overrides to the default module settings. |
|
| 148 | */ |
|
| 149 | constructor (element, option) { |
|
| 150 | super(element, option); |
|
| 151 | ||
| 152 | if (Siteapp.sys.functionName(this) == 'Screenpanel') { |
|
| 153 | //console.//log('initializing screenpanel module...'); |
|
| 154 | } |
|
| 155 | } |
|
| 156 | ||
| 157 | /** |
|
| 158 | * Setup a new instance of a Screenpanel. |
|
| 159 | * |
|
| 160 | * @class |
|
| 161 | * @name Screenpanel |
|
| 162 | * @param {jQuery} element - jQuery object to make into a screenpanel. Object should be of the screenpanel panel, rather than its anchor. |
|
| 163 | * @param {Object} options - Overrides to the default plugin settings. |
|
| 164 | */ |
|
| 165 | _setup(element, options) { |
|
| 166 | ||
| 167 | this.$element = element; |
|
| 168 | this.options = $.extend({}, Siteapp_Screenpanel_DEFAULTS, /*this.$element.data(),*/ this.options, options); |
|
| 169 | ||
| 170 | var layerName = Siteapp.sys.functionName(this); |
|
| 171 | this.className = 'earthTheme.Ui.'+layerName; // ie9 back compat |
|
| 172 | ||
| 173 | this._init(); |
|
| 174 | ||
| 175 | ||
| 176 | } |
|
| 177 | ||
| 178 | /** |
|
| 179 | * Initializes the screen layer by setting/checking options and attributes, |
|
| 180 | * adding helper variables... |
|
| 181 | * Connects to UI manager |
|
| 182 | * |
|
| 183 | * @function |
|
| 184 | * @private |
|
| 185 | */ |
|
| 186 | _init() { |
|
| 187 | ||
| 188 | this.events = new Siteapp.sys.EventManager(this); |
|
| 189 | this._events(); |
|
| 190 | ||
| 191 | this.manager.initialize(this); |
|
| 192 | ||
| 193 | } |
|
| 194 | ||
| 195 | /** |
|
| 196 | * Adds event listeners to the element utilizing the triggers utility library. |
|
| 197 | * @function |
|
| 198 | * @private |
|
| 199 | */ |
|
| 200 | _events() { |
|
| 201 | this._addKeyHandler(); |
|
| 202 | this._addClickHandler(); |
|
| 203 | } |
|
| 204 | ||
| 205 | _addClickHandler () { |
|
| 206 | } |
|
| 207 | ||
| 208 | /** |
|
| 209 | * Adds keyboard event handlers for items within the tabs. |
|
| 210 | * @private |
|
| 211 | */ |
|
| 212 | _addKeyHandler() { |
|
| 213 | // Keyboard.addKeyHandlers... |
|
| 214 | } |
|
| 215 | ||
| 216 | /** |
|
| 217 | * Removes keyboard event handlers. |
|
| 218 | * @private |
|
| 219 | */ |
|
| 220 | _removeKeyHandler() { |
|
| 221 | // Keyboard.unregister... |
|
| 222 | } |
|
| 223 | ||
| 224 | /** |
|
| 225 | * Destroys the screenpanel. |
|
| 226 | * @function |
|
| 227 | */ |
|
| 228 | _destroy() { |
|
| 229 | this._removeKeyHandler(); |
|
| 230 | ||
| 231 | this.$element.find('*').off('.'+this.application.appName); |
|
| 232 | this.$element.off('.'+this.application.appName); |
|
| 233 | ||
| 234 | this.$element.remove(); |
|
| 235 | } |
|
| 236 | ||
| 237 | ||
| 238 | } |
|
| 239 | ||
| 240 | export default Screenpanel; |
|
| @@ 16-216 (lines=201) @@ | ||
| 13 | * @namespace Siteapp |
|
| 14 | * @module Siteapp.Ui.Screenlayer |
|
| 15 | */ |
|
| 16 | import Module from '../module/siteapp.module'; |
|
| 17 | ||
| 18 | const Siteapp_Screenlayer_DEFAULTS = { |
|
| 19 | ||
| 20 | /* UI modes: 'flow', 'window', false */ |
|
| 21 | type : 'default', |
|
| 22 | ||
| 23 | /* UI modes: 'flow', 'window', false */ |
|
| 24 | adapter : 'default', |
|
| 25 | ||
| 26 | /* UI modes: 'flow', 'window', false */ |
|
| 27 | configurable : true, |
|
| 28 | ||
| 29 | /* UI modes: 'flow', 'window', false */ |
|
| 30 | removable : true, |
|
| 31 | ||
| 32 | /* screen layer adapters */ |
|
| 33 | adapters: { |
|
| 34 | 'default' : {} |
|
| 35 | }, |
|
| 36 | ||
| 37 | }; |
|
| 38 | ||
| 39 | ||
| 40 | const Screenlayer = class Screenlayer extends Module { |
|
| 41 | ||
| 42 | ||
| 43 | get panelAdapter ( ) { |
|
| 44 | if (this.options.adapter != '') { |
|
| 45 | return this.application.Ui.getAdapterByName(this.options.adapter); |
|
| 46 | } |
|
| 47 | return null; |
|
| 48 | } |
|
| 49 | ||
| 50 | setAdapter ( adaptername ) { |
|
| 51 | if (this.application.Ui.Paneladapters.isRegistered(adaptername)) { |
|
| 52 | this.options.adapter = adaptername; |
|
| 53 | this.$element.data('adapter', adaptername); |
|
| 54 | this.$element.attr('data-adapter', adaptername); |
|
| 55 | } |
|
| 56 | } |
|
| 57 | ||
| 58 | /** |
|
| 59 | * Minimizes screen layer. |
|
| 60 | */ |
|
| 61 | minimize () { |
|
| 62 | this.$element.addClass('screenlayer-minimized'); |
|
| 63 | this.hide(); |
|
| 64 | } |
|
| 65 | ||
| 66 | /** |
|
| 67 | * Restores minimized screen layer. |
|
| 68 | */ |
|
| 69 | restore () { |
|
| 70 | this.$element.removeClass('screenlayer-minimized'); |
|
| 71 | this.show(); |
|
| 72 | } |
|
| 73 | ||
| 74 | /** |
|
| 75 | * Sets screen layer active class and status flag. |
|
| 76 | */ |
|
| 77 | setActive () { |
|
| 78 | this._active = true; |
|
| 79 | this.$element.addClass('screenlayer-active'); |
|
| 80 | } |
|
| 81 | ||
| 82 | /** |
|
| 83 | * Removes screen layer active class and status flag. |
|
| 84 | */ |
|
| 85 | setInactive () { |
|
| 86 | this._active = false; |
|
| 87 | this.$element.removeClass('screenlayer-active'); |
|
| 88 | } |
|
| 89 | ||
| 90 | /** |
|
| 91 | * Focuses the screen layer, z-index to front, set active. |
|
| 92 | */ |
|
| 93 | focus () { |
|
| 94 | this.manager.focusLayer(this); |
|
| 95 | } |
|
| 96 | ||
| 97 | /** |
|
| 98 | * Gets current 'active' status flag. |
|
| 99 | */ |
|
| 100 | get isActive () { |
|
| 101 | return this._active === true; |
|
| 102 | } |
|
| 103 | ||
| 104 | /** |
|
| 105 | * Create a new instance of the screen layer. |
|
| 106 | * @class |
|
| 107 | * @name Screenlayer |
|
| 108 | * @extends Module |
|
| 109 | * @param {jQuery} element - jQuery object to apply the module to. |
|
| 110 | * @param {Object} options - Overrides to the default module settings. |
|
| 111 | */ |
|
| 112 | constructor (element, option) { |
|
| 113 | super(element, option); |
|
| 114 | ||
| 115 | if (Siteapp.sys.functionName(this) == 'Screenlayer') { |
|
| 116 | //console.//log('initializing default screenlayer module...'); |
|
| 117 | } |
|
| 118 | } |
|
| 119 | ||
| 120 | /** |
|
| 121 | * Setup a new instance of a Screenlayer. |
|
| 122 | * |
|
| 123 | * @class |
|
| 124 | * @name Screenlayer |
|
| 125 | * @param {jQuery} element - jQuery object to make into a screenlayer. |
|
| 126 | * Object should be of the screenlayer panel, rather than its anchor. |
|
| 127 | * @param {Object} options - Overrides to the default plugin settings. |
|
| 128 | */ |
|
| 129 | _setup(element, options) { |
|
| 130 | ||
| 131 | this.$element = element; |
|
| 132 | this.options = $.extend({}, Siteapp_Screenlayer_DEFAULTS, /*this.$element.data(),*/ this.options, options); |
|
| 133 | ||
| 134 | var layerName = Siteapp.sys.functionName(this); |
|
| 135 | this.className = 'earthTheme.Ui.'+layerName; // ie9 back compat |
|
| 136 | ||
| 137 | this._init(); |
|
| 138 | ||
| 139 | ||
| 140 | } |
|
| 141 | ||
| 142 | /** |
|
| 143 | * Initializes the screen layer by setting/checking options and attributes, |
|
| 144 | * adding helper variables... |
|
| 145 | * Connects to UI manager |
|
| 146 | * |
|
| 147 | * @function |
|
| 148 | * @private |
|
| 149 | */ |
|
| 150 | _init() { |
|
| 151 | ||
| 152 | this.events = new Siteapp.sys.EventManager(this); |
|
| 153 | this._events(); |
|
| 154 | ||
| 155 | this._initPanelAdapter(); |
|
| 156 | ||
| 157 | // usually: earthTheme.Ui.initialize(this) ,but in this case lets call the alias |
|
| 158 | // because, we are 'connecting' a '(screen)layer' to a '(UI)manager' |
|
| 159 | var layerName = Siteapp.sys.functionName(this); |
|
| 160 | this.manager.connectLayer(this, layerName); |
|
| 161 | ||
| 162 | } |
|
| 163 | ||
| 164 | /** |
|
| 165 | * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor. |
|
| 166 | * @function |
|
| 167 | * @private |
|
| 168 | */ |
|
| 169 | _initPanelAdapter() { |
|
| 170 | } |
|
| 171 | ||
| 172 | /** |
|
| 173 | * Adds event listeners to the element utilizing the triggers utility library. |
|
| 174 | * @function |
|
| 175 | * @private |
|
| 176 | */ |
|
| 177 | _events() { |
|
| 178 | this._addKeyHandler(); |
|
| 179 | this._addClickHandler(); |
|
| 180 | } |
|
| 181 | ||
| 182 | _addClickHandler () { |
|
| 183 | } |
|
| 184 | ||
| 185 | /** |
|
| 186 | * Adds keyboard event handlers for items within the tabs. |
|
| 187 | * @private |
|
| 188 | */ |
|
| 189 | _addKeyHandler() { |
|
| 190 | // Keyboard.addKeyHandlers... |
|
| 191 | } |
|
| 192 | ||
| 193 | /** |
|
| 194 | * Removes keyboard event handlers. |
|
| 195 | * @private |
|
| 196 | */ |
|
| 197 | _removeKeyHandler() { |
|
| 198 | // Keyboard.unregister... |
|
| 199 | } |
|
| 200 | ||
| 201 | /** |
|
| 202 | * Destroys the screenlayer. |
|
| 203 | * @function |
|
| 204 | */ |
|
| 205 | _destroy() { |
|
| 206 | this._removeKeyHandler(); |
|
| 207 | ||
| 208 | this.$element.find('*').off('.'+_this.application.NS); |
|
| 209 | this.$element.off('.'+_this.application.NS); |
|
| 210 | ||
| 211 | this.$element.remove(); |
|
| 212 | } |
|
| 213 | ||
| 214 | } |
|
| 215 | ||
| 216 | export default Screenlayer; |
|
