Selaa lähdekoodia

[core] Add ko binding for draggable

This adds a KO binding that activates jQuery draggable for the element. It will update the given horizontalPercent observable with the location of the draggable in percent relative to the given container. For now it just supports horizontal dragging, we can add more options when we need them.
Johan Ahlen 10 vuotta sitten
vanhempi
commit
9fe1d25
1 muutettua tiedostoa jossa 24 lisäystä ja 1 poistoa
  1. 24 1
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

+ 24 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -642,7 +642,30 @@ ko.bindingHandlers.daterangepicker = {
       matchIntervals(true);
     }
   }
-}
+};
+
+ko.bindingHandlers.draggable = {
+  init: function (element, valueAccessor) {
+    var options = valueAccessor();
+    var $container = $(options.container);
+
+    var dragTimeout = -1;
+    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));
+      }, 100);
+    };
+
+    $(element).draggable({
+      axis: options.axis,
+      containment: $container,
+      drag: onDrag,
+      helper: 'clone'
+    });
+  }
+};
 
 ko.bindingHandlers.oneClickSelect = {
   init: function (element) {