Slotmachine

Aus ProgrammingWiki

Archivierte Version vom 2021-12-04T16:08:23+00:00. Aktuelle Version

var parts1 = [
 "Twitter ist", 
 "Digitalisierung ist", 
 "Ein interaktives Smartboard ist", 
 "Web 2.0 ist", 
 "Snapchat ist", 
 "StudiVZ war", 
 "Die Maker-Bewegung ist", 
 "Partizipation ist", 
 "Die Vermittlung von Medienkompetenz ist", 
 "Podcasten ist", 
 "Glasfaser ist", 
 "Politische Bildung ist", 
 "Virtuelle Realität ist", 
 "Das Schulbuch war", 
 "WLAN ist", 
 "Wikipedia ist", 
 "Das Buch war", 
 "Lernen 4.0 ist", 
 "Die Unklarheit ist", 
 "Die Handschrift war", 
 "Der Leitmedienwechsel ist ", 
 "Schule ist", 
 "BTX war", 
 "Der MOOC ist", 
 "Eine offene Bildungsressource (OER) ist", 
 "Das Erlernen einer Programmiersprache ist", 
 "Die Hochschule ist", 
 "Die Volkshochschule ist", 
 "Jede Fortbildung ist", 
 "Facebook ist", 
 "Die Trennung von Analog und Digital ist", 
 "Medienbildung ist", 
 "Die Erfindung des Internets ist", 
 "Ein Handyverbot ist", 
 "Der Füller ist", 
 "Kuchen ist", 
 "Das Ausdrucken des Internets ist", 
 "Der 3D-Druck ist", 
 "Das Schicksal von Lehrenden ist", 
 "Eine Konsortin ist", 
 "Multitasking ist", 
 "Die Karriere als Hochschullehrer/in ist", 
 "Die Einführung der Sprache war", 
 "EduCamp als alternatives Tagungsformat ist", 
 "BYOD ist", 
 "Das dreigliedrige Schulsystem ist", 
 "Die falsche Verwendung von Satzzeichen ist", 
 "Digitale Kompetenz ist", 
 "Google Docs ist", 
 "Jan Böhmermann ist", 
 "Ein Einhorn ist", 
 "Lehrerfortbildung ist" 
];

var parts2 = [
 "seit Erfindung des Buchdrucks", 
 "mitnichten", 
 "in gewisser Hinsicht", 
 "am Ende des Tages", 
 "quasi", 
 "sicherlich", 
 "bei aller Liebe", 
 "gerade für die Skeptiker", 
 "unleugbar", 
 "auch für Hartgesottene", 
 "streng genommen", 
 "menschlich gesehen", 
 "selten", 
 "für besorgte Bürger", 
 "in anderen Kulturkreisen", 
 "ohne Übertreibung", 
 "im Zuge der Globalisierung", 
 "niemals", 
 "schon lange nicht mehr", 
 "völlig nüchtern betrachtet", 
 "heutzutage", 
 "bei Lichte gesehen", 
 "konsequent eingesetzt", 
 "wider Erwarten", 
 "leider", 
 "kultur-pessimistisch betrachtet", 
 "kafkaesk gesehen", 
 "rückblickend", 
 "absolut", 
 "mit Erkenntnissen der Hirnforschung", 
 "ganz objektiv", 
 "erwiesenermaßen", 
 "praktisch", 
 "durch die Blume gesagt", 
 "unter Drogeneinfluss", 
 "irgendwie", 
 "primär", 
 "in Zukunft", 
 "in Wahrheit", 
 "allenfalls", 
 "gelinde gesagt", 
 "stückweise", 
 "genau genommen", 
 "an und für sich", 
 "traurigerweise", 
 "theoretisch", 
 "unter Umständen", 
 "aus unserer Perspektive", 
 "selbst betrunken gesehen", 
 "sozusagen", 
 "zum Glück", 
 "schließlich"
 ];
 
