Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Sam 26 posts 137 karma points c-trib
    Jan 11, 2016 @ 02:27
    Sam
    0

    Detect tab change

    Extending Umbraco
    Umbraco 7

    Hello,

    I have a property editor that needs to know when the tab it is in is visible so it can draw it's control. Is there anyway I can detect this in the backoffice?

    Cheers, Sam

    Copy Link
  • Ian 178 posts 752 karma points
    Jan 12, 2016 @ 16:09
    Ian
    0

    Hi Sam you could try injecting editorState into your property editor controller then use editorState.current.tabs, this is an array of tab objects with the current tab having its 'active' property set to true.

    Copy Link
  • Sam 26 posts 137 karma points c-trib
    Jan 12, 2016 @ 22:19
    Sam
    0

    Thanks! This looked good but polling editorState.current.tabs doesn't seem to show the 'active' property ever being updated?

    Copy Link
  • Ian 178 posts 752 karma points
    Jan 12, 2016 @ 23:02
    Ian
    0

    Hi sam can youshow what code you are using to poll? If you put a breakpoint in your controller and inspect editorState.current.tabs in your browser dev tools what is the 'active' value of each tab?

    Copy Link
  • Sam 26 posts 137 karma points c-trib
    Jan 13, 2016 @ 00:49
    Sam
    0

    I was doing something like:

    Polling:

    window.setInterval(function () {
    $scope.tabs = JSON.stringify(editorState.current.tabs);
    console.log('tabs', editorState.current.tabs);
}, 5000);

    Watching for change: 

    $scope.$watch('tabs', function (newValue) {
    console.log('tabs change', newValue);
}, false);

    The active value stays set to true for the first tab, even once I have changed to the second tab.

    Copy Link
  • Ian 178 posts 752 karma points
    Jan 13, 2016 @ 08:48
    Ian
    0

    Thanks, ok i'll do some tests later and see if there's a solution

    Copy Link
  • Ian 178 posts 752 karma points
    Jan 13, 2016 @ 13:36
    Ian
    100

    Hi Sam, it looks like whilst the active property value does change in the browser, for your purposes editorState does not get refreshed once injected into your controller so watching its values doesn't work. I don't know how you feel about this but this does seem to capture the tab change.

    $('a[data-toggle="tab"]').on('shown', function (e) {
        console.log('tab changed')
    });
    Copy Link
  • Sam 26 posts 137 karma points c-trib
    Jan 13, 2016 @ 20:20
    Sam
    0

    It's not pretty, but it does work well enough for my use-case.

    Thanks!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft