initial work adding TS support

.npmignore

@@ -19,6 +19,7 @@ package-lock.json
 .gitignore
 .parcel-cache
 rollup.config.mjs
+tsconfig.json
 
 # example
 example

.prettierignore

@@ -3,3 +3,4 @@ node_modules/
 *.yml
 .prettierignore
 .husky/*
+.npmignore

.prettierrc

@@ -1,4 +1,9 @@
 {
-  "semi": false,
-  "singleQuote": true
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }

example/css/example.css

@@ -30,7 +30,7 @@ h2 {
 h3 {
   font-size: 2rem;
 }
-[class*='example-slider'] {
+[class*="example-slider"] {
   display: block;
   border: 5px solid #000;
 }
@@ -57,7 +57,7 @@ section {
 }
 .why-scrub p {
   font-size: 1.5rem;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: "Ubuntu Mono", monospace;
   padding: 10px;
   font-weight: 700;
 }
@@ -93,7 +93,7 @@ pre span {
   transition: all 0.2s ease-in-out;
 }
 .btn:after {
-  content: '';
+  content: "";
   position: absolute;
   height: 0%;
   left: 50%;

example/css/scrub.css

@@ -45,7 +45,7 @@
   background: white;
 }
 .scrub-slider .sliding.handleOn:before {
-  content: '';
+  content: "";
   width: 40px;
   padding-bottom: 40px;
   position: absolute;
@@ -58,20 +58,20 @@
   box-shadow: 0 0 2px 1px #000;
   z-index: 2;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"] {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   position: absolute;
   top: 50%;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'][class*='left'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="left"] {
   left: 50%;
   transform: translate(-150%, -50%);
   border-right: 10px solid #000;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'][class*='right'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="right"] {
   right: 50%;
   transform: translate(140%, -50%);
   border-left: 10px solid #000;

example/example.js

@@ -1,22 +1,22 @@
 // import Scrub from "../../dist/scrub.esm";
 
 // setting height for hero example.
-var a = document.getElementById('slider1')
+var a = document.getElementById("slider1");
 if (a.offsetTop < window.innerHeight) {
-  var b = window.innerHeight - a.offsetTop + 'px'
+  var b = window.innerHeight - a.offsetTop + "px";
 }
 
 // different methods of initiating a slider
 Scrub({
-  target: '#slider1',
+  target: "#slider1",
   height: b,
   handle: true,
   src: [
-    'https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg',
-    'https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg',
+    "https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg",
+    "https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg",
   ],
-  alt: ['Image number 1 alt', 'Image number 2 alt'],
-})
-Scrub('#slider2')
+  alt: ["Image number 1 alt", "Image number 2 alt"],
+});
+Scrub("#slider2");
 
 // Scrub('nonexistent');

example/scrub.css

@@ -45,7 +45,7 @@
   background: white;
 }
 .scrub-slider .sliding.handleOn:before {
-  content: '';
+  content: "";
   width: 40px;
   padding-bottom: 40px;
   position: absolute;
@@ -58,20 +58,20 @@
   box-shadow: 0 0 2px 1px #000;
   z-index: 2;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"] {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   position: absolute;
   top: 50%;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'][class*='left'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="left"] {
   left: 50%;
   transform: translate(-150%, -50%);
   border-right: 10px solid #000;
 }
-.scrub-slider .sliding.handleOn span[class*='sliding-'][class*='right'] {
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="right"] {
   right: 50%;
   transform: translate(140%, -50%);
   border-left: 10px solid #000;