var parts3 = [ 
 "die größte Innovation", 
 "der größte Feind", 
 "eine Disruption", 
 "ein kleines Hindernis", 
 "eine Einladung", 
 "ein Albtraum", 
 "eine Seifenoper", 
 "das Problem", 
 "eine Voraussetzung", 
 "das Sahnehäubchen", 
 "der Untergang", 
 "eine Chance", 
 "ein gutes Beispiel", 
 "ein pädagogischer Mehrwert", 
 "das neue Latein", 
 "eine Herausforderung", 
 "ein Meisterwerk", 
 "eine Verschwörungstheorie", 
 "ein Risiko", 
 "der Katalysator", 
 "die Antwort", 
 "der Anfang vom Ende", 
 "nicht das Gelbe vom Ei", 
 "eine Offenbarung", 
 "die Lösung", 
 "die langweiligste Erfindung", 
 "ein Siebenmeilenstiefel", 
 "ein Quantensprung", 
 "ein Treiber", 
 "ein Mahnmal", 
 "nur ein Hype", 
 "der verlängerte Arm", 
 "ein Schwert", 
 "ohne jeglichen Einfluss", 
 "die späte Rache", 
 "eine Schlüsselqualifikation", 
 "die Grundvoraussetzung", 
 "ein Denkmal", 
 "der Sprengstoff", 
 "das KO-Kriterium", 
 "eine Modeerscheinung", 
 "ein Dogma", 
 "nur optional", 
 "ein grausiges Schicksal", 
 "das neue \"42\"", 
 "ein Vorbild", 
 "ein Schulfach", 
 "auch nur ein Indiz", 
 "eine methodische Glanzleistung", 
 "der Beweis", 
 "nicht folgenlos", 
 "ein Deckname"
 ];
 
var parts4 = [
  "für die Universität.", 
 "für die Erwachsenenbildung.", 
 "im gesamten Bildungswesen.", 
 "für das lebenslange Lernen.", 
 "für die Didaktik.", 
 "im digitalen Entwicklungsland.", 
 "und nicht die Lösung.", 
 "für den Erfolg.", 
 "für das Abitur.", 
 "für das Leben, das Universum und den ganzen Rest.", 
 "für die Didaktik.", 
 "für Frontalunterricht.", 
 "für jede Promotion.", 
 "in der Informationsgesellschaft.", 
 "für die Rolle der Lehrperson.", 
 "auf der Datenautobahn.", 
 "für den Hochschulzugang.", 
 "für das Volk.", 
 "für den Waldbestand Deutschlands.", 
 "für alles.", 
 "für kleine niedliche Katzen.", 
 "für Silver Surfer.", 
 "für digitale Selbstverteidigung.", 
 "für Bildungsferne.", 
 "für reaktionäre Kräfte.", 
 "für Zugreisende.", 
 "für das Hier und Jetzt.", 
 "für die Bildungspolitik.", 
 "für Pokémon GO.", 
 "für den Datenschutz.", 
 "für Digital Natives.", 
 "im deutschsprachigen Europa.", 
 "für Smartphone-Besitzer.", 
 "für das Bildungsverständnis.", 
 "für knapp die halbe Menschheit.", 
 "der Vergangenheit.", 
 "für digitale Demenz.", 
 "auf der Agenda der Schulrektoren.", 
 "im Korrekturmodus.", 
 "für Inklusion.", 
 "für Beschäftigungstherapie.", 
 "für ungenaues Projektmanagement.", 
 "für Hatespeech.", 
 "für die Öffentlichkeit.", 
 "für Open Science.", 
 "für Open Data.", 
 "für die Aus- und Weiterbildung.", 
 "für die Bildungsgesellschaft.",
 "für die Zukunft.", 
 "für das Studium.", 
 "für jeden Pädagogen.", 
 "für Lernmanagementsysteme."
 ];

