Lighting Nav Controller Example

NavEvent.evt

<aura:event type="APPLICATION">
    <aura:attribute name="direction" type="String"/>
    <aura:attribute name="type" type="String"/>
    <aura:attribute name="params" type="String"/>

</aura:event>

TestApp.app

<aura:application>

<c:ViewController/>

</aura:application>

TestView.cmp

<aura:component>

<ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system-ltng.css" />

<aura:attribute name="colors" type="List" />
<aura:attribute name="head_color" type="String" />
<aura:attribute name="level" type="Integer" />

<aura:attribute name="init_params" type="String" />


<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<div class="slds" id="in">



<div style="{!'background-color:'+ v.head_color+';min-height: 75px'}">

<aura:renderIf isTrue="{!v.level > 0}">

   <button class="slds-button slds-button--neutral slds-button--brand" direction="back" id="back" onclick="{!c.nav}">Back</button>    
</aura:renderIf> 

   <span> Level: {!v.level} </span>

   </div>
<aura:iteration items="{!v.colors}" var="color">


<div style="{!'background-color:'+ color+';min-height: 75px'}">

    <span>{!color}</span>
    <button class="slds-button slds-button--neutral slds-button--brand" direction="forward" id="{!color}" onclick="{!c.nav}">Forward</button>
  

</div>

</aura:iteration>
</div>

</aura:component>

TestViewController.js

({
	

    postScript : function(component, event, helper) {


    },

    doInit : function(component, event, helper) {


       console.log('init_params: '+component.get("v.init_params"));

       var init_params = JSON.parse(component.get("v.init_params"));
       component.set("v.colors", init_params.color_array);
       component.set("v.head_color", init_params.head_color);
       component.set("v.level", init_params.level);

        //     var colors = ["green", "red", "blue", "orange"];
        //     component.set("v.colors", colors);
        //}
    },

    nav : function(component, event, helper) {
        //debugger;

        var level = component.get("v.level");
        level = level + 1;
        var params = {level: level, head_color: event.target.id,
            color_array: ["yellow", "red"]};
        var direction = event.target.direction;


        var navEvent = $A.get("e.c:NavEvent");
        navEvent.setParams({direction: direction});
        navEvent.setParams({params: JSON.stringify(params)});
        navEvent.setParams({type: "c:TestView"});

        navEvent.fire();      
    }
})

ViewController.cmp

<aura:component>

<ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system-ltng.css"/>

<aura:attribute name="nav_stack" type="List" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:NavEvent" action="{!c.navEvent}"/>

{!v.body}

</aura:component>

ViewControllerController.js

({
	
    postScript : function(component, event, helper) {


    },

    doInit : function(component, event, helper) {
        helper.sampleControllerAction(component);

        // $A.createComponent(
        //     "c:TestView",
        //     {
        //         "aura:id": "level1",
        //         "colors": ["green", "red", "blue", "orange"]
        //     },
        //     function(view){
        //         //Add the new button to the body array
        //         if (component.isValid()) {
        //             var body = component.get("v.body");
        //             body.push(view);
        //             component.set("v.body", body);
        //         }
        //     });

        var params = {level: 0, head_color: "pink",
        color_array: ["green", "red", "blue", "orange"]};
        var view = { type: "c:TestView", params: JSON.stringify(params)};
        
        helper.push_nav(component, event, helper, view);   

    },

    navEvent : function(component, event, helper) {

        var direction = event.getParam("direction");
        if (direction === "back") {
            helper.pop_nav(component, event, helper);
        } else {
         var new_params = event.getParam('params');
         var type = event.getParam('type');

         var view = {type: type, params: new_params};
         helper.push_nav(component, event, helper, view);            
     }


 }


})

ViewControllerHelper.js

({
	push_nav: function(component, event, helper, view) {

        var nav_stack = component.get("v.nav_stack")
        if (!nav_stack) {
            nav_stack = [];
        }

        console.log('pushing. Current nav_stack: '+JSON.stringify(nav_stack, null, 4));
        console.log('view', JSON.stringify(view, null, 4));


        nav_stack.push(view);


        $A.createComponent(
            view.type,
            {
                "aura:id": "level1",
                "init_params": view.params
            },
            function(view){
                //Add the new button to the body array
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(view);
                    component.set("v.body", view);
                }
            });


        console.log('PUSHED. Current nav_stack: '+JSON.stringify(nav_stack, null, 4));
        component.set("v.nav_stack", nav_stack);

    },

    pop_nav: function(component, event, helper) {


        var nav_stack = component.get("v.nav_stack")
        console.log('popping. Current nav_stack: '+JSON.stringify(nav_stack, null, 4));
        nav_stack.pop();
        var view = nav_stack[nav_stack.length-1];
        $A.createComponent(
            view.type,
            {
                "aura:id": "level1",
                "init_params": view.params
            },
            function(view){
                //Add the new button to the body array
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(view);
                    component.set("v.body", view);
                }
            });


        console.log('POPPED. Current nav_stack: '+JSON.stringify(nav_stack, null, 4));
        component.set("v.nav_stack", nav_stack);

    },

    sampleControllerAction: function(cmp) {
        // subscribe to severity levels
        $A.logger.subscribe("INFO", logCustom);
        // Following subscriptions not exercised here but shown for completeness
        $A.logger.subscribe("WARNING", logCustom);
        $A.logger.subscribe("ASSERT", logCustom);
        $A.logger.subscribe("ERROR", logCustom);


        function logCustom(level, message, error) {
            console.log(getTimestamp(), "logCustom: ", arguments); 
        }

        function getTimestamp() {
            return new Date().toJSON();
        }
    }


})