From 224cc9ff9e0a19e18dffe56dada0fed4230b604a Mon Sep 17 00:00:00 2001 From: Plouzennec Benjamin Date: Thu, 15 Feb 2018 14:35:16 +0100 Subject: [PATCH] FIX: :lipstick: some style + built file --- demo/example.js | 2 +- demo/rythm.css | 5 +- rythm.js | 1117 ++++++++++++++++++++++------------------------- 3 files changed, 528 insertions(+), 596 deletions(-) diff --git a/demo/example.js b/demo/example.js index ab730dc..2f0ca12 100644 --- a/demo/example.js +++ b/demo/example.js @@ -52,7 +52,7 @@ window.onload = function() { to: [255, 0, 0], }) rythm.addRythm('borderWidth1', 'borderWidth', 0, 2) - rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, { min: 2, max: 10 }) + rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, { min: 2, max: 9 }) rythm.addRythm('radius1', 'radius', 0, 10, { min: 0, max: 30 }) rythm.addRythm('radius2', 'radius', 0, 10, { reverse: true, min: 0, max: 30 }) rythm.addRythm('blur1', 'blur', 0, 10) diff --git a/demo/rythm.css b/demo/rythm.css index f15d873..ac332c9 100644 --- a/demo/rythm.css +++ b/demo/rythm.css @@ -241,8 +241,9 @@ section:last-child { .borderWidth1, .borderWidth2 { - min-width: 15px; - min-height: 15px; + min-width: 20px; + min-height: 20px; + border-radius: 2px; } /* Pretty printing styles. Used with prettify.js. */ diff --git a/rythm.js b/rythm.js index 3a76097..9feb31e 100644 --- a/rythm.js +++ b/rythm.js @@ -1,626 +1,557 @@ -;(function(global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' - ? (module.exports = factory()) - : typeof define === 'function' && define.amd - ? define(factory) - : (global.Rythm = factory()) -})(this, function() { - 'use strict' - - var classCallCheck = function(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError('Cannot call a class as a function') - } +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.Rythm = factory()); +}(this, (function () { 'use strict'; + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); } +}; - 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) - } +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 - } - })() - - var Analyser = function Analyser() { - var _this = this - - classCallCheck(this, Analyser) - - this.initialise = function(analyser) { - _this.analyser = analyser - _this.analyser.fftSize = 2048 - } - - this.reset = function() { - _this.hzHistory = [] - _this.frequences = new Uint8Array(_this.analyser.frequencyBinCount) - } - - this.analyse = function() { - _this.analyser.getByteFrequencyData(_this.frequences) - for (var i = 0; i < _this.frequences.length; i++) { - if (!_this.hzHistory[i]) { - _this.hzHistory[i] = [] - } - if (_this.hzHistory[i].length > _this.maxValueHistory) { - _this.hzHistory[i].shift() - } - _this.hzHistory[i].push(_this.frequences[i]) - } - } - - this.getRangeAverageRatio = function(startingValue, nbValue) { - var total = 0 - for (var i = startingValue; i < nbValue + startingValue; i++) { - total += _this.getFrequenceRatio(i) - } - return total / nbValue - } - - this.getFrequenceRatio = function(index) { - var min = 255 - var max = 0 - _this.hzHistory[index].forEach(function(value) { - if (value < min) { - min = value - } - if (value > max) { - max = value - } - }) - var scale = max - min - var actualValue = _this.frequences[index] - min - var percentage = scale === 0 ? 0 : actualValue / scale - return _this.startingScale + _this.pulseRatio * percentage - } - - this.startingScale = 0 - this.pulseRatio = 1 - this.maxValueHistory = 100 - this.hzHistory = [] } - var Analyser$1 = new Analyser() - - var Player = function Player(forceAudioContext) { - var _this = this - - classCallCheck(this, Player) - - this.createSourceFromAudioElement = function(audioElement) { - audioElement.setAttribute( - 'rythm-connected', - _this.connectedSources.length - ) - var source = _this.audioCtx.createMediaElementSource(audioElement) - _this.connectedSources.push(source) - return source - } - - this.connectExternalAudioElement = function(audioElement) { - _this.audio = audioElement - _this.currentInputType = _this.inputTypeList['EXTERNAL'] - var connectedIndex = audioElement.getAttribute('rythm-connected') - if (!connectedIndex) { - _this.source = _this.createSourceFromAudioElement(_this.audio) - } else { - _this.source = _this.connectedSources[connectedIndex] + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + +var Analyser = function Analyser() { + var _this = this; + + classCallCheck(this, Analyser); + + this.initialise = function (analyser) { + _this.analyser = analyser; + _this.analyser.fftSize = 2048; + }; + + this.reset = function () { + _this.hzHistory = []; + _this.frequences = new Uint8Array(_this.analyser.frequencyBinCount); + }; + + this.analyse = function () { + _this.analyser.getByteFrequencyData(_this.frequences); + for (var i = 0; i < _this.frequences.length; i++) { + if (!_this.hzHistory[i]) { + _this.hzHistory[i] = []; } - _this.connectSource(_this.source) - } - - this.connectSource = function(source) { - source.connect(_this.gain) - _this.gain.connect(Analyser$1.analyser) - if (_this.currentInputType !== _this.inputTypeList['STREAM']) { - Analyser$1.analyser.connect(_this.audioCtx.destination) - _this.audio.addEventListener('ended', _this.stop) - } else { - Analyser$1.analyser.disconnect() + if (_this.hzHistory[i].length > _this.maxValueHistory) { + _this.hzHistory[i].shift(); } + _this.hzHistory[i].push(_this.frequences[i]); } + }; - this.setMusic = function(trackUrl) { - _this.audio = new Audio(trackUrl) - _this.currentInputType = _this.inputTypeList['TRACK'] - _this.source = _this.createSourceFromAudioElement(_this.audio) - _this.connectSource(_this.source) - } - - this.setGain = function(value) { - _this.gain.gain.value = value - } - - this.plugMicrophone = function() { - return _this.getMicrophoneStream().then(function(stream) { - _this.audio = stream - _this.currentInputType = _this.inputTypeList['STREAM'] - _this.source = _this.audioCtx.createMediaStreamSource(stream) - _this.connectSource(_this.source) - }) - } - - this.getMicrophoneStream = function() { - navigator.getUserMedia = - navigator.getUserMedia || - navigator.webkitGetUserMedia || - navigator.mozGetUserMedia || - navigator.msGetUserMedia - return new Promise(function(resolve, reject) { - navigator.getUserMedia( - { audio: true }, - function(medias) { - return resolve(medias) - }, - function(error) { - return reject(error) - } - ) - }) + this.getRangeAverageRatio = function (startingValue, nbValue) { + var total = 0; + for (var i = startingValue; i < nbValue + startingValue; i++) { + total += _this.getFrequenceRatio(i); } + return total / nbValue; + }; - this.start = function() { - if (_this.currentInputType === _this.inputTypeList['TRACK']) { - _this.audio.play() + this.getFrequenceRatio = function (index) { + var min = 255; + var max = 0; + _this.hzHistory[index].forEach(function (value) { + if (value < min) { + min = value; } - } - - this.stop = function() { - if (_this.currentInputType === _this.inputTypeList['TRACK']) { - _this.audio.pause() - } else if (_this.currentInputType === _this.inputTypeList['STREAM']) { - _this.audio.getAudioTracks()[0].enabled = false + if (value > max) { + max = value; } - } - - this.browserAudioCtx = window.AudioContext || window.webkitAudioContext - this.audioCtx = forceAudioContext || new this.browserAudioCtx() - this.connectedSources = [] - Analyser$1.initialise(this.audioCtx.createAnalyser()) - this.gain = this.audioCtx.createGain() - this.source = {} - this.audio = {} - this.hzHistory = [] - this.inputTypeList = { - TRACK: 0, - STREAM: 1, - EXTERNAL: 2, - } - } - - var pulse = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 1.25 - var min = !isNaN(options.min) ? options.min : 0.75 - var scale = (max - min) * value - elem.style.transform = 'scale(' + (min + scale) + ') translateZ(0)' - } - - var reset = function reset(elem) { - elem.style.transform = '' - } - - var shake = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 15 - var min = !isNaN(options.min) ? options.min : -15 - if (options.direction === 'left') { - max = -max - min = -min - } - var twist = (max - min) * value - elem.style.transform = 'translate3d(' + (min + twist) + 'px, 0, 0)' - } - - var reset$1 = function reset(elem) { - elem.style.transform = '' - } - - var jump = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 30 - var min = !isNaN(options.min) ? options.min : 0 - var jump = (max - min) * value - elem.style.transform = 'translate3d(0, ' + -jump + 'px, 0)' - } - - var reset$2 = function reset(elem) { - elem.style.transform = '' - } - - var twist = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 20 - var min = !isNaN(options.min) ? options.min : -20 - if (options.direction === 'left') { - max = -max - min = -min - } - var twist = (max - min) * value - elem.style.transform = 'rotate(' + (min + twist) + 'deg) translateZ(0)' - } - - var reset$3 = function reset(elem) { - elem.style.transform = '' - } - - var vanish = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 1 - var min = !isNaN(options.max) ? options.max : 0 - var vanish = (max - min) * value - if (options.reverse) { - elem.style.opacity = max - vanish + }); + var scale = max - min; + var actualValue = _this.frequences[index] - min; + var percentage = scale === 0 ? 0 : actualValue / scale; + return _this.startingScale + _this.pulseRatio * percentage; + }; + + this.startingScale = 0; + this.pulseRatio = 1; + this.maxValueHistory = 100; + this.hzHistory = []; +}; + +var Analyser$1 = new Analyser(); + +var Player = function Player(forceAudioContext) { + var _this = this; + + classCallCheck(this, Player); + + this.createSourceFromAudioElement = function (audioElement) { + audioElement.setAttribute('rythm-connected', _this.connectedSources.length); + var source = _this.audioCtx.createMediaElementSource(audioElement); + _this.connectedSources.push(source); + return source; + }; + + this.connectExternalAudioElement = function (audioElement) { + _this.audio = audioElement; + _this.currentInputType = _this.inputTypeList['EXTERNAL']; + var connectedIndex = audioElement.getAttribute('rythm-connected'); + if (!connectedIndex) { + _this.source = _this.createSourceFromAudioElement(_this.audio); } else { - elem.style.opacity = min + vanish + _this.source = _this.connectedSources[connectedIndex]; } - } + _this.connectSource(_this.source); + }; - var reset$4 = function reset(elem) { - elem.style.opacity = '' - } - - var borderColor = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var from = options.from || [0, 0, 0] - var to = options.to || [255, 255, 255] - var scaleR = (to[0] - from[0]) * value - var scaleG = (to[1] - from[1]) * value - var scaleB = (to[2] - from[2]) * value - elem.style.borderColor = - 'rgb(' + - Math.floor(to[0] - scaleR) + - ', ' + - Math.floor(to[1] - scaleG) + - ', ' + - Math.floor(to[2] - scaleB) + - ')' - } - - var reset$5 = function reset(elem) { - elem.style.borderColor = '' - } - - var color = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var from = options.from || [0, 0, 0] - var to = options.to || [255, 255, 255] - var scaleR = (to[0] - from[0]) * value - var scaleG = (to[1] - from[1]) * value - var scaleB = (to[2] - from[2]) * value - elem.style.backgroundColor = - 'rgb(' + - Math.floor(to[0] - scaleR) + - ', ' + - Math.floor(to[1] - scaleG) + - ', ' + - Math.floor(to[2] - scaleB) + - ')' - } - - var reset$6 = function reset(elem) { - elem.style.backgroundColor = '' - } - - var radius = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 25 - var min = !isNaN(options.min) ? options.min : 0 - var borderRadius = (max - min) * value - if (options.reverse) { - borderRadius = max - borderRadius + this.connectSource = function (source) { + source.connect(_this.gain); + _this.gain.connect(Analyser$1.analyser); + if (_this.currentInputType !== _this.inputTypeList['STREAM']) { + Analyser$1.analyser.connect(_this.audioCtx.destination); + _this.audio.addEventListener('ended', _this.stop); } else { - borderRadius = min + borderRadius - } - elem.style.borderRadius = borderRadius + 'px' + Analyser$1.analyser.disconnect(); + } + }; + + this.setMusic = function (trackUrl) { + _this.audio = new Audio(trackUrl); + _this.currentInputType = _this.inputTypeList['TRACK']; + _this.source = _this.createSourceFromAudioElement(_this.audio); + _this.connectSource(_this.source); + }; + + this.setGain = function (value) { + _this.gain.gain.value = value; + }; + + this.plugMicrophone = function () { + return _this.getMicrophoneStream().then(function (stream) { + _this.audio = stream; + _this.currentInputType = _this.inputTypeList['STREAM']; + _this.source = _this.audioCtx.createMediaStreamSource(stream); + _this.connectSource(_this.source); + }); + }; + + this.getMicrophoneStream = function () { + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; + return new Promise(function (resolve, reject) { + navigator.getUserMedia({ audio: true }, function (medias) { + return resolve(medias); + }, function (error) { + return reject(error); + }); + }); + }; + + this.start = function () { + if (_this.currentInputType === _this.inputTypeList['TRACK']) { + _this.audio.play(); + } + }; + + this.stop = function () { + if (_this.currentInputType === _this.inputTypeList['TRACK']) { + _this.audio.pause(); + } else if (_this.currentInputType === _this.inputTypeList['STREAM']) { + _this.audio.getAudioTracks()[0].enabled = false; + } + }; + + this.browserAudioCtx = window.AudioContext || window.webkitAudioContext; + this.audioCtx = forceAudioContext || new this.browserAudioCtx(); + this.connectedSources = []; + Analyser$1.initialise(this.audioCtx.createAnalyser()); + this.gain = this.audioCtx.createGain(); + this.source = {}; + this.audio = {}; + this.hzHistory = []; + this.inputTypeList = { + TRACK: 0, + STREAM: 1, + EXTERNAL: 2 + }; +}; + +var pulse = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 1.25; + var min = !isNaN(options.min) ? options.min : 0.75; + var scale = (max - min) * value; + elem.style.transform = 'scale(' + (min + scale) + ') translateZ(0)'; +}); + +var reset = function reset(elem) { + elem.style.transform = ''; +}; + +var shake = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 15; + var min = !isNaN(options.min) ? options.min : -15; + if (options.direction === 'left') { + max = -max; + min = -min; } - - var reset$7 = function reset(elem) { - elem.style.borderRadius = '' + var twist = (max - min) * value; + elem.style.transform = 'translate3d(' + (min + twist) + 'px, 0, 0)'; +}); + +var reset$1 = function reset(elem) { + elem.style.transform = ''; +}; + +var jump = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 30; + var min = !isNaN(options.min) ? options.min : 0; + var jump = (max - min) * value; + elem.style.transform = 'translate3d(0, ' + -jump + 'px, 0)'; +}); + +var reset$2 = function reset(elem) { + elem.style.transform = ''; +}; + +var twist = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 20; + var min = !isNaN(options.min) ? options.min : -20; + if (options.direction === 'left') { + max = -max; + min = -min; } - - var blur = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 8 - var min = !isNaN(options.min) ? options.min : 0 - var blur = (max - min) * value - if (options.reverse) { - blur = max - blur - } else { - blur = min + blur - } - elem.style.filter = 'blur(' + blur + 'px)' + var twist = (max - min) * value; + elem.style.transform = 'rotate(' + (min + twist) + 'deg) translateZ(0)'; +}); + +var reset$3 = function reset(elem) { + elem.style.transform = ''; +}; + +var vanish = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 1; + var min = !isNaN(options.max) ? options.max : 0; + var vanish = (max - min) * value; + if (options.reverse) { + elem.style.opacity = max - vanish; + } else { + elem.style.opacity = min + vanish; } - - var reset$8 = function reset(elem) { - elem.style.filter = '' +}); + +var reset$4 = function reset(elem) { + elem.style.opacity = ''; +}; + +var borderColor = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var from = options.from || [0, 0, 0]; + var to = options.to || [255, 255, 255]; + var scaleR = (to[0] - from[0]) * value; + var scaleG = (to[1] - from[1]) * value; + var scaleB = (to[2] - from[2]) * value; + elem.style.borderColor = 'rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')'; +}); + +var reset$5 = function reset(elem) { + elem.style.borderColor = ''; +}; + +var color = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var from = options.from || [0, 0, 0]; + var to = options.to || [255, 255, 255]; + var scaleR = (to[0] - from[0]) * value; + var scaleG = (to[1] - from[1]) * value; + var scaleB = (to[2] - from[2]) * value; + elem.style.backgroundColor = 'rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')'; +}); + +var reset$6 = function reset(elem) { + elem.style.backgroundColor = ''; +}; + +var radius = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 25; + var min = !isNaN(options.min) ? options.min : 0; + var borderRadius = (max - min) * value; + if (options.reverse) { + borderRadius = max - borderRadius; + } else { + borderRadius = min + borderRadius; } - - var coefficientMap = { - up: -1, - down: 1, - left: 1, - right: -1, + elem.style.borderRadius = borderRadius + 'px'; +}); + +var reset$7 = function reset(elem) { + elem.style.borderRadius = ''; +}; + +var blur = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 8; + var min = !isNaN(options.min) ? options.min : 0; + var blur = (max - min) * value; + if (options.reverse) { + blur = max - blur; + } else { + blur = min + blur; } - - var swing = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var radius = !isNaN(options.radius) ? options.radius : 20 - var direction = Object.keys(coefficientMap).includes(options.direction) - ? options.direction - : 'right' - var curve = Object.keys(coefficientMap).includes(options.curve) - ? options.curve - : 'down' - var _ref = [coefficientMap[direction], coefficientMap[curve]], + elem.style.filter = 'blur(' + blur + 'px)'; +}); + +var reset$8 = function reset(elem) { + elem.style.filter = ''; +}; + +var coefficientMap = { + up: -1, + down: 1, + left: 1, + right: -1 +}; + +var swing = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var radius = !isNaN(options.radius) ? options.radius : 20; + var direction = Object.keys(coefficientMap).includes(options.direction) ? options.direction : 'right'; + var curve = Object.keys(coefficientMap).includes(options.curve) ? options.curve : 'down'; + var _ref = [coefficientMap[direction], coefficientMap[curve]], xCoefficient = _ref[0], - yCoefficient = _ref[1] - - elem.style.transform = - 'translate3d(' + - xCoefficient * radius * Math.cos(value * Math.PI) + - 'px, ' + - yCoefficient * radius * Math.sin(value * Math.PI) + - 'px, 0)' - } - - var reset$9 = function reset(elem) { - elem.style.transform = '' - } - - var neon = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var from = options.from || [0, 0, 0] - var to = options.to || [255, 255, 255] - var scaleR = (to[0] - from[0]) * value - var scaleG = (to[1] - from[1]) * value - var scaleB = (to[2] - from[2]) * value - elem.style.boxShadow = - '0 0 1em rgb(' + - Math.floor(to[0] - scaleR) + - ', ' + - Math.floor(to[1] - scaleG) + - ', ' + - Math.floor(to[2] - scaleB) + - ')' - } - - var reset$10 = function reset(elem) { - elem.style.boxShadow = '' + yCoefficient = _ref[1]; + + elem.style.transform = 'translate3d(' + xCoefficient * radius * Math.cos(value * Math.PI) + 'px, ' + yCoefficient * radius * Math.sin(value * Math.PI) + 'px, 0)'; +}); + +var reset$9 = function reset(elem) { + elem.style.transform = ''; +}; + +var neon = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var from = options.from || [0, 0, 0]; + var to = options.to || [255, 255, 255]; + var scaleR = (to[0] - from[0]) * value; + var scaleG = (to[1] - from[1]) * value; + var scaleB = (to[2] - from[2]) * value; + elem.style.boxShadow = '0 0 1em rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')'; +}); + +var reset$10 = function reset(elem) { + elem.style.boxShadow = ''; +}; + +var kern = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 25; + var min = !isNaN(options.min) ? options.min : 0; + var kern = (max - min) * value; + if (options.reverse) { + kern = max - kern; + } else { + kern = min + kern; } - - var kern = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 25 - var min = !isNaN(options.min) ? options.min : 0 - var kern = (max - min) * value - if (options.reverse) { - kern = max - kern - } else { - kern = min + kern - } - elem.style.letterSpacing = kern + 'px' + elem.style.letterSpacing = kern + 'px'; +}); + +var reset$11 = function reset(elem) { + elem.style.letterSpacing = ''; +}; + +var borderWidth = (function (elem, value) { + var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + + var max = !isNaN(options.max) ? options.max : 5; + var min = !isNaN(options.min) ? options.min : 0; + var borderWidth = (max - min) * value + min; + elem.style.borderWidth = borderWidth + 'px'; +}); + +var reset$12 = function reset(elem) { + elem.style.borderWidth = ''; +}; + +var Dancer = function () { + function Dancer() { + classCallCheck(this, Dancer); + + this.resets = {}; + this.dances = {}; + this.registerDance('size', pulse, reset); + this.registerDance('pulse', pulse, reset); + this.registerDance('shake', shake, reset$1); + this.registerDance('jump', jump, reset$2); + this.registerDance('twist', twist, reset$3); + this.registerDance('vanish', vanish, reset$4); + this.registerDance('color', color, reset$6); + this.registerDance('borderColor', borderColor, reset$5); + this.registerDance('radius', radius, reset$7); + this.registerDance('blur', blur, reset$8); + this.registerDance('swing', swing, reset$9); + this.registerDance('neon', neon, reset$10); + this.registerDance('kern', kern, reset$11); + this.registerDance('borderWidth', borderWidth, reset$12); } - var reset$11 = function reset(elem) { - elem.style.letterSpacing = '' - } - - var borderWidth = function(elem, value) { - var options = - arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} - - var max = !isNaN(options.max) ? options.max : 5 - var min = !isNaN(options.min) ? options.min : 0 - var borderWidth = (max - min) * value + min - elem.style.borderWidth = borderWidth + 'px' - } - - var reset$12 = function reset(elem) { - elem.style.borderWidth = '' - } - - var Dancer = (function() { - function Dancer() { - classCallCheck(this, Dancer) - - this.resets = {} - this.dances = {} - this.registerDance('size', pulse, reset) - this.registerDance('pulse', pulse, reset) - this.registerDance('shake', shake, reset$1) - this.registerDance('jump', jump, reset$2) - this.registerDance('twist', twist, reset$3) - this.registerDance('vanish', vanish, reset$4) - this.registerDance('color', color, reset$6) - this.registerDance('borderColor', borderColor, reset$5) - this.registerDance('radius', radius, reset$7) - this.registerDance('blur', blur, reset$8) - this.registerDance('swing', swing, reset$9) - this.registerDance('neon', neon, reset$10) - this.registerDance('kern', kern, reset$11) - this.registerDance('borderWidth', borderWidth, reset$12) - } - - createClass(Dancer, [ - { - key: 'registerDance', - value: function registerDance(type, dance) { - var reset$$1 = - arguments.length > 2 && arguments[2] !== undefined - ? arguments[2] - : function() {} - - this.dances[type] = dance - this.resets[type] = reset$$1 - }, - }, - { - key: 'dance', - value: function dance(type, className, ratio, options) { - var dance = type - if (typeof type === 'string') { - //In case of a built in dance - dance = this.dances[type] || this.dances['pulse'] - } else { - //In case of a custom dance - dance = type.dance - } - var elements = document.getElementsByClassName(className) - Array.from(elements).forEach(function(elem) { - return dance(elem, ratio, options) - }) - }, - }, - { - key: 'reset', - value: function reset$$1(type, className) { - var reset$$1 = type - if (typeof type === 'string') { - //In case of a built in dance - reset$$1 = this.resets[type] || this.resets['pulse'] - } else { - //In case of a custom dance - reset$$1 = type.reset - } - var elements = document.getElementsByClassName(className) - Array.from(elements).forEach(function(elem) { - return reset$$1(elem) - }) - }, - }, - ]) - return Dancer - })() - - var dancer = new Dancer() - - var Rythm$1 = function Rythm(forceAudioContext) { - var _this = this - - classCallCheck(this, Rythm) - - this.connectExternalAudioElement = function(audioElement) { - return _this.player.connectExternalAudioElement(audioElement) - } - - this.setMusic = function(url) { - return _this.player.setMusic(url) - } - - this.plugMicrophone = function() { - return _this.player.plugMicrophone() - } - - this.setGain = function(value) { - return _this.player.setGain(value) - } - - this.connectSource = function(source) { - return _this.player.connectSource(source) - } - - this.addRythm = function(elementClass, type, startValue, nbValue, options) { - _this.rythms.push({ - elementClass: elementClass, - type: type, - startValue: startValue, - nbValue: nbValue, - options: options, - }) - } - - this.start = function() { - _this.stopped = false - _this.player.start() - _this.analyser.reset() - _this.renderRythm() - } - - this.renderRythm = function() { - if (_this.stopped) return - _this.analyser.analyse() - _this.rythms.forEach(function(mappingItem) { - var type = mappingItem.type, + createClass(Dancer, [{ + key: 'registerDance', + value: function registerDance(type, dance) { + var reset$$1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {}; + + this.dances[type] = dance; + this.resets[type] = reset$$1; + } + }, { + key: 'dance', + value: function dance(type, className, ratio, options) { + var dance = type; + if (typeof type === 'string') { + //In case of a built in dance + dance = this.dances[type] || this.dances['pulse']; + } else { + //In case of a custom dance + dance = type.dance; + } + var elements = document.getElementsByClassName(className); + Array.from(elements).forEach(function (elem) { + return dance(elem, ratio, options); + }); + } + }, { + key: 'reset', + value: function reset$$1(type, className) { + var reset$$1 = type; + if (typeof type === 'string') { + //In case of a built in dance + reset$$1 = this.resets[type] || this.resets['pulse']; + } else { + //In case of a custom dance + reset$$1 = type.reset; + } + var elements = document.getElementsByClassName(className); + Array.from(elements).forEach(function (elem) { + return reset$$1(elem); + }); + } + }]); + return Dancer; +}(); + +var dancer = new Dancer(); + +var Rythm$1 = function Rythm(forceAudioContext) { + var _this = this; + + classCallCheck(this, Rythm); + + this.connectExternalAudioElement = function (audioElement) { + return _this.player.connectExternalAudioElement(audioElement); + }; + + this.setMusic = function (url) { + return _this.player.setMusic(url); + }; + + this.plugMicrophone = function () { + return _this.player.plugMicrophone(); + }; + + this.setGain = function (value) { + return _this.player.setGain(value); + }; + + this.connectSource = function (source) { + return _this.player.connectSource(source); + }; + + this.addRythm = function (elementClass, type, startValue, nbValue, options) { + _this.rythms.push({ + elementClass: elementClass, + type: type, + startValue: startValue, + nbValue: nbValue, + options: options + }); + }; + + this.start = function () { + _this.stopped = false; + _this.player.start(); + _this.analyser.reset(); + _this.renderRythm(); + }; + + this.renderRythm = function () { + if (_this.stopped) return; + _this.analyser.analyse(); + _this.rythms.forEach(function (mappingItem) { + var type = mappingItem.type, elementClass = mappingItem.elementClass, nbValue = mappingItem.nbValue, startValue = mappingItem.startValue, - options = mappingItem.options - - _this.dancer.dance( - type, - elementClass, - _this.analyser.getRangeAverageRatio(startValue, nbValue), - options - ) - }) - _this.animationFrameRequest = requestAnimationFrame(_this.renderRythm) - } + options = mappingItem.options; - this.resetRythm = function() { - _this.rythms.forEach(function(mappingItem) { - var type = mappingItem.type, + _this.dancer.dance(type, elementClass, _this.analyser.getRangeAverageRatio(startValue, nbValue), options); + }); + _this.animationFrameRequest = requestAnimationFrame(_this.renderRythm); + }; + + this.resetRythm = function () { + _this.rythms.forEach(function (mappingItem) { + var type = mappingItem.type, elementClass = mappingItem.elementClass, nbValue = mappingItem.nbValue, startValue = mappingItem.startValue, - options = mappingItem.options - - _this.dancer.reset(type, elementClass) - }) - } - - this.stop = function(freeze) { - _this.stopped = true - _this.player.stop() - if (_this.animationFrameRequest) - cancelAnimationFrame(_this.animationFrameRequest) - if (!freeze) _this.resetRythm() - } - - this.player = new Player(forceAudioContext) - this.analyser = Analyser$1 - this.maxValueHistory = Analyser$1.maxValueHistory - this.dancer = dancer - this.rythms = [] - this.addRythm('rythm-bass', 'pulse', 0, 10) - this.addRythm('rythm-medium', 'pulse', 150, 40) - this.addRythm('rythm-high', 'pulse', 400, 200) - this.animationFrameRequest = void 0 - } - - return Rythm$1 -}) + options = mappingItem.options; + + _this.dancer.reset(type, elementClass); + }); + }; + + this.stop = function (freeze) { + _this.stopped = true; + _this.player.stop(); + if (_this.animationFrameRequest) cancelAnimationFrame(_this.animationFrameRequest); + if (!freeze) _this.resetRythm(); + }; + + this.player = new Player(forceAudioContext); + this.analyser = Analyser$1; + this.maxValueHistory = Analyser$1.maxValueHistory; + this.dancer = dancer; + this.rythms = []; + this.addRythm('rythm-bass', 'pulse', 0, 10); + this.addRythm('rythm-medium', 'pulse', 150, 40); + this.addRythm('rythm-high', 'pulse', 400, 200); + this.animationFrameRequest = void 0; +}; + +return Rythm$1; + +})));