Skip to content

Commit fb35c0d

Browse files
hperrinhperrin
committed
Move CSS from its own file into the JS.
1 parent 9571a05 commit fb35c0d

File tree

6 files changed

+140
-122
lines changed

6 files changed

+140
-122
lines changed

‎NonBlock.css

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎NonBlock.es5.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@
2929
document.addEventListener('DOMContentLoaded', init);
3030
}
3131
})(function () {
32+
var styling = document.createElement('style');
33+
styling.setAttribute('type', 'text/css');
34+
var css = '\n .nonblock{transition:opacity .3s ease;}\n .nonblock:hover{opacity:.1 !important;}\n .nonblock-hide{display:none !important;}\n .nonblock-cursor-auto{cursor:auto;}\n .nonblock-cursor-default{cursor:default;}\n .nonblock-cursor-none{cursor:none;}\n .nonblock-cursor-context-menu{cursor:context-menu;}\n .nonblock-cursor-help{cursor:help;}\n .nonblock-cursor-pointer{cursor:pointer;}\n .nonblock-cursor-progress{cursor:progress;}\n .nonblock-cursor-wait{cursor:wait;}\n .nonblock-cursor-cell{cursor:cell;}\n .nonblock-cursor-crosshair{cursor:crosshair;}\n .nonblock-cursor-text{cursor:text;}\n .nonblock-cursor-vertical-text{cursor:vertical-text;}\n .nonblock-cursor-alias{cursor:alias;}\n .nonblock-cursor-copy{cursor:copy;}\n .nonblock-cursor-move{cursor:move;}\n .nonblock-cursor-no-drop{cursor:no-drop;}\n .nonblock-cursor-not-allowed{cursor:not-allowed;}\n .nonblock-cursor-all-scroll{cursor:all-scroll;}\n .nonblock-cursor-col-resize{cursor:col-resize;}\n .nonblock-cursor-row-resize{cursor:row-resize;}\n .nonblock-cursor-n-resize{cursor:n-resize;}\n .nonblock-cursor-e-resize{cursor:e-resize;}\n .nonblock-cursor-s-resize{cursor:s-resize;}\n .nonblock-cursor-w-resize{cursor:w-resize;}\n .nonblock-cursor-ne-resize{cursor:ne-resize;}\n .nonblock-cursor-nw-resize{cursor:nw-resize;}\n .nonblock-cursor-se-resize{cursor:se-resize;}\n .nonblock-cursor-sw-resize{cursor:sw-resize;}\n .nonblock-cursor-ew-resize{cursor:ew-resize;}\n .nonblock-cursor-ns-resize{cursor:ns-resize;}\n .nonblock-cursor-nesw-resize{cursor:nesw-resize;}\n .nonblock-cursor-nwse-resize{cursor:nwse-resize;}\n .nonblock-cursor-zoom-in{cursor:zoom-in;}\n .nonblock-cursor-zoom-out{cursor:zoom-out;}\n .nonblock-cursor-grab{cursor:grab;}\n .nonblock-cursor-grabbing{cursor:grabbing;}\n ';
35+
if (styling.styleSheet) {
36+
styling.styleSheet.cssText = css; // IE
37+
} else {
38+
styling.appendChild(document.createTextNode(css));
39+
}
40+
document.getElementsByTagName('head')[0].appendChild(styling);
41+
3242
// This keeps track of the last element the mouse was over, so
3343
// mouseleave, mouseenter, etc can be called.
3444
var nonBlockLastElem = void 0;
@@ -155,7 +165,7 @@
155165
}
156166
};
157167

