@pb33f/cowboy-components 0.6.5 → 0.6.7

package/dist/components/auth/login-button.d.ts

@@ -1,10 +1,12 @@
 import { LitElement } from "lit";
 import { SlDialog } from "@shoelace-style/shoelace";
+import { OAuthLogin } from "./oauth-login";
 export declare class LoginButton extends LitElement {
     static styles: import("lit").CSSResult[];
     authDialog: SlDialog;
     title: string;
     buttonLabel: string;
+    oauthLogin: OAuthLogin;
     private controller;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/auth/login-button.js

@@ -42,6 +42,8 @@ let LoginButton = class LoginButton extends LitElement {
     }
     hide() {
         this.authDialog.hide();
+        this.oauthLogin.animateBox = false;
+        this.oauthLogin.requestUpdate();
     }
     authenticatedView() {
         return html `
@@ -68,6 +70,8 @@ let LoginButton = class LoginButton extends LitElement {
         }));
     }
     openAuthModal() {
+        this.oauthLogin.animateBox = true;
+        this.oauthLogin.requestUpdate();
         this.authDialog.show();
     }
 };
@@ -81,6 +85,9 @@ __decorate([
 __decorate([
     property()
 ], LoginButton.prototype, "buttonLabel", void 0);
+__decorate([
+    query('pb33f-oauth-login')
+], LoginButton.prototype, "oauthLogin", void 0);
 LoginButton = __decorate([
     customElement('pb33f-login-button')
 ], LoginButton);

package/dist/components/auth/oauth-login.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import '../electric-box/electric-box.js';
 import { SlAnimation, SlButton } from "@shoelace-style/shoelace";
+import { ElectricBox } from "../electric-box/electric-box";
 export declare class OAuthLogin extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
@@ -9,8 +10,10 @@ export declare class OAuthLogin extends LitElement {
     maxtravel: number;
     spin: number;
     orbs: boolean;
+    animateBox: boolean;
     buttonAnimation: SlAnimation;
     githubButton: SlButton;
+    electricBox: ElectricBox;
     constructor();
     githubLogin(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/auth/oauth-login.js

@@ -19,6 +19,7 @@ let OAuthLogin = class OAuthLogin extends LitElement {
         this.maxtravel = 6500;
         this.spin = 20;
         this.orbs = true;
+        this.animateBox = false;
     }
     githubLogin() {
         this.mintravel = 1000;
@@ -38,7 +39,8 @@ let OAuthLogin = class OAuthLogin extends LitElement {
     render() {
         return html `
             <div style="width: 500px; height: 280px; margin: 0 auto;">
-                <pb33f-electric-box .orbs="${this.orbs}" 
+                <pb33f-electric-box .orbs="${this.orbs}"
+                                    ?disable=${!this.animateBox}
                                     spin spinamount="${this.spin}" 
                                     mintraveltime="${this.mintravel}" 
                                     maxtraveltime="${this.maxtravel}" 
@@ -81,12 +83,18 @@ __decorate([
 __decorate([
     state()
 ], OAuthLogin.prototype, "orbs", void 0);
+__decorate([
+    state()
+], OAuthLogin.prototype, "animateBox", void 0);
 __decorate([
     query('#button-anim')
 ], OAuthLogin.prototype, "buttonAnimation", void 0);
 __decorate([
     query('#github-button')
 ], OAuthLogin.prototype, "githubButton", void 0);
+__decorate([
+    query('pb33f-electric-box')
+], OAuthLogin.prototype, "electricBox", void 0);
 OAuthLogin = __decorate([
     customElement("pb33f-oauth-login")
 ], OAuthLogin);

package/dist/components/electric-box/electric-box.d.ts

@@ -10,6 +10,7 @@ export declare class ElectricBox extends LitElement {
     maxtraveltime: number;
     height: number;
     heroView: boolean;
+    disable: boolean;
     color: string;
     private container;
     private orbPath;
@@ -24,6 +25,9 @@ export declare class ElectricBox extends LitElement {
     constructor();
     render(): TemplateResult;
     protected firstUpdated(): void;
+    protected updated(): void;
+    runAnimation(): void;
+    stopAnimation(): void;
     protected willUpdate(): void;
     disconnectedCallback(): void;
     private getRandomBorderPosition;

package/dist/components/electric-box/electric-box.js

@@ -23,6 +23,7 @@ let ElectricBox = class ElectricBox extends LitElement {
         this.maxtraveltime = 4000;
         this.heroView = false;
         this.height = 500;
+        this.disable = false;
     }
     render() {
         return html `
@@ -91,31 +92,50 @@ let ElectricBox = class ElectricBox extends LitElement {
         this.orbGroup = this.container.select("#orb-group");
         this.orb = this.container.select("#orb-circle");
         this.orb.attr({ display: "none" });
-        if (this.orbs) {
-            this.orbTimer = setInterval(() => {
-                this.spawnOrb();
-            }, 500);
+    }
+    updated() {
+        if (this.disable) {
+            this.stopAnimation();
+        }
+        else {
+            this.runAnimation();
         }
-        this.pixelSpawnTimer = setInterval(() => {
-            if (this.activePixelCount < this.pixelConfig.maxActivePixels) {
-                this.spawnPixel();
-            }
-        }, this.pixelConfig.spawnIntervalMs);
     }
-    willUpdate() {
-        if (this.orbTimer && !this.orbs) {
-            clearInterval(this.orbTimer);
+    runAnimation() {
+        // Ensure timers have not already been started.
+        if (!this.pixelSpawnTimer && !this.disable) {
+            if (this.orbs) {
+                this.orbTimer = setInterval(() => {
+                    this.spawnOrb();
+                }, 500);
+            }
+            this.pixelSpawnTimer = setInterval(() => {
+                if (this.activePixelCount < this.pixelConfig.maxActivePixels) {
+                    this.spawnPixel();
+                }
+            }, this.pixelConfig.spawnIntervalMs);
         }
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
+    stopAnimation() {
+        // Clear the animation timers if they exist.
         if (this.pixelSpawnTimer) {
             clearInterval(this.pixelSpawnTimer);
+            this.pixelSpawnTimer = null;
         }
         if (this.orbTimer) {
             clearInterval(this.orbTimer);
+            this.orbTimer = null;
+        }
+    }
+    willUpdate() {
+        if (this.orbTimer && !this.orbs) {
+            clearInterval(this.orbTimer);
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopAnimation();
+    }
     getRandomBorderPosition() {
         // If heroView is true, only spawn pixels on the top (edge 0) or bottom (edge 1)
         if (this.heroView) {
@@ -327,6 +347,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ElectricBox.prototype, "heroView", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable' })
+], ElectricBox.prototype, "disable", void 0);
 __decorate([
     property()
 ], ElectricBox.prototype, "color", void 0);

package/dist/components/paginator/paginator.css.js

@@ -21,7 +21,7 @@ export default css `
     }
     
     .no-values {
-        //min-height: 550px;
+        height: 600px;
         width: 500px;
         margin: 0 auto;
         padding-top: 50px;

package/dist/components/paginator/paginator.d.ts

@@ -9,6 +9,7 @@ export declare class Paginator extends LitElement {
     label: string;
     activeIndex: number;
     invalid: boolean;
+    hideSparks: boolean;
     private renderValues;
     private sparks;
     private paginatorNavigator;

package/dist/components/paginator/paginator.js

@@ -20,6 +20,7 @@ let Paginator = class Paginator extends LitElement {
         this.itemsPerPage = 20;
         this.activeIndex = 0;
         this.invalid = false;
+        this.hideSparks = false;
         this.paginatorNavigator = new PaginatorNavigation();
         this.paginatorNavigator.currentPage = this.currentPage;
         this.paginatorNavigator.totalPages = this.totalPages;
@@ -84,14 +85,29 @@ let Paginator = class Paginator extends LitElement {
     }
     render() {
         this.sparks.isError = this.invalid;
+        if (this.sparks.animating) {
+            this.sparks.stopAnimation();
+        }
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            return html `
-                <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">
-                    <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
-                    <sl-icon name="prescription2"></sl-icon><br/>
-                    ${this.invalid ? 'invalid / error' : 'healthy!'}
-            </div>
-            `;
+            if (!this.sparks.animating) {
+                this.sparks.startAnimation();
+            }
+            if (!this.hideSparks) {
+                return html `
+                    <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">
+                        <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
+                        <sl-icon name="prescription2"></sl-icon>
+                        <br/>
+                        ${this.invalid ? 'invalid / error' : 'healthy!'}
+                    </div>
+                `;
+            }
+            else {
+                return html `
+                    <div class="no-values" style="position: relative">
+                    </div>
+                    `;
+            }
         }
         return html `
             ${this.paginatorNavigator}
@@ -126,6 +142,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Paginator.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean })
+], Paginator.prototype, "hideSparks", void 0);
 Paginator = __decorate([
     customElement("pb33f-paginator-navigation")
 ], Paginator);

package/dist/components/the-doctor/sparks.d.ts

@@ -5,11 +5,14 @@ export declare class PixelSparks extends LitElement {
     private readonly spawnRate;
     private ctx;
     private canvas;
+    private animationTimer;
     isError: boolean;
+    animating: boolean;
     static styles: import("lit").CSSResult;
     constructor();
     firstUpdated(): void;
     startAnimation(): void;
+    stopAnimation(): void;
     getRandomBetween(min: number, max: number): number;
     spawnSpark(): void;
     animateSparks(): void;

package/dist/components/the-doctor/sparks.js

@@ -13,6 +13,7 @@ let PixelSparks = class PixelSparks extends LitElement {
         this.gravity = 0.0001;
         this.spawnRate = 70;
         this.isError = false;
+        this.animating = false;
     }
     firstUpdated() {
         const canvas = this.renderRoot.querySelector('canvas');
@@ -23,11 +24,19 @@ let PixelSparks = class PixelSparks extends LitElement {
                 this.ctx = ctx;
             }
         }
-        this.startAnimation();
     }
     startAnimation() {
-        setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
-        this.animateSparks();
+        if (!this.animating) {
+            this.animationTimer = setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
+            this.animateSparks();
+            this.animating = true;
+        }
+    }
+    stopAnimation() {
+        if (this.animating) {
+            clearInterval(this.animationTimer);
+            this.animating = false;
+        }
     }
     getRandomBetween(min, max) {
         return Math.random() * (max - min) + min;
@@ -64,8 +73,10 @@ let PixelSparks = class PixelSparks extends LitElement {
     drawSpark(spark) {
         this.ctx.globalAlpha = spark.opacity; // Set transparency level
         this.ctx.fillStyle = spark.color;
-        this.ctx.shadowColor = spark.color;
-        this.ctx.shadowBlur = 8;
+        if (!/Safari/.test(navigator.userAgent)) {
+            this.ctx.shadowColor = spark.color;
+            this.ctx.shadowBlur = 8;
+        }
         this.ctx.fillRect(spark.x, spark.y, spark.size, spark.size);
         this.ctx.globalAlpha = 1; // Reset alpha to default
     }