Copied to clipboard

Flag this post as spam?

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


  • Chris Hodgson 2 posts 22 karma points
    Nov 21, 2017 @ 14:07
    Chris Hodgson
    0

    UmbTabHeader replacing umbHeader

    I can see that in the documentation that the directive umbHeader is labeled:

    The header on an editor that contains tabs using bootstrap tabs - THIS IS OBSOLETE, use umbTabHeader instead

    However I can not see any references to this new directive, has it been replaced if so where can I find the new documentation for umbTabHeader

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Jun 28, 2018 @ 12:52
    Stefan Kip
    0

    Ran into the same issue, no answer found yet though.

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Jun 28, 2018 @ 13:16
    Stefan Kip
    0

    Created a new js file in app_plugins to include the obsolete, but working, umb-header:

    /**
    * @ngdoc directive
    * @name umbraco.directives.directive:umbHeaderOld
    * @restrict E
    * @function
    * @description
    * The header on an editor that contains tabs using bootstrap tabs - THIS IS OBSOLETE, use umbTabHeader instead
    **/
    angular.module("umbraco.directives")
        .directive('umbHeaderOld', function ($parse, $timeout) {
            return {
                restrict: 'E',
                replace: true,
                transclude: 'true',
                templateUrl: 'views/directives/umb-header.html',
                //create a new isolated scope assigning a tabs property from the attribute 'tabs'
                //which is bound to the parent scope property passed in
                scope: {
                    tabs: "=",
                    mLoaded: "="
                },
                link: function (scope, iElement, iAttrs) {
    
                    scope.showTabs = iAttrs.tabs ? true : false;
                    scope.visibleTabs = [];
    
    
                    var membershiploadedWatch = scope.$watch("mLoaded", function (newV, oldV) {
    
                    });
                    //since tabs are loaded async, we need to put a watch on them to determine
                    // when they are loaded, then we can close the watch
                    var tabWatch = scope.$watch("tabs", function (newValue, oldValue) {
    
                        setTimeout(function () {
                            angular.forEach(newValue, function (val, index) {
    
                                var tab = { id: val.id, label: val.label, visible: val.visible };
    
                                if (typeof val.visible !== 'undefined') {
                                    if (val.visible) {
                                        scope.visibleTabs.push(tab);
                                    }
                                } else {
                                    scope.visibleTabs.push(tab);
                                }
                            });
    
    
    
                            //don't process if we cannot or have already done so
                            if (!newValue) { return; }
                            if (!newValue.length || newValue.length === 0) { return; }
    
                            //we need to do a timeout here so that the current sync operation can complete
                            // and update the UI, then this will fire and the UI elements will be available.
                            $timeout(function () {
                                tabWatch();
    
                                $timeout(function () {
                                    iElement.find(".nav-tabs .visibleTabs a:first").tab('show');
    
                                    //enable the tab drop
                                    iElement.find('.nav-pills, .nav-tabs').tabdrop();
    
                                    //ensure to destroy tabdrop (unbinds window resize listeners)
                                    scope.$on('$destroy', function () {
                                        iElement.find('.nav-pills, .nav-tabs').tabdrop("destroy");
                                    });
    
                                }, 0);
                                //stop watching now
                            }, 200);
    
    
                        }, 500);
    
                    });
                }
            };
        });
    
  • 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