2
\$\begingroup\$

I rarely see this kind of navigating on the web. But basically I load all the content in the background and then flip pages as needed while loading user specific data via ajax.

Are there any problems with this and in general?

/***********************************************************************************************************************
    *Page - flips pages in the app and also updates the Menu
    */
        var Page = $A.Class.create('public', {
            Name: 'Page',
            E: {

                // body elements
                body_splash:       '#body_splash',
                body_fave:         '#body_fave',
                body_feed:         '#body_feed',
                body_settings:     '#body_settings',
                body_fave_custom:  '#body_fave_custom',

                // menu elements
                nav_splash:         '#nav_splash',
                nav_fave:           '#nav_fave',
                nav_feed:           '#nav_feed',
                nav_settings:       '#nav_settings',
                nav_fave_custom:    '#nav_fave_custom'
            },
            P: {
                page_previous:   null,
                input_previous:  'splash'
            },

            // don't flip the page to fast or the inputs won't reset
            flip: function (input) {
                var self = this;
                input = input || 'splash';
                Backbone.trigger(input + '_flipped');
                Backbone.trigger(self.P.input_previous + '_flipped_from');

                // give page time to reset before flipping
                setTimeout(function() {
                  self.flipTimed(input)
                }, 100);
            },
            flipTimed : function (input) {
                var page_current,
                    nav_current;

                page_current =  this.E['body_' + input];
                nav_current =  this.E['nav_' + input];

                // check the timing on this
                Storage.set('page', input);

                // turn off previous page
                if (this.P.page_previous !== null && this.P.page_previous !== page_current) {
                    this.P.page_previous.style.opacity = 0;
                    this.P.page_previous.style.display = "none";
                }

                // turn on current page
                if (this.P.page_previous !== page_current) {
                    $A.animate(page_current);
                    page_current.style.display = "inline-block";
                }

                // update menu
                Menu.toggleMarker(nav_current);

                // update previous
                this.P.page_previous = page_current;
                this.P.input_previous = input;

            }
        });
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.