Switch to ESM

defaude · May 11, 2021 · 3a0743f · 3a0743f
1 parent ade8476
commit 3a0743f
Show file tree

Hide file tree

Showing 20 changed files with 93 additions and 244 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -11,5 +11,3 @@ insert_final_newline = true
 [package.json]
 indent_size = 2
 
-[bower.json]
-indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1 @@
 .idea
-node_modules
-dist
diff --git a/.jshintrc b/.jshintrc
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/LICENSE b/LICENSE
@@ -1,11 +1,13 @@
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-Version 2, December 2004
+        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
 
-Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
 
-Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
 
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 
-0. You just DO WHAT THE FUCK YOU WANT TO.
+  0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/README.md b/README.md
@@ -2,27 +2,29 @@
 ___
 
 # autohide-cursor
-Tiny no-dependency library that will automatically hide the cursor after a given time of mouse inactivity.
 
-## Installation
-Simply use bower to grab the latest version:
+Tiny no-dependency library that will automatically hide the cursor after a given time of mouse inactivity. No build
+tools, no bundlers, nothing.
 
-    bower install autohide-cursor
+## Installation
 
-## Usage
-Add a script tag to your HTML that loads autohide-cursor.min.js. You can configure the delay with a
-data-attributes on the script tag itself. This is optional, though. Please do *not* use the async attribute :).
+This is a ECMAScript Module. You can either install it via npm or simply take it from unpkg.
 
-    <script src="autohide-cursor.min.js" data-autohide-delay="800"></script>
+todo: put in some URLs here :)
 
-By default, autohide-cursor will hide the cursor whenever the user did not move the mouse for **1000 milliseconds**.
-As soon as the user moves the mouse again, the cursor is visible again.
+## Usage
 
-## Build
-Build the minified version (with source map) into the dist directory:
+If you're fine with the 1 seconds default delay, simply do:
 
-    grunt
+```html
+<script type="module" src="index.js"></script>
+```
 
-Developer mode with livereload (press CTRL+C in the console to cancel):
+If you want to control the delay yourself, you can import `autohideCursor` function directly and pass your custom value:
 
-    grunt dev
+```html
+<script type="module">
+    import {autohideCursor} from "./autohide-cursor.js";
+    autohideCursor(1234);
+</script>
+```
diff --git a/autohide-cursor.js b/autohide-cursor.js
@@ -0,0 +1,23 @@
+export function autohideCursor(delay = 1e3) {
+
+    function showCursor() {
+        document.documentElement.removeAttribute('style');
+    }
+
+    function hideCursor() {
+        document.documentElement.style.cursor = 'none';
+    }
+
+    let timeout;
+
+    document.documentElement.addEventListener('mousemove', function () {
+        showCursor();
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(hideCursor, delay);
+    }, false);
+
+    setTimeout(hideCursor, delay);
+
+}
diff --git a/bower.json b/bower.json
diff --git a/example-custom.html b/example-custom.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head lang="en">
+        <meta charset="UTF-8">
+        <title>autohide-cursor</title>
+        <style>
+            body {
+                background-color: #223;
+                font-family: sans-serif;
+            }
+
+            #box {
+                background-color: #eef;
+                margin: 3em auto;
+                border: 1px solid hotpink;
+                padding: 2em 3em;
+                max-width: 75%;
+            }
+        </style>
+        <script type="module">
+            import {autohideCursor} from "./autohide-cursor.js";
+
+            // this allows us to call the autohideCursor function with a custom delay
+            autohideCursor(500);
+        </script>
+    </head>
+    <body>
+        <div id="box">
+            <h1>autohide-cursor</h1>
+            I love it!
+        </div>
+    </body>
+</html>
diff --git a/src/example.html → example-simple.html b/src/example.html → example-simple.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head lang="en">
         <meta charset="UTF-8">
         <title>autohide-cursor</title>
@@ -8,6 +8,7 @@
                 background-color: #223;
                 font-family: sans-serif;
             }
+
             #box {
                 background-color: #eef;
                 margin: 3em auto;
@@ -16,7 +17,7 @@
                 max-width: 75%;
             }
         </style>
-        <script src="autohide-cursor.js" data-autohide-delay="800"></script>
+        <script type="module" src="index.js"></script>
     </head>
     <body>
         <div id="box">

diff --git a/grunt/aliases.yaml b/grunt/aliases.yaml
diff --git a/grunt/clean.yaml b/grunt/clean.yaml
diff --git a/grunt/connect.yaml b/grunt/connect.yaml
diff --git a/grunt/copy.yaml b/grunt/copy.yaml
diff --git a/grunt/jshint.yaml b/grunt/jshint.yaml
diff --git a/grunt/uglify.yaml b/grunt/uglify.yaml
diff --git a/grunt/watch.yaml b/grunt/watch.yaml
diff --git a/index.js b/index.js
@@ -0,0 +1,3 @@
+import {autohideCursor} from "./autohide-cursor.js";
+
+autohideCursor();
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
-  "name": "autohide-cursor",
-  "version": "0.0.2",
+  "name": "@defaude/autohide-cursor",
+  "version": "1.0.0",
   "description": "Tiny no-dependency library that will automatically hide the cursor after a given time of mouse inactivity.",
+  "main": "autohide-cursor.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/defaude/autohide-cursor.git"
+    "url": "git+https://github.com/defaude/autohide-cursor.git"
   },
   "author": {
     "name": "Roland Hummel",
@@ -15,15 +16,5 @@
   "bugs": {
     "url": "https://github.com/defaude/autohide-cursor/issues"
   },
-  "homepage": "https://github.com/defaude/autohide-cursor",
-  "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-connect": "^0.9.0",
-    "grunt-contrib-copy": "^0.7.0",
-    "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-uglify": "^0.7.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "load-grunt-config": "^0.16.0"
-  }
+  "homepage": "https://github.com/defaude/autohide-cursor#readme"
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {autohideCursor} from "./autohide-cursor.js";

		autohideCursor();