-
Notifications
You must be signed in to change notification settings - Fork 1
/
slinky.js
71 lines (46 loc) · 2.34 KB
/
slinky.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
/*
# Slinky
## Version 0.0.1
Slinky lets you add JavaScript tests to `<link>` elements to toggle stylesheets.
Similar to how you can add media queries to `<link>` tags with the `media=""` attribute, Slinky lets you define a custom `data-selector=""` and `data-test=""` attributes to any `<link>` tag to define an element to watch, and a JavaScript test to evaluate from the context of the matching element.
A simple usage might toggle the display of a stylesheet when the `#sidebar` element is wider than 500px:
<link
rel="stylesheet"
href="sidebar.css"
media="none"
data-selector="#sidebar"
data-test="this.offsetWidth > 500"
>
By default Slinky will add event listeners for `window.load`, `window.resize`, `window.input` and `window.click`, but you can override this by optionally specifying a `data-event=""` attribute as well. This stylesheet would listen to `window.scroll` alone:
<link
rel="stylesheet"
href="scroll.css"
media="none"
data-selector="body"
data-test="this.scrollTop > innerHeight"
data-event="scroll"
>
Note that in these examples I've included `media="none"` so the stylesheets default to being hidden - for progressive enhancement if you wish to default to the stylesheets applying unless they need to be hidden by JS, you can leave the `media="none"` off and the stylesheet will load by default, instead of remain hidden by default.
- https://github.com/tomhodgins/slinky
Author: Tommy Hodgins
License: MIT
*/
function slinky() {
var link = document.querySelectorAll('link[data-selector][data-test]')
for (var i=0; i < link.length; i++) {
var currentLink = link[i]
var event = currentLink.getAttribute('data-event')
? currentLink.getAttribute('data-event').replace(/ /g, '').split(',')
: ['load', 'resize', 'input', 'click']
for (var j=0; j < event.length; j++) {
window.addEventListener(event[j], function(e) {
var tag = document.querySelector(currentLink.getAttribute('data-selector'))
var func = new Function('return ' + currentLink.getAttribute('data-test'))
func.call(tag)
? currentLink.media !== 'screen' && (currentLink.media = 'screen')
: currentLink.media !== 'none' && (currentLink.media = 'none')
})
}
}
}
window.addEventListener('load', slinky)