iosNavigationPattern.js

Beast.decl({
    NavigationItem: {
        mod: {
            state: '', // activated, released
        },
        onMod: {
            state: {
                activated: function (callback) {
                    callback && callback()
                },
                released: function (callback) {
                    callback && callback()
                }
            }
        },
        activate: function(callback) {
            this.mod('state', 'activated', callback)
        },
        release: function(callback) {
            this.mod('state', 'released', callback)
        },

        /**
         * Pushes itself to StackNavigation
         * @options {context:BemNode, onDidActivate:function, onDidRelease:function}
         */
        pushToStackNavigation: function(options) {
            this.param('options', options)
            this.getParentNavigationNodeOfKind('StackNavigation', options.context).push(this)
            return this
        },

        /**
         * Pops itself from StackNavigation
         */
        popFromStackNavigation: function() {
            this.getParentNavigationNodeOfKind('StackNavigation', this).pop()
            return this
        },

        /**
         * Pops all NavigationItems from StackNavigation
         */
        popAllFromStackNavigation: function() {
            this.getParentNavigationNodeOfKind('StackNavigation', this).popAll()
            return this
        },

        /**
         * Gets parent navigation node of @kind for @context
         */
        getParentNavigationNodeOfKind: function(kind, context) {
            var node = context.parentNode()
            while (!node.isKindOf(kind) && node.parentNode()) {
                node = node.parentNode()
            }
            return node
        },
    },


    StackNavigation: {
        inherits: 'NavigationItem',
        expand: function() {
            this.append(<item>{this.get('/')}</item>)
            this.topItem().mod('Root', true)
        },

        /**
         * Pushes @navigationItem to stack
         */
        push: function(navigationItem) {
            this.append(<item>{navigationItem}</item>)

            this.mod('Pushed', this.topItem().mod('Root') !== true)

            var onDidPush = this.topNavigationItem().param('options').onDidPush
            this.topNavigationItem().activate(function() {
                onDidPush && onDidPush()
            })
        },

        /**
         * Pops @navigationItem from stack
         */
        pop: function() {
            var onDidPop = this.topNavigationItem().param('options').onDidPop
            this.topNavigationItem().release(function() {
                onDidPop && onDidPop()
                this.topItem().remove()
                this.mod('Pushed', this.topItem().mod('Root') !== true)
            }.bind(this))
        },

        /**
         * Pops all @navigationItem's from stack
         */
        popAll: function() {
            this.elem('item').forEach(function(item, index) {
                if (index !== 0) {
                    var onDidPop = item.get('/')[0].param('options').onDidPop
                    item.get('/')[0].release(function() {
                        onDidPop && onDidPop()
                        item.remove()
                        this.mod('Pushed', this.topItem().mod('Root') !== true)
                    }.bind(this))
                }
            }.bind(this))
        },

        /**
         * Gets top item element from stack
         */
        topItem: function() {
            return this.elem('item').pop()
        },

        /**
         * Gets NavigationItem of top item element
         */
        topNavigationItem: function() {
            return this.topItem().get('/')[0]
        },

        /**
         * Stores scroll position
         */
        storeScrollPosition: function() {
        },

        /**
         * Resores scroll position
         */
        restoreScrollPosition: function() {
        },
    },


    SwitchNavigation: {
        inherits: 'NavigationItem',
        expand: function() {
            var items = this.get('/').map(function(element, index) {
                index === 0 ? element.activate() : element.release()
                return <item>{element}</item>
            })
            this.append(items)
        },

        /**
         * Switches to item element with @index
         */
        switchToNavigationItem: function(index) {
            this.elem('item').forEach(function(item, itemIndex) {
                var itemContent = item.get('/')[0]
                itemIndex === index ? itemContent.activate() : itemContent.release()
            })
        }
    }
})