1 | /** |
||
2 | * [Siteapp] - multi-purpose frontend application |
||
3 | * |
||
4 | * Siteapp ui paneladapter-layer |
||
5 | * |
||
6 | * @package [Siteapp] |
||
7 | * @subpackage [Siteapp] UI |
||
8 | * @author Björn Bartels <[email protected]> |
||
9 | * @link https://gitlab.bjoernbartels.earth/groups/themes |
||
10 | * @license http://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0 |
||
11 | * @copyright copyright (c) 2016 Björn Bartels <[email protected]> |
||
12 | * |
||
13 | * @namespace Siteapp |
||
14 | * @module Siteapp.Ui.Paneladapter |
||
15 | */ |
||
16 | /** global: Siteapp */ |
||
17 | /** global: Module */ |
||
18 | /** global: PaneladapterConfig_DEFAULTS */ |
||
19 | import Module from '../module/siteapp.module'; |
||
20 | |||
21 | const PaneladapterConfig_DEFAULTS = { |
||
0 ignored issues
–
show
Unused Code
introduced
by
![]() |
|||
22 | |||
23 | screenlayer : null, |
||
24 | |||
25 | targetMode : 'append', |
||
26 | |||
27 | activeClass : 'active', |
||
28 | |||
29 | panelSelector : '> *' |
||
30 | |||
31 | } |
||
32 | |||
33 | const Paneladapter = class Paneladapter extends Module { |
||
34 | |||
35 | /** |
||
36 | * Create a new instance of the paneladapter layer. |
||
37 | * @class |
||
38 | * @name Paneladapter |
||
39 | * @extends Screenlayer |
||
40 | * @extends Module |
||
41 | * @param {jQuery} element - jQuery object to apply the module to. |
||
42 | * @param {Object} options - Overrides to the default module settings. |
||
43 | */ |
||
44 | constructor (element, options) { |
||
45 | super(element, options); |
||
46 | |||
47 | this.options = $.extend({}, this.options, PaneladapterConfig_DEFAULTS, options, this.$element.data()); |
||
48 | |||
49 | this.events = new Siteapp.sys.EventManager(this); |
||
50 | |||
51 | //console.//log('constructing a panel adapter ...'); |
||
52 | |||
53 | } |
||
54 | |||
55 | /** |
||
56 | * get active panel index |
||
57 | * |
||
58 | * @function |
||
59 | * @return {integer} |
||
60 | */ |
||
61 | getActiveIndex ( ) { |
||
62 | return this.getActivePanel().index(); |
||
63 | }; |
||
64 | |||
65 | /** |
||
66 | * get active panel |
||
67 | * |
||
68 | * @function |
||
69 | * @return {jQuery} |
||
70 | */ |
||
71 | getActivePanel ( ) { |
||
72 | return this.$container.find('> .'+this.options.activeClass); |
||
73 | }; |
||
74 | |||
75 | /** |
||
76 | * Sets panel active class. |
||
77 | * |
||
78 | * @function |
||
79 | * @param {jQuery|HTMLElement} panel |
||
80 | * @returns {Boolean} |
||
81 | * @fires Paneladapter#activatepanel |
||
82 | */ |
||
83 | setActive ( panel ) { |
||
84 | var $panel; |
||
85 | if (panel) { |
||
86 | $panel = $(panel); |
||
87 | this.setInactive(); |
||
88 | $panel.addClass(this.options.activeClass); |
||
89 | this.trigger('activatepanel', $panel); |
||
90 | this.$element.trigger('activatepanel', $panel); |
||
91 | } |
||
92 | return this; |
||
93 | } |
||
94 | |||
95 | /** |
||
96 | * Removes panel active class on all panels or just the given panel. |
||
97 | * |
||
98 | * @function |
||
99 | * @param {jQuery|HTMLElement} panel |
||
100 | * @returns {Boolean} |
||
101 | * @fires Paneladapter#deactivatepanel |
||
102 | */ |
||
103 | setInactive ( panel ) { |
||
104 | var $panel; |
||
105 | if (panel) { |
||
106 | $panel = $(panel); |
||
107 | } else { |
||
108 | $panel = this.$container.find(this.options.itemSelector); |
||
109 | } |
||
110 | |||
111 | $panel.removeClass(this.options.activeClass); |
||
112 | this.trigger('deactivatepanel', $panel); |
||
113 | this.$element.trigger('deactivatepanel', $panel); |
||
114 | |||
115 | return this; |
||
116 | } |
||
117 | |||
118 | /** |
||
119 | * Detects if given panel is set 'active'. |
||
120 | * |
||
121 | * @function |
||
122 | * @param {jQuery|HTMLElement} panel |
||
123 | * @returns {Boolean} |
||
124 | */ |
||
125 | isActive ( panel ) { |
||
126 | if (panel) { |
||
127 | return $(panel).hasClass(this.options.activeClass); |
||
128 | } |
||
129 | return false; |
||
130 | } |
||
131 | |||
132 | /** |
||
133 | * Adds a new panel to the container and re-init flow. |
||
134 | * |
||
135 | * @function |
||
136 | * @param {jQuery|HTMLElement} panel |
||
137 | * @param {Boolean} append2active |
||
138 | * @fires Paneladapter#addpanel |
||
139 | */ |
||
140 | addPanel ( panel, append2active ) { |
||
141 | |||
142 | if (!panel) { |
||
143 | return |
||
144 | } |
||
145 | |||
146 | var _this = this; |
||
0 ignored issues
–
show
|
|||
147 | |||
148 | if (append2active === false) { |
||
149 | // add panel item to end of container |
||
150 | this.$container.append(panel); |
||
151 | |||
152 | var $panel = this.$container.children().last(); |
||
153 | } else { |
||
154 | // append panel item to current active item |
||
155 | this.getActivePanel().appendTo(panel); |
||
156 | |||
157 | var $panel = this.getActivePanel().next(); |
||
0 ignored issues
–
show
Comprehensibility
Naming
Best Practice
introduced
by
The variable
$panel already seems to be declared on line 152 . Consider using another variable name or omitting the var keyword.
This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. ![]() |
|||
158 | } |
||
159 | |||
160 | this.trigger('addpanel', $panel); |
||
161 | this.$element.trigger('addpanel', $panel); |
||
162 | |||
163 | this.selectPanel($panel); |
||
164 | this.reflow(); |
||
165 | |||
166 | }; |
||
167 | |||
168 | /** |
||
169 | * Remove a panel from the container and re-init flow. |
||
170 | * |
||
171 | * @function |
||
172 | * @param {jQuery|HTMLElement} panel |
||
173 | * @fires Paneladapter#removepanel |
||
174 | */ |
||
175 | removePanel ( panel ) { |
||
176 | if (!panel) { |
||
177 | return; |
||
178 | } |
||
179 | |||
180 | var _this = this; |
||
0 ignored issues
–
show
|
|||
181 | var $panel = this.$container.find(panel); |
||
182 | |||
183 | if (!$panel) { |
||
184 | //console.//log('panel to remove not found:', panel); |
||
185 | return; |
||
186 | } |
||
187 | |||
188 | this.trigger('removepanel'); |
||
189 | this.$element.trigger('removepanel', $panel); |
||
190 | |||
191 | $panel.remove(); |
||
192 | this.reflow(); |
||
193 | }; |
||
194 | |||
195 | /** |
||
196 | * select a panel from/within the container |
||
197 | * |
||
198 | * @function |
||
199 | * @param {jQuery|HTMLElement} panel |
||
200 | * @fires Paneladapter#selectpanel |
||
201 | */ |
||
202 | selectPanel (panel) { |
||
203 | |||
204 | var $panel = this.$container.find(panel); |
||
205 | |||
206 | if ($panel.length == 1) { |
||
207 | this.setActive($panel); |
||
208 | this.trigger('selectpanel', $panel); |
||
209 | this.$element.trigger('selectpanel', $panel); |
||
210 | } |
||
211 | |||
212 | }; |
||
213 | |||
214 | |||
215 | /** |
||
216 | * Sets current container element. |
||
217 | * |
||
218 | * @var |
||
219 | * @param {jQuery|HTMLElement} element |
||
220 | */ |
||
221 | set container ( element ) { |
||
222 | this.$container = (element.jquery ? element : $(element)); |
||
223 | } |
||
224 | |||
225 | /** |
||
226 | * Retrieves current container element. |
||
227 | * |
||
228 | * @var {jQuery} $ontainer |
||
229 | */ |
||
230 | get container () { |
||
231 | if (!this.$container) { |
||
232 | return this.$element; |
||
233 | } |
||
234 | return this.$container; |
||
235 | } |
||
236 | |||
237 | |||
238 | } |
||
239 | |||
240 | export default Paneladapter; |
||
241 |