Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

First pass draggable touch handle on cursor #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

First pass draggable touch handle on cursor #5

wants to merge 1 commit into from

Commits on Mar 20, 2014

  1. First pass draggable touch handle on cursor 

    Touch-dragging over the editable box does not select, it moves the
cursor, and after you lift your finger, triggers the handle showing up,
and the cursor does doesn't blink, a la Android.

A mini-abstraction for one-finger touch events is created and used.

Handle Positioning
------------------

There appears to be no way for a descendant of an overflow:hidden
element to be "above" the clipping area, nor any CSS-only way to "lock"
the position of an element relative to another except its offset parent.
So the handle span has to be outside the overflow:hidden root block, and
has to be re-positioned with JS whenever the cursor moves.

The handle is rendered in pure CSS, no images, using pseudo-elements,
positioned relative to the handle span, which is always positioned so
its bottom lines up with the bottom of the cursor. This is nice because
the relative position of the handle and the cursor is entirely in CSS.

(An alternative I could see is making the cursor handle position:
absolute rather than relative, so I wouldn't need to measure its coords,
just its offset parent's. But then I'd either have to set the
`.mathquill-editable` to position:relative so it'll be the offset
parent, potentially conflicting with a style set by the host page; or
insert the handle inside the `.textarea` span, but that's a conflation
of purpose and while its purpose could be expanded, I was meaning to get
rid of it anyway, turns out setting position:absolute on the textarea
and leaving top and left as auto does exactly what I want.)

As an optimization, store current top and left rather than make DOM
measurements every time.
    @laughinghan
    laughinghan committed Mar 20, 2014
    Configuration menu
    Copy the full SHA
    c913768 View commit details
    Browse the repository at this point in the history