Ben Boeckel avatar Ben Boeckel committed 739286f

Add an adjustable element

Comments (0)

Files changed (1)

src/js/adjustable.js

+/*
+
+A simple use for this binding: data-bind="adjustable: true"
+
+*/
+
+ko.bindingHandlers.adjustable = (function() {
+'use strict';
+
+// Global flag indicating whether anything is dragging at the moment.
+var dragActive = false;
+
+return {
+  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
+    var value = valueAccessor();
+    var $element = $(element);
+    var bindings = allBindingsAccessor();
+
+    // CSS classes
+    var classes = {
+        down: 'koui_adjustable_down',
+        horizontal: 'koui_adjustable_horizontal',
+        hover: 'koui_adjustable_hover'
+    };
+
+    // Options
+    var min = 0;
+    var max = 100;
+    var step = 1;
+
+    var attr = bindings.attr;
+
+    if (typeof attr === 'object') {
+        if (attr.min !== undefined) {
+            min = attr.min;
+        }
+        if (attr.max !== undefined) {
+            max = attr.max;
+        }
+        if (attr.step !== undefined) {
+            step = attr.step;
+        }
+    }
+
+    // Flags
+    var isHovering = false;
+    var isDragging = false;
+
+    // Functions
+    var isActive = function () {
+        return (isDragging || (isHovering && !dragActive));
+    };
+    var updateStyle = function () {
+        if (isDragging) {
+            $element.addClass(classes.down);
+        } else {
+            $element.removeClass(classes.down);
+        }
+    };
+    var updateCursor = function () {
+        var $body = $(document.body);
+        if (isActive()) {
+            $body.addClass(classes.horizontal);
+        } else {
+            $body.removeClass(classes.horizontal);
+        }
+    };
+    var updateEffects = function () {
+        updateStyle();
+        updateCursor();
+    };
+
+    // Make the element hoverable
+    var $hoverable = $element.Hoverable();
+
+    var dragValue;
+
+    // Bind the functions
+    $hoverable.
+      bind('newHoverIn', function(evt, touch) {
+        isHovering = true;
+
+        updateEffects();
+      }).
+      bind('newHoverOut', function (ev, touch) {
+          isHovering = false;
+
+          updateEffects();
+      }).
+      bind('touchablestart', function (ev, touch) {
+          isDragging = true;
+          dragActive = true;
+
+          dragValue = value();
+
+          updateEffects();
+      }).
+      bind('touchablemove', function (ev, touch) {
+          var _step = ko.utils.unwrapObservable(step);
+          var _min = ko.utils.unwrapObservable(min);
+          var _max = ko.utils.unwrapObservable(max);
+          var val = dragValue + touch.currentStartDelta.x / 5 * _step;
+
+          val = Math.round(val / _step) * _step;
+
+          if (val < _min) {
+              val = _min;
+          } else if (val > _max) {
+              val = _max;
+          }
+
+          value(val);
+      }).
+      bind('touchableend', function (ev, touch) {
+          isDragging = false;
+          dragActive = false;
+
+          updateEffects();
+      });
+   },
+   update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
+   }
+};
+}());
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.