Hi I'm creating a custom section for Umbraco, and was wondering weather it's possible to hide the tree and show it again by calling some java script functions - just like when the screen is smaller and it disappears.. The only thing i could come up with was:
If you are looking to toggle the tree panel, Warren Buckley published a new blog post today showing an example of how to do this. Here is his code snippet:
angular.module('umbraco').controller('demo.toggler', function($scope, appState, eventsService) {
//Create an Angular JS controller and inject Umbraco services appState & eventsService
//Button Click - ToggleUmbracoNavigation
$scope.toggleUmbracoNavigation = function() {
//Get the current state of showNavigation
var currentNavigationState = appState.getGlobalState('showNavigation');
//console.log("currentNavigationState", currentNavigationState);
//console.log("Inverse of currentNavigationState", !currentNavigationState);
//Toggle the tree visibility
appState.setGlobalState("showNavigation", !currentNavigationState);
}
//The eventService allows us to easily listen for any events that the Umbraco applciation fires
//Let's listen for globalState changes...
eventsService.on("appState.globalState.changed", function (e, args) {
//console.log("appState.globalState.changed (args)", args);
if (args.key === "showNavigation") {
//console.log("showNavigation value", args.key, args.value);
//If false (So hiding navigation)
if(!args.value) {
//Set css left position to 80px (width of appBar)
document.getElementById("contentwrapper").style.left = "80px";
}
else {
//Remove the CSS we set so default CSS of Umbraco kicks in
document.getElementById("contentwrapper").style.left = "";
}
}
});
});
Hide/Show tree section
Hi I'm creating a custom section for Umbraco, and was wondering weather it's possible to hide the tree and show it again by calling some java script functions - just like when the screen is smaller and it disappears.. The only thing i could come up with was:
angular.element('#navigation').scope().$apply(function() { $scope.showNavigation = false })
But it still takes up the place since the elements are positioned absolute. Is there a way or should i hack it using css ?
Regards
Morten
Hi Morten,
If you are looking to toggle the tree panel, Warren Buckley published a new blog post today showing an example of how to do this. Here is his code snippet:
Thanks, Dan.
is working on a reply...