jquery ui layout plugin change the direction of the resize toggle angularjs

Question

I am using jQuery UI Layout Plug-in for an angularjs application. I use a typical center, north, south, east, west layout.

All that I am trying to do is change the direction of the resizer bar toggle click.

Specifically, I have a center pane that has a resizer bar to the left and to the right. When the right resizer bar is clicked, it goes all the way to the right making the center pane full screen. INSTEAD, I want this pane to go all the way to the left, closing the center pane and making the east pane full screen.

I have found little to no documentation on how to accomplish this. Any help is appreciated!

x.directive('uiLayoutContainer', function (cmcUserSettings, $timeout)  {
    return {        
        priority:0,
        restrict: 'EA',
        link: function(scope, elm, attrs) { 
                console.log("Applying layout");
                var layout = angular.element(elm).layout(
                { 
                    applyDefaultStyles: true,
                    north:  {                      
                        applyDefaultStyles:false,
                        resizable: false
                    },
                    south:  {
                        initClosed:cmcUserSettings.userSettings.statusPanelClosed,
                        onopen:function(){
                            cmcUserSettings.userSettings.statusPanelClosed = false;
                            scope.$apply();
                        },
                        onclose:function(){
                            cmcUserSettings.userSettings.statusPanelClosed = true;
                            scope.$apply();
                        }
                    },
                    west:   {
                        initClosed:cmcUserSettings.userSettings.objectTreePanelClosed,
                        onopen:function(){
                            if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') === -1)
                                layout.west.pane[0].className += ' cmc-layout-west-open';

                            cmcUserSettings.userSettings.objectTreePanelClosed = false;
                            scope.$apply();
                        },
                        onclose:function(){
                            if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') > -1)
                                layout.west.pane[0].className = layout.west.pane[0].className.substring(0, layout.west.pane[0].className.indexOf(' cmc-layout-west-open')) + layout.west.pane[0].className.substring(layout.west.pane[0].className.indexOf(' cmc-layout-west-open') + 21, layout.west.pane[0].className.length);

                            cmcUserSettings.userSettings.objectTreePanelClosed = true;
                            scope.$apply();
                        }
                    }
                });
                scope.layout = layout;

                $timeout(function(){
                    if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') === -1 && !cmcUserSettings.userSettings.objectTreePanelClosed)
                        layout.west.pane[0].className += ' cmc-layout-west-open';
                });
        }
    };
});



x.directive('uiLayoutCenter', ['ui.config', function (uiConfig) {
  return {
    priority:1,
    restrict: 'EA',
    transclude:true,
    replace:true,
    template:'<div class="ui-layout-center"><div ng-transclude></div></div>'
  };
}]);

x.directive('uiLayoutNorth', ['ui.config', function (uiConfig) {
  return {
    priority:1,
    restrict: 'EA',
    transclude:true,
    replace:true,
    template:'<div class="ui-layout-north"><div ng-transclude></div></div>'
  };
}]);

x.directive('uiLayoutSouth', ['ui.config', function (uiConfig) {
  return {
    priority:1,
    restrict: 'EA',
    transclude:true,
    replace:true,
    template:'<div class="ui-layout-south" ><div ng-transclude style="height:105px;" ></div></div>'
  };
}]);

x.directive('uiLayoutEast', ['ui.config', function (uiConfig) {
  return {
    priority:1,
    restrict: 'EA',
    transclude:true,
    replace:true,
    template:'<div class="ui-layout-east"><div ng-transclude></div></div>'
  };
}]);

x.directive('uiLayoutWest', ['ui.config', function (uiConfig) {
  return {
    priority:1,
    restrict: 'EA',
    transclude:true,
    replace:true,
    template:'<div class="ui-layout-west"><div ng-transclude></div></div>',

  };
}]);

x.controller('LayoutCtrl', function($scope) {

});```

Jeremy Burnette Jeremy Burnette · Accepted Answer · 2019-04-02T19:42:57

My solution:

var close = 0;

east: {
          onclose:function(){
                if (close == 0){
                  layout.open('east');
                  layout.sizePane('east', (window.outerWidth - 20));
                  scope.$apply();
                  close = 1;
                }
                else {
                  layout.open('east');
                  layout.sizePane('east', window.outerWidth - 350);
                  scope.$apply();
                  close = 0;
                }
            }
          },

jquery ui layout plugin change the direction of the resize toggle angularjs

1 Answers