view.js ➔ ... ➔ SideBarView - Code Metrics - Inspection of "Merge remote-tracking branch 'remotes/dev/master'" - oroinc/platform - Measure and Improve Code Quality continuously with Scrutinizer

Test Setup Failed

Push — master ( ae6bbc...554531 )

unknown

created 2018-03-20 17:00 UTC

view.js ➔ ... ➔ SideBarView A

↳ Parent: src/Oro/Bundle/SidebarBundle/Resources/public/js/view.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	1
dl	0
loc	3
rs	10
c	0
b	0
f	0
nop	0

define(function(require) {
    'use strict';

    var SideBarView;

    require('jquery-ui');
    var _ = require('underscore');
    var Backbone = require('backbone');

    var __ = require('orotranslation/js/translator');
    var mediator = require('oroui/js/mediator');
    var DeleteConfirmation = require('oroui/js/delete-confirmation');

    var constants = require('./constants');

    var IconView = require('./widget-container/icon-view');
    var WidgetContainerView = require('./widget-container/view');
    var WidgetPickerModal = require('./widget-container/widget-picker-modal');
    var WidgetSetupModalView = require('./widget-container/widget-setup-view');

    var sidebarTemplate = require('text!./templates/template.html');
    require('jquery-ui');

    var WIDGET_SORT_DELAY = 100;

    function stateToClass(position, state) {
        return position.toLowerCase().replace('_', '-') + '-' + state.slice(8).toLowerCase();
    }

    /**
     * @export  orosidebar/js/view
     * @class   orosidebar.View
     * @extends Backbone.View
     */
    SideBarView = Backbone.View.extend({
        template: _.template(sidebarTemplate),

        events: {
            'click .sidebar-add a': 'onClickAdd',
            'click .sidebar-resize a': 'onClickToggle',
            'click .sidebar-toggle a': 'onClickToggle'
        },

        options: {
            availableWidgets: null,
            widgets: null
        },

        /**
         * @inheritDoc
         */
        constructor: function SideBarView() {
            SideBarView.__super__.constructor.apply(this, arguments);
        },

        /**
         * @inheritDoc
         */
        initialize: function(options) {
            this.options = _.defaults(options || {}, this.options);

            var view = this;
            var model = view.model;
            var widgets = this.getWidgets();

            this.translateAvailableWidgetsDescription();

            view.iconViews = {};
            view.hoverViews = {};
            view.widgetViews = {};

            view.listenTo(model, 'change', view.render);

            view.listenTo(widgets, 'reset', view.onWidgetsReset);
            view.listenTo(widgets, 'add', view.onWidgetAdded);
            view.listenTo(widgets, 'remove', view.onWidgetRemoved);
            view.listenTo(widgets, 'reset', view.render);
            view.listenTo(widgets, 'add', view.render);
            view.listenTo(widgets, 'remove', view.render);

            view.listenTo(Backbone, 'showWidgetHover', view.onShowWidgetHover);
            view.listenTo(Backbone, 'refreshWidget', view.onRefreshWidget);
            view.listenTo(Backbone, 'removeWidget', view.onRemoveWidget);
            view.listenTo(Backbone, 'closeWidget', view.onCloseWidget);
            view.listenTo(Backbone, 'setupWidget', view.onSetupWidget);
        },

        translateAvailableWidgetsDescription: function() {
            _.each(this.options.availableWidgets, function(widgetObject) {
                widgetObject.description = __(widgetObject.description);
            });
        },

        getAvailableWidgets: function() {
            var widgets = this.getWidgets();
            return _.map(this.options.availableWidgets, function(widgetObject, widgetName) {
                return _.extend(widgetObject, {
                    widgetName: widgetName,
                    added: widgets.filter(function(widget) {
                        return widget.get('widgetName') === widgetName;
                    }).length
                });
            });
        },

        setWidgets: function(widgets) {
            this.options.widgets = widgets;
        },

        getWidgets: function() {
            return this.options.widgets;
        },

        getPosition: function() {
            return this.model.get('position');
        },

        render: function() {
            var view = this;
            var model = view.model;
            var $main = view.options.$main;
            var maximized = model.get('state') === constants.SIDEBAR_MAXIMIZED;
            var minimized = model.get('state') === constants.SIDEBAR_MINIMIZED;

            view.$el.html(view.template(model.toJSON()));
            view.$el.toggleClass('sidebar-maximized', maximized);
            $main.toggleClass(stateToClass(model.get('position'), constants.SIDEBAR_MAXIMIZED), maximized);
            $main.toggleClass(stateToClass(model.get('position'), constants.SIDEBAR_MINIMIZED), minimized);

            this.onWidgetsReset();
            if (minimized) {
                view.renderIcons();
            } else {
                view.renderWidgets();
            }

            mediator.trigger('layout:adjustHeight');

            return view;
        },

        renderIcons: function() {
            var view = this;
            var $content = view.$el.find('.sidebar-content');

            this.getWidgets().each(function(widget) {
                var iconView = view.iconViews[widget.cid];
                if (!iconView) {
                    return;
                }

                iconView.render().delegateEvents();
                $content.append(iconView.$el);
            });

            $content.sortable({
                axis: 'y',
                containment: 'parent',
                delay: WIDGET_SORT_DELAY,
                revert: true,
                tolerance: 'pointer',
                start: function(event, ui) {
                    var cid = ui.item.data('cid');
                    view.onIconDragStart(cid);
                },
                stop: function(event, ui) {
                    var cid = ui.item.data('cid');
                    view.onIconDragStop(cid);

                    view.reorderWidgets();
                }
            });

            return view;
        },

        renderWidgets: function() {
            var view = this;
            var $content = view.$el.find('.sidebar-content');

            this.getWidgets().each(function(widget) {
                var widgetView = view.widgetViews[widget.cid];
                if (!widgetView) {
                    return;
                }
                if (widget.get('state') === constants.WIDGET_MAXIMIZED_HOVER) {
                    widget.set({state: constants.WIDGET_MAXIMIZED}, {silent: true});
                }
                widgetView.render().delegateEvents();
                $content.append(widgetView.$el);
            });

            $content.sortable({
                axis: 'y',
                containment: 'parent',
                delay: WIDGET_SORT_DELAY,
                revert: true,
                tolerance: 'pointer',
                start: function(event, ui) {
                    var cid = ui.item.data('cid');
                    view.onIconDragStart(cid);
                },
                stop: function(event, ui) {
                    var cid = ui.item.data('cid');
                    view.onIconDragStop(cid);

                    view.reorderWidgets();
                }
            });

            return view;
        },

        onIconDragStart: function(cid) {
            var widget = this.getWidgets().get(cid);
            if (widget) {
                widget.isDragged = true;
            }
        },

        onIconDragStop: function(cid) {
            var widget = this.getWidgets().get(cid);
            if (widget) {
                widget.isDragged = false;
            }
        },

        reorderWidgets: function() {
            var view = this;
            var $content = view.$el.find('.sidebar-content');

            var ids = $content.sortable('toArray', {attribute: 'data-cid'});
            var widgetOrder = _.object(ids, _.range(ids.length));

            this.getWidgets().each(function(widget) {
                var order = widgetOrder[widget.cid];
                widget.set({position: order}, {silent: true});
                widget.save();
            });

            this.getWidgets().sort();
        },

        onClickAdd: function(e) {
            e.stopPropagation();
            e.preventDefault();

            var widgetAddView = new WidgetPickerModal({
                sidebar: this
            });

            widgetAddView.open();
        },

        onClickToggle: function(e) {
            e.stopPropagation();
            e.preventDefault();

            this.model.toggleState();
            this.model.save();
        },

        onWidgetsReset: function() {
            var view = this;

            this.getWidgets().each(function(widget) {
                view.widgetViews[widget.cid] = new WidgetContainerView({
                    model: widget
                });

                view.iconViews[widget.cid] = new IconView({
                    model: widget
                });
            });
        },

        onWidgetAdded: function(widget) {
            this.widgetViews[widget.cid] = new WidgetContainerView({
                model: widget
            });

            this.iconViews[widget.cid] = new IconView({
                model: widget
            });
        },

        onWidgetRemoved: function(widget) {
            var cid = widget.cid;

            var widgetView = this.widgetViews[cid];
            if (widgetView) {
                if (widgetView.contentView) {
                    widgetView.contentView.remove();
                }
                widgetView.remove();
                delete this.widgetViews[cid];
            }

            var iconView = this.iconViews[cid];
            if (iconView) {
                iconView.remove();
                delete this.iconViews[cid];
            }

            var hoverView = this.hoverViews[cid];
            if (hoverView) {
                hoverView.contentView.remove();
                hoverView.remove();
                delete this.hoverViews[cid];
            }
        },

        onShowWidgetHover: function(cid, cord) {
            var hoverView;
            var view = this;

            var widget = this.getWidgets().get(cid);

            if (!widget) {
                return;
            }

            view.hideAllWidgetHovers();

            widget.snapshotState();
            widget.set({state: constants.WIDGET_MAXIMIZED_HOVER}, {silent: true});
            widget.save();

            if (!view.hoverViews.hasOwnProperty(cid)) {
                view.hoverViews[cid] = new WidgetContainerView({
                    model: widget
                });
            }
            hoverView = view.hoverViews[cid];
            view.$el.append(hoverView.render().$el);
            hoverView.setOffset({top: cord.top});
            hoverView.adjustMaxHeight();
        },

        onRefreshWidget: function(cid) {
            var widget = this.getWidgets().get(cid);
            if (!widget) {
                return;
            }

            var widgetView;
            var state = widget.get('state');
            if (state === constants.WIDGET_MAXIMIZED) {
                widgetView = this.widgetViews[cid];
            } else if (state === constants.WIDGET_MAXIMIZED_HOVER) {
                widgetView = this.hoverViews[cid];
            }

            if (widgetView) {
                widgetView.contentView.trigger('refresh');
            }
        },

        hideWidgetHover: function(cid) {
            var hoverView = this.hoverViews[cid];
            if (hoverView) {
                hoverView.model.restoreState();
                hoverView.contentView.remove();
                hoverView.remove();
                delete this.hoverViews[cid];
            }
        },

        hideAllWidgetHovers: function() {
            var view = this;

            this.getWidgets().each(function(widget) {
                view.hideWidgetHover(widget.cid);
            });
        },

        onRemoveWidget: function(cid) {
            var widget = this.getWidgets().get(cid);
            if (!widget) {
                return;
            }

            var modal = new DeleteConfirmation({
                content: __('oro.sidebar.widget.remove.confirm.message')
            });

            modal.on('ok', function() {
                widget.destroy();
                modal.off();
            });

            modal.on('cancel', function() {
                modal.off();
            });

            modal.open();
        },

        onCloseWidget: function(cid) {
            var view = this;

            var widget = this.getWidgets().get(cid);
            if (!widget) {
                return;
            }

            view.hideWidgetHover(cid);
        },

        onSetupWidget: function(cid) {
            var widgetModel = this.getWidgets().get(cid);
            if (!widgetModel) {
                return;
            }

            widgetModel.loadModule().then(function(widgetModule) {
                var widgetSetupModal = new WidgetSetupModalView({
                    model: widgetModel,
                    contentView: widgetModule.SetupView,
                    okCloses: false,
                    snapshot: JSON.stringify(widgetModel)
                });

                widgetSetupModal.open();
            });
        }
    });

    return SideBarView;
});


