1.2.3

changelog.md

@@ -1,5 +1,65 @@
 # Changelog
 
+## 2025-01-09 - 1.2.3 - fix(webwidget)
+Fix style issues for UptimelinkWebwidget element.
+
+- Resolved indentation and formatting issues in UptimelinkWebwidget component.
+- Ensured proper use of cssManager for theming.
+- Fixed event handling for expanded view toggle.
+
+## 2025-01-09 - 1.2.2 - fix(component)
+Fix sizing of status indicator in uptimelink-webwidget
+
+- Corrected the status indicator dimensions for consistency.
+
+## 2025-01-09 - 1.2.1 - fix(UptimelinkWebwidget)
+Remove incorrect scale transformation in focused state.
+
+- Fixed the CSS transform property for the .mainbox.focused class in the UptimelinkWebwidget component by removing an unintended scale transformation.
+
+## 2025-01-09 - 1.2.0 - feat(webwidget)
+Enhanced widget animations and styling
+
+- Enabled reflect option for 'isOnTop' and 'showExpanded' properties.
+- Improved the animation and styling of the 'mainbox' when it gains focus.
+- Mainbox now has smoother opacity transitions and better background handling.
+- Enhanced functionality of widget positioning for better rendering.
+
+## 2024-06-28 - 1.1.2 - fix(elements)
+Fix blur effect in UptimelinkWebwidget component
+
+- Changed blur effect from true to false in the DeesWindowLayer setup
+
+## 2024-06-27 - 1.1.1 - fix(build)
+Fix build script to use correct tsbuild command
+
+- Corrected the build script in package.json to use 'tsbuild tsfolders --allowimplicitany && tsbundle element --production' instead of 'tsbuild element --allowimplicitany && tsbundle element --production'.
+
+## 2024-06-27 - 1.1.0 - feat(elements)
+Add performance improvements to uptimelink-webwidget
+
+- Added 'will-change: transform' to improve performance of the transform property
+- Increased transition speed for element opacity from 0.2s to 0.1s for faster visual feedback
+- Added scale transformation effect to the focused state of the widget
+
+## 2024-06-27 - 1.0.82 - fix(core)
+No code changes detected. Preparing for version increment based on package state.
+
+
+## 2024-06-26 - 1.0.81 - fix(core)
+Updated dependencies and improved code documentation.
+
+- Updated internal dependencies to newer versions.
+- Improved code documentation within TypeScript files.
+- Adjusted scripts in package.json for better build performance.
+
+## 2024-06-26 - 1.0.80 - fix(documentation)
+Update package description and README for clarity
+
+- Updated the README to provide better installation and usage instructions.
+- Ensured that all sections contain relevant TypeScript and HTML examples.
+- Added styling and advanced interaction examples to README.
+
 ## 2024-06-26 - 1.0.79 - fix(core)
 Fixed various package metadata issues and improved component interactions
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptime.link/webwidget",
-  "version": "1.0.79",
+  "version": "1.2.3",
   "private": false,
   "description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
   "main": "dist_ts_web/index.js",
@@ -8,22 +8,22 @@
   "type": "module",
   "scripts": {
     "test": "npm run build",
-    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-catalog": "^1.0.289",
+    "@design.estate/dees-catalog": "^1.3.3",
-    "@design.estate/dees-domtools": "^2.0.57",
+    "@design.estate/dees-domtools": "^2.1.1",
-    "@design.estate/dees-element": "^2.0.34",
+    "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.82",
+    "@git.zone/tsbuild": "^2.2.0",
-    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tsbundle": "^2.1.0",
-    "@git.zone/tsrun": "^1.2.49",
+    "@git.zone/tsrun": "^1.3.3",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.0.79',
+  version: '1.2.3',
   description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -1,4 +1,12 @@
-import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css,
+} from '@design.estate/dees-element';
 
 import { DeesWindowLayer } from '@design.estate/dees-catalog';
 
