-
Notifications
You must be signed in to change notification settings - Fork 4
/
cursory.js
150 lines (96 loc) · 3.19 KB
/
cursory.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/*
# Cursory
## version 0.1.1
Cursory is a CSS reprocessor that makes the following JS values available as CSS variables:
- `cursorX`
- `cursorY`
- `innerWidth`
- `innerHeight`
- `clicked`
These can be used as CSS variables with the following names:
- `--cursorX`
- `--cursorY`
- `--innerWidth`
- `--innerHeight`
- `--clicked`
These variables are updated at the following events:
- `mousemove`
- `touchmove`
In addition, the `--clicked` variable is changed from `0` to `1` between the `mousedown` and `touchstart` events and the corresponding `mouseup` or `touchend` events.
To run Cursory whenever you want, use the `cursory()` function in JS.
- https://github.com/tomhodgins/cssplus
Author: Tommy Hodgins
License: MIT
*/
// Uses Node, AMD or browser globals to create a module
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD: Register as an anonymous module
define([], factory)
} else if (typeof module === 'object' && module.exports) {
// Node: Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node
module.exports = factory()
} else {
// Browser globals (root is window)
root.cursory = factory()
}
}(this, function(e) {
const cursory = {}
cursory.style = ''
cursory.load = (e) => {
// Find (or create) style tag to populate
const style_tag = document.querySelector('[data-cursory-style]') || (() => {
const tag = document.createElement('style')
tag.setAttribute('data-cursory-style', '')
document.head.appendChild(tag)
return tag
})()
cursory.style = ''
cursory.process(e)
// Populate style tag with current CSS string
style_tag.innerHTML = `:root {\n${cursory.style.replace(/^/gm,' ')}\n}`
}
cursory.process = e => {
let newRule = cursory.transform(e)
if (newRule.length > 0) {
cursory.style = newRule
}
}
cursory.transform = e => {
let newRule = ''
// List cursor position, window dimensions, and click status
newRule = `
--cursorX: ${e.clientX || (e.touches ? e.touches[0].clientX : innerWidth/2)};
--cursorY: ${e.clientY || (e.touches ? e.touches[0].clientY : innerHeight/2)};
--innerWidth: ${innerWidth};
--innerHeight: ${innerHeight};
--clicked: ${cursory.clicked};
`
return newRule
}
// Set status of `clicked` variable
cursory.clicked = 0
cursory.startClick = e => {
cursory.clicked = 1
cursory.load(e)
}
cursory.endClick = e => {
cursory.clicked = 0
cursory.load(e)
}
// Update on `load` and `resize`
window.addEventListener('load', cursory.load)
window.addEventListener('resize', cursory.load)
// Update every `mousemove` and `touchmove`
window.addEventListener('mousemove', cursory.load)
window.addEventListener('touchmove', cursory.load)
// Start click on `mousedown` and `touchstart`
window.addEventListener('mousedown', cursory.startClick)
window.addEventListener('touchstart', cursory.startClick)
// End click on `mouseup` and `touchend`
window.addEventListener('mouseup', cursory.endClick)
window.addEventListener('touchend', cursory.endClick)
return cursory
}))