Merge branch 'release/4.4.0'

CrazyTim · Jun 21, 2024 · 2a52dbb · 2a52dbb
2 parents d29247b + c1dceea
commit 2a52dbb
Show file tree

Hide file tree

Showing 20 changed files with 563 additions and 375 deletions.
diff --git a/README.md b/README.md
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/multiple/js/index.js b/examples/multiple/js/index.js
@@ -70,26 +70,30 @@ window.onload = () => {
   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;
+      const {duration, winningItemRotaion} = calcSpinToValues();
+      wheel1.spinTo(winningItemRotaion, duration);
+      wheel2.spinTo(winningItemRotaion + WHEEL_2_INITIAL_ROTATION, duration);
     }
 
   });
 
+  function calcSpinToValues() {
+    const duration = 2600;
+    const winningItemRotaion = getRandomInt(360, 360 * 1.75) + modifier;
+    modifier += 360 * 1.75;
+    return {duration, winningItemRotaion};
+  }
+
   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/js/initEventListeners.js b/examples/playground/js/initEventListeners.js
@@ -148,11 +148,12 @@ function initTextboxArray(g) {
 }
 
 function exportWheelAsJson() {
-  const obj = {};
-  for (const [key, value] of Object.entries(wheelPropInits)) {
-    obj[key] = window.wheel[key];
+  const json = {};
+  for (const g of inputGroups) {
+    const key = g.dataset.name;
+    json[key] = window.wheel[key];
   }
-  downloadTextFile(JSON.stringify(obj, null, 2), 'spin-wheel-settings.json', 'text/json');
+  downloadTextFile(JSON.stringify(json, null, 2), 'spin-wheel-settings.json', 'text/json');
 }
 
 function roundUp(num = 0, decimalPlaces = 2) {

diff --git a/examples/themes/css/index.css b/examples/themes/css/index.css
@@ -47,10 +47,24 @@ body {
   gap: 10px;
 }
 
+.gui-wrapper > div {
+  display: flex;
+  flex-direction:row;
+  gap: 10px;
+  align-items: center;
+}
+
 select {
   padding: 2px;
 }
 
 label {
   margin-right: 5px;
+}
+
+button {
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  max-width: 100px;
 }
diff --git a/examples/themes/index.html b/examples/themes/index.html
@@ -12,8 +12,11 @@
 
 <body>
   <div class="gui-wrapper">
-    <p>Click-drag (or flick) to spin the wheel.</p>
-    <p><label>Theme:</label><select></select></p>
+    <p>Click-drag (or touch-flick) to spin the wheel.</p>
+    <div>
+      <button>Spin</button>
+      <p><label>Theme:</label><select></select></p>
+    </div>
   </div>
 
   <div class="wheel-wrapper"></div>

diff --git a/examples/themes/js/index.js b/examples/themes/js/index.js
@@ -3,14 +3,10 @@ import {loadFonts} from '../../../scripts/util.js';
 import {props} from './props.js';
 
 window.onload = async () => {
-  await loadFonts(props.map(i => i.itemLabelFont));
-  init();
-};
 
-function init() {
+  await loadFonts(props.map(i => i.itemLabelFont));
 
   const wheel = new Wheel(document.querySelector('.wheel-wrapper'));
-
   const dropdown = document.querySelector('select');
 
   // Initalise dropdown with the names of each example:
@@ -35,4 +31,30 @@ function init() {
   // Save object globally for easy debugging.
   window.wheel = wheel;
 
-}
+  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, winningItemRotaion} = calcSpinToValues();
+      wheel.spinTo(winningItemRotaion, duration);
+    }
+
+  });
+
+  function calcSpinToValues() {
+    const duration = 3000;
+    const winningItemRotaion = getRandomInt(360, 360 * 1.75) + modifier;
+    modifier += 360 * 1.75;
+    return {duration, winningItemRotaion};
+  }
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+};
diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue
@@ -8,8 +8,12 @@
 </script>
 
 <template>
-  <button @click="count++">Items: {{ count }}</button>
-  <SpinWheel :num-items="count"></SpinWheel>
+  <div class="body-wrapper">
+    <div class="gui-wrapper">
+      <button @click="count++">Items: {{ count }}</button>
+    </div>
+    <SpinWheel :num-items="count"></SpinWheel>
+  </div>
 </template>
 
 <style scoped>

diff --git a/examples/vue3/src/components/SpinWheel.vue b/examples/vue3/src/components/SpinWheel.vue
@@ -35,13 +35,8 @@
 </script>
 
 <template>
-  <div ref="wheelContainer"></div>
+  <div class="wheel-wrapper" ref="wheelContainer"></div>
 </template>
 
 <style scoped>
-  div {
-    width: 60vw;
-    height: 60vh;
-    margin: auto;
-  }
 </style>
diff --git a/examples/vue3/src/main.css b/examples/vue3/src/main.css
@@ -1,3 +1,52 @@
-html, body {
+* {
   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-wrapper {
+  height: 100%;
+
+  /* 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: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: stretch;
+  align-items: stretch;
+}
+
+.wheel-wrapper {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+.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: 150px;
 }