Skip to content

Instantly share code, notes, and snippets.

@colingourlay

colingourlay/index.js

Last active October 25, 2016 12:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save colingourlay/5551402d0fe09d951453174732af723c to your computer and use it in GitHub Desktop.
Save colingourlay/5551402d0fe09d951453174732af723c to your computer and use it in GitHub Desktop.
Download ZIP
requirebin sketch
Raw
index.js
require('pointer-css-variables')();
// Look at <head> tab to see CSS using variables
// to display coordinates at the cursor
Raw
minified.js
setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"pointer-css-variables":[function(require,module,exports){module.exports=pointer;var DEVICES=["pointer","mouse","touch","touches-0","touches-1","touches-2","touches-3","touches-4"];var MOUSE_DEVICES=DEVICES.filter(function(device){return device.indexOf("touch")===-1});var TOUCH_DEVICES=DEVICES.filter(function(device){return device!=="mouse"});var SYSTEMS=["client","page","screen"];var DIMENSIONS=["x","y"];var DEFAULTS=DEVICES.reduce(function(memo,device){SYSTEMS.forEach(function(system){DIMENSIONS.forEach(function(dimension){memo[["-",device,system,dimension].join("-")]=""})});return memo},{});function pointer(shouldUnset){if(!isSupported()){return new Error("CSS variables not supported")}var root=document.documentElement;var on=root.addEventListener.bind(root);var set=root.style.setProperty.bind(root.style);var raf=window.requestAnimationFrame.bind(window);var variables=Object.assign({},DEFAULTS);function update(devices,e){var _e=e;if(e.touches){_e=e.touches[0]}devices.forEach(function(device){SYSTEMS.forEach(function(system){DIMENSIONS.forEach(function(dimension){var point=_e;var touchIndex;var value;if(device.indexOf("-")>-1){touchIndex=+device.split("-")[1];if(e.touches[touchIndex]==null){return}point=e.touches[touchIndex]}value=point[system+dimension.toUpperCase()];variables[["-",device,system,dimension].join("-")]=value})})})}function unset(){Object.keys(variables).forEach(function(variable){variables[variable]=""})}function tick(){Object.keys(variables).forEach(function(variable){set(variable,variables[variable])});raf(tick)}on("mousemove",function(e){update(MOUSE_DEVICES,e)});on("touchmove",function(e){update(TOUCH_DEVICES,e)});if(shouldUnset){on("mouseleave",unset);on("touchend",unset);on("touchcancel",unset)}raf(tick)}function isSupported(){return window.CSS&&window.CSS.supports&&window.CSS.supports("--yep",0)}},{}]},{},[]);require("pointer-css-variables")()},0);
Raw
package.json
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"pointer-css-variables": "1.0.0"
}
}
Raw
page-body.html
<!-- contents of this file will be placed inside the <body> -->
Raw
page-head.html
<!-- contents of this file will be placed inside the <head> -->
<style>
html, body {
min-width: 200vw !important;
min-height: 200vh !important;
font-family: monospace;
}
body::before {
position: fixed;
transform: translate(calc(var(--pointer-client-x, 0) * 1px), calc(var(--pointer-client-y, 0) * 1px));
will-change: transform;
counter-reset: pointer-client-x var(--pointer-client-x) pointer-client-y var(--pointer-client-y);
content: "Client: " counter(pointer-client-x) "," counter(pointer-client-y);
}
body::after {
position: absolute;
transform: translate(calc(var(--pointer-page-x, 0) * 1px), calc(var(--pointer-page-y, 0) * 1px + 16px));
will-change: transform;
counter-reset: pointer-page-x var(--pointer-page-x) pointer-page-y var(--pointer-page-y);
content: "Page: " counter(pointer-page-x) "," counter(pointer-page-y);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment