Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Morten Skjoldager 440 posts 1499 karma points
    Sep 14, 2014 @ 11:50
    Morten Skjoldager
    0

    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

  • Dan Lister 416 posts 1973 karma points c-trib
    Sep 17, 2014 @ 12:55
    Dan Lister
    101

    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:

    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 = "";
          }
        }
      });
    
    });
    

    Thanks, Dan.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies