Here I am

Receiving mousemove events outside dragged iframe

2015-11-16T01:15:00+00:00

You have an iframe that contains draggable elements. You want dragging of these elements to continue even if the mouse pointer moves outside the iframe and over the parent document. You want the dragging to end when the mouse is released while the pointer is outside the iframe. You could try adding event listeners to the parent document, but that’s not possible when the two documents have differnt origins. What do you do?

Don’t call preventDefault on the mousedown event.

If the default behaviour isn’t prevented on mousedown, then when the mouse is moved outside the iframe and over the parent document, the document in the iframe will continue to recieve mousemove events.

interact.js on Mozilla Hacks

2014-11-16T12:56:20+00:00

I wrote an article about interact.js for the Mozilla Hacks blog. Go read it:

https://hacks.mozilla.org/2014/11/interact-js-for-drag-and-drop-resizing-and-multi-touch-gestures/.

Creating the animated interact.js logo in SVG and SMIL

2014-08-10T15:15:50+01:00

interact.js is a javascript project that I started for responding to single and multi-pointer drags and gestures. The logo for the project is this:

The static graphics were created in Inkscape and then animated manually with SMIL.

Designing in Inkscape

I started with the idea of “interact.js” written plainly with a dotted line joining the dots of the “i” and “j”. This was boring so I thought about making the line look a bit like something from an ECG. That wasn’t great either but I liked the angles in the lines I was drawing and decided that I would use the letter delta (Δ) since dragging is all about deltas.

I tried a few things including making incomplete, tessellating delta symbols with both the “a” and “c” but that really wasn’t great. Finally, I removed the dotted line and replaced only the “a” with a regular looking “Δ”. I liked this because it could easily be read as “interact.js” and the Δ was roughly in the middle.

Next, I adjusted the kerning of all the characters so that the inner triangle of the Δ was right in the middle. Pleased was I. However, I wouldn’t be satisfied until it was nicely animated.

Animating in Vim

I tidied the markup manually and moved the Δ into a <defs> element and referenced it in <use> elements then brought the regular text to the front of the drawing and made it white. The Δs inherit their fill-color from the <svg> root element whose fill-color is animated from blue to green to reddish-orange and to blue again.

<animate id="colors"
    attributeName="fill"
    values="#29e;#29e;#4e4;#4e4;#f40;#f40;#29e;#29e"
    dur="16s"
    repeatCount="indefinite"/>

One Δ remains fixed in the middle while the other three have two animations each – one to change their scale and another to fade in/out.

<use x="0" y="0" transform="translate(255.81,65.6775)" opacity="0" xlink:href="#a-delta">
     <animateTransform attributeName="transform" 
         attributeType="XML"
         type="scale" 
         values="1; 25"
         dur="10s"
         additive="sum"
         repeatCount="indefinite"/>
     <animate attributeName="opacity"
        values="1; 0"
        dur="10s"
        repeatCount="indefinite"/>
</use>

Two of the three animated Δs start at full opacity and fade out while scaling up from 1 to 25 in 10 seconds and from 0 to 15 in 7 seconds. The other fades in and then out while scaling down from 15 to 1 in 13 seconds.

The different parameters of the animations and the asymmetry of the Δ result in a hypnotic, “parallaxy” look which I’m very happy with. On the project homepage, I placed the animated logo in front of a black background so that the text can be read easily with or without the animation. The animated logo also sits proudly in the project’s README on Github with a white background.

Simple web demos with livedemo

2014-03-11T00:57:11+00:00

livedemo.js is a small script I wrote to make writing HTML, CSS and JavaScript demos easier. It takes the text out of highlighted <code> snippets and adds elements and CSS to the DOM and executes JS code.

I initially wrote it for this blog post and I use it on interactjs.io.

Use it

Add a comment that contains the text enable javascript as the first, unindented line in code that you want to demo.
Highlight code in your HTML page with something like redcarpet or Pygments (both available in Jekyll) or Prism.
Download and include the script somewhere in your HTML page: <script src="livedemo.min.js"></script> (after Prisim if you’re using it).

