Mercurial > hg > dml-open-vis
diff 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 diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/DML/MainVisBundle/Resources/assets/marionette/modules/MainRegionModule/MainRegionModule.01-MainRegionView.js Tue Feb 09 20:54:02 2016 +0100 @@ -0,0 +1,102 @@ +"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); \ No newline at end of file