JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://nin-jin.github.io/atom/index.js"></script>
JavaScript
// провайдер координат указателя
var pointer = {
handler : function( event ) {
var point = event.changedTouches ? event.changedTouches[0] : event
// координаты указателя из события сохраняем в атом
pointer.position.push([ point.clientX , point.clientY ])
event.preventDefault()
},
position : new $jin.atom.prop( {
pull : function( prev ) {
// подписываемся на все необходимые события
document.documentElement.addEventListener( 'mousemove' , pointer.handler , false )
document.documentElement.addEventListener( 'dragover' , pointer.handler , false )
document.documentElement.addEventListener( 'touchmove' , pointer.handler , false )
document.documentElement.addEventListener( 'pointermove' , pointer.handler , false )
// возвращаем дефолтное значение, пока нет актуальных данных
return [ -1, -1 ]
},
reap : function( ) { // когда никто не подписан на изменения
// отписываемся от дом-событий
document.documentElement.removeEventListener( 'mousemove' , pointer.handler , false )
document.documentElement.removeEventListener( 'dragover' , pointer.handler , false )
document.documentElement.removeEventListener( 'touchmove' , pointer.handler , false )
document.documentElement.removeEventListener( 'pointermove' , pointer.handler , false )
// очищаем значение, что приведёт к вызову pull при следующем запросе значения координат
pointer.position.clear()
}
} )
}
// принтер координат в документ
var title = new $jin.atom.prop( {
pull : function( ) {
return...