Skip to content

C
CivWeb
Commit 0394433d authored by 张瑶's avatar 张瑶
Browse files
Options

fix: edit conflict

parent 73c6bb47
master dev devNew soundai test
No related merge requests found
Pipeline #77817 passed with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 260 additions and 305 deletions
          src/assets/js/ripples/jquery.ripples.js
          View file @ 0394433d
          ......@@ -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
          View file @ 0394433d
          ......@@ -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);
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment