Override and extend Backbone Marionette Regions for Custom Fading

gistfile1.txt

// Regions
// 
// Extend the Backbone.Marionette Regions for custom functionality

MWP.module('Common.Regions', function(Regions, MWP, Backbone, Marionette, $, _) {
    
    // Overlays

    Regions.Overlay = Marionette.Region.extend({

		onShow: function() {
			this.$el.addClass('overlay-cover');
		},

		onEmpty: function() {
			this.$el.removeClass('overlay-cover');
		}
	});
    
    // Fade In ALL THE REGIONS!

	Regions.Fade = Backbone.Marionette.Region.extend({
      
      // Override the show function to accept a new noFade option
	    show: function (view, options) {

	        this._ensureElement();

	        var showOptions = options || {};
	        var isDifferentView = view !== this.currentView;
	        var preventDestroy = !!showOptions.preventDestroy;
	        var forceShow = !!showOptions.forceShow;
	        var noFade = !!showOptions.noFade; // fade by default

	        // We are only changing the view if there is a current view to change to begin with
	        var isChangingView = !!this.currentView;

	        // Only destroy the current view if we don't want to `preventDestroy` and if
	        // the view given in the first argument is different than `currentView`
	        var _shouldDestroyView = isDifferentView && !preventDestroy;

	        // Only show the view given in the first argument if it is different than
	        // the current view or if we want to re-show the view. Note that if
	        // `_shouldDestroyView` is true, then `_shouldShowView` is also necessarily true.
	        var _shouldShowView = isDifferentView || forceShow;

	        if (isChangingView) {
	            this.triggerMethod('before:swapOut', this.currentView);
	        }

	        if (_shouldDestroyView) {
	            this.empty();
	        }

	        if (_shouldShowView) {

	            // We need to listen for if a view is destroyed
	            // in a way other than through the region.
	            // If this happens we need to remove the reference
	            // to the currentView since once a view has been destroyed
	            // we can not reuse it.
	            view.once('destroy', _.bind(this.empty, this));
	            view.render();

	            if (isChangingView) {
	                this.triggerMethod('before:swap', view);
	            }

	            this.triggerMethod('before:show', view);
	            Marionette.triggerMethodOn(view, 'before:show');

	            if (isChangingView) {
	                this.triggerMethod('swapOut', this.currentView);
	            }

	            this.attachHtml(view, noFade); // updated to accept noFade option
	            this.currentView = view;

	            if (isChangingView) {
	                this.triggerMethod('swap', view);
	            }

	            this.triggerMethod('show', view);
	            Marionette.triggerMethodOn(view, 'show');

	            return this;
	        }

	        return this;
	    },

	    // Override this method to change how the new view is
	    // appended to the `$el` that the region is managing
	    attachHtml: function (view, noFade) {

	        if (noFade) {
	            this.el.innerHTML = '';
	            this.el.appendChild(view.el);
	        } else {
	            this.$el.hide();
	            this.el.innerHTML = '';
	            this.el.appendChild(view.el);
	            this.$el.fadeIn();
	        }

	    }

	});

    // Main Region (only region we want to scroll to top) 
    // Extends Regions.Fade

	Regions.Main = Regions.Fade.extend({
	    onShow: function () {

	        /* when a new page is shown, if the scrollTop is significant, iterate scroll to top
            NOTE: any page can opt-out of this behavior with a data-topscroll="false" attribute */

	        var dataNoScroll = $(this.el).has("[data-topscroll='false']").length > 0;
	        var scrollTolerance = 1;


	        if (MWP.Utils.checkScroll(scrollTolerance) && !dataNoScroll) {
	            MWP.Utils.scrollToTop();
	        }

	    }
	});

});




// Application  
//
// Implementation of extended regions

MWP.addInitializer(function () {

    // Other logic...
    
    // Instantiating regions here in lieu of using MWP.addRegions configuration

    MWP.formOverlayRegion = new MWP.Common.Regions.Overlay({ el: "#overlay-region" });
    MWP.mainRegion = new MWP.Common.Regions.Main({ el: "#main-region" });
    MWP.navRegion = new MWP.Common.Regions.Fade({ el: "#nav-region" });
    MWP.footerRegion = new MWP.Common.Regions.Fade({ el: "#footer-region" });

});




// Controller
//
// Region.show() being called with added parameter

MWP.mainRegion.show(activeCardView, { noFade: noFade });