<html> <style> .slotMachineNoTransition { -webkit-transition: none !important; transition: none !important; } .slotMachineBlurFast { -webkit-filter: blur(5px); filter: blur(5px); } .slotMachineBlurMedium { -webkit-filter: blur(3px); filter: blur(3px); } .slotMachineBlurSlow { -webkit-filter: blur(2px); filter: blur(2px); } .slotMachineBlurTurtle { -webkit-filter: blur(1px); filter: blur(1px); } .slotMachineGradient { -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)) ); -webkit-mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask"); mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask"); } /* * Casino */ #casino h1{ width: 100%; font-size: 40px; } #casino { border-top: 20px dotted rgb(180, 75, 119); background-color: rgb(240, 150, 150); } #casino .content:nth-child(1) { text-align: center; background: url('https://programmingwiki.de/images/machine.png') no-repeat 50% 45px; height: 580px; } #casino .content > div { clear:both; padding-top: 168px; width: 700px; margin: 0 auto; } .machineContainer{ background-color: #000; padding: 5px 1px 5px 1px; overflow: hidden; height: 135px; } .slotMachine{ width: 24%; border: 2px solid #000; height: 100px; padding: 0px; overflow: hidden; display: inline-block; text-align: center; background-color: #ffffff; cursor:pointer; box-sizing: border-box; } .btn-group-casino { margin-top: 150px; } .btn-group-casino .btn { border: none; background-color: rgb(209, 79, 119); } .btn-group-casino .btn:hover, .btn-group-casino .btn:focus { background-color: rgb(180, 75, 119); } .machineResult{ color:#fff; text-align:center; font-weight: 900; } .noBorder{ border:none !important; background: transparent !important; } .slotMachine .slot{ height:100px; width:100%; background-position-x: 55%; display:table; background-repeat: no-repeat; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } .slotMachine .slot .inner{ display:table-cell; vertical-align:middle; text-align:center; font-size:18px; padding:4px; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } @keyframes blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2;} } .handle { background:#333; border-radius:20px; transition-property: height, border-radius,bottom; transition-duration: 0.2s; transition-timing-function: linear; position:absolute !important; margin-top:0px; bottom:0px; } .handle.clicked { height:60px !important; bottom:-50px; } .bullet { position:absolute; top:135px; border-radius:100px; width:26px; height:26px; background:rgb(238, 78, 115); animation-name: blink; animation-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: both; box-shadow:0px -2px 5px rgba(0,0,0,0.2),0px 0px 5px rgb(238, 78, 115); } .bullet:nth-child(2) { animation-delay: .1s; } .bullet:nth-child(3) { animation-delay: .2s; } .bullet:nth-child(4) { animation-delay: .3s; } .bullet:nth-child(5) { animation-delay: .4s; } .bullet:nth-child(6) { animation-delay: .5s; } .bullet:nth-child(7) { animation-delay: .6s; } .bullet:nth-child(8) { animation-delay: .7s; } .bullet:nth-child(9) { animation-delay: .8s; } .bullet:nth-child(10) { animation-delay: .9s; } .bullet:nth-child(11) { animation-delay: 1.0s; } .bullet:nth-child(12) { animation-delay: 1.1s; } .bullet:nth-child(13) { animation-delay: 1.2s; } .bullet:nth-child(14) { animation-delay: 1.3s; } .bullet:nth-child(15) { animation-delay: 1.4s; } .bullet:nth-child(16) { animation-delay: 1.5s; } .bullet:nth-child(17) { animation-delay: 1.6s; } .bullet:nth-child(18) { animation-delay: 1.7s; } </style> <div id="casino" style="padding-top:10px;"><div class="content"> <div style="position:relative"> <div style="width: 46px; height: 152px; position: absolute; right: -120px; top: 60px; cursor:pointer" id="handleBtn"><div style="width:100%;height:100%" class="handle sparkle"></div></div> <div class="bullet" style="left:50px"></div> <div class="bullet" style="left:86px"></div> <div class="bullet" style="left:122px"></div> <div class="bullet" style="left:158px"></div> <div class="bullet" style="left:194px"></div> <div class="bullet" style="left:230px"></div> <div class="bullet" style="left:267px"></div> <div class="bullet" style="left:303px"></div> <div class="bullet" style="left:339px"></div> <div class="bullet" style="left:375px"></div> <div class="bullet" style="left:411px"></div> <div class="bullet" style="left:447px"></div> <div class="bullet" style="left:484px"></div> <div class="bullet" style="left:520px"></div> <div class="bullet" style="left:556px"></div> <div class="bullet" style="left:592px"></div> <div class="bullet" style="left:629px"></div> <div id="spinners" style="margin-top: 55px;"> <div id="casino1" class="slotMachine"></div> <div id="casino2" class="slotMachine"></div> <div id="casino3" class="slotMachine"></div> <div id="casino4" class="slotMachine"></div> </div> </div> </div></div> <script> /*! SlotMachine - v3.0.1 - 2016-03-03 * https://github.com/josex2r/jQuery-SlotMachine * Copyright (c) 2016 Jose Luis Represa; Licensed MIT */ 'use strict'; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } (function init($, window, document, undefined) { var pluginName = 'slotMachine', defaults = { active: 0, delay: 200, auto: false, spins: 5, randomize: null, complete: null, stopHidden: true, direction: 'up' }, FX_NO_TRANSITION = 'slotMachineNoTransition', FX_FAST = 'slotMachineBlurFast', FX_NORMAL = 'slotMachineBlurMedium', FX_SLOW = 'slotMachineBlurSlow', FX_TURTLE = 'slotMachineBlurTurtle', FX_GRADIENT = 'slotMachineGradient', FX_STOP = FX_GRADIENT; var Timer = (function () { function Timer(cb, delay) { _classCallCheck(this, Timer); this.cb = cb; this.initialDelay = delay; this.delay = delay; this.deferred = jQuery.Deferred(); this.startTime = null; this.timer = null; this.running = false; this.resume(); return this; } _createClass(Timer, [{ key: '_start', value: function _start() { this.timer = setTimeout((function cb() { this.cb.call(this); }).bind(this), this.delay); } }, { key: 'cancel', value: function cancel() { this.running = false; clearTimeout(this.timer); } }, { key: 'pause', value: function pause() { if (this.running) { this.delay -= new Date().getTime() - this.startTime; this.cancel(); } } }, { key: 'resume', value: function resume() { if (!this.running) { this.running = true; this.startTime = new Date().getTime(); this._start(); } } }, { key: 'reset', value: function reset() { this.cancel(); this.delay = this.initialDelay; this._start(); } }, { key: 'add', value: function add(extraDelay) { this.pause(); this.delay += extraDelay; this.resume(); } }]); return Timer; })(); var SlotMachine = (function () { function SlotMachine(element, options) { _classCallCheck(this, SlotMachine); this.element = element; this.settings = $.extend({}, defaults, options); this.defaults = defaults; this.name = pluginName; this.$slot = $(element); this.$tiles = this.$slot.children(); this.$container = null; this._minTop = null; this._maxTop = null; this._$fakeFirstTile = null; this._$fakeLastTile = null; this._timer = null; this._spinsLeft = null; this.futureActive = null; this.running = false; this.stopping = false; this.active = this.settings.active; this.$slot.css('overflow', 'hidden'); this.$container = this.$tiles.wrapAll('<div class="slotMachineContainer" />').parent(); this.$container.css('transition', '1s ease-in-out'); this._maxTop = -this.$container.height(); this._initFakeTiles(); this._minTop = -this._$fakeFirstTile.outerHeight(); this._initDirection(); this.resetPosition(); if (this.settings.auto !== false) { if (this.settings.auto === true) { this.shuffle(); } else { this.auto(); } } } _createClass(SlotMachine, [{ key: '_initFakeTiles', value: function _initFakeTiles() { this._$fakeFirstTile = this.$tiles.last().clone(); this._$fakeLastTile = this.$tiles.first().clone(); this.$container.prepend(this._$fakeFirstTile); this.$container.append(this._$fakeLastTile); } }, { key: '_initDirection', value: function _initDirection() { this._direction = { selected: this.settings.direction === 'down' ? 'down' : 'up', up: { key: 'up', initial: this.getTileOffset(this.active), first: 0, last: this.getTileOffset(this.$tiles.length), to: this._maxTop, firstToLast: this.getTileOffset(this.$tiles.length), lastToFirst: 0 }, down: { key: 'down', initial: this.getTileOffset(this.active), first: this.getTileOffset(this.$tiles.length), last: 0, to: this._minTop, firstToLast: this.getTileOffset(this.$tiles.length), lastToFirst: 0 } }; } }, { key: '_changeTransition', value: function _changeTransition() { var delay = this._delay || this.settings.delay, transition = this._transition || this.settings.transition; this.$container.css('transition', delay + 's ' + transition); } }, { key: '_animate', value: function _animate(margin) { this.$container.css('transform', 'matrix(1, 0, 0, 1, 0, ' + margin + ')'); } }, { key: '_isGoingBackward', value: function _isGoingBackward() { return this.futureActive > this.active && this.active === 0 && this.futureActive === this.$tiles.length - 1; } }, { key: '_isGoingForward', value: function _isGoingForward() { return this.futureActive <= this.active && this.active === this.$tiles.length - 1 && this.futureActive === 0; } }, { key: 'raf', value: function raf(cb, timeout) { var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, startTime = new Date().getTime(), _rafHandler = function _rafHandler() { var drawStart = new Date().getTime(), diff = drawStart - startTime; if (diff < timeout) { _raf(_rafHandler); } else if (typeof cb === 'function') { cb(); } }; _raf(_rafHandler); } }, { key: 'getTileOffset', value: function getTileOffset(index) { var offset = 0; for (var i = 0; i < index; i++) { offset += this.$tiles.eq(i).outerHeight(); } return this._minTop - offset; } }, { key: 'resetPosition', value: function resetPosition(margin) { this.$container.toggleClass(FX_NO_TRANSITION); this._animate(margin === undefined ? this.direction.initial : margin); this.$container[0].offsetHeight; this.$container.toggleClass(FX_NO_TRANSITION); } }, { key: 'setRandomize', value: function setRandomize(rnd) { this.settings.randomize = rnd; if (typeof rnd === 'number') { this.settings.randomize = function () { return rnd; }; } } }, { key: 'prev', value: function prev() { this.futureActive = this.prevIndex; this.running = true; this.stop(); return this.futureActive; } }, { key: 'next', value: function next() { this.futureActive = this.nextIndex; this.running = true; this.stop(); return this.futureActive; } }, { key: 'getDelayFromSpins', value: function getDelayFromSpins(spins) { var delay = this.settings.delay; this._transition = 'linear'; switch (spins) { case 1: delay /= 0.5; this._transition = 'ease-out'; this._animationFX = FX_TURTLE; break; case 2: delay /= 0.75; this._animationFX = FX_SLOW; break; case 3: delay /= 1; this._animationFX = FX_NORMAL; break; case 4: delay /= 1.25; this._animationFX = FX_NORMAL; break; default: delay /= 1.5; this._animationFX = FX_FAST; } return delay; } }, { key: 'shuffle', value: function shuffle(spins, onComplete) { var _this = this; if (typeof spins === 'function') { onComplete = spins; } this.running = true; if (!this.visible && this.settings.stopHidden === true) { this.stop(onComplete); } else { var delay = this.getDelayFromSpins(spins); this.delay = delay; this._animate(this.direction.to); this.raf(function () { if (!_this.stopping && _this.running) { var left = spins - 1; _this.resetPosition(_this.direction.first); if (left <= 1) { _this.stop(onComplete); } else { _this.shuffle(left, onComplete); } } }, delay); } return this.futureActive; } }, { key: 'stop', value: function stop(onStop) { var _this2 = this; if (!this.running || this.stopping) { return this.futureActive; } this.running = true; this.stopping = true; if (this.futureActive === null) { this.futureActive = this.custom; } if (this._isGoingBackward()) { this.resetPosition(this.direction.firstToLast); } else if (this._isGoingForward()) { this.resetPosition(this.direction.lastToFirst); } this.active = this.futureActive; var delay = this.getDelayFromSpins(1); this.delay = delay; this._animationFX = FX_STOP; this._animate(this.getTileOffset(this.active)); this.raf(function () { _this2.stopping = false; _this2.running = false; _this2.futureActive = null; if (typeof _this2.settings.complete === 'function') { _this2.settings.complete.apply(_this2, [_this2.active]); } if (typeof onStop === 'function') { onStop.apply(_this2, [_this2.active]); } }, delay); return this.active; } }, { key: 'auto', value: function auto() { var _this3 = this; if (!this.running) { this._timer = new Timer(function () { if (typeof _this3.settings.randomize !== 'function') { _this3.settings.randomize = function () { return _this3._nextIndex; }; } if (!_this3.visible && _this3.settings.stopHidden === true) { _this3.raf(_this3._timer.reset.bind(_this3._timer), 500); } else { _this3.shuffle(_this3.settings.spins, _this3._timer.reset.bind(_this3._timer)); } }, this.settings.auto); } } }, { key: 'destroy', value: function destroy() { this._$fakeFirstTile.remove(); this._$fakeLastTile.remove(); this.$tiles.unwrap(); $.data(this.element[0], 'plugin_' + pluginName, null); } }, { key: 'active', get: function get() { return this._active; }, set: function set(index) { this._active = index; if (index < 0 || index >= this.$tiles.length) { this._active = 0; } } }, { key: 'visibleTile', get: function get() { var firstTileHeight = this.$tiles.first().height(), rawContainerMargin = this.$container.css('transform'), matrixRegExp = /^matrix$-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?(-?\d+)$$/, containerMargin = parseInt(rawContainerMargin.replace(matrixRegExp, '$1'), 10); return Math.abs(Math.round(containerMargin / firstTileHeight)) - 1; } }, { key: 'random', get: function get() { return Math.floor(Math.random() * this.$tiles.length); } }, { key: 'custom', get: function get() { var choosen = void 0; if (typeof this.settings.randomize === 'function') { var index = this.settings.randomize.call(this, this.active); if (index < 0 || index >= this.$tiles.length) { index = 0; } choosen = index; } else { choosen = this.random; } return choosen; } }, { key: 'direction', get: function get() { return this._direction[this._direction.selected]; }, set: function set(direction) { if (!this.running) { this.direction = direction === 'down' ? 'down' : 'up'; } } }, { key: '_prevIndex', get: function get() { var prevIndex = this.active - 1; return prevIndex < 0 ? this.$tiles.length - 1 : prevIndex; } }, { key: '_nextIndex', get: function get() { var nextIndex = this.active + 1; return nextIndex < this.$tiles.length ? nextIndex : 0; } }, { key: 'prevIndex', get: function get() { return this.direction === 'up' ? this._nextIndex : this._prevIndex; } }, { key: 'nextIndex', get: function get() { return this.direction === 'up' ? this._prevIndex : this._nextIndex; } }, { key: 'visible', get: function get() { var $window = $(window), above = this.$slot.offset().top > $window.scrollTop() + $window.height(), below = $window.scrollTop() > this.$slot.height() + this.$slot.offset().top; return !above && !below; } }, { key: '_fxClass', set: function set(FX_SPEED) { var classes = [FX_FAST, FX_NORMAL, FX_SLOW, FX_TURTLE].join(' '); this.$tiles.add(this._$fakeFirstTile).add(this._$fakeLastTile).removeClass(classes).addClass(FX_SPEED); } }, { key: '_animationFX', set: function set(FX_SPEED) { var delay = this.settings.delay / 4, $elements = this.$slot.add(this.$tiles).add(this._$fakeFirstTile).add(this._$fakeLastTile); this.raf((function cb() { this._fxClass = FX_SPEED; if (FX_SPEED === FX_STOP) { $elements.removeClass(FX_GRADIENT); } else { $elements.addClass(FX_GRADIENT); } }).bind(this), delay); } }, { key: 'delay', set: function set(delay) { delay = delay / 1000; this._delay = delay; this._changeTransition(); } }, { key: 'transition', set: function set(transition) { transition = transition || 'ease-in-out'; this._transition = transition; this._changeTransition(); } }]); return SlotMachine; })(); function _getInstance(element, options) { var machine = void 0; if (!$.data(element[0], 'plugin_' + pluginName)) { machine = new SlotMachine(element, options); $.data(element[0], 'plugin_' + pluginName, machine); } else { machine = $.data(element[0], 'plugin_' + pluginName); } return machine; } $.fn[pluginName] = function initPlugin(options) { var _this4 = this; var instances = void 0; if (this.length === 1) { instances = _getInstance(this, options); } else { (function () { var $els = _this4; instances = $.map($els, function (el, index) { var $el = $els.eq(index); return _getInstance($el, options); }); })(); } return instances; }; })(jQuery, window, document); var target1 = -1; var target2 = -1; var target3 = -1; var target4 = -1; function getNextRandom(i){ var r = 0; if(i == 0) { r = Math.floor(Math.random()*parts1.length); if(target1 != -1) r = target1; } if(i == 1) { r = Math.floor(Math.random()*parts2.length); if(target2 != -1) r = target2; } if(i == 2) { r = Math.floor(Math.random()*parts3.length); if(target3 != -1) r = target3; } if(i == 3) { r = Math.floor(Math.random()*parts4.length); if(target4 != -1) r = target4; } return parseInt(r); }; function getNextRandom1(){ return getNextRandom(0); } function getNextRandom2(){ return getNextRandom(1); } function getNextRandom3(){ return getNextRandom(2); } function getNextRandom4(){ return getNextRandom(3); } var waitForStop = false; function newShuffle(w){ if(waitForStop) return; $(".handle").addClass("clicked"); setTimeout(function(){$(".handle").removeClass("clicked");},1000); target1 = -1; target2 = -1; target3 = -1; target4 = -1; if(w == 0 || w == 1) machine1.shuffle(); if(w == 0 || w == 2) machine2.shuffle(); if(w == 0 || w == 3) machine3.shuffle(); if(w == 0 || w == 4) machine4.shuffle(); waitForStop = true; setTimeout(function(){ machine1.stop(); machine2.stop(); machine3.stop(); machine4.stop(); // define the perma link number for the given sentence var link = '#'+( (machine1.active*parts2.length*parts3.length*parts4.length) + (machine2.active*parts3.length*parts4.length) + (machine3.active*parts4.length) + (machine4.active) ); if(history.pushState) { history.pushState(null, null, link); } else { location.hash = link; } foundHash = link; setTimeout(function(){ waitForStop = false; },1000); },500); } $("#slotMachineButtonShuffle").click(function(){start(); newShuffle (0);}); $("#handleBtn").click(function(){ start(); newShuffle (0); }); function start(){ $('#spinners').html('<div id="casino1" class="slotMachine"></div><div id="casino2" class="slotMachine"></div><div id="casino3" class="slotMachine"></div><div id="casino4" class="slotMachine"></div>'); for(var i=0; i < parts1.length; i++) $('#casino1').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+parts1[i]+'</div></div>'); for(var i=0; i < parts2.length; i++) $('#casino2').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+parts2[i]+'</div></div>'); for(var i=0; i < parts3.length; i++) $('#casino3').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+parts3[i]+'</div></div>'); for(var i=0; i < parts4.length; i++) $('#casino4').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+parts4[i]+'</div></div>'); var machine1 = $("#casino1").slotMachine({ active : 0, delay : 300, randomize : getNextRandom1 }); var machine2 = $("#casino2").slotMachine({ active : 0, delay : 300, randomize : getNextRandom2 }); var machine3 = $("#casino3").slotMachine({ active : 0, delay : 300, randomize : getNextRandom3 }); var machine4 = $("#casino4").slotMachine({ active : 0, delay : 300, randomize : getNextRandom4 }); $("#casino1").on("click",function(){ newShuffle(1); }); $("#casino2").on("click",function(){ newShuffle(2); }); $("#casino3").on("click",function(){ newShuffle(3); }); $("#casino4").on("click",function(){ newShuffle(4); }); } </script> </html>

Slotmachine

Suche