Skip to content

Commit 1dc55da

Browse files
josex2rjosex2r
committed
Fixed prev/next & stop
1 parent 09a159a commit 1dc55da

File tree

1 file changed

+26
-61
lines changed

1 file changed

+26
-61
lines changed

‎src/jquery.slotmachine.js‎

Lines changed: 26 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -16,36 +16,26 @@ const pluginName = 'slotMachine',
1616
randomize: null, // Randomize function, must return a number with the selected position
1717
complete: null, // Callback function(result)
1818
stopHidden: true, // Stops animations if the element isn´t visible on the screen
19-
direction: 'up', // Animation direction ['up'||'down']
20-
transition: 'ease-in-out'
19+
direction: 'up' // Animation direction ['up'||'down']
2120
},
2221
FX_NO_TRANSITION = 'slotMachineNoTransition',
2322
FX_FAST = 'slotMachineBlurFast',
2423
FX_NORMAL = 'slotMachineBlurMedium',
2524
FX_SLOW = 'slotMachineBlurSlow',
25+
FX_TURTLE = 'slotMachineBlurTurtle',
2626
FX_GRADIENT = 'slotMachineGradient',
2727
FX_STOP = FX_GRADIENT;
2828

2929
// Set required styles, filters and masks
3030
$(document).ready(function documentReady() {
3131

32-
const slotMachineBlurFilterFastString = '<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0">' +
33-
'<filter id="slotMachineBlurFilterFast">' +
34-
'<feGaussianBlur stdDeviation="5" />' +
35-
'</filter>' +
36-
'</svg>#slotMachineBlurFilterFast';
37-
38-
const slotMachineBlurFilterMediumString = '<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0">' +
39-
'<filter id="slotMachineBlurFilterMedium">' +
40-
'<feGaussianBlur stdDeviation="3" />' +
41-
'</filter>' +
42-
'</svg>#slotMachineBlurFilterMedium';
32+
function getSvgFilter (blur) {
33+
return `<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><filter id="slotMachineBlurFilter${blur}"><feGaussianBlur stdDeviation="${blur}" /></filter></svg>#slotMachineBlurFilter${blur}`;
34+
}
4335

44-
const slotMachineBlurFilterSlowString = '<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0">' +
45-
'<filter id="slotMachineBlurFilterSlow">' +
46-
'<feGaussianBlur stdDeviation="1" />' +
47-
'</filter>' +
48-
'</svg>#slotMachineBlurFilterSlow';
36+
function getBlurStyle (amount) {
37+
return `-webkit-filter: blur(${amount}px);-moz-filter: blur(${amount}px);-o-filter: blur(${amount}px);-ms-filter: blur(${amount}px);filter: blur(${amount}px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="${amount}");filter: url("data:image/svg+xml;utf8,${getSvgFilter(amount)}");`;
38+
}
4939

5040
const slotMachineFadeMaskString = '<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0">' +
5141
'<mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">' +
@@ -62,9 +52,10 @@ $(document).ready(function documentReady() {
6252
// CSS classes
6353
$('body').append('<style>' +
6454
`.${FX_NO_TRANSITION}{-webkit-transition: none !important;-moz-transition: none !important;-o-transition: none !important;-ms-transition: none !important;transition: none !important;}` +
65-
`.${FX_FAST}{-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);filter: url("data:image/svg+xml;utf8,${slotMachineBlurFilterFastString}");filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="5")}` +
66-
`.${FX_NORMAL}{-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px);filter: url("data:image/svg+xml;utf8,${slotMachineBlurFilterMediumString}");filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="3")}` +
67-
`.${FX_SLOW}{-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);filter: blur(1px);filter: url("data:image/svg+xml;utf8,${slotMachineBlurFilterSlowString}");filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="1")}` +
55+
`.${FX_FAST}{${getBlurStyle(5)}}` +
56+
`.${FX_NORMAL}{${getBlurStyle(3)}}` +
57+
`.${FX_SLOW}{${getBlurStyle(2)}}` +
58+
`.${FX_TURTLE}{${getBlurStyle(1)}}` +
6859
`.${FX_GRADIENT}{` +
6960
'-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );' +
7061
`mask: url("data:image/svg+xml;utf8,${slotMachineFadeMaskString}");` +
@@ -73,24 +64,6 @@ $(document).ready(function documentReady() {
7364

7465
});
7566

76-
// Required easing functions
77-
if (typeof $.easing.easeOutBounce !== 'function') {
78-
// From jQuery easing, extend jQuery animations functions
79-
$.extend($.easing, {
80-
easeOutBounce (x, t, b, c, d) {
81-
if ((t /= d) < (1 / 2.75)) {
82-
return c * (7.5625 * t * t) + b;
83-
} else if (t < (2 / 2.75)) {
84-
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
85-
} else if (t < (2.5 / 2.75)) {
86-
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
87-
} else {
88-
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
89-
}
90-
}
91-
});
92-
}
93-
9467
class Timer {
9568
constructor (cb, delay) {
9669
this.cb = cb;
@@ -383,7 +356,7 @@ class SlotMachine {
383356
* @param string FX_SPEED - Element speed [FX_FAST_BLUR||FX_NORMAL_BLUR||FX_SLOW_BLUR||FX_STOP]
384357
*/
385358
set _fxClass (FX_SPEED) {
386-
const classes = [FX_FAST, FX_NORMAL, FX_SLOW].join(' ');
359+
const classes = [FX_FAST, FX_NORMAL, FX_SLOW, FX_TURTLE].join(' ');
387360

388361
this.$tiles
389362
.add(this._$fakeFirstTile)
@@ -566,7 +539,7 @@ class SlotMachine {
566539
case 1:
567540
delay /= 0.5;
568541
this._transition = 'ease-out';
569-
this._animationFX = FX_SLOW;
542+
this._animationFX = FX_TURTLE;
570543
break;
571544
case 2:
572545
delay /= 0.75;
@@ -610,7 +583,7 @@ class SlotMachine {
610583
const delay = this.getDelayFromSpins(spins);
611584
this.delay = delay;
612585
this._animate(this.direction.to);
613-
this.raf(function cb () {
586+
this.raf(() => {
614587
if (!this.stopping && this.running) {
615588
this.resetPosition(this.direction.first);
616589

@@ -621,7 +594,7 @@ class SlotMachine {
621594
this.shuffle(spins - 1);
622595
}
623596
}
624-
}.bind(this), delay);
597+
}, delay);
625598
}
626599

627600
return this.futureActive;
@@ -632,16 +605,12 @@ class SlotMachine {
632605
* @return {Number} - Returns result index
633606
*/
634607
stop () {
635-
if (!this.running) {
636-
return;
637-
} else if (this.stopping) {
608+
if (!this.running || this.stopping) {
638609
return this.futureActive;
639610
}
640611

641612
this.running = true;
642613
this.stopping = true;
643-
// Set current active element
644-
this.active = this.visibleTile;
645614

646615
if (this.futureActive === null) {
647616
// Get random or custom element
@@ -661,11 +630,11 @@ class SlotMachine {
661630
this.active = this.futureActive;
662631

663632
// Perform animation
664-
const delay = this.getDelayFromSpins(1) * this.active / (this.$tiles.length - 1);
633+
const delay = this.getDelayFromSpins(1);
665634
this.delay = delay;
666635
this._animationFX = FX_STOP;
667636
this._animate(this.getTileOffset(this.active));
668-
this.raf(function cb () {
637+
this.raf(() => {
669638
this.stopping = false;
670639
this.running = false;
671640
this.slide = false;
@@ -674,7 +643,7 @@ class SlotMachine {
674643
this._oncompleteStack.filter((fn) => typeof fn === 'function').forEach((fn) => {
675644
fn.apply(this, [this.active]);
676645
});
677-
}.bind(this), delay);
646+
}, delay);
678647

679648
return this.active;
680649
}
@@ -684,20 +653,16 @@ class SlotMachine {
684653
*/
685654
auto () {
686655
if (!this.running) {
687-
this._timer = new Timer(function cb () {
656+
this._timer = new Timer(() => {
688657
if (typeof this.settings.randomize !== 'function') {
689-
this.futureActive = this.next;
658+
this.settings.randomize = () => this._nextIndex;
690659
}
691660
if (!this.visible && this.settings.stopHidden === true) {
692-
this.raf(function cb2 () {
693-
this._timer.reset();
694-
}.bind(this), 500);
661+
this.raf(this._timer.reset.bind(this._timer), 500);
695662
} else {
696-
this.shuffle(this.settings.spins, function cb2() {
697-
this._timer.reset();
698-
}.bind(this));
663+
this.shuffle(this.settings.spins, this._timer.reset.bind(this._timer));
699664
}
700-
}.bind(this), this.settings.auto);
665+
}, this.settings.auto);
701666
}
702667
}
703668

@@ -735,7 +700,7 @@ $.fn[pluginName] = function initPlugin(options) {
735700
instances = _getInstance(this, options);
736701
} else {
737702
const $els = this;
738-
instances = $.map($els, function mapValue(el, index) {
703+
instances = $.map($els, (el, index) => {
739704
const $el = $els.eq(index);
740705
return _getInstance($el, options);
741706
});

0 commit comments

Comments
 (0)