Browse Source

[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 years ago
parent
commit
6bdd3e4
1 changed files with 70 additions and 23 deletions
  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();
   }
 };