158-
// This is used to pass events through the el if it is non-blocking.
168+
// This is used to pass events through the el if it is nonblocking.
159169
var nonblockPass = function nonblockPass(elem, event, eventName) {
160170
elem.classList.add('nonblock-hide');
161171
var elBelow = document.elementFromPoint(event.clientX, event.clientY);

‎NonBlock.js

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,56 @@
1414
document.addEventListener('DOMContentLoaded', init);
1515
}
1616
})(() => {
17+
const styling = document.createElement('style');
18+
styling.setAttribute('type', 'text/css');
19+
const css = `
20+
.nonblock{transition:opacity .3s ease;}
21+
.nonblock:hover{opacity:.1 !important;}
22+
.nonblock-hide{display:none !important;}
23+
.nonblock-cursor-auto{cursor:auto;}
24+
.nonblock-cursor-default{cursor:default;}
25+
.nonblock-cursor-none{cursor:none;}
26+
.nonblock-cursor-context-menu{cursor:context-menu;}
27+
.nonblock-cursor-help{cursor:help;}
28+
.nonblock-cursor-pointer{cursor:pointer;}
29+
.nonblock-cursor-progress{cursor:progress;}
30+
.nonblock-cursor-wait{cursor:wait;}
31+
.nonblock-cursor-cell{cursor:cell;}
32+
.nonblock-cursor-crosshair{cursor:crosshair;}
33+
.nonblock-cursor-text{cursor:text;}
34+
.nonblock-cursor-vertical-text{cursor:vertical-text;}
35+
.nonblock-cursor-alias{cursor:alias;}
36+
.nonblock-cursor-copy{cursor:copy;}
37+
.nonblock-cursor-move{cursor:move;}
38+
.nonblock-cursor-no-drop{cursor:no-drop;}
39+
.nonblock-cursor-not-allowed{cursor:not-allowed;}
40+
.nonblock-cursor-all-scroll{cursor:all-scroll;}
41+
.nonblock-cursor-col-resize{cursor:col-resize;}
42+
.nonblock-cursor-row-resize{cursor:row-resize;}
43+
.nonblock-cursor-n-resize{cursor:n-resize;}
44+
.nonblock-cursor-e-resize{cursor:e-resize;}
45+
.nonblock-cursor-s-resize{cursor:s-resize;}
46+
.nonblock-cursor-w-resize{cursor:w-resize;}
47+
.nonblock-cursor-ne-resize{cursor:ne-resize;}
48+
.nonblock-cursor-nw-resize{cursor:nw-resize;}
49+
.nonblock-cursor-se-resize{cursor:se-resize;}
50+
.nonblock-cursor-sw-resize{cursor:sw-resize;}
51+
.nonblock-cursor-ew-resize{cursor:ew-resize;}
52+
.nonblock-cursor-ns-resize{cursor:ns-resize;}
53+
.nonblock-cursor-nesw-resize{cursor:nesw-resize;}
54+
.nonblock-cursor-nwse-resize{cursor:nwse-resize;}
55+
.nonblock-cursor-zoom-in{cursor:zoom-in;}
56+
.nonblock-cursor-zoom-out{cursor:zoom-out;}
57+
.nonblock-cursor-grab{cursor:grab;}
58+
.nonblock-cursor-grabbing{cursor:grabbing;}
59+
`;
60+
if (styling.styleSheet) {
61+
styling.styleSheet.cssText = css; // IE
62+
} else {
63+
styling.appendChild(document.createTextNode(css));
64+
}
65+
document.getElementsByTagName('head')[0].appendChild(styling);
66+
1767
// This keeps track of the last element the mouse was over, so
1868
// mouseleave, mouseenter, etc can be called.
1969
let nonBlockLastElem;
@@ -156,7 +206,7 @@
156206
}
157207
};
158208

159-
// This is used to pass events through the el if it is non-blocking.
209+
// This is used to pass events through the el if it is nonblocking.
160210
const nonblockPass = (elem, event, eventName) => {
161211
elem.classList.add('nonblock-hide');
162212
const elBelow = document.elementFromPoint(event.clientX, event.clientY);

‎README.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# NonBlock.js
22

3-
Non-blocking UI elements in JavaScript.
3+
Nonblocking UI elements in JavaScript.
44

5-
NonBlock.js lets you provide uninstrusive UI elements. They will fade when a user hovers over them, and let the user select and interact with elements under them.
5+
NonBlock.js lets you provide unobstrusive UI elements. They will fade when a user hovers over them, and let the user select and interact with elements under them.
66

77
## Installation
88

@@ -14,14 +14,12 @@ npm install --save nonblockjs
1414

1515
```html
1616
<script src="node_modules/nonblockjs/NonBlock.es5.js" type="text/javascript"></script>
17-
<link href="node_modules/nonblockjs/NonBlock.css" type="text/css" rel="stylesheet" />
1817
```
1918

2019
### Or use jsDelivr:
2120

2221
```html
2322
<script src="https://cdn.jsdelivr.net/npm/nonblockjs@1/NonBlock.es5.js" type="text/javascript"></script>
24-
<link href="https://cdn.jsdelivr.net/npm/nonblockjs@1/NonBlock.css" type="text/css" rel="stylesheet" />
2523
```
2624

2725
## Usage

‎index.html

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,77 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>NonBlock.js</title>
5-
<style type="text/css">
6-
body {
7-
font-family: Arial;
8-
font-size: 12pt;
9-
color: #333;
10-
padding: 0;
11-
margin: 30px 20px;
12-
}
13-
.linkcontainer {
14-
position: relative;
15-
width: 400px;
16-
background-color: #8d8;
17-
border-radius: 5px;
18-
padding: 25px;
19-
margin: 30px 0;
20-
}
21-
.intheway {
22-
background-color: #6400B3;
23-
color: #FFF;
24-
border-radius: 5px;
25-
padding: 12px;
26-
box-shadow: 0px 2px 30px 5px rgba(0,0,0,0.1);
27-
}
28-
.intheway.first {
29-
position: relative;
30-
top: -180px;
31-
left: 30px;
32-
height: 100px;
33-
width: 120px;
34-
}
35-
.intheway.second {
36-
position: absolute;
37-
top: 4px;
38-
bottom: 4px;
39-
left: 4px;
40-
right: 4px;
41-
height: auto;
42-
width: auto;
43-
}
44-
</style>
45-
<link rel="stylesheet" type="text/css" href="NonBlock.css" />
46-
<script type="text/javascript" src="NonBlock.es5.js"></script>
47-
</head>
48-
<body>
49-
<h1>NonBlock.js</h1>
50-
<p>
51-
NonBlock.js lets you provide uninstrusive UI elements. They will fade when a user hovers over them, and let the user select and interact with elements under them. Hover over the purple boxes to try it out.
52-
</p>
53-
<div class="linkcontainer first">
54-
This is a <a href="http://google.com" target="_blank">link</a>. Here is some text. Let's have more text. All the text in the world couldn't save you now, Mr. Bond. Ah, but that's where you're wrong. You see, my underpants have been equipped with several tiny lasers that will blind you while the speaker up my butt blasts disco music.
3+
<head>
4+
<title>NonBlock.js</title>
5+
<style type="text/css">
6+
body {
7+
font-family: Arial;
8+
font-size: 12pt;
9+
color: #333;
10+
padding: 0;
11+
margin: 30px 20px;
12+
}
13+
.linkcontainer {
14+
position: relative;
15+
width: 400px;
16+
background-color: #8d8;
17+
border-radius: 5px;
18+
padding: 25px;
19+
margin: 30px 0;
20+
}
21+
.intheway {
22+
background-color: #6400B3;
23+
color: #FFF;
24+
border-radius: 5px;
25+
padding: 12px;
26+
box-shadow: 0px 2px 30px 5px rgba(0,0,0,0.3);
27+
}
28+
.intheway.first {
29+
position: relative;
30+
top: -180px;
31+
left: 30px;
32+
height: 100px;
33+
width: 120px;
34+
}
35+
.intheway.second {
36+
position: absolute;
37+
top: 4px;
38+
bottom: 4px;
39+
left: 4px;
40+
right: 4px;
41+
height: auto;
42+
width: auto;
43+
}
44+
</style>
45+
<script type="text/javascript" src="NonBlock.es5.js"></script>
46+
</head>
47+
<body>
48+
<h1>NonBlock.js</h1>
49+
<p>
50+
NonBlock.js lets you provide uninstrusive UI elements. They will fade when a
51+
user hovers over them, and let the user select and interact with elements
52+
under them. Hover over the purple boxes to try it out.
53+
</p>
54+
<div class="linkcontainer first">
55+
This is a <a href="http://google.com" target="_blank">link</a>. Here is some
56+
text. Let's have more text. All the text in the world couldn't save you now,
57+
Mr. Bond. Ah, but that's where you're wrong. You see, my underpants have
58+
been equipped with several tiny lasers that will blind you while the speaker
59+
up my butt blasts disco music.
60+
</div>
61+
<div class="nonblock intheway first">
62+
There&apos;s a link under me. I am going to stay in the way of that link.
63+
</div>
64+
<div>
65+
Try toggling nonblocking on this demo:
66+
<button onclick="document.querySelector('.intheway.second').classList.add('nonblock')">Enable NonBlock</button>
67+
<button onclick="document.querySelector('.intheway.second').classList.remove('nonblock')">Disable NonBlock</button>
68+
</div>
69+
<div class="linkcontainer second">
70+
This is a <button type="button" onclick="alert('You clicked the button.')">button</button>.
71+
<div class="nonblock intheway second">
72+
There&apos;s a button under me. I am going to stay in the way of that
73+
button.
5574
</div>
56-
<div class="nonblock intheway first">
57-
There&apos;s a link under me. I am going to stay in the way of that link.
58-
</div>
59-
<div>
60-
Try toggling non-blocking on this demo:
61-
<button onclick="document.querySelector('.intheway.second').classList.add('nonblock')">Enable Non-Block</button>
62-
<button onclick="document.querySelector('.intheway.second').classList.remove('nonblock')">Disable Non-Block</button>
63-
</div>
64-
<div class="linkcontainer second">
65-
This is a <button type="button" onclick="alert('You clicked the button.')">button</button>.
66-
<div class="nonblock intheway second">
67-
There&apos;s a button under me. I am going to stay in the way of that button.
68-
</div>
69-
</div>
70-
</body>
75+
</div>
76+
</body>
7177
</html>

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "nonblockjs",
33
"version": "1.0.3",
4-
"description": "Nonblocking UI elements in JavaScript.",
4+
"description": "Unobtrusive (click through) UI elements in JavaScript.",
55
"keywords": [
66
"non blocking",
77
"nonblocking",
88
"nonblock",
99
"ui",
10-
"unobtrusive"
10+
"unobtrusive",
11+
"click through"
1112
],
1213
"homepage": "https://github.com/sciactive/nonblockjs",
1314
"bugs": {
@@ -16,7 +17,6 @@
1617
"license": "Apache-2.0",
1718
"author": "Hunter Perrin",
1819
"files": [
19-
"NonBlock.css",
2020
"NonBlock.es5.js",
2121
"NonBlock.js"
2222
],

0 commit comments

Comments
 (0)