HTML

Code elements matching the HTMLSelector and whose first textNode’s textContent match the HTMLFlag RegExp will be demo’d.

<!-- enable javascript to view a demo -->
<svg id="demo-svg" viewBox="0 -50 400 100">
    <polygon points="80 -40, 120 40, 40 40" fill="#29e" />
    <rect height="80" width="80" y="-40" x="160" fill="#4e4" />
    <circle cx="320" cy="0" r="40" fill="#f40" />
</svg>

 will be noticed by livedemo. The comment is removed and the remaining content is inserted into the document beside the code element’s parent’s parent by default.

If for example the HTML on the page is

<div>
    <pre>
        <code class="language-html">
            ... the generated highlighted code ...
        </code>
    <pre>
</div>

then the textContent of the <code> will be inserted after the </div> within a new div.live-demo element.

This makes it convenient for Jekyll sites using redcarpet or Pygments.

CSS

The text of code elements that match the CSSSelector and have firstChildren that match the CSSFlag RegExp will be added to document.head in <script> tags.

/* enable javascript to vew demo */
#demo-svg {
    width: 100%;
    height: 25%;
}

JavaScript

Elements that match the JSSelector and whose firstChild’s textContent matches the JSFlag RegExp will have their text executed.

// please enable javascript
var demoSvg = document.getElementById('demo-svg');

demoSvg.addEventListener('click', function (event) {
    alert('click on <' + event.target.nodeName + '>');
});

The script above will be executed and the flag comment will be removed form the <code> block.

JavaScript code is executed after HTML and CSS is inserted into the document. If the execution of a code block throws an error, the element and error are logged to the console.

Configuration

The properties of the object window.liveDemoSettings are used to change settings for livedemo if they are set before the DOMContentLoaded event occurs and calls window.liveDemo. The properties are:

HTMLSelector, JSSelector, CSSSelector: Elements matching these CSS selectors will be checked for HTMLFlag, CSSFlag and JSFlag respectively. The default values are:
- HTML: 'code.language-xml,code.language-html,code.language-markup,code.xml,code.html'
- CSS : 'code.language-css,code.css'
- JS :'code.language-javascript,code.javascript'
HTMLFlag, CSSFlag, JSFlag: If the textContents of the firstChildren of the elements matching the respective selectors passes a test for this RegExp, they are processed as HTML, CSS or JavaScript. The default values are:
- HTML: /^/
- CSS : /^\/\*.*enable javascript.*\*\//
- JS : /^\/\/.*enable javascript.*|^\/\*.*enable javascript.*\*\//
codeElementDepth: How much lower in the DOM tree the <code> elements are than the level you want demo HTML div.live-demos to be inserted. Default is 2 as explained in the “HTML” section of this document.
insertPosition: The position to insert div.live-demos relative to the element that is codeElementDepth levels up from the <code> element. The default value is 'afterend'. See Element.insertAdjacentHTML for other values.

License

MIT

A guide to SVG elements

2014-01-04T09:55:40+00:00

SVG <use> elements allow you to duplicate and re-use graphical SVG elements including <g>, <svg> and <symbol> elements as well as other <use> elements. With them, you can craft SVG documents with a DRY kind of approach.

Below is an example of simple SVG in an HTML document. When written inline in HTML5, there is no need to specify the svg namespace xmlns="http://www.w3.org/2000/svg" or xlink namespace xmlns:xlink="http://www.w3.org/1999/xlink" attributes.

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <rect
        x="100" y="20"
        width="50" height="50"
        fill="#29e" />
    <rect
        x="250" y="30"
        width="50" height="50"
        fill="#29e" />
</svg>

Apart from the x/y attributes the two <rect>s are identical. So instead of repeating code, we can write out only one of the <rect>s and duplicate it with a <use> element which has a different position.

To do this, we must:

give the first <rect> an ID then we
replace the second with a <use> and
give it an xlink:href attribute with a value of "#[reference element ID]".

