VanillaRoulette 1.1.0

 - Minor improvements for safer use

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,148 @@
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+*.userprefs
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+.vs/
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+*.VisualState.xml
+TestResult.xml
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+project.lock.json
+project.fragment.lock.json
+artifacts/
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+_Chutzpah*
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+*.psess
+*.vsp
+*.vspx
+*.sap
+*.suppress
+*.nuspec
+$tf/
+*.gpState
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+.JustCode
+_TeamCity*
+*.dotCover
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+*.mm.*
+AutoTest.Net/
+.sass-cache/
+[Ee]xpress/
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+publish/
+*.[Pp]ublish.xml
+*.azurePubxml
+*.publishproj
+PublishScripts/
+*.nupkg
+**/packages/*
+!**/packages/build/
+*.nuget.props
+*.nuget.targets
+csx/
+*.build.csdef
+ecf/
+rcf/
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.[Cc]ache
+!*.[Cc]ache/
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+node_modules/
+orleans.codegen.cs
+Generated_Code/
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+*.mdf
+*.ldf
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+FakesAssemblies/
+*.GhostDoc.xml
+.ntvs_analysis.dat
+*.plg
+*.opt
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+.paket/paket.exe
+paket-files/
+.fake/
+.idea/
+*.sln.iml
+.cr/
+__pycache__/
+*.pyc

README.md

@@ -3,6 +3,40 @@
 
 `VanillaRoulette.js` - vanilla JavaScript library, which designed to rotate horizontal roulettes
 
-### DEMO
+## DEMO
 
-You can see demo [here](https://kir-antipov.github.io/VanillaRoulette/sample/index.html) :)
+You can see demo [here](https://kir-antipov.github.io/VanillaRoulette/sample/index.html) :)
+
+## Usage
+
+Using `VanillaRoulette.js` is really simple:
+
+ 1. **Link** `CSS` and `JS` to your page:
+
+```html
+<link href="libs/vanillaRoulette/vanillaRoulette.min.css" rel="stylesheet">
+<script src="libs/vanillaRoulette/vanillaRoulette.min.js"></script>
+```
+
+2. **Create** a container for roulette and fill it with content blocks (you can use any tag filled with any content):
+
+```html
+<div id="roulette">
+    <div>...</div>
+    <div>...</div>
+    <div>...</div>
+    <div>...</div>
+</div>
+```
+
+ 3. **Initialize** the roulette (simply pass a unique selector to the `Roulette` constructor):
+
+ ```js
+ let roulette = new Roulette("#roulette");
+ ```
+
+  4. **Profit**
+
+<br>
+
+`VanillaRoulette` has a number of configurable options, so you're welcome to visit our [Wiki](https://github.com/Kir-Antipov/VanillaRoulette/wiki)!)

sample/css/main.css

@@ -224,6 +224,9 @@ html, body {
     background: #fff;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
 }
+.input-range::-moz-focus-outer {
+    border: 0;
+}
 
 /* Buttons */
 .button {

sample/index.html

@@ -185,7 +185,7 @@ <h3 class="code-box__title small-headline">HTML Code</h3>
 
         function updateCodeBlocks() {
             ranges.forEach(updateRangeLabel);
-            [...document.querySelectorAll("code .hljs-number")].slice(1, 3).forEach((x, i) => x.innerText = ranges[i].value);
+            [...document.querySelectorAll("code .hljs-number")].slice(1, 4).forEach((x, i) => x.innerText = ranges[i].value);
             document.querySelector("code .hljs-literal").innerText = String(randomCheck.checked);
 
             const selectedInput = Number(tracksRange.value) ? tracksRange : secondsRange;
@@ -227,7 +227,7 @@ <h3 class="code-box__title small-headline">HTML Code</h3>
                 options.tracks = tracksRange.value;
             else
                 options.time = secondsRange.value;
-            roulette.rotateTo(Number(prizeRange.value), options);
+            roulette.rotateTo(prizeRange.value, options);
         });
 
         document.getElementById("stop").addEventListener("click", function (e) {

src/vanillaRoulette.js

@@ -1,4 +1,4 @@
-let Roulette = (function () {
+const Roulette = (function () {
 
     const rotationStopEventName = "rotationStop";
     const rotationStartEventName = "rotationStart";
@@ -14,6 +14,8 @@ let Roulette = (function () {
     const ContainerUndefinedException = "Container was undefined";
     const RotationIsAlreadyActiveException = "Rotation is already active";
 
+    const rotationTokens = new WeakMap();
+
     class Prize {
 
         constructor(element, index, spacing, width, height) {
@@ -88,7 +90,7 @@ let Roulette = (function () {
             this.prizeWidth = maxWidth;
             this.audio = player;
             this.fps = fps;
-            this.rotationToken = -1;
+            rotationTokens.set(this, -1);
 
             if (startCallback)
                 this.container.addEventListener(rotationStartEventName, startCallback);
@@ -108,10 +110,13 @@ let Roulette = (function () {
         rotateTo(block, options) {
             if (this.rotates)
                 throw RotationIsAlreadyActiveException;
-            let prize = typeof block === "number" ? this.findPrize({ index: block }) : this.findPrize({ element: block });
+            let numBlock = Number(block);
+            let prize = Number.isNaN(numBlock) ? this.findPrize({ element: block }) : this.findPrize({ index: numBlock });
             if (!prize)
                 throw PrizeNotFoundException;
             let { tracks = 0, time = 0, random = true, backward = false } = options || {};
+            time |= 0;
+            tracks |= 0;
             if (this.selectedPrize.index === prize.index && !time && !tracks)
                 return;
             if (time)
@@ -138,8 +143,8 @@ let Roulette = (function () {
 
         stop() {
             if (this.rotates) {
-                clearInterval(this.rotationToken);
-                this.rotationToken = -1;
+                clearInterval(rotationTokens.get(this));
+                rotationTokens.set(this, -1);
                 this.container.dispatchEvent(new CustomEvent(rotationStopEventName, { detail: { prize: this.selectedPrize } }));
             }
         }
@@ -162,15 +167,15 @@ let Roulette = (function () {
         }
 
         get rotates() {
-            return this.rotationToken > -1;
+            return rotationTokens.get(this) > -1;
         }
 
         get center() {
             return this.list.offsetLeft + this.list.clientWidth / 2;
         }
 
         static get version() {
-            return "1.0.0";
+            return "1.1.0";
         }
     }
 
@@ -193,7 +198,7 @@ let Roulette = (function () {
         let played = false;
         let halfBlock = this.spacing + this.prizeWidth / 2;
 
-        this.rotationToken = setInterval(() => {
+        let token = setInterval(() => {
 
             if (t > totalTime) {
                 this.stop();
@@ -219,6 +224,8 @@ let Roulette = (function () {
             t += intervalS;
 
         }, intervalMS);
+
+        rotationTokens.set(this, token);
     }
 
     function rotateBackward(pixels) {