Skip to content

Commit

Permalink
Convert all examples to callback of function
Browse files Browse the repository at this point in the history 
Conver all examples to callback of function
  • Loading branch information
@zarocknz
zarocknz committed Dec 24, 2017
1 parent 82b43c8 commit a8edfde
Show file tree
Hide file tree
Showing 7 changed files with 240 additions and 238 deletions.
7 changes: 6 additions & 1 deletion Winwheel.js
View file
Expand Up @@ -2239,6 +2239,7 @@ function winwheelAnimationLoop()
// If there is a callback function which is supposed to be called before the wheel is drawn then do that.
if (callbackBefore != null)
{
// If the property is a function then call it, otherwise eval the proptery as javascript code.
if (typeof callbackBefore === 'function')
{
callbackBefore();
Expand All @@ -2255,6 +2256,7 @@ function winwheelAnimationLoop()
// If there is a callback function which is supposed to be called after the wheel has been drawn then do that.
if (callbackAfter != null)
{
// If the property is a function then call it, otherwise eval the proptery as javascript code.
if (typeof callbackAfter === 'function')
{
callbackAfter();
Expand All @@ -2279,10 +2281,13 @@ function winwheelStopAnimation(canCallback)
if (canCallback != false)
{
var callback = winwheelToDrawDuringAnimation.animation.callbackFinished;

if (callback != null)
{
if (typeof callback == 'function')
// If the callback is a function then call it, otherwise evaluate the property as javascript code.
if (typeof callback === 'function')
{
// Pass back the indicated segment as 99% of the time you will want to know this to inform the user of their prize.
callback(winwheelToDrawDuringAnimation.getIndicatedSegment());
}
else
Expand Down
100 changes: 51 additions & 49 deletions examples/basic_code_wheel/index.html
View file
@@ -1,7 +1,7 @@
<!--
Winhweel.js basic code wheel example by Douglas McKechie @ www.dougtesting.net
See website for tutorials and other documentation.
The MIT License (MIT)
Copyright (c) 2016 Douglas McKechie
Expand Down Expand Up @@ -39,38 +39,39 @@ <h1>Winwheel.js example wheel - basic code wheel</h1>
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
</div>
</td>
<td width="438" height="582" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
</div>
</td>
<td width="438" height="582" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
</div>
<script>
// Create new wheel object specifying the parameters at creation time.
var theWheel = new Winwheel({
Expand All @@ -96,11 +97,11 @@ <h1>Winwheel.js example wheel - basic code wheel</h1>
'callbackFinished' : alertPrize
}
});

// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var wheelSpinning = false;

// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
Expand All @@ -113,32 +114,32 @@ <h1>Winwheel.js example wheel - basic code wheel</h1>
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";

// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1)
{
document.getElementById('pw1').className = "pw1";
}

if (powerLevel >= 2)
{
document.getElementById('pw2').className = "pw2";
}

if (powerLevel >= 3)
{
document.getElementById('pw3').className = "pw3";
}

// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;

// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}

// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
Expand All @@ -161,20 +162,20 @@ <h1>Winwheel.js example wheel - basic code wheel</h1>
{
theWheel.animation.spins = 15;
}

// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "spin_off.png";
document.getElementById('spin_button').className = "";

// Begin the spin animation by calling startAnimation on the wheel object.
theWheel.startAnimation();

// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}

// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
Expand All @@ -183,16 +184,17 @@ <h1>Winwheel.js example wheel - basic code wheel</h1>
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
theWheel.draw(); // Call draw to render changes to the wheel.

document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";

wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}

// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
// -------------------------------------------------------
function alertPrize(indicatedSegment)
{
Expand Down
75 changes: 37 additions & 38 deletions examples/basic_image_wheel/index.html
View file
Expand Up @@ -39,38 +39,39 @@ <h1>Winwheel.js example wheel - basic image wheel</h1>
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
</div>
</td>
<td width="318" height="418" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="315" height="418">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
</div>
</td>
<td width="318" height="418" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="315" height="418">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
</div>
<script>
// Create new wheel object specifying the parameters at creation time.
var theWheel = new Winwheel({
Expand Down Expand Up @@ -99,7 +100,7 @@ <h1>Winwheel.js example wheel - basic image wheel</h1>
'type' : 'spinToStop',
'duration' : 5, // Duration in seconds.
'spins' : 8, // Number of complete spins.
'callbackFinished' : 'alertPrize()'
'callbackFinished' : alertPrize
}
});

Expand Down Expand Up @@ -214,14 +215,12 @@ <h1>Winwheel.js example wheel - basic image wheel</h1>

// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
// -------------------------------------------------------
function alertPrize()
function alertPrize(indicatedSegment)
{
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
var winningSegment = theWheel.getIndicatedSegment();

// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("The wheel stopped on " + winningSegment.text);
alert("The wheel stopped on " + indicatedSegment.text);
}
</script>
</body>
Expand Down

0 comments on commit a8edfde

Please sign in to comment.