1			define(function(require) {
2			'use strict';
3
4			var SideBarView;
5
6			require('jquery-ui');
7			var _ = require('underscore');
8			var Backbone = require('backbone');
9
10			var __ = require('orotranslation/js/translator');
11			var mediator = require('oroui/js/mediator');
12			var DeleteConfirmation = require('oroui/js/delete-confirmation');
13
14			var constants = require('./constants');
15
16			var IconView = require('./widget-container/icon-view');
17			var WidgetContainerView = require('./widget-container/view');
18			var WidgetPickerModal = require('./widget-container/widget-picker-modal');
19			var WidgetSetupModalView = require('./widget-container/widget-setup-view');
20
21			var sidebarTemplate = require('text!./templates/template.html');
22			require('jquery-ui');
23
24			var WIDGET_SORT_DELAY = 100;
25
26			function stateToClass(position, state) {
27			return position.toLowerCase().replace('_', '-') + '-' + state.slice(8).toLowerCase();
28			}
29
30			/**
31			* @export orosidebar/js/view
32			* @class orosidebar.View
33			* @extends Backbone.View
34			*/
35			SideBarView = Backbone.View.extend({
36			template: _.template(sidebarTemplate),
37
38			events: {
39			'click .sidebar-add a': 'onClickAdd',
40			'click .sidebar-resize a': 'onClickToggle',
41			'click .sidebar-toggle a': 'onClickToggle'
42			},
43
44			options: {
45			availableWidgets: null,
46			widgets: null
47			},
48
49			/**
50			* @inheritDoc
51			*/
52			constructor: function SideBarView() {
53			SideBarView.__super__.constructor.apply(this, arguments);
54			},
55
56			/**
57			* @inheritDoc
58			*/
59			initialize: function(options) {
60			this.options = _.defaults(options \|\| {}, this.options);
61
62			var view = this;
63			var model = view.model;
64			var widgets = this.getWidgets();
65
66			this.translateAvailableWidgetsDescription();
67
68			view.iconViews = {};
69			view.hoverViews = {};
70			view.widgetViews = {};
71
72			view.listenTo(model, 'change', view.render);
73
74			view.listenTo(widgets, 'reset', view.onWidgetsReset);
75			view.listenTo(widgets, 'add', view.onWidgetAdded);
76			view.listenTo(widgets, 'remove', view.onWidgetRemoved);
77			view.listenTo(widgets, 'reset', view.render);
78			view.listenTo(widgets, 'add', view.render);
79			view.listenTo(widgets, 'remove', view.render);
80
81			view.listenTo(Backbone, 'showWidgetHover', view.onShowWidgetHover);
82			view.listenTo(Backbone, 'refreshWidget', view.onRefreshWidget);
83			view.listenTo(Backbone, 'removeWidget', view.onRemoveWidget);
84			view.listenTo(Backbone, 'closeWidget', view.onCloseWidget);
85			view.listenTo(Backbone, 'setupWidget', view.onSetupWidget);
86			},
87
88			translateAvailableWidgetsDescription: function() {
89			_.each(this.options.availableWidgets, function(widgetObject) {
90			widgetObject.description = __(widgetObject.description);
91			});
92			},
93
94			getAvailableWidgets: function() {
95			var widgets = this.getWidgets();
96			return _.map(this.options.availableWidgets, function(widgetObject, widgetName) {
97			return _.extend(widgetObject, {
98			widgetName: widgetName,
99			added: widgets.filter(function(widget) {
100			return widget.get('widgetName') === widgetName;
101			}).length
102			});
103			});
104			},
105
106			setWidgets: function(widgets) {
107			this.options.widgets = widgets;
108			},
109
110			getWidgets: function() {
111			return this.options.widgets;
112			},
113
114			getPosition: function() {
115			return this.model.get('position');
116			},
117
118			render: function() {
119			var view = this;
120			var model = view.model;
121			var $main = view.options.$main;
122			var maximized = model.get('state') === constants.SIDEBAR_MAXIMIZED;
123			var minimized = model.get('state') === constants.SIDEBAR_MINIMIZED;
124
125			view.$el.html(view.template(model.toJSON()));
126			view.$el.toggleClass('sidebar-maximized', maximized);
127			$main.toggleClass(stateToClass(model.get('position'), constants.SIDEBAR_MAXIMIZED), maximized);
128			$main.toggleClass(stateToClass(model.get('position'), constants.SIDEBAR_MINIMIZED), minimized);
129
130			this.onWidgetsReset();
131			if (minimized) {
132			view.renderIcons();
133			} else {
134			view.renderWidgets();
135			}
136
137			mediator.trigger('layout:adjustHeight');
138
139			return view;
140			},
141
142			renderIcons: function() {
143			var view = this;
144			var $content = view.$el.find('.sidebar-content');
145
146			this.getWidgets().each(function(widget) {
147			var iconView = view.iconViews[widget.cid];
148			if (!iconView) {
149			return;
150			}
151
152			iconView.render().delegateEvents();
153			$content.append(iconView.$el);
154			});
155
156			$content.sortable({
157			axis: 'y',
158			containment: 'parent',
159			delay: WIDGET_SORT_DELAY,
160			revert: true,
161			tolerance: 'pointer',
162			start: function(event, ui) {
163			var cid = ui.item.data('cid');
164			view.onIconDragStart(cid);
165			},
166			stop: function(event, ui) {
167			var cid = ui.item.data('cid');
168			view.onIconDragStop(cid);
169
170			view.reorderWidgets();
171			}
172			});
173
174			return view;
175			},
176
177			renderWidgets: function() {
178			var view = this;
179			var $content = view.$el.find('.sidebar-content');
180
181			this.getWidgets().each(function(widget) {
182			var widgetView = view.widgetViews[widget.cid];
183			if (!widgetView) {
184			return;
185			}
186			if (widget.get('state') === constants.WIDGET_MAXIMIZED_HOVER) {
187			widget.set({state: constants.WIDGET_MAXIMIZED}, {silent: true});
188			}
189			widgetView.render().delegateEvents();
190			$content.append(widgetView.$el);
191			});
192
193			$content.sortable({
194			axis: 'y',
195			containment: 'parent',
196			delay: WIDGET_SORT_DELAY,
197			revert: true,
198			tolerance: 'pointer',
199			start: function(event, ui) {
200			var cid = ui.item.data('cid');
201			view.onIconDragStart(cid);
202			},
203			stop: function(event, ui) {
204			var cid = ui.item.data('cid');
205			view.onIconDragStop(cid);
206
207			view.reorderWidgets();
208			}
209			});
210
211			return view;
212			},
213
214			onIconDragStart: function(cid) {
215			var widget = this.getWidgets().get(cid);
216			if (widget) {
217			widget.isDragged = true;
218			}
219			},
220
221			onIconDragStop: function(cid) {
222			var widget = this.getWidgets().get(cid);
223			if (widget) {
224			widget.isDragged = false;
225			}
226			},
227
228			reorderWidgets: function() {
229			var view = this;
230			var $content = view.$el.find('.sidebar-content');
231
232			var ids = $content.sortable('toArray', {attribute: 'data-cid'});
233			var widgetOrder = _.object(ids, _.range(ids.length));
234
235			this.getWidgets().each(function(widget) {
236			var order = widgetOrder[widget.cid];
237			widget.set({position: order}, {silent: true});
238			widget.save();
239			});
240
241			this.getWidgets().sort();
242			},
243
244			onClickAdd: function(e) {
245			e.stopPropagation();
246			e.preventDefault();
247
248			var widgetAddView = new WidgetPickerModal({
249			sidebar: this
250			});
251
252			widgetAddView.open();
253			},
254
255			onClickToggle: function(e) {
256			e.stopPropagation();
257			e.preventDefault();
258
259			this.model.toggleState();
260			this.model.save();
261			},
262
263			onWidgetsReset: function() {
264			var view = this;
265
266			this.getWidgets().each(function(widget) {
267			view.widgetViews[widget.cid] = new WidgetContainerView({
268			model: widget
269			});
270
271			view.iconViews[widget.cid] = new IconView({
272			model: widget
273			});
274			});
275			},
276
277			onWidgetAdded: function(widget) {
278			this.widgetViews[widget.cid] = new WidgetContainerView({
279			model: widget
280			});
281
282			this.iconViews[widget.cid] = new IconView({
283			model: widget
284			});
285			},
286
287			onWidgetRemoved: function(widget) {
288			var cid = widget.cid;
289
290			var widgetView = this.widgetViews[cid];
291			if (widgetView) {
292			if (widgetView.contentView) {
293			widgetView.contentView.remove();
294			}
295			widgetView.remove();
296			delete this.widgetViews[cid];
297			}
298
299			var iconView = this.iconViews[cid];
300			if (iconView) {
301			iconView.remove();
302			delete this.iconViews[cid];
303			}
304
305			var hoverView = this.hoverViews[cid];
306			if (hoverView) {
307			hoverView.contentView.remove();
308			hoverView.remove();
309			delete this.hoverViews[cid];
310			}
311			},
312
313			onShowWidgetHover: function(cid, cord) {
314			var hoverView;
315			var view = this;
316
317			var widget = this.getWidgets().get(cid);
318
319			if (!widget) {
320			return;
321			}
322
323			view.hideAllWidgetHovers();
324
325			widget.snapshotState();
326			widget.set({state: constants.WIDGET_MAXIMIZED_HOVER}, {silent: true});
327			widget.save();
328
329			if (!view.hoverViews.hasOwnProperty(cid)) {
330			view.hoverViews[cid] = new WidgetContainerView({
331			model: widget
332			});
333			}
334			hoverView = view.hoverViews[cid];
335			view.$el.append(hoverView.render().$el);
336			hoverView.setOffset({top: cord.top});
337			hoverView.adjustMaxHeight();
338			},
339
340			onRefreshWidget: function(cid) {
341			var widget = this.getWidgets().get(cid);
342			if (!widget) {
343			return;
344			}
345
346			var widgetView;
347			var state = widget.get('state');
348			if (state === constants.WIDGET_MAXIMIZED) {
349			widgetView = this.widgetViews[cid];
350			} else if (state === constants.WIDGET_MAXIMIZED_HOVER) {
351			widgetView = this.hoverViews[cid];
352			}
353
354			if (widgetView) {
355			widgetView.contentView.trigger('refresh');
356			}
357			},
358
359			hideWidgetHover: function(cid) {
360			var hoverView = this.hoverViews[cid];
361			if (hoverView) {
362			hoverView.model.restoreState();
363			hoverView.contentView.remove();
364			hoverView.remove();
365			delete this.hoverViews[cid];
366			}
367			},
368
369			hideAllWidgetHovers: function() {
370			var view = this;
371
372			this.getWidgets().each(function(widget) {
373			view.hideWidgetHover(widget.cid);
374			});
375			},
376
377			onRemoveWidget: function(cid) {
378			var widget = this.getWidgets().get(cid);
379			if (!widget) {
380			return;
381			}
382
383			var modal = new DeleteConfirmation({
384			content: __('oro.sidebar.widget.remove.confirm.message')
385			});
386
387			modal.on('ok', function() {
388			widget.destroy();
389			modal.off();
390			});
391
392			modal.on('cancel', function() {
393			modal.off();
394			});
395
396			modal.open();
397			},
398
399			onCloseWidget: function(cid) {
400			var view = this;
401
402			var widget = this.getWidgets().get(cid);
403			if (!widget) {
404			return;
405			}
406
407			view.hideWidgetHover(cid);
408			},
409
410			onSetupWidget: function(cid) {
411			var widgetModel = this.getWidgets().get(cid);
412			if (!widgetModel) {
413			return;
414			}
415
416			widgetModel.loadModule().then(function(widgetModule) {
417			var widgetSetupModal = new WidgetSetupModalView({
418			model: widgetModel,
419			contentView: widgetModule.SetupView,
420			okCloses: false,
421			snapshot: JSON.stringify(widgetModel)
422			});
423
424			widgetSetupModal.open();
425			});
426			}
427			});
428
429			return SideBarView;
430			});
431

oroinc / platform

Push — master ( ae6bbc...554531 )

view.js ➔ ... ➔ SideBarView A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like