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);
    
                    });
                }
            };
        });
    
Please Sign in or register to post replies

Write your reply to:

Draft