tribe/facets/flow.js

Tribe is a platform for building rich, powerful, highly scalable distributed HTML5 web and mobile systems.

// generates an facet definition from an alternate API focused around navigation flows
// the facet instance exposes a single observable called pane. intended to be consumed by the flow binding handler
// this should really be part of composite, but that has not yet been converted to use modules, which adds certain complexities
module.exports = function (definition) {
    return function (facet) {
        var pane = ko.observable()

        this.pane = pane
        facet.to = to

        facet.startsAt = function (startPane, data) {
            pane(createDestination(startPane, data))
        }

        facet.on = function (topic) {
            return {
                to: function (destination, paneData) {
                    facet.handles(topic, function (data) {
                        to(destination)(paneData || data)
                    })
                },
                startChild: function (path, options) {
                    options = options || {};
                    facet.handles(topic, function (data) {
                        facet.startChild(path, {
                            facet: options.facet,
                            transition: options.transition,
                            // set the scope to the message data by default - not sure if this is a robust solution
                            scope: options.scope || data
                        })
                    })
                }
            }
        }

        facet.startChild = function (path, options) {
            options = options || {};
            if(options.facet === true) options.facet = path
            pane({ path: '/__flow', data: { flow: path, transition: options.transition, scope: options.scope, facet: options.facet } })
        }

        definition(facet, to)

        function to(destination, paneData) {
            return function (data) {
                pane(createDestination(destination, paneData || data))
            }
        }
    }

    function createDestination(destination, data) {
        if(destination.constructor === String)
            return { path: destination, data: data }
        return {
            path: destination.path,
            data: destination.data || data,
            scope: destination.scope
        }
    }
}