Блог

Я использую плагин jQuery UI Layout для приложения angularjs. Я использую типичную компоновку по центру, северу, югу, востоку, западу.

Все, что я пытаюсь сделать, это изменить направление щелчка переключателя панели изменения размера.

В частности, у меня есть центральная панель, на которой есть панель изменения размера слева и справа. При нажатии на правую панель изменения размера она перемещается полностью вправо, делая центральную панель полноэкранной. ВМЕСТО этого я хочу, чтобы эта панель полностью переместилась влево, закрыв центральную панель и сделав восточную панель полноэкранной.

Я практически не нашел документации о том, как это сделать. Любая помощь приветствуется!

 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 amp;amp; layout.west amp;amp; layout.west.pane amp;amp; layout.west.pane.length amp;amp; 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 amp;amp; layout.west amp;amp; layout.west.pane amp;amp; layout.west.pane.length amp;amp; 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 amp;amp; layout.west amp;amp; layout.west.pane amp;amp; layout.west.pane.length amp;amp; layout.west.pane[0].className.indexOf(' cmc-layout-west-open') === -1 amp;amp; !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) {

});```
  

 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;
                }
            }
          },