The result is two identical elements in the exact same position. To change the position of a <use> element, we can use the x and y attributes or the transform attribute.

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <rect id="original-rect"
        x="100" y="20"
        width="50" height="50"
        fill="#29e" />

    <use xlink:href="#original-rect" x="150" y="10" />
        <!-- x/y of the <use> element
             are added to x/y of the referenced <rect> -->
</svg>

The resulting image is identical to that of the previous example, but requires less code.

Improvements

The reference would be much more convenient to use if it’s center were always at the coordinates of it’s duplicates so that if you wanted a rectange centered at (200, 50) you would simply write:

<use xlink:href="#original-rect" x="200" y="50" />
<!-- or -->
<use xlink:href="#original-rect" transform="translate(200 50)" />
<!-- using `transform` to position the element
     makes combining animations a lot easier -->

We can do this by moving the reference element into a <defs> element and positioning it so that it center is at (0, 0). All elements in <defs> elements are not rendered unless they are referenced by another visible element.

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <!-- list resourses in a <defs> element -->
    <defs>
        <rect id="def-rect"
            x="-25" y="-25"
            width="50" height="50"
            fill="#29e" />
    </defs>

    <!-- reference resourses by ID in xlink:href attribute -->
    <use xlink:href="#def-rect" transform="translate(100 50)"/>
    <use xlink:href="#def-rect" transform="translate(200 50)"/>
    <use xlink:href="#def-rect" transform="translate(300 50)"/>
</svg>

Property Inheritance

If a property like fill, stroke, stroke-width, etc. isn’t specidied in the original element, then it can be inherited from the <use> element as if it were a <g>. For example, we can’t change the fill color of elements using #def-rect by setting fill of the <use> element (since the attribute is already set in the reference element) but we can set the stroke style since that wasn’t set in #def-rect.

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <use xlink:href="#def-rect" transform="translate(100 50)"
        fill="red"
        stroke="black"/>
    <use xlink:href="#def-rect" transform="translate(200 50)"
        fill="red"
        stroke="black" stroke-width="8"/>
    <use xlink:href="#def-rect" transform="translate(300 50)"
        fill="red"
        stroke="black" stroke-width="8" stroke-linejoin="round"/>
</svg>

Animations

Animations that are applied to the reference element are also observed in the duplicates. (Note that SMIL animations are not supported by Internet Explorer.)

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <defs>
        <rect id="anim-rect"
            x="-25" y="-25"
            width="50" height="50"
            fill="#29e" >
            
            <animate
                attributeName="fill"
                values="#29e; #4e4; #f40; #29e"
                dur="6s"
                repeatCount="indefinite" />
        </rect>
    </defs>

    <use xlink:href="#anim-rect" transform="translate(100 50)"/>
    <use xlink:href="#anim-rect" transform="translate(200 50)"/>
    <use xlink:href="#anim-rect" transform="translate(300 50)"/>
</svg>

Animations can also be added to each <use> element.

<!-- enable javascript to view a demo -->
<svg viewBox="0 0 400 100">
    <use xlink:href="#anim-rect" transform="translate(100 50)">
        <animateTransform
            attributeName="transform" type="rotate"
            values="0 0 0; 360 0 0"
            additive="sum"
            dur="6s"
            repeatCount="indefinite" /> </use>

    <use xlink:href="#anim-rect" transform="translate(200 50)">
        <animateTransform
            attributeName="transform" type="scale"
            values="0.5; 1.5; 0.5"
            additive="sum"
            dur="3s"
            repeatCount="indefinite" /> </use>

    <use xlink:href="#anim-rect" transform="translate(300 50)">
        <animateTransform
            attributeName="transform" type="translate"
            values="-12.5 -12.5;
                     12.5 -12.5;
                     12.5  12.5;
                    -12.5  12.5;
                    -12.5 -12.5"
            additive="sum"
            dur="3s"
            repeatCount="indefinite" /> </use>
</svg>

Dynamic `<use>` with javscript

To create a <use> element with javascript, as with any SVGElement, we use document.createElementNS which takes an xml namespace URI and element nodeName strings.

var useElement =
    document.createElementNS('http://www.w3.org/2000/svg', 'use');

