Copied to clipboard

Flag this post as spam?

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


  • Emil Olsson 3 posts 102 karma points
    Feb 21, 2017 @ 13:03
    Emil Olsson
    0

    Hook/Intercept Angular backend Menus and Tree Events

    Hi folks!

    In short: I need to trigger a javascript snippet in the backoffice when the user switches to editing a page. So users press edit home -> run snippet.

    I'm trying to find a way to hook into any of the Umbraco Angular events for the menus. I have currently made a ActionMenuItem where the snippet runs when the admin presses the button. However I need events for when a user for example leaves the content tab to settings.

  • Emil Olsson 3 posts 102 karma points
    Feb 23, 2017 @ 10:14
    Emil Olsson
    101

    Just wanted to share what the solution ended up to.

    Challenge 1: Want to hook on events so I know if the user enter the editor mode or left it

    Solution: Listen on the event $routeChangeSucess

    // Try to find an event as late as possible so angular has been loaded
    $(window).load(function () {
    
        var $scope = angular.element('body').scope(); // Get scope from body
    
        if ($scope) {
            $scope.$on('$routeChangeSuccess', function(e, next, current) { });
        }
    });
    

    The callback from the event "next" contains which tree you're on, which page id you're on etc.

    Challenge 2: Listen on events for when user press the save and publish

    Solution: From what I could find, the event emits from the controller Umbraco.Editors.Content.EditController.

    // Method for the routeChangeSuccess event
    on$routeChangeSuccess: function (e, next, current) {
    
        // Only listen when user works on the content tree
        if (next.params.tree === 'content') {
    
            // The controller does not exist until after the route change
            // Wait one js tick to hook on the publish button. 
            setTimeout(function () {
                var uEditController = angular.element($("body div [ng-controller='Umbraco.Editors.Content.EditController']"));
                if (uEditController.length < 1) {
                    return;
                }
    
                var $scope = uEditController.scope();
    
                // Hook on save and publish event
                $scope.$on('formSubmitted', function (form) {
                    // Do stuff
                });
    
            }, 0);
        }
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft