Merge branch 'release/4.3.2'

CrazyTim · Apr 30, 2024 · d29247b · d29247b
2 parents 8b24b32 + 97ef7ac
commit d29247b
Show file tree

Hide file tree

Showing 32 changed files with 2,074 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -25,13 +25,13 @@ An easy to use, themeable component for randomising choices and prizes.
 ### ESM
 
 ```javascript
-import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-esm.js';
+import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].2/dist/spin-wheel-esm.js';
 ```
 
 ### IIFE
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/spin-wheel-iife.js"></script>
 ```
 
 ### Local
@@ -80,9 +80,11 @@ If precision is not important, you can use `Wheel.spin()` to immediately start s
 
 ## Examples
 
-- [Basic ESM usage](https://crazytim.github.io/spin-wheel/examples/esm)
-- [Basic IIFE usage](https://crazytim.github.io/spin-wheel/examples/iife)
+- [Basic ESM](https://crazytim.github.io/spin-wheel/examples/esm)
+- [Basic IIFE](https://crazytim.github.io/spin-wheel/examples/iife)
+- [Basic Vue](https://crazytim.github.io/spin-wheel/examples/vue3/dist)
 - [Spin to a specific item](https://crazytim.github.io/spin-wheel/examples/spin-to-item)
+- [Multiple Wheels](https://crazytim.github.io/spin-wheel/examples/multiple)
 - [Themes](https://crazytim.github.io/spin-wheel/examples/themes)
 - [Developer playground (for testing and troubleshooting)](https://crazytim.github.io/spin-wheel/examples/playground)
 

diff --git a/dist/spin-wheel-esm.js b/dist/spin-wheel-esm.js
diff --git a/dist/spin-wheel-iife.js b/dist/spin-wheel-iife.js
diff --git a/examples/esm/index.html b/examples/esm/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Spin Wheel Example - ESM</title>
@@ -10,12 +11,11 @@
 </head>
 
 <body>
-
   <div class="gui-wrapper">
     <p>Click-drag (or flick) to spin the wheel.</p>
   </div>
 
   <div class="wheel-wrapper"></div>
-
 </body>
+
 </html>
diff --git a/examples/iife/index.html b/examples/iife/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Spin Wheel Example - IIFE</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
   <link rel="stylesheet" href="./css/index.css"/>
-
   <script src="../../dist/spin-wheel-iife.js"></script>
 
   <script>
@@ -32,16 +32,14 @@
 
     }
   </script>
-
 </head>
 
 <body>
-
   <div class="gui-wrapper">
     <p>Click-drag (or flick) to spin the wheel.</p>
   </div>
 
   <div class="wheel-wrapper"></div>
-
 </body>
-</html>
+
+</html>
diff --git a/examples/multiple/css/index.css b/examples/multiple/css/index.css
@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Lucida Grande', sans-serif;
+  font-size: 15px;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none; /* Prevent selecting ui text when dragging */
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  /* Prevent pull-down-to-refresh gesture */
+  overscroll-behavior-y: contain;
+
+  /* Prevent iOS rubber-band effect */
+  position: fixed;
+  width: 100%;
+
+  /* Prevent browser from handling touch events */
+  touch-action: none;
+
+  display: flex;
+  flex-direction: column;
+  justify-items: stretch;
+  align-items: stretch;
+}
+
+.wheel-wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+.wheel-1 {
+  height: 100%;
+  width: 100%;
+}
+
+.wheel-2 {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0px;
+}
+
+.gui-wrapper {
+  padding: 10px;
+  background-color: #f3f3f3;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  max-width: 100px;
+}
+
+svg {
+  position: absolute;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  color: magenta;
+}
diff --git a/examples/multiple/index.html b/examples/multiple/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Spin Wheel Example - Multiple</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
+  <link rel="stylesheet" href="./css/index.css"/>
+  <script src="./js/index.js" type="module"></script>
+</head>
+
+<body>
+  <div class="gui-wrapper">
+    <button>Spin</button>
+  </div>
+
+  <div class="wheel-wrapper">
+    <div class="wheel-1"></div>
+    <div class="wheel-2"></div>
+
+    <svg viewBox="0 0 100 100">
+      <polygon fill="currentColor" points="50 3, 52 0.3, 48 0.3"/>
+      <line stroke="currentColor" stroke-width="0.5" x1="50" x2="50" y1="0.3" y2="50" />
+    </svg>
+  </div>
+</body>
+
+</html>
diff --git a/examples/multiple/js/index.js b/examples/multiple/js/index.js
@@ -0,0 +1,95 @@
+import {Wheel} from '../../../dist/spin-wheel-esm.js';
+
+window.onload = () => {
+
+  const WHEEL_2_INITIAL_ROTATION = 50;
+
+  const props1 = {
+    items: [
+      {
+        label: 'zero',
+      },
+      {
+        label: 'one',
+      },
+      {
+        label: 'two',
+      },
+      {
+        label: 'three',
+      },
+        {
+        label: 'four',
+      },
+      {
+        label: 'five',
+      },
+      {
+        label: 'six',
+      },
+      {
+        label: 'seven',
+      },
+    ],
+    itemLabelFontSizeMax: 40,
+    itemLabelRadius: 0.95,
+    isInteractive: false,
+    rotation: 0,
+    onRest: e => console.log(e),
+  };
+
+  const container1 = document.querySelector('.wheel-1');
+  window.wheel1 = new Wheel(container1, props1);
+
+  const props2 = {
+    items: [
+      {
+        label: '0',
+      },
+      {
+        label: '1',
+      },
+      {
+        label: '2',
+      },
+      {
+        label: '3',
+      },
+      {
+        label: '4',
+      },
+    ],
+    itemLabelFontSizeMax: 40,
+    radius: 0.4,
+    isInteractive: false,
+    rotation: WHEEL_2_INITIAL_ROTATION,
+    onRest: e => console.log(e),
+  };
+
+  const container2 = document.querySelector('.wheel-2');
+  window.wheel2 = new Wheel(container2, props2);
+
+  const btnSpin = document.querySelector('button');
+
+  let modifier = 0;
+
+  window.addEventListener('click', (e) => {
+
+    // Listen for click event on spin button:
+    if (e.target === btnSpin) {
+      const duration = 2600;
+      const winningItemRotaion1 = getRandomInt(90, 360) + modifier;
+      const winningItemRotaion2 = getRandomInt(90, 360) + modifier;
+      wheel1.spinTo(winningItemRotaion1, duration);
+      wheel2.spinTo(winningItemRotaion1 + WHEEL_2_INITIAL_ROTATION, duration);
+      modifier += 270;
+    }
+
+  });
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+};
diff --git a/examples/playground/index.html b/examples/playground/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Spin Wheel Example - Playground</title>
@@ -45,4 +46,5 @@
       <div class="input-group" data-name="rotationSpeedMax" data-type="range" data-min="50" data-max="1000"></div>
   </section>
 </body>
+
 </html>
diff --git a/examples/spin-to-item/index.html b/examples/spin-to-item/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Spin Wheel Example - Spin to an Item</title>
@@ -10,7 +11,6 @@
 </head>
 
 <body>
-
   <div class="gui-wrapper">
     <p><label>Choose the winning item:</label><select class="winning-item"></select></p>
     <p><label>Spin easing function:</label><select class="easing-function"></select></p>
@@ -36,6 +36,6 @@
   </div>
 
   <div class="wheel-wrapper"></div>
-
 </body>
+
 </html>
diff --git a/examples/themes/index.html b/examples/themes/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Spin Wheel Example - Themes</title>
@@ -10,13 +11,12 @@
 </head>
 
 <body>
-
   <div class="gui-wrapper">
     <p>Click-drag (or flick) to spin the wheel.</p>
     <p><label>Theme:</label><select></select></p>
   </div>
 
   <div class="wheel-wrapper"></div>
-
 </body>
+
 </html>
diff --git a/examples/vue3/.gitignore b/examples/vue3/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/examples/vue3/README.md b/examples/vue3/README.md
@@ -0,0 +1,13 @@
+# spin-wheel-example-vue
+
+This example was scaffolded using `npm create vue@latest`.
+
+```sh
+npm install
+
+# Compile and Hot-Reload for Development
+npm run dev
+
+# Compile and Minify for Production
+npm run build
+```
diff --git a/examples/vue3/dist/assets/index-omd7kyeh.css b/examples/vue3/dist/assets/index-omd7kyeh.css
@@ -0,0 +1 @@
+html,body{margin:0}div[data-v-ea7ed219]{width:60vw;height:60vh;margin:auto}
diff --git a/examples/vue3/dist/assets/index-tSGuP98j.js b/examples/vue3/dist/assets/index-tSGuP98j.js
diff --git a/examples/vue3/dist/index.html b/examples/vue3/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Spin Wheel Example - Vue 3</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
+    <script type="module" crossorigin src="/spin-wheel/examples/vue3/dist/assets/index-tSGuP98j.js"></script>
+    <link rel="stylesheet" crossorigin href="/spin-wheel/examples/vue3/dist/assets/index-omd7kyeh.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		html,body{margin:0}div[data-v-ea7ed219]{width:60vw;height:60vh;margin:auto}