JQuery UI макет плагина изменить направление изменения размера angularjs - PullRequest
Новая
       29

JQuery UI макет плагина изменить направление изменения размера angularjs

0 голосов
/ 01 апреля 2019

Я использую плагин 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 && 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) {

});```

1 Ответ

0 голосов
/ 02 апреля 2019 
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;
                }
            }
          },
...