stripe-gradient - npm Package Compare versions

Comparing version 1.0.1-canary.1 to 1.0.1-canary.2

dist/main.js

@@ -279,3 +279,3 @@ function $parcel$export(e, n, v, s) {
 //Sets initial properties
-function $4559ecf940edc78d$export$f1e1789686576879(object, propertyName, val) {
+function $4559ecf940edc78d$export$aba8e698f38090e0(object, propertyName, val) {
     return propertyName in object ? Object.defineProperty(object, propertyName, {
@@ -305,3 +305,3 @@ value: val,
     constructor(...t){
-        (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "el", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "cssVarRetries", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "maxCssVarRetries", 200), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "angle", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isLoadedClass", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isScrolling", !1), /*e(this, "isStatic", o.disableAmbientAnimations()),*/ (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollingTimeout", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollingRefreshDelay", 200), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isIntersecting", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "shaderFiles", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "vertexShader", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "sectionColors", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "computedCanvasStyle", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "conf", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "uniforms", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "t", 1253106), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "last", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "width", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "minWidth", 1111), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "height", 600), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "xSegCount", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "ySegCount", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "mesh", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "material", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "geometry", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "minigl", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollObserver", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "amp", 320), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "seed", 5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqX", 14e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqY", 29e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqDelta", 1e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "activeColors", [
+        (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "el", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "cssVarRetries", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "maxCssVarRetries", 200), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "angle", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isLoadedClass", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isScrolling", !1), /*setInitialProperty(this, "isStatic", o.disableAmbientAnimations()),*/ (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollingTimeout", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollingRefreshDelay", 200), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isIntersecting", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "shaderFiles", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "vertexShader", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "sectionColors", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "computedCanvasStyle", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "conf", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "uniforms", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "t", 1253106), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "last", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "width", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "minWidth", 1111), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "height", 600), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "xSegCount", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "ySegCount", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "mesh", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "material", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "geometry", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "minigl", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollObserver", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "amp", 320), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "seed", 5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqX", 14e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqY", 29e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqDelta", 1e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "activeColors", [
             1,
@@ -311,13 +311,13 @@ 1,
             1
-        ]), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isMetaKey", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isGradientLegendVisible", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isMouseDown", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleScroll", ()=>{
-            clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause());
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleScrollEnd", ()=>{
+        ]), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isMetaKey", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isGradientLegendVisible", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isMouseDown", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleScroll", ()=>{
+            clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.paussetInitialProperty());
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleScrollEnd", ()=>{
             this.isScrolling = !1, this.isIntersecting && this.play();
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "resize", ()=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "resize", ()=>{
             this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthographicCamera(), this.xSegCount = Math.ceil(this.width * this.conf.density[0]), this.ySegCount = Math.ceil(this.height * this.conf.density[1]), this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount), this.mesh.geometry.setSize(this.width, this.height), this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6;
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleMouseDown", (e)=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleMouseDown", (e)=>{
             this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate));
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleMouseUp", ()=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleMouseUp", ()=>{
             this.isMouseDown = !1;
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "animate", (e)=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "animate", (e)=>{
             if (!this.shouldSkipFrame(e) || this.isMouseDown) {
@@ -332,11 +332,11 @@ if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) {
             (this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate);
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "addIsLoadedClass", ()=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "addIsLoadedClass", ()=>{
             /*this.isIntersecting && */ !this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(()=>{
                 this.el.parentElement.classList.add("isLoaded");
             }, 3e3));
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "pause", ()=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "pause", ()=>{
             this.conf.playing = false;
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "play", ()=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "play", ()=>{
             requestAnimationFrame(this.animate), this.conf.playing = true;
-        }), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "initGradient", (selector)=>{
+        }), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "initGradient", (selector)=>{
             this.el = document.querySelector(selector);
@@ -343,0 +343,0 @@ this.connect();

package.json

 {
   "name": "stripe-gradient",
-  "version": "1.0.1-canary.1",
+  "version": "1.0.1-canary.2",
   "author": "Kyle Hasty <[e-mail]>",
@@ -19,2 +19,3 @@ "description": "Stripe WebGl Gradient Animation",
   "scripts": {
+    "dev": "parcel example/index.html",
     "watch": "parcel watch",
@@ -21,0 +22,0 @@ "build": "parcel build",

README.md

@@ -37,1 +37,8 @@ # Stripe WebGl Gradient Animation
 ```
+
+## Local Dev
+
+```sh
+yarn install
+yarn dev
+```

src/Gradient.js

 import MiniGl from './MiniGl'
-import { normalizeColor, e } from './utils'
+import { normalizeColor, setInitialProperty } from './utils'
 
@@ -21,48 +21,48 @@ /*
     constructor(...t) {
-        e(this, 'el', void 0),
-        e(this, 'cssVarRetries', 0),
-        e(this, 'maxCssVarRetries', 200),
-        e(this, 'angle', 0),
-        e(this, 'isLoadedClass', !1),
-        e(this, 'isScrolling', !1),
-        /*e(this, "isStatic", o.disableAmbientAnimations()),*/ e(this, 'scrollingTimeout', void 0),
-        e(this, 'scrollingRefreshDelay', 200),
-        e(this, 'isIntersecting', !1),
-        e(this, 'shaderFiles', void 0),
-        e(this, 'vertexShader', void 0),
-        e(this, 'sectionColors', void 0),
-        e(this, 'computedCanvasStyle', void 0),
-        e(this, 'conf', void 0),
-        e(this, 'uniforms', void 0),
-        e(this, 't', 1253106),
-        e(this, 'last', 0),
-        e(this, 'width', void 0),
-        e(this, 'minWidth', 1111),
-        e(this, 'height', 600),
-        e(this, 'xSegCount', void 0),
-        e(this, 'ySegCount', void 0),
-        e(this, 'mesh', void 0),
-        e(this, 'material', void 0),
-        e(this, 'geometry', void 0),
-        e(this, 'minigl', void 0),
-        e(this, 'scrollObserver', void 0),
-        e(this, 'amp', 320),
-        e(this, 'seed', 5),
-        e(this, 'freqX', 14e-5),
-        e(this, 'freqY', 29e-5),
-        e(this, 'freqDelta', 1e-5),
-        e(this, 'activeColors', [1, 1, 1, 1]),
-        e(this, 'isMetaKey', !1),
-        e(this, 'isGradientLegendVisible', !1),
-        e(this, 'isMouseDown', !1),
-        e(this, 'handleScroll', () => {
+        setInitialProperty(this, 'el', void 0),
+        setInitialProperty(this, 'cssVarRetries', 0),
+        setInitialProperty(this, 'maxCssVarRetries', 200),
+        setInitialProperty(this, 'angle', 0),
+        setInitialProperty(this, 'isLoadedClass', !1),
+        setInitialProperty(this, 'isScrolling', !1),
+        /*setInitialProperty(this, "isStatic", o.disableAmbientAnimations()),*/ setInitialProperty(this, 'scrollingTimeout', void 0),
+        setInitialProperty(this, 'scrollingRefreshDelay', 200),
+        setInitialProperty(this, 'isIntersecting', !1),
+        setInitialProperty(this, 'shaderFiles', void 0),
+        setInitialProperty(this, 'vertexShader', void 0),
+        setInitialProperty(this, 'sectionColors', void 0),
+        setInitialProperty(this, 'computedCanvasStyle', void 0),
+        setInitialProperty(this, 'conf', void 0),
+        setInitialProperty(this, 'uniforms', void 0),
+        setInitialProperty(this, 't', 1253106),
+        setInitialProperty(this, 'last', 0),
+        setInitialProperty(this, 'width', void 0),
+        setInitialProperty(this, 'minWidth', 1111),
+        setInitialProperty(this, 'height', 600),
+        setInitialProperty(this, 'xSegCount', void 0),
+        setInitialProperty(this, 'ySegCount', void 0),
+        setInitialProperty(this, 'mesh', void 0),
+        setInitialProperty(this, 'material', void 0),
+        setInitialProperty(this, 'geometry', void 0),
+        setInitialProperty(this, 'minigl', void 0),
+        setInitialProperty(this, 'scrollObserver', void 0),
+        setInitialProperty(this, 'amp', 320),
+        setInitialProperty(this, 'seed', 5),
+        setInitialProperty(this, 'freqX', 14e-5),
+        setInitialProperty(this, 'freqY', 29e-5),
+        setInitialProperty(this, 'freqDelta', 1e-5),
+        setInitialProperty(this, 'activeColors', [1, 1, 1, 1]),
+        setInitialProperty(this, 'isMetaKey', !1),
+        setInitialProperty(this, 'isGradientLegendVisible', !1),
+        setInitialProperty(this, 'isMouseDown', !1),
+        setInitialProperty(this, 'handleScroll', () => {
             clearTimeout(this.scrollingTimeout),
             (this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay)),
             this.isGradientLegendVisible && this.hideGradientLegend(),
-            this.conf.playing && ((this.isScrolling = !0), this.pause())
+            this.conf.playing && ((this.isScrolling = !0), this.paussetInitialProperty())
         }),
-        e(this, 'handleScrollEnd', () => {
+        setInitialProperty(this, 'handleScrollEnd', () => {
             ;(this.isScrolling = !1), this.isIntersecting && this.play()
         }),
-        e(this, 'resize', () => {
+        setInitialProperty(this, 'resize', () => {
             ;(this.width = window.innerWidth),
@@ -77,10 +77,10 @@ this.minigl.setSize(this.width, this.height),
         }),
-        e(this, 'handleMouseDown', (e) => {
+        setInitialProperty(this, 'handleMouseDown', (e) => {
             this.isGradientLegendVisible &&
             ((this.isMetaKey = e.metaKey), (this.isMouseDown = !0), !1 === this.conf.playing && requestAnimationFrame(this.animate))
         }),
-        e(this, 'handleMouseUp', () => {
+        setInitialProperty(this, 'handleMouseUp', () => {
             this.isMouseDown = !1
         }),
-        e(this, 'animate', (e) => {
+        setInitialProperty(this, 'animate', (e) => {
             if (!this.shouldSkipFrame(e) || this.isMouseDown) {
@@ -100,3 +100,3 @@ if (((this.t += Math.min(e - this.last, 1e3 / 15)), (this.last = e), this.isMouseDown)) {
         }),
-        e(this, 'addIsLoadedClass', () => {
+        setInitialProperty(this, 'addIsLoadedClass', () => {
             /*this.isIntersecting && */ !this.isLoadedClass &&
@@ -109,9 +109,9 @@ ((this.isLoadedClass = !0),
         }),
-        e(this, 'pause', () => {
+        setInitialProperty(this, 'pause', () => {
             this.conf.playing = false
         }),
-        e(this, 'play', () => {
+        setInitialProperty(this, 'play', () => {
             requestAnimationFrame(this.animate), (this.conf.playing = true)
         }),
-        e(this, 'initGradient', (selector) => {
+        setInitialProperty(this, 'initGradient', (selector) => {
             this.el = document.querySelector(selector)
@@ -118,0 +118,0 @@ this.connect()

src/utils.js

@@ -14,3 +14,3 @@ //Converting colors to proper format
   //Sets initial properties
-  function e(object, propertyName, val) {
+  function setInitialProperty(object, propertyName, val) {
     return (
@@ -29,2 +29,2 @@ propertyName in object
 
-  export { normalizeColor, e }
+  export { normalizeColor, setInitialProperty }

No alert changes

Improved metrics

Total package byte prevSize

85474

increased by1.98%

Number of package files

13

increased by18.18%

Lines of code

1355

increased by1.88%

Number of lines in readme file

44

increased by18.92%

No dependency changes