RA About Page - view.js

app.js

RA.module("AboutApp", function(AboutApp, RA, Backbone, Marionette, $, _) {
    AboutApp.Router = Marionette.AppRouter.extend({
        appRoutes: {
            "about": "index",
            "about/": "index"
        },
        onRoute: function(name, path, args) {
            RA.execute("set:navigation:activeItem", path);
        }
    });

    var API = {
        index: function() {
            AboutApp.Index.Controller.showIndex();
        }
    };

    RA.on("about:index", function() {
        RA.navigate("");
        API.index();
    });

    AboutApp.on("start", function() {
        new AboutApp.Router({
            controller: API
        });
    });
});

controller.js

RA.module("AboutApp.Index", function(Index, RA, Backbone, Marionette, $, _) {
    Index.Controller = {
        showIndex: function() {

            var fetchingAbout = RA.request('page:single', 'about'),
                relatedIDs = [],
                relatedPostObjects = [],
                relatedPromise = $.Deferred();


            $.when(fetchingAbout).done(function(project)
            {
                var relatedPosts = project.attributes.acf.work_posts;

                if (relatedPosts) {
                    var relatedPostsLength = relatedPosts.length,
                        blogProject = project;

                    $.each(project.attributes.acf.work_posts, function(index, value) {

                        var caseID = value;

                        $.getJSON(RA.APP_DATA_URL +'/wp-json/posts?type[]=work&filter[p]='+ caseID, function(data) {

                            relatedPostObjects.push(data[0]);

                            if (relatedPostObjects.length == 2)
                            {
                                relatedPromise.resolve(project, relatedPostObjects);
                            }
                        });
                    });
                }

                else {
                    relatedPromise.resolve(project);
                }

            });

            $.when(relatedPromise).done(function(page, relatedPosts) {

                var view = new Index.Show({
                    model: page,
                    related: relatedPosts
                });

                RA.RegionManager.get('main').show(view);
            });
        }
    };
});

view.js

RA.module("AboutApp.Index", function(Index, RA, Backbone, Marionette, $, _)
{
    Index.Show = Marionette.ItemView.extend(
    {
        template: require('./templates/about.hbs'),

        // Runs at view call
        initialize: function()
        {
            this.logoGridOffset = null;
            this.blockScene = null;
            this.sceneController = null;
        },

        templateHelpers: function() {
            return {
                // related posts that appear at bottom of case study
                related: this.options.related
            }
        },

        // Triggered by the Marionette RegionManager after the view has been injected into container
        onShow: function()
        {
            RA.execute("set:navigation:color", "light");

            this.dynamicFontSizing();
            this.animateIn();
            this.neonHelper();
            this.scrollAnimations('init');
            this.resizeListeners('init');
        },

        onDestroy: function()
        {
            this.scrollAnimations('destroy');
            this.sceneController.destroy();
            this.logoGridOffset = null;
            this.sceneController = null;
        },

        animateIn: function()
        {
            // var heroText = $('.hero').find('.inner');

            // RA.AnimationController('moveIn', heroText);
        },

        neonHelper: function() {
            var sign = $('.neon-svg'),
                signPaths = $('[class*=neon-path]','.neon-svg'),
                signHeadline = $('.headline', '.hero');

            if ($('html').hasClass('ie11')) {
                var glowTimeout = 500;
            }
            else {
                var glowTimeout = 3000;
            }

            var delayGlow = setTimeout(function() {
                signPaths.attr('class', 'neon-path is-glowing is-color-cycling');
                sign.attr("class", "neon-svg is-glowing");
                signHeadline.removeClass('is-hidden');
            }, glowTimeout);
        },

        scrollAnimations: function(action)
        {
            var that = this;

            switch (action)
            {
                case 'init':
                    var blockWrapper = $('.block-wrappers');

                    this.sceneController = new ScrollMagic.Controller();

                    // ra ventures logo gridtele
                    new ScrollMagic.Scene(
                        {
                            triggerElement: '.block-logo-grid'
                        })
                        .on('enter', function()
                        {
                            RA.AnimationController('staggerInFaster', $('.logo-wrapper .logo'), false);
                        })
                        .addTo(this.sceneController);

                    // ra ventures logo grid
                    new ScrollMagic.Scene(
                        {
                            triggerElement: '.block-services-grid'
                        })
                        .on('enter', function()
                        {
                            RA.AnimationController('growIn', $('.service-contain .service'), false);
                        })
                        .addTo(this.sceneController);
            }

        },

        resizeListeners: function(action) {

            var self = this,
                win = {
                width: $(window).width(),
                height: $(window).height()
            },
                hero = $('.hero', '.page-about');

            switch(action) {
                case 'init':

                    hero.css({ height: win.height });

                    self.resizeListeners('listen');

                    break;

                case 'listen':

                    $(window).on('resize.about-hero', _.debounce(function() {
                        var newHeight = $(window).height();

                        hero.css({ height: newHeight });

                    }, 50));

                case 'destroy':

                    break;
            }

        },

        dynamicFontSizing: function()
        {
            var targetElement = $('.page-about');

            targetElement.flowtype(
            {
                minimum: 480,
                maximum: 1600,
                minFont: 12,
                maxFont: 16,
                fontRatio: 90
            });
        },
    });
});