Skip to content

Commit

Permalink
Merge branch 'release/4.3.0'
Browse files Browse the repository at this point in the history 
fixes #24
  • Loading branch information
@CrazyTim
CrazyTim committed Aug 29, 2023
2 parents 4debcd0 + 568f27c commit 3d6417b
Show file tree
Hide file tree
Showing 23 changed files with 331 additions and 305 deletions.
4 changes: 2 additions & 2 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
insert_final_newline = false
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
trim_trailing_whitespace = false
57 changes: 0 additions & 57 deletions .eslintrc.json
View file

This file was deleted.

11 changes: 7 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/spin-wheel@4.2.0/dist/spin-wheel-esm.js';
import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel@4.3.0/dist/spin-wheel-esm.js';
```

### IIFE

```html
<script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.2.0/dist/spin-wheel-iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.3.0/dist/spin-wheel-iife.js"></script>
```

### Local
Expand Down Expand Up @@ -104,11 +104,12 @@ Here's a handy diagram:

Method | Description
------------------------------------------------------------------- | ---------------------------
`constructor(container, props = {})` | `container` must be an Element.</p><p>`props` must be an Object or null.
`constructor(container, props = {})` | Create the wheel inside a container Element and initialise it with props.</p><p>`container` must be an Element.</p><p>`props` must be an Object or null.
`init(props = {})` | Initialise all properties.</p><The>If a value is not provided for a property then it will be given a default value.
`remove` | Remove the wheel from the DOM and unregister event handlers.
`spin(rotationSpeed = 0)` | Spin the wheel by setting `rotationSpeed`. The wheel will immediately start spinning, and slow down over time depending on the value of `rotationResistance`.</p><p>A positive number will spin clockwise, a negative number will spin anticlockwise.
`spinTo(rotation = 0, duration = 0, easingFunction = null)` | Spin the wheel to a particular rotation.</p><p>The animation will occur over the provided `duration` (milliseconds).<p>The animation can be adjusted by providing an optional `easingFunction` which accepts a single parameter n, where n is between 0 and 1 inclusive.</p><p>If no easing function is provided, the default easeSinOut will be used.</p><p>For example easing functions see [easing-utils](https://github.com/AndrewRayCode/easing-utils).
`spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, easingFunction = null)` | Spin the wheel to a particular item.</p><p>The animation will occur over the provided `duration` (milliseconds).</p><p>If `spinToCenter` is true, the wheel will spin to the center of the item, otherwise the wheel will spin to a random angle inside the item.</p><p>`numberOfRevolutions` controls how many times the wheel will rotate a full 360 degrees before resting on the item.</p><p>The animation can be adjusted by providing an optional `easingFunction` which accepts a single parameter n, where n is between 0 and 1 inclusive.</p><p>If no easing function is provided, the default easeSinOut will be used.</p><>For example easing functions see [easing-utils](https://github.com/AndrewRayCode/easing-utils).
`spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, easingFunction = null)` | Spin the wheel to a particular item.</p><p>The animation will occur over the provided `duration` (milliseconds).</p><p>If `spinToCenter` is true, the wheel will spin to the center of the item, otherwise the wheel will spin to a random angle inside the item.</p><p>`numberOfRevolutions` controls how many times the wheel will rotate a full 360 degrees before resting on the item.</p><p>The animation can be adjusted by providing an optional `easingFunction` which accepts a single parameter n, where n is between 0 and 1 inclusive.</p><p>If no easing function is provided, the default easeSinOut will be used.</p><p>For example easing functions see [easing-utils](https://github.com/AndrewRayCode/easing-utils).
`stop()` | Immediately stop the wheel from spinning, regardless of which method was used to spin it.
`getCurrentIndex()` | Get the index of the item that the Pointer is pointing at.</p><p>An item is considered "current" if `pointerAngle` is between it's start angle (inclusive) and it's end angle (exclusive).

Expand All @@ -132,6 +133,8 @@ Name | Default Value | Description
`itemLabelRadius` | `0.85` | The point along the radius (as a percent, starting from the center of the wheel) to start drawing all item labels.
`itemLabelRadiusMax` | `0.2` | The point along the radius (as a percent, starting from the center of the wheel) to calculate the maximum font size for all item labels.
`itemLabelRotation` | `0` | The rotation of all item labels.<b>Use this to flip the labels `180°` in combination with `itemLabelAlign`.
`itemLabelStrokeColor` | `#fff` | The color of the stroke applied to the outside of the label text.
`itemLabelStrokeWidth` | `0` | The width of the stroke applied to the outside of the label text.
`items` | `[]` | The items to show on the wheel.
`lineColor` | `'#000'` | The color of the lines between the items.
`lineWidth` | `1` | The width (in pixels) of the lines between the items.
Expand Down
4 changes: 2 additions & 2 deletions dist/spin-wheel-esm.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/spin-wheel-iife.js
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions examples/.eslintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"rules": {
"no-alert": "off",
"no-console": "off"
}
}
4 changes: 2 additions & 2 deletions examples/esm/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ window.onload = () => {
{
label: 'three',
},
]
],
};

const container = document.querySelector('.wheel-wrapper');

window.wheel = new Wheel(container, props);

}
};
153 changes: 29 additions & 124 deletions examples/playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,134 +10,39 @@
</head>

<body>
<div class="frame-center">
<section class="frame-center">
<div class="wheel-wrapper"></div>

<div class="toolbar" data-name="export">
<button class="btn export">Export as JSON...</button>
</div>
</div>

<div class="frame-right">

<div class="input-group" data-name="borderColor">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="color">
</div>

<div class="input-group" data-name="borderWidth" data-multiplier="0.1">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="250" value="2">
</div>

<div class="input-group" data-name="debug">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="checkbox">
</div>

<div class="input-group" data-name="image">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="file" accept="image/*">
<div>
<label class="btn choose">Choose file...</label>
<label class="btn clear">x</label>
</div>
</div>

<div class="input-group" data-name="isInteractive">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="checkbox">
</div>

<div class="input-group" data-name="itemBackgroundColors">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="input" value="[]">
</div>

<div class="input-group" data-name="itemLabelAlign">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="input" value="[]">
</div>

<div class="input-group" data-name="itemLabelBaselineOffset" data-multiplier="0.01">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="-50" max="50" value="0">
</div>

<div class="input-group" data-name="itemLabelColors">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="input" value="[]">
</div>

<div class="input-group" data-name="itemLabelFont">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="input" value="">
</div>

<div class="input-group" data-name="itemLabelFontSizeMax">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="10" max="100" value="12">
</div>

<div class="input-group" data-name="itemLabelRadius" data-multiplier="0.01">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="100" value="0">
</div>

<div class="input-group" data-name="itemLabelRadiusMax" data-multiplier="0.01">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="100" value="0">
</div>

<div class="input-group" data-name="itemLabelRotation">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="359" value="0">
</div>

<div class="input-group" data-name="lineColor">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="color">
</div>

<div class="input-group" data-name="lineWidth" data-multiplier="0.1">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="200" value="0">
</div>

<div class="input-group" data-name="overlayImage">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="file" accept="image/*">
<div>
<label class="btn choose">Choose file...</label>
<label class="btn clear">x</label>
</div>
</div>

<div class="input-group" data-name="pixelRatio" data-multiplier="0.1">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="40" value="0">
</div>

<div class="input-group" data-name="pointerAngle">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="0" max="360" value="0">
</div>

<div class="input-group" data-name="radius" data-multiplier="0.01">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="10" max="100" value="0">
</div>

<div class="input-group" data-name="rotationResistance">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="-200" max="-1" value="0">
</div>

<div class="input-group" data-name="rotationSpeedMax">
<h2><span class="prop-name"></span><span class="prop-value"></span></h2>
<input type="range" min="50" max="1000" value="0">
</div>

</div>
</section>

<section class="frame-right">
<div class="input-group" data-name="borderColor" data-type="color"></div>
<div class="input-group" data-name="borderWidth" data-type="range" data-min="0" data-max="250" data-multiplier="0.1"></div>
<div class="input-group" data-name="debug" data-type="checkbox"></div>
<div class="input-group" data-name="image" data-type="image"></div>
<div class="input-group" data-name="isInteractive" data-type="checkbox"></div>
<div class="input-group" data-name="itemBackgroundColors" data-type="textboxArray"></div>
<div class="input-group" data-name="itemLabelAlign" data-type="textbox"></div>
<div class="input-group" data-name="itemLabelBaselineOffset" data-type="range" data-min="-50" data-max="50" data-multiplier="0.01"></div>
<div class="input-group" data-name="itemLabelColors" data-type="textboxArray"></div>
<div class="input-group" data-name="itemLabelFont" data-type="textbox"></div>
<div class="input-group" data-name="itemLabelFontSizeMax" data-type="range" data-min="10" data-max="100"></div>
<div class="input-group" data-name="itemLabelRadius" data-type="range" data-min="0" data-max="100" data-multiplier="0.01"></div>
<div class="input-group" data-name="itemLabelRadiusMax" data-type="range" data-min="0" data-max="100" data-multiplier="0.01"></div>
<div class="input-group" data-name="itemLabelRotation" data-type="range" data-min="0" data-max="359"></div>
<div class="input-group" data-name="itemLabelStrokeColor" data-type="color"></div>
<div class="input-group" data-name="itemLabelStrokeWidth" data-type="range" data-min="0" data-max="30"></div>
<div class="input-group" data-name="lineColor" data-type="color"></div>
<div class="input-group" data-name="lineWidth" data-type="range" data-min="0" data-max="200" data-multiplier="0.1"></div>
<div class="input-group" data-name="overlayImage" data-type="image"></div>
<div class="input-group" data-name="pixelRatio" data-type="range" data-min="0" data-max="40" data-multiplier="0.1"></div>
<div class="input-group" data-name="pointerAngle" data-type="range" data-min="0" data-max="360"></div>
<div class="input-group" data-name="radius" data-type="range" data-min="10" data-max="100" data-multiplier="0.01"></div>
<div class="input-group" data-name="rotationResistance" data-type="range" data-min="-200" data-max="0"></div>
<div class="input-group" data-name="rotationSpeedMax" data-type="range" data-min="50" data-max="1000"></div>
</section>
</body>
</html>
Loading

0 comments on commit 3d6417b

Please sign in to comment.