Mercurial > hg > dml-open-vis
view src/DML/MainVisBundle/Resources/assets/marionette/modules/MainRegionModule/MainRegionModule.01-MainRegionView.js @ 0:493bcb69166c
added public content
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 20:54:02 +0100 |
parents | |
children |
line wrap: on
line source
"use strict"; App.module("MainRegionModule", function (MainRegionModule, App, Backbone, Marionette, $, _, Logger) { MainRegionModule.MainRegionView = Backbone.View.extend({ initialize: function(options) { var _this = this; _this.options = _.defaults(options || {}, this.options); var $collectionsGridEl = _this.$(".config-grid"); var $recordingsGridEl = $collectionsGridEl.clone(); $recordingsGridEl.appendTo(_this.el); // Render when the state changes _this.options.state.on("change", function() { _this.render(); }); // Init sub-views _this._musicCollectionConfigGridView = new MainRegionModule.ConfigGridView({ el: $collectionsGridEl, state: _this.options.state, configGrid: _this.options.state.get("musicCollectionGrid"), parentState: _this.options.state, parentContainerElement: _this.el }); _this._musicRecordingConfigGridView = new MainRegionModule.ConfigGridView({ el: $recordingsGridEl, state: _this.options.state, configGrid: _this.options.state.get("musicRecordingGrid"), parentState: _this.options.state, parentContainerElement: _this.el }); _this._$flipper = $.bem.generateElement("main-region", "flipper"); _this._$flipper.append( _this._musicRecordingConfigGridView.$ghost, _this._musicCollectionConfigGridView.$ghost ); _this._$flipperContainer = $.bem.generateElement("main-region", "flipper-container"); _this._$flipperContainer.append(_this._$flipper); _this._$flipper.on( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() { _this._stopFlipping(); } ); _this.render(true, true); }, render: function(deep, instant) { var _this = this; var musicRecordingsGridNeedsToBeShown = !! _this.options.state.get("musicRecordingsGridIsShown"); var gridViewToShow = musicRecordingsGridNeedsToBeShown ? _this._musicRecordingConfigGridView : _this._musicCollectionConfigGridView; var gridViewToHide = !musicRecordingsGridNeedsToBeShown ? _this._musicRecordingConfigGridView : _this._musicCollectionConfigGridView; // need to swap grids if (!gridViewToShow.el.getAttribute("data-active")) { // launch the flipper if (!instant) { if (!_this.isSwitchingBetweenGrids()) { _this._$flipper.removeClass("main-region__flipper_animating"); _this._$flipper.setMod("main-region", "flipper", "to", !musicRecordingsGridNeedsToBeShown ? "recording" : "collection"); _this._$flipper.addClass("main-region__flipper_animating"); _this._$flipperContainer.appendTo(_this.el); } setTimeout(function() { _this._$flipper.setMod("main-region", "flipper", "to", musicRecordingsGridNeedsToBeShown ? "recording" : "collection"); }, 10); } // swap the grids and render a new current one gridViewToHide.$el.attr("data-active", null).detach(); gridViewToShow.$el.attr("data-active", "1") .appendTo(_this.$el); // gridViewToHide.$el.attr("data-active", null).hide(); // gridViewToShow.$el.attr("data-active", "1") .show(); gridViewToShow.render(true, true); // no need to swap grids - render only if it's a deep render } else if (deep) { gridViewToShow.render(deep, instant); } }, isSwitchingBetweenGrids: function() { var _this = this; return _this._$flipperContainer.parent().length; }, _stopFlipping: function() { var _this = this; _this._$flipperContainer.detach(); }, }); }, Logger);