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
Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs
Opera testing provided by Browserstack