document.querySelector('svg').appendChild(useElement);

To set the xlink:href attribute, we use Element.setAttributeNS which takes the namespace, the attribute name and the attribute value. In this case, the namespace is xlink the URI of which is http://www.w3.org/1999/xlink.

useElement.setAttributeNS(
        'http://www.w3.org/1999/xlink', // xlink NS URI
        'href',                         // attribute (no 'xlink:')
        '#anim-rect');                  // value to set

How to control what is copy-pasted to/from the clipboard in Chrome, Firefox and Safari

2013-12-02T01:09:57+00:00

You can control what the browser copies and pastes when a user uses keyboard shortcuts or the right-click context menu by getting in between the default sequence of events and changing focus to an element of your choice so that by the time the user input sequence is complete, it will be targeting the element and content you choose.

Handling keyboard shortcuts (Ctrl+C / Ctrl+V)

// 1. Add an event listener for `keydown` events
document.addEventListener('keydown', function (event) {

    // 2. In this event listener, check if the [V] key is pressed while [Ctrl] is held
    down (the paste shortcut).

    if (event.keyCode === 86 && event.ctrlKey) {

        // 3. If that is true, set focus to an input element so that a `paste`
        // event is fired.
        document.getElementByid('paste-target').focus();
        }

    // 4. Otherwise check if [Ctrl] and [C] or [X] were pressed (copy or cut).
    else if (event.keyCode === 67 || event.keyCode === 88) {

    // 5. If true, set focus to an input element and select the containted text. It is
   this text that will be sent to the clipboard.

        var copyTarget = document.getElementByid('copy-target');

        copyTarget.focus();
        copyTarget.select();
    }
});

Taking control of the context of the context menu is a little more tricky. The context-menu is shown at the end of a right-click and the context is of the element that the mouse was over. By placing an element below the mouse between the mousedown and mouseup events, you can set the context to be that of any clickable element.

If this element is invisible then it does not interrupt the user’s workflow.

Style the right click target element so that it is invisible and placed off-screen.

#rc-target {
    z-index : 9003;
    width   : 100px;
    height  : 100px;
    margin  : -50px;  /* so it's positioned at it's centre */
    opacity : 0;
    border  : none;
    padding : 0;

    position: absolute;
    left    : -1000px;
    right   : -1000px;
}

Add a mousedown event listener that checks for right-clicks

document.addEventListener('mousedown' function (event) {
    if (event.button === 2) {

// If the button is the right mouse button, move the input element to the
// coordinates of the event
        var rcTarget = document.getElementByid('rc-target');

        rcTarget.style.left = event.pageX;
        rcTarget.style.top  = event.pageY;

// Then bring focus to the element and select the text inside it and prevent
// the default event behaviour

        rcTarget.focus();
        rcTarget.select();

        event.preventDefault();
    }
});

// Hide the `#rc-target` element on `mousemove`
document.addEventListener('mousemove', function (event) {
    var rcTarget = document.getElementById('rc-target');

    rcTarget.style.left = rcTarget.style.top = '';
});

After mouseup, the context menu will be displayed for the #rc-target element. If the user clicks cut/copy/paste, it will relate to the text within the element.

This way, you can have the user copy and paste whatever data you choose from anywhere in your web page/app.

Implementing elastic overscroll in JavaScript [Part 1]

2013-10-28T02:10:30+00:00

When scrolling (or panning) normally, the distance the page is moved relative to the viewport is directly proportional to the dragged distance.

`f(x) = x` agraph plot( x ) endagraph

That is until the edge of the page meets an edge of the viewport. To report to the user that this has occured, the page continues to move but it "resists" the force that the user applies.

When I was thinking of what kind of function I could use to achieve this, I immediately thought "exponential decay". A few equations later, I realised that I was wrong but close. Then I thought "LOGARITHMS!"

if `x` is the horizontal overscroll distance, then the resisted value fed back to the user would be

`ln(x)` agraph plot( ln(x) ) endgraph

... almost. The root of `ln(x)` is not `0` We need a function that meets `f(x) = x` at `(0, 0)` tangentially so that the page's movement is continuous and smooth.

