소스 검색

[core] Switch to pixel widths for ko splitDraggable

This removes the relative positioning and sizing of the panels and instead uses fixed pixels for the active positioning. Before this the panels used a mix of percent and pixels for the layout model which caused undesired effects for extra narrow and extra wide browser windows. By switching to pixels we can easier control the presentation.

This also moves some of the resize logic to inside the binding, getting rid of the need for an external observable that keeps track of the left panel width.
Johan Ahlen 10 년 전
부모
커밋
6bdd3e4
1개의 변경된 파일70개의 추가작업 그리고 23개의 파일을 삭제
  1. 70 23
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

+ 70 - 23
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -646,35 +646,82 @@ ko.bindingHandlers.daterangepicker = {
 
 ko.bindingHandlers.splitDraggable = {
   init: function (element, valueAccessor) {
-    var options = valueAccessor();
-    var $container = $(options.container);
-    var $element = $(element);
-    var throttle = typeof options.throttle != "undefined" ? options.throttle : 20;
+    var options = ko.unwrap(valueAccessor());
+    var leftPanelRatio = $.totalStorage(options.totalStorageRatioId) != null ? $.totalStorage(options.totalStorageRatioId) : 0.25;
 
-    var dragTimeout = -1;
-    var onStop = options.onStop || function() {};
-    var onDrag = function(event, ui) {
-      window.clearTimeout(dragTimeout);
-      dragTimeout = window.setTimeout(function () {
-        var percentage = ((ui.offset.left - $container.position().left) / $container.width()) * 100;
-        options.horizontalPercent(Math.max(Math.min(percentage, options.limits.max), options.limits.min));
-      }, throttle);
-      window.setTimeout(function() { $element.css('left', '') }, 1);
+    var containerSelector = options.containerSelector || ".panel-container";
+    var leftPanelSelector = options.leftPanelSelector || ".left-panel";
+    var rightPanelSelector = options.rightPanelSelector || ".right-panel";
+
+    var onPosition = options.onPosition || function() {};
+
+    var $resizer = $(element);
+    var $leftPanel = $(leftPanelSelector);
+    var $rightPanel = $(rightPanelSelector);
+    var $container = $(containerSelector);
+
+    var positionPanels = function () {
+      if (ko.isObservable(options.leftPanelVisible) && ! options.leftPanelVisible()) {
+        $rightPanel.css("width", "100%");
+      } else {
+        var totalWidth = $container.width();
+        var leftPanelWidth = Math.round(totalWidth * leftPanelRatio);
+        var rightPanelWidth = totalWidth - leftPanelWidth - $resizer.width();
+        $leftPanel.css("width", leftPanelWidth + "px");
+        $rightPanel.css("width", rightPanelWidth + "px");
+        $resizer.css("left", leftPanelWidth + "px");
+        $rightPanel.css("left", leftPanelWidth + $resizer.width() + "px");
+      }
+      onPosition();
     };
 
-    var draggableOptions = {
-      axis: options.axis,
+    if (ko.isObservable(options.leftPanelVisible)) {
+      options.leftPanelVisible.subscribe(positionPanels);
+    }
+
+    var dragTimeout = -1;
+    $resizer.draggable({
+      axis: "x",
       containment: $container,
-      drag: onDrag,
-      start: onDrag,
-      stop: function(event, ui) {
-        onDrag(event, ui);
-        onStop(event, ui);
+      drag: function (event, ui) {
+        ui.position.left = Math.min($container.width() - $container.position().left - 200, Math.max(150, ui.position.left));
+
+        dragTimeout = window.setTimeout(function () {
+          $leftPanel.css("width", ui.position.left + "px");
+          $rightPanel.css("width", $container.width() - ui.position.left - $resizer.width() + "px");
+          $rightPanel.css("left", ui.position.left + $resizer.width());
+          onPosition();
+        }, 10);
+
+      },
+      stop: function () {
+        var totalWidth = $leftPanel.width() + $resizer.width() + $rightPanel.width();
+        leftPanelRatio = $leftPanel.width() / totalWidth;
+        $.totalStorage(options.totalStorageRatioId, leftPanelRatio);
+        positionPanels();
       }
-    };
+    });
+
 
-    draggableOptions.opacity = 0.01;
-    $element.draggable(draggableOptions);
+    var positionTimeout = -1;
+    $(window).resize(function() {
+      window.clearTimeout(positionTimeout);
+      positionTimeout = window.setTimeout(function () {
+        positionPanels()
+      }, 1);
+    });
+
+    function initialPositioning() {
+      if(! $container.is(":visible")) {
+        window.setTimeout(initialPositioning, 50);
+      } else {
+        positionPanels();
+        // Even though the container is visible some slow browsers might not
+        // have rendered the panels
+        window.setTimeout(positionPanels, 100);
+      }
+    }
+    initialPositioning();
   }
 };