@@ -15,7 +23,8 @@ export class UptimelinkWebwidget extends DeesElement {
   `;
 
   @property({
-    type: Boolean
+    type: Boolean,
+    reflect: true,
   })
   isOnTop = false;
 
@@ -28,9 +37,14 @@ export class UptimelinkWebwidget extends DeesElement {
   @property()
   public isElevated = false;
 
-  @property()
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
   public showExpanded: boolean = false;
 
+  public parentWebwidget: UptimelinkWebwidget;
+
   constructor() {
     super();
     this.setupEventing();
@@ -38,135 +52,149 @@ export class UptimelinkWebwidget extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-  ]
+    css`
+      :host {
+        position: relative;
+        display: block;
+        height: 30px;
+      }
+      .mainbox {
+        position: relative;
+        line-height: 1em;
+        margin: auto;
+        font-family: Roboto;
+        font-weight: 540;
+        font-size: 12px;
+        box-sizing: border-box;
+        width: 150px;
+        border-radius: 15px;
+        height: 30px;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')};
+        border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
+        padding: 4px;
+        color: ${cssManager.bdTheme('#333', '#CCC')};
+        cursor: pointer;
+        transition: all 0.2s, background 0.1s;
+        overflow: hidden;
+        will-change: transform;
+        opacity: 1;
+      }
+      .mainbox.hidden {
+        opacity: 0;
+      }
+
+      .firstLine {
+        display: grid;
+        grid-template-columns: 26px auto;
+      }
+
+      .mainbox.focused {
+        width: 182px;
+        height: 117px;
+        transform: translateX(-16px);
+        background: ${cssManager.bdTheme('#ffffff', '#222222')} !important; 
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important;
+      }
+
+      .statusindicator {
+        transform: translate(4px, 4px);
+        height: 12px;
+        width: 12px;
+        background: #66bb6a;
+        border-radius: 10px;
+      }
+      .statustext {
+        line-height: 20px;
+      }
+
+      .expanded {
+        opacity: 0;
+        transition: opacity 0.1s;
+      }
+
+      .miniHeading {
+        position: absolute;
+        width: 190px;
+        top: 25px;
+        left: 5px;
+        margin-top: 10px;
+        font-size: 12px;
+      }
+
+      .miniOverview24h {
+        position: absolute;
+        top: 55px;
+        left: 5px;
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
+        border-radius: 3px;
+        width: 172px;
+        height: 30px;
+        display: grid;
+        padding: 3px 3px;
+        grid-template-columns: repeat(30, 4px);
+        grid-column-gap: 3px;
+      }
+
+      .miniOverview24h .statusBar {
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
+        border-radius: 10px;
+      }
+
+      .miniOverview24h .statusBar.ok {
+        background: #66bb6a;
+      }
+
+      .viewStatuspage {
+        position: absolute;
+        width: 172px;
+        top: 80px;
+        left: 5px;
+        text-align: center;
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
+        border-radius: 3px 3px 10px 10px;
+        padding: 5px;
+        margin-top: 10px;
+        transition: background 0.1s;
+      }
+
+      .viewStatuspage:hover {
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
       <style>
-        :host {
+      :host {
-          position: relative;
+        z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
-          display: block;
+      }
-          height: 30px;
-          z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'} ;
-        }
-        .mainbox {
-          position: relative;
-          line-height: 1em;
-          margin: auto;
-          font-family: Roboto;
-          font-weight: 540;
-          font-size: 12px;
-          box-sizing: border-box;
-          width: 150px;
-          border-radius: 15px;
-          height: 30px;
-          background: ${this.goBright ? '#fff' : '#222' };
-          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
-          padding: 5px;
-          color: ${this.goBright ? '#333' : '#CCC' };
-          cursor: pointer;
-          transition: all 0.2s;
-          overflow: hidden;
-        }
-
-        .firstLine {
-          display: grid;
-          grid-template-columns: 26px auto;
-        }
-
-        .mainbox.focused {
-          width: 182px;
-          height: 117px;
-        }
-
-        .statusindicator {
-          height: 20px;
-          width: 20px;
-          background:  #66BB6A;
-          border-radius: 10px;
-        }
-        .statustext {
-          line-height: 20px;
-        }
-
-        .expanded {
-          opacity: 0;
-          transition: opacity 0.2s;
-        }
-
-        .miniHeading {
-          position: absolute;
-          width: 190px;
-          top: 25px;
-          left: 5px;
-          margin-top: 10px;
-          font-size: 12px;
-        }
-
-        .miniOverview24h {
-          position: absolute;
-          top: 55px;
-          left: 5px;
-          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
-          border-radius: 3px;
-          width: 172px;
-          height: 30px;
-          display: grid;
-          padding: 3px 3px;
-          grid-template-columns: repeat(30, 4px);
-          grid-column-gap: 3px;
-        }
-
-        .miniOverview24h .statusBar {
-          background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
-          border-radius: 10px;
-        }
-
-        .miniOverview24h .statusBar.ok {
-          background:  #66BB6A;
-        }
-
-        .viewStatuspage {
-          position: absolute;
-          width: 172px;
-          top: 80px;
-          left: 5px;
-          text-align: center;
-          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
-          border-radius: 3px 3px 10px 10px;
-          padding: 5px;
-          margin-top: 10px;
-          transition: background 0.1s;
-        }
-
-        .viewStatuspage:hover {
-          background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
-        }
       </style>
       <div class="mainbox ${this.isFocused ? 'focused' : null}">
         <div class="firstLine">
           <div class="statusindicator"></div>
           <div class="statustext">All systems are up!</div>
         </div>
-        ${this.showExpanded ? html`
+        ${this.showExpanded
-          <div class="expanded">
+          ? html`
-            <div class="miniHeading">
+              <div class="expanded">
-              last 24 hours:
+                <div class="miniHeading">last 24 hours:</div>
-            </div>
+                <div class="miniOverview24h">
-            <div class="miniOverview24h">
+                  ${(() => {
-              ${(() => {
+                    let counter = 0;
-                let counter = 0;
+                    const returnArray = [];
-                const returnArray = [];
+                    while (counter < 24) {
-                while(counter < 24) {
+                      returnArray.push(html`<div class="statusBar ok"></div>`);
-                  returnArray.push(html`<div class="statusBar ok"></div>`)
+                      counter++;
-                  counter++;
+                    }
-                };
+                    return returnArray;
-                return returnArray;
+                  })()}
-              })()}
+                </div>
-            </div>
+                <div class="viewStatuspage">View full Statuspage ...</div>
-            <div class="viewStatuspage">View full Statuspage ...</div>
+              </div>
-          </div>
+            `
-        ` : null}
+          : null}
       </div>
     `;
   }
@@ -181,17 +209,19 @@ export class UptimelinkWebwidget extends DeesElement {
         const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLElement;
         const rect = mainbox.getBoundingClientRect();
         const uptimelinkWidget = new UptimelinkWebwidget();
+        uptimelinkWidget.parentWebwidget = this;
         uptimelinkWidget.isOnTop = true;
         uptimelinkWidget.style.position = 'fixed';
         uptimelinkWidget.style.top = `${rect.top}px`;
         uptimelinkWidget.style.left = `${rect.left}px`;
         document.body.append(uptimelinkWidget);
+        mainbox.classList.add('hidden');
         return;
       }
       this.isElevated = true;
       this.isFocused = true;
       this.windowLayer = await DeesWindowLayer.createAndShow({
-        blur: true,
+        blur: false,
       });
       await domtools.convenience.smartdelay.delayFor(200);
       if (!this.isFocused) {
@@ -199,7 +229,7 @@ export class UptimelinkWebwidget extends DeesElement {
       }
       this.showExpanded = true;
       await this.performUpdate();
-      await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
+      await domtools.convenience.smartdelay.delayFor(0);
       const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
       expandedDiv.style.opacity = '1';
     };
@@ -208,7 +238,8 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.windowLayer.destroy();
-      domtools.convenience.smartdelay.delayFor(200).then(() => {
+      this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
+      domtools.convenience.smartdelay.delayFor(200).then(async () => {
         if (!this.isFocused) {
           this.isElevated = false;
           this.remove();
@@ -221,6 +252,6 @@ export class UptimelinkWebwidget extends DeesElement {
       this.showExpanded = false;
       await domtools.convenience.smartdelay.delayFor(50);
       this.isFocused = false;
-    }
+    };
   }
 }