fix: edit conflict

src/assets/js/ripples/jquery.ripples.js

@@ -4,22 +4,23 @@
  * @author sirxemic / https://sirxemic.com/
  */
 
-(function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
-	typeof define === 'function' && define.amd ? define(['jquery'], factory) :
-	(factory(global.$));
-}(this, (function ($) { 'use strict';
-
-$ = $ && 'default' in $ ? $['default'] : $;
-
-var gl;
-var $window = $(window); // There is only one window, so why not cache the jQuery-wrapped window?
-
-function isPercentage(str) {
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined'
+    ? factory(require('jquery'))
+    : typeof define === 'function' && define.amd
+    ? define(['jquery'], factory)
+    : factory(global.$);
+})(this, function($) {
+  $ = $ && 'default' in $ ? $.default : $;
+
+  let gl;
+  const $window = $(window); // There is only one window, so why not cache the jQuery-wrapped window?
+
+  function isPercentage(str) {
     return str[str.length - 1] == '%';
-}
+  }
 
-/**
+  /**
    *  Load a configuration of GL settings which the browser supports.
    *  For example:
    *  - not all browsers support WebGL
@@ -28,8 +29,8 @@ function isPercentage(str) {
    *  - not all browsers support rendering to floating point textures
    *  - some browsers *do* support rendering to half-floating point textures instead.
    */
-function loadConfig() {
-	var canvas = document.createElement('canvas');
+  function loadConfig() {
+    const canvas = document.createElement('canvas');
     gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
 
     if (!gl) {
@@ -38,14 +39,14 @@ function loadConfig() {
     }
 
     // Load extensions
-	var extensions = {};
+    const extensions = {};
     [
       'OES_texture_float',
       'OES_texture_half_float',
       'OES_texture_float_linear',
-		'OES_texture_half_float_linear'
+      'OES_texture_half_float_linear',
     ].forEach(function(name) {
-		var extension = gl.getExtension(name);
+      const extension = gl.getExtension(name);
       if (extension) {
         extensions[name] = extension;
       }
@@ -56,13 +57,13 @@ function loadConfig() {
       return null;
     }
 
-	var configs = [];
+    const configs = [];
 
     function createConfig(type, glType, arrayType) {
-		var name = 'OES_texture_' + type,
-				nameLinear = name + '_linear',
-				linearSupport = nameLinear in extensions,
-				configExtensions = [name];
+      const name = `OES_texture_${type}`;
+      const nameLinear = `${name}_linear`;
+      const linearSupport = nameLinear in extensions;
+      const configExtensions = [name];
 
       if (linearSupport) {
         configExtensions.push(nameLinear);
@@ -70,28 +71,26 @@ function loadConfig() {
 
       return {
         type: glType,
-			arrayType: arrayType,
-			linearSupport: linearSupport,
-			extensions: configExtensions
+        arrayType,
+        linearSupport,
+        extensions: configExtensions,
       };
     }
 
-	configs.push(
-		createConfig('float', gl.FLOAT, Float32Array)
-	);
+    configs.push(createConfig('float', gl.FLOAT, Float32Array));
 
     if (extensions.OES_texture_half_float) {
       configs.push(
         // Array type should be Uint16Array, but at least on iOS that breaks. In that case we
         // just initialize the textures with data=null, instead of data=new Uint16Array(...).
         // This makes initialization a tad slower, but it's still negligible.
-			createConfig('half_float', extensions.OES_texture_half_float.HALF_FLOAT_OES, null)
+        createConfig('half_float', extensions.OES_texture_half_float.HALF_FLOAT_OES, null),
       );
     }
 
     // Setup the texture and framebuffer
-	var texture = gl.createTexture();
-	var framebuffer = gl.createFramebuffer();
+    const texture = gl.createTexture();
+    const framebuffer = gl.createFramebuffer();
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -101,9 +100,9 @@ function loadConfig() {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
     // Check for each supported texture type if rendering to it is supported
-	var config = null;
+    let config = null;
 
-	for (var i = 0; i < configs.length; i++) {
+    for (let i = 0; i < configs.length; i++) {
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 32, 32, 0, gl.RGBA, configs[i].type, null);
 
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
@@ -114,21 +113,20 @@ function loadConfig() {
     }
 
     return config;
-}
+  }
 
-function createImageData(width, height) {
+  function createImageData(width, height) {
     try {
       return new ImageData(width, height);
-	}
-	catch (e) {
+    } catch (e) {
       // Fallback for IE
-		var canvas = document.createElement('canvas');
+      const canvas = document.createElement('canvas');
       return canvas.getContext('2d').createImageData(width, height);
     }
-}
+  }
 
-function translateBackgroundPosition(value) {
-	var parts = value.split(' ');
+  function translateBackgroundPosition(value) {
+    const parts = value.split(' ');
 
     if (parts.length === 1) {
       switch (value) {
@@ -145,8 +143,7 @@ function translateBackgroundPosition(value) {
         default:
           return [value, '50%'];
       }
-	}
-	else {
+    } else {
       return parts.map(function(part) {
         switch (value) {
           case 'center':
@@ -162,27 +159,27 @@ function translateBackgroundPosition(value) {
         }
       });
     }
-}
+  }
 
-function createProgram(vertexSource, fragmentSource, uniformValues) {
+  function createProgram(vertexSource, fragmentSource, uniformValues) {
     function compileSource(type, source) {
-		var shader = gl.createShader(type);
+      const shader = gl.createShader(type);
       gl.shaderSource(shader, source);
       gl.compileShader(shader);
       if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-			throw new Error('compile error: ' + gl.getShaderInfoLog(shader));
+        throw new Error(`compile error: ${gl.getShaderInfoLog(shader)}`);
       }
       return shader;
     }
 
-	var program = {};
+    const program = {};
 
     program.id = gl.createProgram();
     gl.attachShader(program.id, compileSource(gl.VERTEX_SHADER, vertexSource));
     gl.attachShader(program.id, compileSource(gl.FRAGMENT_SHADER, fragmentSource));
     gl.linkProgram(program.id);
     if (!gl.getProgramParameter(program.id, gl.LINK_STATUS)) {
-		throw new Error('link error: ' + gl.getProgramInfoLog(program.id));
+      throw new Error(`link error: ${gl.getProgramInfoLog(program.id)}`);
     }
 
     // Fetch the uniform and attribute locations
@@ -190,44 +187,47 @@ function createProgram(vertexSource, fragmentSource, uniformValues) {
     program.locations = {};
     gl.useProgram(program.id);
     gl.enableVertexAttribArray(0);
-	var match, name, regex = /uniform (\w+) (\w+)/g, shaderCode = vertexSource + fragmentSource;
+    let match;
+    let name;
+    const regex = /uniform (\w+) (\w+)/g;
+    const shaderCode = vertexSource + fragmentSource;
     while ((match = regex.exec(shaderCode)) != null) {
       name = match[2];
       program.locations[name] = gl.getUniformLocation(program.id, name);
     }
 
     return program;
-}
+  }
 
-function bindTexture(texture, unit) {
+  function bindTexture(texture, unit) {
     gl.activeTexture(gl.TEXTURE0 + (unit || 0));
     gl.bindTexture(gl.TEXTURE_2D, texture);
-}
+  }
 
-function extractUrl(value) {
-	var urlMatch = /url\(["']?([^"']*)["']?\)/.exec(value);
+  function extractUrl(value) {
+    const urlMatch = /url\(["']?([^"']*)["']?\)/.exec(value);
     if (urlMatch == null) {
       return null;
     }
 
     return urlMatch[1];
-}
+  }
 
-function isDataUri(url) {
+  function isDataUri(url) {
     return url.match(/^data:/);
-}
+  }
 
-var config = loadConfig();
-var transparentPixels = createImageData(32, 32);
+  const config = loadConfig();
+  const transparentPixels = createImageData(32, 32);
 
-// Extend the css
-$('head').prepend('<style>.jquery-ripples { position: relative; z-index: 0; }</style>');
+  // Extend the css
+  $('head').prepend('<style>.jquery-ripples { position: relative; z-index: 0; }</style>');
 
-// RIPPLES CLASS DEFINITION
-// =========================
+  // RIPPLES CLASS DEFINITION
+  // =========================
 
-var Ripples = function (el, options) {
-	var that = this;
+  const Ripples = function(el, options) {
+    const that = this;
 
     this.$el = $(el);
 
@@ -243,7 +243,7 @@ var Ripples = function (el, options) {
     this.imageUrl = options.imageUrl;
 
     // Init WebGL canvas
-	var canvas = document.createElement('canvas');
+    const canvas = document.createElement('canvas');
     canvas.width = this.$el.innerWidth();
     canvas.height = this.$el.innerHeight();
     this.canvas = canvas;
@@ -254,7 +254,7 @@ var Ripples = function (el, options) {
       top: 0,
       right: 0,
       bottom: 0,
-		zIndex: -1
+      zIndex: -1,
     });
 
     this.$el.addClass('jquery-ripples').append(canvas);
@@ -275,12 +275,12 @@ var Ripples = function (el, options) {
     this.bufferWriteIndex = 0;
     this.bufferReadIndex = 1;
 
-	var arrayType = config.arrayType;
-	var textureData = arrayType ? new arrayType(this.resolution * this.resolution * 4) : null;
+    const { arrayType } = config;
+    const textureData = arrayType ? new arrayType(this.resolution * this.resolution * 4) : null;
 
-	for (var i = 0; i < 2; i++) {
-		var texture = gl.createTexture();
-		var framebuffer = gl.createFramebuffer();
+    for (let i = 0; i < 2; i++) {
+      const texture = gl.createTexture();
+      const framebuffer = gl.createFramebuffer();
 
       gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 
@@ -300,12 +300,7 @@ var Ripples = function (el, options) {
     // Init GL stuff
     this.quad = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
-	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-		-1, -1,
-		+1, -1,
-		+1, +1,
-		-1, +1
-	]), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, +1, -1, +1, +1, -1, +1]), gl.STATIC_DRAW);
 
     this.initShaders();
     this.initTexture();
@@ -336,22 +331,21 @@ var Ripples = function (el, options) {
     }
 
     requestAnimationFrame(step);
-};
+  };
 
-Ripples.DEFAULTS = {
+  Ripples.DEFAULTS = {
     imageUrl: null,
     resolution: 256,
     dropRadius: 20,
     perturbance: 0.03,
     interactive: true,
-	crossOrigin: ''
-};
-
-Ripples.prototype = {
+    crossOrigin: '',
+  };
 
+  Ripples.prototype = {
     // Set up pointer (mouse + touch) events
-	setupPointerEvents: function() {
-		var that = this;
+    setupPointerEvents() {
+      const that = this;
 
       function pointerEventsEnabled() {
         return that.visible && that.running && that.interactive;
@@ -359,11 +353,7 @@ Ripples.prototype = {
 
       function dropAtPointer(pointer, big) {
         if (pointerEventsEnabled()) {
-				that.dropAtPointer(
-					pointer,
-					that.dropRadius * (big ? 1.5 : 1),
-					(big ? 0.14 : 0.01)
-				);
+          that.dropAtPointer(pointer, that.dropRadius * (big ? 1.5 : 1), big ? 0.14 : 0.01);
         }
       }
 
@@ -375,8 +365,8 @@ Ripples.prototype = {
           dropAtPointer(e);
         })
         .on('touchmove.ripples touchstart.ripples', function(e) {
-				var touches = e.originalEvent.changedTouches;
-				for (var i = 0; i < touches.length; i++) {
+          const touches = e.originalEvent.changedTouches;
+          for (let i = 0; i < touches.length; i++) {
             dropAtPointer(touches[i]);
           }
         })
@@ -388,14 +378,13 @@ Ripples.prototype = {
     },
 
     // Load the image either from the options or the element's CSS rules.
-	loadImage: function() {
-		var that = this;
+    loadImage() {
+      const that = this;
 
       gl = this.context;
 
-		var newImageSource = this.imageUrl ||
-			extractUrl(this.originalCssBackgroundImage) ||
-			extractUrl(this.$el.css('backgroundImage'));
+      const newImageSource =
+        this.imageUrl || extractUrl(this.originalCssBackgroundImage) || extractUrl(this.$el.css('backgroundImage'));
 
       // If image source is unchanged, don't reload it.
       if (newImageSource == this.imageSource) {
@@ -411,7 +400,7 @@ Ripples.prototype = {
       }
 
       // Load the texture from a new image.
-		var image = new Image;
+      const image = new Image();
       image.onload = function() {
         gl = that.context;
 
@@ -420,7 +409,7 @@ Ripples.prototype = {
           return (x & (x - 1)) == 0;
         }
 
-			var wrapping = (isPowerOfTwo(image.width) && isPowerOfTwo(image.height)) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        const wrapping = isPowerOfTwo(image.width) && isPowerOfTwo(image.height) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
 
         gl.bindTexture(gl.TEXTURE_2D, that.backgroundTexture);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapping);
@@ -447,7 +436,7 @@ Ripples.prototype = {
       image.src = this.imageSource;
     },
 
-	step: function() {
+    step() {
       gl = this.context;
 
       if (!this.visible) {
@@ -463,13 +452,13 @@ Ripples.prototype = {
       this.render();
     },
 
-	drawQuad: function() {
+    drawQuad() {
       gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
       gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
       gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
     },
 
-	render: function() {
+    render() {
       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
       gl.viewport(0, 0, this.canvas.width, this.canvas.height);
@@ -493,7 +482,7 @@ Ripples.prototype = {
       gl.disable(gl.BLEND);
     },
 
-	update: function() {
+    update() {
       gl.viewport(0, 0, this.resolution, this.resolution);
 
       gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[this.bufferWriteIndex]);
@@ -505,25 +494,24 @@ Ripples.prototype = {
       this.swapBufferIndices();
     },
 
-	swapBufferIndices: function() {
+    swapBufferIndices() {
       this.bufferWriteIndex = 1 - this.bufferWriteIndex;
       this.bufferReadIndex = 1 - this.bufferReadIndex;
     },
 
-	computeTextureBoundaries: function() {
-		var backgroundSize = this.$el.css('background-size');
-		var backgroundAttachment = this.$el.css('background-attachment');
-		var backgroundPosition = translateBackgroundPosition(this.$el.css('background-position'));
+    computeTextureBoundaries() {
+      let backgroundSize = this.$el.css('background-size');
+      const backgroundAttachment = this.$el.css('background-attachment');
+      const backgroundPosition = translateBackgroundPosition(this.$el.css('background-position'));
 
       // Here the 'container' is the element which the background adapts to
       // (either the chrome window or some element, depending on attachment)
-		var container;
+      let container;
       if (backgroundAttachment == 'fixed') {
         container = { left: window.pageXOffset, top: window.pageYOffset };
         container.width = $window.width();
         container.height = $window.height();
-		}
-		else {
+      } else {
         container = this.$el.offset();
         container.width = this.$el.innerWidth();
         container.height = this.$el.innerHeight();
@@ -535,37 +523,32 @@ Ripples.prototype = {
 
         var backgroundWidth = this.backgroundWidth * scale;
         var backgroundHeight = this.backgroundHeight * scale;
-		}
-		else if (backgroundSize == 'contain') {
+      } else if (backgroundSize == 'contain') {
         var scale = Math.min(container.width / this.backgroundWidth, container.height / this.backgroundHeight);
 
         var backgroundWidth = this.backgroundWidth * scale;
         var backgroundHeight = this.backgroundHeight * scale;
-		}
-		else {
+      } else {
         backgroundSize = backgroundSize.split(' ');
         var backgroundWidth = backgroundSize[0] || '';
         var backgroundHeight = backgroundSize[1] || backgroundWidth;
 
         if (isPercentage(backgroundWidth)) {
-				backgroundWidth = container.width * parseFloat(backgroundWidth) / 100;
-			}
-			else if (backgroundWidth != 'auto') {
+          backgroundWidth = (container.width * parseFloat(backgroundWidth)) / 100;
+        } else if (backgroundWidth != 'auto') {
           backgroundWidth = parseFloat(backgroundWidth);
         }
 
         if (isPercentage(backgroundHeight)) {
-				backgroundHeight = container.height * parseFloat(backgroundHeight) / 100;
-			}
-			else if (backgroundHeight != 'auto') {
+          backgroundHeight = (container.height * parseFloat(backgroundHeight)) / 100;
+        } else if (backgroundHeight != 'auto') {
           backgroundHeight = parseFloat(backgroundHeight);
         }
 
         if (backgroundWidth == 'auto' && backgroundHeight == 'auto') {
           backgroundWidth = this.backgroundWidth;
           backgroundHeight = this.backgroundHeight;
-			}
-			else {
+        } else {
           if (backgroundWidth == 'auto') {
             backgroundWidth = this.backgroundWidth * (backgroundHeight / this.backgroundHeight);
           }
@@ -577,53 +560,53 @@ Ripples.prototype = {
       }
 
       // Compute backgroundX and backgroundY in page coordinates
-		var backgroundX = backgroundPosition[0];
-		var backgroundY = backgroundPosition[1];
+      let backgroundX = backgroundPosition[0];
+      let backgroundY = backgroundPosition[1];
 
       if (isPercentage(backgroundX)) {
-			backgroundX = container.left + (container.width - backgroundWidth) * parseFloat(backgroundX) / 100;
-		}
-		else {
+        backgroundX = container.left + ((container.width - backgroundWidth) * parseFloat(backgroundX)) / 100;
+      } else {
         backgroundX = container.left + parseFloat(backgroundX);
       }
 
       if (isPercentage(backgroundY)) {
-			backgroundY = container.top + (container.height - backgroundHeight) * parseFloat(backgroundY) / 100;
-		}
-		else {
+        backgroundY = container.top + ((container.height - backgroundHeight) * parseFloat(backgroundY)) / 100;
+      } else {
         backgroundY = container.top + parseFloat(backgroundY);
       }
 
-		var elementOffset = this.$el.offset();
+      const elementOffset = this.$el.offset();
 
       this.renderProgram.uniforms.topLeft = new Float32Array([
         (elementOffset.left - backgroundX) / backgroundWidth,
-			(elementOffset.top - backgroundY) / backgroundHeight
+        (elementOffset.top - backgroundY) / backgroundHeight,
       ]);
       this.renderProgram.uniforms.bottomRight = new Float32Array([
         this.renderProgram.uniforms.topLeft[0] + this.$el.innerWidth() / backgroundWidth,
-			this.renderProgram.uniforms.topLeft[1] + this.$el.innerHeight() / backgroundHeight
+        this.renderProgram.uniforms.topLeft[1] + this.$el.innerHeight() / backgroundHeight,
       ]);
 
-		var maxSide = Math.max(this.canvas.width, this.canvas.height);
+      const maxSide = Math.max(this.canvas.width, this.canvas.height);
 
       this.renderProgram.uniforms.containerRatio = new Float32Array([
         this.canvas.width / maxSide,
-			this.canvas.height / maxSide
+        this.canvas.height / maxSide,
       ]);
     },
 
-	initShaders: function() {
-		var vertexShader = [
+    initShaders() {
+      const vertexShader = [
         'attribute vec2 vertex;',
         'varying vec2 coord;',
         'void main() {',
         'coord = vertex * 0.5 + 0.5;',
         'gl_Position = vec4(vertex, 0.0, 1.0);',
-			'}'
+        '}',
       ].join('\n');
 
-		this.dropProgram = createProgram(vertexShader, [
+      this.dropProgram = createProgram(
+        vertexShader,
+        [
           'precision highp float;',
 
           'const float PI = 3.141592653589793;',
@@ -643,10 +626,13 @@ Ripples.prototype = {
           'info.r += drop * strength;',
 
           'gl_FragColor = info;',
-			'}'
-		].join('\n'));
+          '}',
+        ].join('\n'),
+      );
 
-		this.updateProgram = createProgram(vertexShader, [
+      this.updateProgram = createProgram(
+        vertexShader,
+        [
           'precision highp float;',
 
           'uniform sampler2D texture;',
@@ -672,11 +658,13 @@ Ripples.prototype = {
           'info.r += info.g;',
 
           'gl_FragColor = info;',
-			'}'
-		].join('\n'));
+          '}',
+        ].join('\n'),
+      );
       gl.uniform2fv(this.updateProgram.locations.delta, this.textureDelta);
 
-		this.renderProgram = createProgram([
+      this.renderProgram = createProgram(
+        [
           'precision highp float;',
 
           'attribute vec2 vertex;',
@@ -690,8 +678,9 @@ Ripples.prototype = {
           'backgroundCoord.y = 1.0 - backgroundCoord.y;',
           'ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;',
           'gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);',
-			'}'
-		].join('\n'), [
+          '}',
+        ].join('\n'),
+        [
           'precision highp float;',
 
           'uniform sampler2D samplerBackground;',
@@ -711,12 +700,13 @@ Ripples.prototype = {
           'vec2 offset = -normalize(cross(dy, dx)).xz;',
           'float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);',
           'gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;',
-			'}'
-		].join('\n'));
+          '}',
+        ].join('\n'),
+      );
       gl.uniform2fv(this.renderProgram.locations.delta, this.textureDelta);
     },
 
-	initTexture: function() {
+    initTexture() {
       this.backgroundTexture = gl.createTexture();
       gl.bindTexture(gl.TEXTURE_2D, this.backgroundTexture);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
@@ -724,15 +714,14 @@ Ripples.prototype = {
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     },
 
-	setTransparentTexture: function() {
+    setTransparentTexture() {
       gl.bindTexture(gl.TEXTURE_2D, this.backgroundTexture);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, transparentPixels);
     },
 
-	hideCssBackground: function() {
-
+    hideCssBackground() {
       // Check whether we're changing inline CSS or overriding a global CSS rule.
-		var inlineCss = this.$el[0].style.backgroundImage;
+      const inlineCss = this.$el[0].style.backgroundImage;
 
       if (inlineCss == 'none') {
         return;
@@ -744,41 +733,37 @@ Ripples.prototype = {
       this.$el.css('backgroundImage', 'none');
     },
 
-	restoreCssBackground: function() {
-
+    restoreCssBackground() {
       // Restore background by either changing the inline CSS rule to what it was, or
       // simply remove the inline CSS rule if it never was inlined.
       this.$el.css('backgroundImage', this.originalInlineCss || '');
     },
 
-	dropAtPointer: function(pointer, radius, strength) {
-		var borderLeft = parseInt(this.$el.css('border-left-width')) || 0,
-				borderTop = parseInt(this.$el.css('border-top-width')) || 0;
+    dropAtPointer(pointer, radius, strength) {
+      const borderLeft = parseInt(this.$el.css('border-left-width')) || 0;
+      const borderTop = parseInt(this.$el.css('border-top-width')) || 0;
 
       this.drop(
         pointer.pageX - this.$el.offset().left - borderLeft,
         pointer.pageY - this.$el.offset().top - borderTop,
         radius,
-			strength
+        strength,
       );
     },
 
     /**
      *  Public methods
      */
-	drop: function(x, y, radius, strength) {
+    drop(x, y, radius, strength) {
       gl = this.context;
 
-		var elWidth = this.$el.innerWidth();
-		var elHeight = this.$el.innerHeight();
-		var longestSide = Math.max(elWidth, elHeight);
+      const elWidth = this.$el.innerWidth();
+      const elHeight = this.$el.innerHeight();
+      const longestSide = Math.max(elWidth, elHeight);
 
-		radius = radius / longestSide;
+      radius /= longestSide;
 
-		var dropPosition = new Float32Array([
-			(2 * x - elWidth) / longestSide,
-			(elHeight - 2 * y) / longestSide
-		]);
+      const dropPosition = new Float32Array([(2 * x - elWidth) / longestSide, (elHeight - 2 * y) / longestSide]);
 
       gl.viewport(0, 0, this.resolution, this.resolution);
 
@@ -795,9 +780,9 @@ Ripples.prototype = {
       this.swapBufferIndices();
     },
 
-	updateSize: function() {
-		var newWidth = this.$el.innerWidth(),
-				newHeight = this.$el.innerHeight();
+    updateSize() {
+      const newWidth = this.$el.innerWidth();
+      const newHeight = this.$el.innerHeight();
 
       if (newWidth != this.canvas.width || newHeight != this.canvas.height) {
         this.canvas.width = newWidth;
@@ -805,7 +790,7 @@ Ripples.prototype = {
       }
     },
 
-	destroy: function() {
+    destroy() {
       this.$el
         .off('.ripples')
         .removeClass('jquery-ripples')
@@ -822,29 +807,29 @@ Ripples.prototype = {
       this.destroyed = true;
     },
 
-	show: function() {
+    show() {
       this.visible = true;
 
       this.$canvas.show();
       this.hideCssBackground();
     },
 
-	hide: function() {
+    hide() {
       this.visible = false;
 
       this.$canvas.hide();
       this.restoreCssBackground();
     },
 
-	pause: function() {
+    pause() {
       this.running = false;
     },
 
-	play: function() {
+    play() {
       this.running = true;
     },
 
-	set: function(property, value) {
+    set(property, value) {
       switch (property) {
         case 'dropRadius':
         case 'perturbance':
@@ -857,47 +842,46 @@ Ripples.prototype = {
           this.loadImage();
           break;
       }
-	}
-};
+    },
+  };
 
-// RIPPLES PLUGIN DEFINITION
-// ==========================
+  // RIPPLES PLUGIN DEFINITION
+  // ==========================
 
-var old = $.fn.ripples;
+  const old = $.fn.ripples;
 
-$.fn.ripples = function(option) {
+  $.fn.ripples = function(option) {
     if (!config) {
-		throw new Error('Your browser does not support WebGL, the OES_texture_float extension or rendering to floating point textures.');
+      throw new Error(
+        'Your browser does not support WebGL, the OES_texture_float extension or rendering to floating point textures.',
+      );
     }
 
-	var args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
+    const args = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : undefined;
 
     return this.each(function() {
-		var $this = $(this),
-				data = $this.data('ripples'),
-				options = $.extend({}, Ripples.DEFAULTS, $this.data(), typeof option == 'object' && option);
+      const $this = $(this);
+      let data = $this.data('ripples');
+      const options = $.extend({}, Ripples.DEFAULTS, $this.data(), typeof option === 'object' && option);
 
-		if (!data && typeof option == 'string') {
+      if (!data && typeof option === 'string') {
         return;
       }
       if (!data) {
         $this.data('ripples', (data = new Ripples(this, options)));
-		}
-		else if (typeof option == 'string') {
+      } else if (typeof option === 'string') {
         Ripples.prototype[option].apply(data, args);
       }
     });
-};
-
-$.fn.ripples.Constructor = Ripples;
+  };
 
+  $.fn.ripples.Constructor = Ripples;
 
-// RIPPLES NO CONFLICT
-// ====================
+  // RIPPLES NO CONFLICT
+  // ====================
 
-$.fn.ripples.noConflict = function() {
+  $.fn.ripples.noConflict = function() {
     $.fn.ripples = old;
     return this;
-};
-
-})));
+  };
+});

src/assets/js/ripples/ripples.js

@@ -2,26 +2,20 @@
 /* globals jQuery, navigator */
 
 (function($, window, document, undefined) {
-
-  "use strict";
-
   /**
    * Define the name of the plugin
    */
-  var ripples = "ripples";
-
+  const ripples = 'ripples';
 
   /**
    * Get an instance of the plugin
    */
-  var self = null;
-
+  let self = null;
 
   /**
    * Define the defaults of the plugin
    */
-  var defaults = {};
-
+  const defaults = {};
 
   /**
    * Create the main plugin function
@@ -39,90 +33,79 @@
     this.init();
   }
 
-
   /**
    * Initialize the plugin
    */
   Ripples.prototype.init = function() {
-    var $element  = this.element;
+    const $element = this.element;
 
-    $element.on("mousedown touchstart", function(event) {
+    $element.on('mousedown touchstart', function(event) {
       /**
        * Verify if the user is just touching on a device and return if so
        */
-      if(self.isTouch() && event.type === "mousedown") {
+      if (self.isTouch() && event.type === 'mousedown') {
         return;
       }
 
-
       /**
        * Verify if the current element already has a ripple wrapper element and
        * creates if it doesn't
        */
-      if(!($element.find(".ripple-container").length)) {
-        $element.append("<div class=\"ripple-container\"></div>");
+      if (!$element.find('.ripple-container').length) {
+        $element.append('<div class="ripple-container"></div>');
       }
 
-
       /**
        * Find the ripple wrapper
        */
-      var $wrapper = $element.children(".ripple-container");
-
+      const $wrapper = $element.children('.ripple-container');
 
       /**
        * Get relY and relX positions
        */
-      var relY = self.getRelY($wrapper, event);
-      var relX = self.getRelX($wrapper, event);
-
+      const relY = self.getRelY($wrapper, event);
+      const relX = self.getRelX($wrapper, event);
 
       /**
        * If relY and/or relX are false, return the event
        */
-      if(!relY && !relX) {
+      if (!relY && !relX) {
         return;
       }
 
-
       /**
        * Get the ripple color
        */
-      var rippleColor = self.getRipplesColor($element);
-
+      const rippleColor = self.getRipplesColor($element);
 
       /**
        * Create the ripple element
        */
-      var $ripple = $("<div></div>");
+      const $ripple = $('<div></div>');
 
-      $ripple
-      .addClass("ripple")
-      .css({
-        "left": relX,
-        "top": relY,
-        "background-color": rippleColor
+      $ripple.addClass('ripple').css({
+        left: relX,
+        top: relY,
+        'background-color': rippleColor,
       });
 
-
       /**
        * Append the ripple to the wrapper
        */
       $wrapper.append($ripple);
 
-
       /**
        * Make sure the ripple has the styles applied (ugly hack but it works)
        */
-      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
-
+      (function() {
+        return window.getComputedStyle($ripple[0]).opacity;
+      })();
 
       /**
        * Turn on the ripple animation
        */
       self.rippleOn($element, $ripple);
 
-
       /**
        * Call the rippleEnd function when the transition "on" ends
        */
@@ -130,115 +113,104 @@
         self.rippleEnd($ripple);
       }, 500);
 
-
       /**
        * Detect when the user leaves the element
        */
-      $element.on("mouseup mouseleave touchend", function() {
-        $ripple.data("mousedown", "off");
+      $element.on('mouseup mouseleave touchend', function() {
+        $ripple.data('mousedown', 'off');
 
-        if($ripple.data("animating") === "off") {
+        if ($ripple.data('animating') === 'off') {
           self.rippleOut($ripple);
         }
       });
-
     });
   };
 
-
   /**
    * Get the new size based on the element height/width and the ripple width
    */
   Ripples.prototype.getNewSize = function($element, $ripple) {
-
     return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
   };
 
-
   /**
    * Get the relX
    */
   Ripples.prototype.getRelX = function($wrapper, event) {
-    var wrapperOffset = $wrapper.offset();
+    const wrapperOffset = $wrapper.offset();
 
-    if(!self.isTouch()) {
+    if (!self.isTouch()) {
       /**
        * Get the mouse position relative to the ripple wrapper
        */
       return event.pageX - wrapperOffset.left;
-    } else {
+    }
     /**
      * Make sure the user is using only one finger and then get the touch
      * position relative to the ripple wrapper
      */
     event = event.originalEvent;
 
-      if(event.touches.length === 1) {
+    if (event.touches.length === 1) {
       return event.touches[0].pageX - wrapperOffset.left;
     }
 
     return false;
-    }
   };
 
-
   /**
    * Get the relY
    */
   Ripples.prototype.getRelY = function($wrapper, event) {
-    var wrapperOffset = $wrapper.offset();
+    const wrapperOffset = $wrapper.offset();
 
-    if(!self.isTouch()) {
+    if (!self.isTouch()) {
       /**
        * Get the mouse position relative to the ripple wrapper
        */
       return event.pageY - wrapperOffset.top;
-    } else {
+    }
     /**
      * Make sure the user is using only one finger and then get the touch
      * position relative to the ripple wrapper
      */
     event = event.originalEvent;
 
-      if(event.touches.length === 1) {
+    if (event.touches.length === 1) {
       return event.touches[0].pageY - wrapperOffset.top;
     }
 
     return false;
-    }
   };
 
-
   /**
    * Get the ripple color
    */
   Ripples.prototype.getRipplesColor = function($element) {
-
-    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+    const color = $element.data('ripple-color')
+      ? $element.data('ripple-color')
+      : window.getComputedStyle($element[0]).color;
 
     return color;
   };
 
-
   /**
    * Verify if the client browser has transistion support
    */
   Ripples.prototype.hasTransitionSupport = function() {
-    var thisBody  = document.body || document.documentElement;
-    var thisStyle = thisBody.style;
+    const thisBody = document.body || document.documentElement;
+    const thisStyle = thisBody.style;
 
-    var support = (
+    const support =
       thisStyle.transition !== undefined ||
       thisStyle.WebkitTransition !== undefined ||
       thisStyle.MozTransition !== undefined ||
       thisStyle.MsTransition !== undefined ||
-      thisStyle.OTransition !== undefined
-    );
+      thisStyle.OTransition !== undefined;
 
     return support;
   };
 
-
   /**
    * Verify if the client is using a mobile device
    */
@@ -246,79 +218,78 @@
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
   };
 
-
   /**
    * End the animation of the ripple
    */
   Ripples.prototype.rippleEnd = function($ripple) {
-    $ripple.data("animating", "off");
+    $ripple.data('animating', 'off');
 
-    if($ripple.data("mousedown") === "off") {
+    if ($ripple.data('mousedown') === 'off') {
       self.rippleOut($ripple);
     }
   };
 
-
   /**
    * Turn off the ripple effect
    */
   Ripples.prototype.rippleOut = function($ripple) {
     $ripple.off();
 
-    if(self.hasTransitionSupport()) {
-      $ripple.addClass("ripple-out");
+    if (self.hasTransitionSupport()) {
+      $ripple.addClass('ripple-out');
     } else {
-      $ripple.animate({"opacity": 0}, 100, function() {
-        $ripple.trigger("transitionend");
+      $ripple.animate({ opacity: 0 }, 100, function() {
+        $ripple.trigger('transitionend');
       });
     }
 
-    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+    $ripple.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
       $ripple.remove();
     });
   };
 
-
   /**
    * Turn on the ripple effect
    */
   Ripples.prototype.rippleOn = function($element, $ripple) {
-    var size = self.getNewSize($element, $ripple);
+    const size = self.getNewSize($element, $ripple);
 
-    if(self.hasTransitionSupport()) {
+    if (self.hasTransitionSupport()) {
       $ripple
         .css({
-        "-ms-transform": "scale(" + size + ")",
-        "-moz-transform": "scale(" + size + ")",
-        "-webkit-transform": "scale(" + size + ")",
-        "transform": "scale(" + size + ")"
+          '-ms-transform': `scale(${size})`,
+          '-moz-transform': `scale(${size})`,
+          '-webkit-transform': `scale(${size})`,
+          transform: `scale(${size})`,
         })
-      .addClass("ripple-on")
-      .data("animating", "on")
-      .data("mousedown", "on");
+        .addClass('ripple-on')
+        .data('animating', 'on')
+        .data('mousedown', 'on');
     } else {
-      $ripple.animate({
-        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
-        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
-        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
-        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
-        "opacity": 0.2
-      }, 500, function() {
-        $ripple.trigger("transitionend");
-      });
+      $ripple.animate(
+        {
+          width: Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+          height: Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+          'margin-left': Math.max($element.outerWidth(), $element.outerHeight()) * -1,
+          'margin-top': Math.max($element.outerWidth(), $element.outerHeight()) * -1,
+          opacity: 0.2,
+        },
+        500,
+        function() {
+          $ripple.trigger('transitionend');
+        },
+      );
     }
   };
 
-
   /**
    * Create the jquery plugin function
    */
   $.fn.ripples = function(options) {
     return this.each(function() {
-      if(!$.data(this, "plugin_" + ripples)) {
-        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      if (!$.data(this, `plugin_${ripples}`)) {
+        $.data(this, `plugin_${ripples}`, new Ripples(this, options));
       }
     });
   };
-
 })(jQuery, window, document);