Referentiel NPM

Referentiel

Want to know what is the cursor position relative to an element when you have css transform, absolute positioning ? Referentiel compute the transformation matrix and can easily compute local coordinates.

Installation

npm

npm install --save referentiel

html

<script src="https://unpkg.com/referentiel"></script>

Usage

$('.referentiel').each (node)->
  $(this).on 'click', (e)->
    point = Referentiel.convertPointFromPageToNode(node, [e.pageX, e.pageY])
    $pointer.css('left', point[0])
    $pointer.css('top', point[1])

Contribute

Clone the repo and then run

npm install
npm run start

Warning on usage and performance

When you create a referentiel there is a cache build in. If you scroll or resize your window, you will need to re-create the referentiel so it takes into account the changes. (You will only get scroll issues with fixed elements)

Compatibility

Chrome 36+
Firefox 16+
IE 10+
Safari 9+
Edge 13+
Android 5.0+
IOS 9+
Opera 23+

Todo

Test pass on IE9 if transform are prefixed and jquery is used instead of getComputedElement...
Add more tests and edge cases...
Manage scroll (globally and on elements)
Round in the tests
Greg's test
CamelCase + check webkit naming convention