@pb33f/cowboy-components 0.6.5 → 0.6.6

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;
@@ -36,9 +37,11 @@ let OAuthLogin = class OAuthLogin extends LitElement {
         }, 2000);
     }
     render() {
+        console.log('rendering with ' + this.animateBox);
         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 +84,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);