Skip to content

Instantly share code, notes, and snippets.

@xmas
Created March 29, 2016 20:27
Embed
What would you like to do?
Lighting Nav Controller Example
<aura:event type="APPLICATION">
<aura:attribute name="direction" type="String"/>
<aura:attribute name="type" type="String"/>
<aura:attribute name="params" type="String"/>
</aura:event>
<aura:application>
<c:ViewController/>
</aura:application>
<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>
({
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();
}
})
<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>
({
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);
}
}
})
({
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();
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment