From 8e2bbb01e700e287d4f4979bc3c7c216eab14a92 Mon Sep 17 00:00:00 2001 From: Ahmed El Sayegh Date: Sun, 17 May 2020 19:05:08 +0200 Subject: [PATCH] Update demo; add instructions on imperative spin --- README.md | 55 +++++++++++++++++++ projects/ngx-wheel/README.md | 55 +++++++++++++++++++ projects/ngx-wheel/package.json | 2 +- .../ngx-wheel/src/lib/ngx-wheel.component.ts | 3 +- src/app/app.component.html | 12 +++- src/app/app.component.less | 5 ++ src/app/app.component.ts | 17 ++++-- 7 files changed, 141 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index fd9afc5..819fac8 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your width='600' height='600' spinDuration='8' + [disableSpinOnClick]='true' [items]='items' [innerRadius]='50' [spinAmount]='10' @@ -75,6 +76,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your - `innerRadius` is the inner radius of the wheel. Allows you to make the wheel hollow from the center - `pointerStrokeColor` is the color of the pointer's stroke - `pointerFillColor` is the color of the pointer's fill +- `disableSpinOnClick` disabled the default behaviour of spinning the wheel on clicking it. See - `idToLandOn` is the `id` value of the `item` to land on (Can be fetched from server) - `items` is an array of segments which have the following format: ```javascript @@ -88,6 +90,59 @@ Once your library is imported, you can use its main component, ngx-wheel in your - `onSpinStart` is called before the wheel spin - `onSpinComplete` is called after the wheel spin +### Spinning With Your Own Button + +One common use case that was frequently requested was the ability to spin the wheel on button click. This is easily doable in version 4+. + +- Pass `true` to the `disableSpinOnClick` prop to disable spinning when clicking on the wheel. This is optional. + +- Add a ref `#wheel` to the wheel (any name works): +```xml + + +``` +- In your parent component ts file, refer to the wheel using `ViewChild` +```typescript +import { ..., ViewChild, ... } from '@angular/core'; +import { NgxWheelComponent } from 'ngx-wheel'; + +// ... + +export class ParentComponent { + @ViewChild(NgxWheelComponent, { static: false }) wheel; + + ngAfterViewInit() { + console.log('only after THIS EVENT "wheel" is usable!!'); + // Call the spin function whenever and wherever you want after the AfterViewInit Event + this.wheel.spin(); + } +} +``` + +One thing to keep in mind when using the spin function this way. If you want to change the `idToLandOn`, you need to wait for a tick before calling the `spin` function in order for the update to propagate: +```typescript + spin(prize) { + this.idToLandOn = prize + setTimeout(() => { // Without this timeout, the idToLandOn won't be updated + this.wheel.spin() + }, 0); + } +``` + ## License MIT © [Ahmed El Sayegh](mailto:ahmedelsayegh7@gmail.com) diff --git a/projects/ngx-wheel/README.md b/projects/ngx-wheel/README.md index fd9afc5..819fac8 100644 --- a/projects/ngx-wheel/README.md +++ b/projects/ngx-wheel/README.md @@ -52,6 +52,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your width='600' height='600' spinDuration='8' + [disableSpinOnClick]='true' [items]='items' [innerRadius]='50' [spinAmount]='10' @@ -75,6 +76,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your - `innerRadius` is the inner radius of the wheel. Allows you to make the wheel hollow from the center - `pointerStrokeColor` is the color of the pointer's stroke - `pointerFillColor` is the color of the pointer's fill +- `disableSpinOnClick` disabled the default behaviour of spinning the wheel on clicking it. See - `idToLandOn` is the `id` value of the `item` to land on (Can be fetched from server) - `items` is an array of segments which have the following format: ```javascript @@ -88,6 +90,59 @@ Once your library is imported, you can use its main component, ngx-wheel in your - `onSpinStart` is called before the wheel spin - `onSpinComplete` is called after the wheel spin +### Spinning With Your Own Button + +One common use case that was frequently requested was the ability to spin the wheel on button click. This is easily doable in version 4+. + +- Pass `true` to the `disableSpinOnClick` prop to disable spinning when clicking on the wheel. This is optional. + +- Add a ref `#wheel` to the wheel (any name works): +```xml + + +``` +- In your parent component ts file, refer to the wheel using `ViewChild` +```typescript +import { ..., ViewChild, ... } from '@angular/core'; +import { NgxWheelComponent } from 'ngx-wheel'; + +// ... + +export class ParentComponent { + @ViewChild(NgxWheelComponent, { static: false }) wheel; + + ngAfterViewInit() { + console.log('only after THIS EVENT "wheel" is usable!!'); + // Call the spin function whenever and wherever you want after the AfterViewInit Event + this.wheel.spin(); + } +} +``` + +One thing to keep in mind when using the spin function this way. If you want to change the `idToLandOn`, you need to wait for a tick before calling the `spin` function in order for the update to propagate: +```typescript + spin(prize) { + this.idToLandOn = prize + setTimeout(() => { // Without this timeout, the idToLandOn won't be updated + this.wheel.spin() + }, 0); + } +``` + ## License MIT © [Ahmed El Sayegh](mailto:ahmedelsayegh7@gmail.com) diff --git a/projects/ngx-wheel/package.json b/projects/ngx-wheel/package.json index ff4ce45..cd77607 100644 --- a/projects/ngx-wheel/package.json +++ b/projects/ngx-wheel/package.json @@ -1,6 +1,6 @@ { "name": "ngx-wheel", - "version": "4.0.1", + "version": "4.0.2", "peerDependencies": { "@angular/common": "^9.1.7", "@angular/core": "^9.1.7", diff --git a/projects/ngx-wheel/src/lib/ngx-wheel.component.ts b/projects/ngx-wheel/src/lib/ngx-wheel.component.ts index 03e0e69..4b8867b 100644 --- a/projects/ngx-wheel/src/lib/ngx-wheel.component.ts +++ b/projects/ngx-wheel/src/lib/ngx-wheel.component.ts @@ -7,7 +7,7 @@ export interface Item { @Component({ selector: 'ngx-wheel', template: ` - +     Canvas not supported, use another browser. `, @@ -27,6 +27,7 @@ export class NgxWheelComponent implements OnInit, AfterViewInit { @Input() innerRadius: number; @Input() pointerStrokeColor: string; @Input() pointerFillColor: string; + @Input() disableSpinOnClick: boolean; @Output() onSpinStart: EventEmitter = new EventEmitter(); diff --git a/src/app/app.component.html b/src/app/app.component.html index 61c0c03..9e06d85 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@ -

Press the wheel to land on Prize 4

+

Press the wheel to land on a random prize

+

Or press the button to land on the corresponding prize

Press the wheel to land on Prize 4 [idToLandOn]='idToLandOn' (onSpinStart)='before()' (onSpinComplete)='after()' -> \ No newline at end of file +> +
+ + + + +
\ No newline at end of file diff --git a/src/app/app.component.less b/src/app/app.component.less index 591c99f..6034b79 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -1,3 +1,8 @@ h3 { text-align: center; +} +.buttons{ + width: 400px; + display: flex; + justify-content: center; } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fc466b6..b025e2f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,27 @@ -import { Component, ChangeDetectorRef } from '@angular/core'; +import { Component, ChangeDetectorRef, ViewChild } from '@angular/core'; +import { NgxWheelComponent } from 'ngx-wheel' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { - constructor(private cdr: ChangeDetectorRef) { + @ViewChild(NgxWheelComponent, { static: false }) wheel; + + + idToLandOn = ['p1', 'p2', 'p3', 'p4'][Math.floor(Math.random() * 4)]; - } - idToLandOn = 'p4' before() { alert('Your wheel is about to spin') } + spin(prize) { + this.idToLandOn = prize + setTimeout(() => { + this.wheel.spin() + }, 0); + } + after() { alert('You have been bamboozled') }