`d/dx ln(x) = 1 / x`

`1 / x = 1 => x = 1`

By adding the solution of `d/dx ln(x) = 1` to the parameter passed to `ln`, we effectively shift the curve to the left so that the slope of the curve is 1 at `x = 0`.

`ln(x + 1)` agraph plot( ln(x + 1) ) plot( x ) endagraph But still, the result of `ln(1 + x)` would make for too great a resistance. The obvious solution was to simply multiply by some scalar. That sort of works but the compound curve is no longer continuous.

`4 * ln(x + 1)` agraph xmin=-20; xmax=20; plot( 4 * ln(x + 1) ); plot( f(x) ) endgraph

The "resisted" overscroll would initially be ahead of the actual overscroll for a while before slowing down at the right-most point of intersection in the graph above.

To fix this, we shift the origin to the right so that at `x = 0`, `dy/dx = 1`.

`g(x) = a * ln(x)`

`g'(x) = a / x`

`a / x = 1 => x = a`

`=> g(x + a)`

`=> a * ln(x + a)`

`4 * ln(x + 4)` agraph xmin=-20; xmax=20; a = 4; plot( a * ln(x + a) ); plot( x ) endgraph

Almost there. What's left now is to move the curve downwards by `a * ln(a)`.

`h(x) = a * ln(x + a) - a * ln(a)`

`=> h(x) = a * (ln(x + a) - ln(a))`

agraph xmin=-20; xmax=20; a = 4; plot( a * (ln(x + a) - ln(a)) ); plot( x ) endgraph

Logarithmic resistance with interact.js path snapping

interact.modifiers.snap({
  targets: [function (x, y) {
    var scale = 50;

    return {
      x: scale * Math.log(x + scale) - scale * Math.log(scale),
      y: 75,
      range: Infinity
    };
  }]
}

Hey web-devs, stop listening for EITHER touch or mouse events!

2013-10-02T19:56:10+01:00

Seriously. It’s annoying. Some devices have a touchscreen and mouse/trackpad. When you do somehting like

if ('createTouch' in document) {
    element.addEventListener('touchstart', clickListener);
}
else {
    element.addEventListener('click', clickListener);
}

I start disliking you. It’s nothing personal, but you’ve just forced me to use the touchscreen of my laptop to interact with your website even if I prefer to use the trackpad or a connected mouse.

When I made the prototype for interact.js, I was guilty of doing the same thing. However, I knew it was the wrong way to go about supporting touch events and I eventually fixed it.

Path snapping in interact.js

2013-09-29T16:36:26+01:00

interact.js just got even snappier. `path` snapping now lets you set fixed axis origin points or use functions to return the points that the pointer should snap to.

interact.modifiers.snap({
  targets: [{
    x,
    y: 75,
    range: Infinity
  }]
})

interact.modifiers.snap({
  targets: [(x, y) => {
    return {
        x,
        y: (75 + 50 * Math.sin(x * 0.04)),
        range: Infinity
    };
  }]
})

interact.modifiers.snap({
  targets: [(x, y) => {
    return {
        y: x % 100 < 50? 50: 100,
        range: Infinity
    };
  }]
})

Here I am

Receiving mousemove events outside dragged iframe

interact.js on Mozilla Hacks

Creating the animated interact.js logo in SVG and SMIL

Designing in Inkscape

Animating in Vim

Simple web demos with livedemo

Use it

HTML

CSS

JavaScript

Configuration

License

A guide to SVG elements

Improvements

Property Inheritance

Animations

Dynamic <use> with javscript

How to control what is copy-pasted to/from the clipboard in Chrome, Firefox and Safari

Handling keyboard shortcuts (Ctrl+C / Ctrl+V)

Handling right-click context menu cut/copy/paste

Implementing elastic overscroll in JavaScript [Part 1]

Logarithmic resistance with interact.js path snapping

Hey web-devs, stop listening for EITHER touch or mouse events!

Path snapping in interact.js

Dynamic `<use>` with javscript