Created
March 29, 2016 20:27
-
-
Save xmas/fc0b058e3335e0055e14b1e312416e95 to your computer and use it in GitHub Desktop.
Lighting Nav Controller Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application> | |
<c:ViewController/> | |
</aura:application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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(); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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); | |
} | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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