1 | /** |
||
2 | * [Siteapp] - multi-purpose frontend application |
||
3 | * |
||
4 | * Siteapp ui nav-action items |
||
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.Action |
||
15 | */ |
||
16 | /** global: Siteapp */ |
||
17 | /** global: Module */ |
||
18 | /** global: ActionConfig */ |
||
19 | |||
20 | import Module from '../module/siteapp.module'; |
||
21 | |||
22 | const ActionConfig = { |
||
0 ignored issues
–
show
Unused Code
introduced
by
![]() |
|||
23 | |||
24 | target : 'layer', |
||
25 | |||
26 | layer : '_blank', |
||
27 | |||
28 | request : { |
||
29 | |||
30 | headers : { |
||
31 | 'X-Requested-With' : 'XMLHttpRequest' |
||
32 | }, |
||
33 | // callbacks |
||
34 | success : null, |
||
35 | failure : null, |
||
36 | complete: null, |
||
37 | }, |
||
38 | |||
39 | removable : false |
||
40 | |||
41 | } |
||
42 | |||
43 | var _noOp = () => {}; |
||
44 | |||
45 | const Action = class Action extends Module { |
||
46 | |||
47 | /** |
||
48 | * Create a new instance of the nav-action layer. |
||
49 | * |
||
50 | * @class |
||
51 | * @name NavAction |
||
52 | * @extends Screenlayer |
||
53 | * @extends Module |
||
54 | * @param {jQuery} element - jQuery object to apply the module to. |
||
55 | * @param {Object} options - Overrides to the default module settings. |
||
56 | */ |
||
57 | constructor (element, options) { |
||
58 | super(element, options); |
||
59 | |||
60 | this.options = $.extend({}, ActionConfig, this.$element.data(), this.options); |
||
61 | Siteapp.sys.secureProperties(this.options, ['removable']); |
||
62 | |||
63 | //console.//log('constructing a navigational action item ...'); |
||
64 | |||
65 | this._init(); |
||
66 | this.manager.initialize(this); |
||
67 | |||
68 | } |
||
69 | |||
70 | // ... "Windowlink" stuff ?! |
||
71 | |||
72 | /** |
||
73 | * Retrieves target screen-layer via UI manager |
||
74 | * |
||
75 | * @var {Screenlayer} targetLayer |
||
76 | */ |
||
77 | get targetLayer() { |
||
78 | if ( (this.options.target == 'layer') && (this.options.layer != '')) { |
||
79 | return this.application.Ui.getLayerByName(this.options.layer); |
||
80 | } |
||
81 | return null; |
||
82 | } |
||
83 | |||
84 | /** |
||
85 | * Retrieve action's 'href' attribute. |
||
86 | * |
||
87 | * @var {string} href |
||
88 | */ |
||
89 | get href() { |
||
90 | return this.$element.attr('href'); |
||
91 | } |
||
92 | |||
93 | /** |
||
94 | * Follows link and open in (screen)layer. |
||
95 | * |
||
96 | * @function |
||
97 | */ |
||
98 | openInLayer () { |
||
99 | var $action = this, |
||
100 | $target = $action.targetLayer; |
||
101 | if ($target) { |
||
102 | |||
103 | $.ajax({ |
||
104 | url: $action.$element.attr('href'), |
||
105 | |||
106 | beforeSend : $action._ajaxBeforeSend.bind($action), |
||
107 | |||
108 | success : function (data) { |
||
109 | if ($target.panelAdapter instanceof Siteapp.UiManager.Paneladapter) { |
||
110 | |||
111 | // prepare data |
||
112 | try { |
||
113 | var _data = JSON.parse(data); |
||
114 | } catch (exception) { |
||
115 | var _data = data; |
||
0 ignored issues
–
show
Comprehensibility
Naming
Best Practice
introduced
by
The variable
_data already seems to be declared on line 113 . 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. ![]() |
|||
116 | } |
||
117 | |||
118 | var body = null, |
||
119 | title = ( $action.$element.find('.label').length == 0 ) ? ( |
||
120 | ( $action.$element.attr('title') ) ? $action.$element.attr('title') : $action.$element.attr('href') |
||
121 | ) : $action.$element.find('.label').first().text(), |
||
122 | footer = null |
||
123 | ; |
||
124 | |||
125 | // show string data with panel adapter |
||
126 | if (typeof _data != 'object') { |
||
127 | //console.//log('panel body:', $(_data), $(_data).find('body') ); |
||
128 | body = ( $(_data).find('body').length == 0 ) ? _data : $(_data).find('body').html(); |
||
129 | |||
130 | //$target.panelAdapter.addPanel($item); |
||
131 | $target.panelAdapter.addPanel({ |
||
132 | title : title, |
||
133 | body : body, |
||
134 | footer: footer |
||
135 | }); |
||
136 | |||
137 | // show panel object with panel adapter |
||
138 | } else if (typeof _data.body != 'undefined') { |
||
139 | $target.panelAdapter.addPanel(_data); |
||
140 | |||
141 | // 'try' to show data object with panel adapter |
||
142 | } else { |
||
143 | $target.panelAdapter.addPanel({ |
||
144 | title : null, |
||
145 | body : data, |
||
146 | footer: null |
||
147 | }); |
||
148 | } |
||
149 | |||
150 | } |
||
151 | |||
152 | // user callback |
||
153 | if (typeof $action.options.request.success == 'function') { |
||
154 | $action.options.request.success.apply($action, arguments); |
||
155 | } |
||
156 | }, |
||
157 | |||
158 | failure : function (data) { |
||
0 ignored issues
–
show
|
|||
159 | // user callback |
||
160 | if (typeof $action.options.request.failure == 'function') { |
||
161 | $action.options.request.failure.apply($action, arguments); |
||
162 | } |
||
163 | }, |
||
164 | |||
165 | complete : function (data) { |
||
0 ignored issues
–
show
|
|||
166 | // user callback |
||
167 | if (typeof $action.options.request.complete == 'function') { |
||
168 | $action.options.request.complete.apply($action, arguments); |
||
169 | } |
||
170 | } |
||
171 | |||
172 | }); |
||
173 | |||
174 | } |
||
175 | } |
||
176 | |||
177 | /** |
||
178 | * Sends data to module. |
||
179 | * |
||
180 | * @function |
||
181 | */ |
||
182 | sendToModule () { |
||
183 | location.href = this.$element.attr('href'); |
||
184 | } |
||
185 | |||
186 | /** |
||
187 | * Follows a (default) link |
||
188 | * |
||
189 | * @function |
||
190 | */ |
||
191 | link () { |
||
192 | location.href = this.$element.attr('href'); |
||
193 | } |
||
194 | |||
195 | |||
196 | /** |
||
197 | * Initializes action's setup. |
||
198 | * |
||
199 | * @private |
||
200 | */ |
||
201 | _init() { |
||
202 | |||
203 | this.events = new Siteapp.sys.EventManager(this); |
||
204 | this._events(); |
||
205 | |||
206 | } |
||
207 | |||
208 | /** |
||
209 | * Adds event listeners to the element utilizing the triggers utility library. |
||
210 | * |
||
211 | * @private |
||
212 | */ |
||
213 | _events() { |
||
214 | this._addKeyHandler(); |
||
215 | this._addClickHandler(); |
||
216 | } |
||
217 | |||
218 | /** |
||
219 | * Adds click event handlers. |
||
220 | * @private |
||
221 | */ |
||
222 | _addClickHandler () { |
||
223 | var namespace = '.'+this.application.appName, |
||
224 | $action = this |
||
225 | ; |
||
226 | this.$element.off('click tap'); |
||
227 | |||
228 | this.$element.on('click.'+namespace+' tap.'+namespace, function (oEvent) { |
||
229 | |||
230 | if ($action.options.target == 'layer') { |
||
231 | $action.openInLayer(); |
||
232 | } else if ($action.options.target == 'module') { |
||
233 | $action.sendToModule(); |
||
234 | } else { |
||
235 | $action.link(); |
||
236 | } |
||
237 | |||
238 | // stop further event propagation |
||
239 | oEvent.preventDefault(); |
||
240 | oEvent.stopPropagation(); |
||
241 | oEvent.stopImmediatePropagation(); |
||
242 | return (false); |
||
243 | }); |
||
244 | |||
245 | } |
||
246 | |||
247 | /** |
||
248 | * Adds keyboard event handlers. |
||
249 | * @private |
||
250 | */ |
||
251 | _addKeyHandler() { |
||
252 | // Keyboard.addKeyHandlers... |
||
253 | } |
||
254 | |||
255 | /** |
||
256 | * Modifies request headers. |
||
257 | * @private |
||
258 | */ |
||
259 | _ajaxBeforeSend ( request ) { |
||
260 | var headers = this.options.request.headers; |
||
261 | |||
262 | headers['X-Requested-With'] = this.application.appName; |
||
263 | |||
264 | for (var key in headers) { |
||
0 ignored issues
–
show
A for in loop automatically includes the property of any prototype object, consider checking the key using
hasOwnProperty .
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject;
for (var key in someObject) {
if ( ! someObject.hasOwnProperty(key)) {
continue; // Skip keys from the prototype.
}
doSomethingWith(key);
}
![]() |
|||
265 | if ( headers[key] != '' ) { |
||
266 | request.setRequestHeader( key, headers[key] ); |
||
267 | } |
||
268 | } |
||
269 | } |
||
270 | |||
271 | } |
||
272 | |||
273 | export default Action; |
||
274 | |||
275 |