First pass draggable touch handle on cursor

src/css/editable.less

@@ -13,6 +13,32 @@
     &.blink { visibility: hidden; }
   }
 
+  .handle {
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    //-webkit-transform: translate(-.5px); // center exactly under 1px-wide cursor
+    opacity: .5;
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      left: -10px;
+    }
+    &:before { // triangular tip
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid black;
+      bottom: -15px;
+    }
+    &:after { // rectangular body
+      width: 20px;
+      height: 15px;
+      background: black;
+      bottom: -30px;
+    }
+  }
+
   .mathquill-root-block {
     .inline-block;
 

src/cursor.js

@@ -19,6 +19,35 @@ var Cursor = P(Point, function(_) {
     this.blink = function(){ jQ.toggleClass('blink'); };
 
     this.upDownCache = {};
+
+    var handle = this.handle =
+      $('<span class="handle" style="display:none"></span>')
+      .insertAfter(initParent.jQ);
+    handle.top = handle.left = 0;
+  };
+
+  _.showHandle = function() {
+    if (this.handle.visible) return this;
+    this.handle.visible = true;
+    this.handle.show();
+    return this.repositionHandle();
+  };
+  _.hideHandle = function() {
+    if (!this.handle.visible) return this;
+    delete this.handle.visible;
+    this.handle.hide();
+    return this;
+  };
+  _.repositionHandle = function() {
+    if (!this.handle.visible) return this;
+    var cursorRect = this.jQ[0].getBoundingClientRect();
+    var handle = this.handle;
+    var handleRect = handle[0].getBoundingClientRect();
+    handle.css({
+      top: handle.top += cursorRect.bottom - handleRect.bottom,
+      left: handle.left += cursorRect.left - handleRect.left
+    });
+    return this;
   };
 
   _.show = function() {
@@ -40,6 +69,7 @@ var Cursor = P(Point, function(_) {
     return this;
   };
   _.hide = function() {
+    this.hideHandle();
     if ('intervalId' in this)
       clearInterval(this.intervalId);
     delete this.intervalId;

src/publicapi.js

@@ -103,6 +103,7 @@ var EditableField = MathQuill.EditableField = P(AbstractMathQuill, function(_) {
   _.initEvents = function() {
     this.controller.editable = true;
     this.controller.delegateMouseEvents();
+    this.controller.touchEvents();
     this.controller.editablesTextareaEvents();
   };
   _.focus = function() { this.controller.textarea.focus(); return this; };

src/services/mouse.js

@@ -54,7 +54,7 @@ Controller.open(function(_) {
         // mousedown-ed will receive focus
         // http://bugs.jquery.com/ticket/10345
 
-      cursor.blink = noop;
+      cursor.hideHandle().blink = noop;
       ctrlr.seek($(e.target), e.pageX, e.pageY).cursor.startSelection();
 
       if (!ctrlr.editable && ctrlr.blurred) rootjQ.prepend(textareaSpan);
@@ -84,6 +84,8 @@ Controller.open(function(_) {
 
     node.seek(pageX, cursor);
 
+    cursor.repositionHandle();
+
     return this;
   };
 });

src/services/touchHandle.js

@@ -0,0 +1,80 @@
+/********************************************************
+ * Event handling for touch-draggable handle
+ *******************************************************/
+
+/**
+ * Usage:
+ * jQ.on('touchstart', firstFingerOnly(function(touchstartCoords) {
+ *   return { // either of these are optional:
+ *     touchmove: function(touchmoveCoords) {},
+ *     touchend: function(touchendCoords) {}
+ *   };
+ * });
+ */
+function firstFingerOnly(ontouchstart) {
+  return function(e) {
+    e.preventDefault();
+    var e = e.originalEvent;
+    if (e.touches.length > 1) return; // not first finger
+    var touchstart = e.changedTouches[0];
+    var handlers = ontouchstart(touchstart) || 0;
+    if (handlers.touchmove) {
+      $(this).bind('touchmove', function(e) {
+        var touchmove = e.originalEvent.changedTouches[0];
+        if (touchmove.id !== touchstart.id) return;
+        handlers.touchmove.call(this, touchmove);
+      });
+    }
+    $(this).bind('touchend', function(e) {
+      var touchend = e.originalEvent.changedTouches[0];
+      if (touchend.id !== touchstart.id) return;
+      if (handlers.touchend) handlers.touchend.call(this, touchend);
+      $(this).unbind('touchmove touchend');
+    });
+  };
+}
+
+Controller.open(function(_) {
+  _.touchEvents = function() {
+    var ctrlr = this, container = ctrlr.container, root = ctrlr.root,
+      cursor = ctrlr.cursor, blink = cursor.blink;
+
+    /* returns the element at the given point looking "through" the cursor
+     * handle, if it's in the current editable */
+    function elAtPt(x, y) {
+      if (cursor.handle.visible) cursor.handle.hide();
+      var el = $(document.elementFromPoint(x, y));
+      if (cursor.handle.visible) cursor.handle.show();
+      return el.closest(root.jQ).length ? el : root.jQ;
+    }
+
+    container.bind('touchstart.mathquill', firstFingerOnly(function(e) {
+      if (e.target === cursor.handle[0]) return;
+      ctrlr.textarea.focus();
+      cursor.blink = noop;
+
+      ctrlr.seek(elAtPt(e.pageX, e.pageY), e.pageX, e.pageY);
+      return {
+        touchmove: function(e) {
+          ctrlr.seek(elAtPt(e.pageX, e.pageY), e.pageX, e.pageY);
+        },
+        touchend: function(e) {
+          cursor.blink = blink;
+          cursor.show();
+          cursor.showHandle();
+        }
+      };
+    }));
+    cursor.handle.bind('touchstart.mathquill', firstFingerOnly(function(e) {
+      var cursorPos = cursor.jQ.offset();
+      var offsetX = e.pageX - cursorPos.left;
+      var offsetY = e.pageY - (cursorPos.top + cursor.jQ.height());
+      return {
+        touchmove: function(e) {
+          var adjustedX = e.pageX - offsetX, adjustedY = e.pageY - offsetY;
+          ctrlr.seek(elAtPt(adjustedX, adjustedY), adjustedX, adjustedY);
+        }
+      };
+    }));
+  };
+});