Ben Boeckel avatar Ben Boeckel committed 4693af3

Add a first stab at the draggable implementation

Comments (0)

Files changed (1)

src/js/draggable.js

 
 */
 
-ko.bindingHandlers.draggable = {
+ko.bindingHandlers.draggable = (function() {
+// 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);
-    
-    console.log(value);
-    
-    var startDrag = function startDrag(evt) {
-      console.log(evt);
+    var bindings = allBindingsAccessor();
+
+    // CSS classes
+    var classes = {
+        down: 'koui_draggable_down',
+        help: 'koui_draggable_help',
+        horizontal: 'koui_draggable_horizontal',
+        hover: 'koui_draggable_hover'
     };
-    
-    if (value()) {
-      $element.find('header').bind('mousedown', startDrag);
-    }
-  },
-  update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
-    
-  }
-}
+
+    // Options
+    var min = bindings.min();
+    var max = bindings.max();
+    var step = bindings.step();
+    var tooltip = bindings.tooltip() || 'drag';
+
+    // 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 updateHelp = function () {
+        var size = $element.position();
+        var top_ = -size.y + 7;
+        var left = Math.round(0.5 * (size.x - 20));
+        var display = (isHovering && !dragActive) ? 'block' : 'none';
+
+        helpElement.css({
+            left: left,
+            'top': top_,
+            display: display
+        });
+    };
+    var updateEffects = function () {
+        updateStyle();
+        updateCursor();
+        updateHelp();
+    };
+
+    // Tooltip
+    var helpElement = $('<div>').
+            prependTo($element).
+            addClass(classes.help).
+            css('display', 'none').
+            text(tooltip);
+
+    // Make the element hoverable
+    var $hoverable = $element.Hoverable();
+
+    // 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;
+
+          that.dragValue = valueAccessor();
+
+          updateEffects();
+      }).
+      bind('touchablemove', function (ev, touch) {
+          var value = that.dragValue + touch.currentStartDelta.x / 5 * step;
+          value = ((value / step).round() * step).limit(min, max);
+          valueAccessor(value);
+          updateHelp();
+      }).
+      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.