Compare commits
No commits in common. "master" and "v1.0.58" have entirely different histories.
137
.gitlab-ci.yml
Normal file
137
.gitlab-ci.yml
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
# gitzone ci_default
|
||||||
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
|
||||||
|
cache:
|
||||||
|
paths:
|
||||||
|
- .npmci_cache/
|
||||||
|
key: '$CI_BUILD_STAGE'
|
||||||
|
|
||||||
|
stages:
|
||||||
|
- security
|
||||||
|
- test
|
||||||
|
- release
|
||||||
|
- metadata
|
||||||
|
|
||||||
|
# ====================
|
||||||
|
# security stage
|
||||||
|
# ====================
|
||||||
|
mirror:
|
||||||
|
stage: security
|
||||||
|
script:
|
||||||
|
- npmci git mirror
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
- notpriv
|
||||||
|
|
||||||
|
auditProductionDependencies:
|
||||||
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
stage: security
|
||||||
|
script:
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci command npm install --production --ignore-scripts
|
||||||
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
- npmci command npm audit --audit-level=high --only=prod --production
|
||||||
|
tags:
|
||||||
|
- docker
|
||||||
|
|
||||||
|
auditDevDependencies:
|
||||||
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
stage: security
|
||||||
|
script:
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci command npm install --ignore-scripts
|
||||||
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
- npmci command npm audit --audit-level=high --only=dev
|
||||||
|
tags:
|
||||||
|
- docker
|
||||||
|
allow_failure: true
|
||||||
|
|
||||||
|
# ====================
|
||||||
|
# test stage
|
||||||
|
# ====================
|
||||||
|
|
||||||
|
testStable:
|
||||||
|
stage: test
|
||||||
|
script:
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci node install stable
|
||||||
|
- npmci npm install
|
||||||
|
- npmci npm test
|
||||||
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
|
tags:
|
||||||
|
- docker
|
||||||
|
|
||||||
|
testBuild:
|
||||||
|
stage: test
|
||||||
|
script:
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci node install stable
|
||||||
|
- npmci npm install
|
||||||
|
- npmci command npm run build
|
||||||
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
|
tags:
|
||||||
|
- docker
|
||||||
|
|
||||||
|
release:
|
||||||
|
stage: release
|
||||||
|
script:
|
||||||
|
- npmci node install stable
|
||||||
|
- npmci npm publish
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
- notpriv
|
||||||
|
|
||||||
|
# ====================
|
||||||
|
# metadata stage
|
||||||
|
# ====================
|
||||||
|
codequality:
|
||||||
|
stage: metadata
|
||||||
|
allow_failure: true
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
script:
|
||||||
|
- npmci command npm install -g tslint typescript
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci npm install
|
||||||
|
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
- priv
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
stage: metadata
|
||||||
|
script:
|
||||||
|
- npmci trigger
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
- notpriv
|
||||||
|
|
||||||
|
pages:
|
||||||
|
stage: metadata
|
||||||
|
script:
|
||||||
|
- npmci node install lts
|
||||||
|
- npmci command npm install -g @gitzone/tsdoc
|
||||||
|
- npmci npm prepare
|
||||||
|
- npmci npm install
|
||||||
|
- npmci command tsdoc
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
- notpriv
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
artifacts:
|
||||||
|
expire_in: 1 week
|
||||||
|
paths:
|
||||||
|
- public
|
||||||
|
allow_failure: true
|
||||||
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,10 +2,28 @@
|
|||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [
|
||||||
{
|
{
|
||||||
"command": "npm test",
|
"name": "current file",
|
||||||
"name": "Run npm test",
|
"type": "node",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"type": "node-terminal"
|
"args": [
|
||||||
|
"${relativeFile}"
|
||||||
|
],
|
||||||
|
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||||
|
"cwd": "${workspaceRoot}",
|
||||||
|
"protocol": "inspector",
|
||||||
|
"internalConsoleOptions": "openOnSessionStart"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "test.ts",
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"args": [
|
||||||
|
"test/test.ts"
|
||||||
|
],
|
||||||
|
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||||
|
"cwd": "${workspaceRoot}",
|
||||||
|
"protocol": "inspector",
|
||||||
|
"internalConsoleOptions": "openOnSessionStart"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
95
changelog.md
95
changelog.md
@ -1,95 +0,0 @@
|
|||||||
# 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
|
|
||||||
|
|
||||||
- Corrected package name and description in package.json
|
|
||||||
- Updated dependencies and devDependencies to latest versions
|
|
||||||
- Enhanced installation and usage documentation in readme.md
|
|
||||||
- Replaced internal 'UptimelinkWindowLayer' with '@design.estate/dees-catalog' dependency
|
|
||||||
|
|
||||||
## 2023-10-06 - 1.0.78 - Core
|
|
||||||
Multiple core updates
|
|
||||||
|
|
||||||
- Applied fixes and updates to core functionality repeatedly from version 1.0.55 to 1.0.78.
|
|
||||||
|
|
||||||
## 2022-03-25 - 1.0.69 - Core
|
|
||||||
Core updates and fixes
|
|
||||||
|
|
||||||
- Incremental core fixes and updates from version 1.0.55 to 1.0.69.
|
|
||||||
|
|
||||||
## 2021-03-09 - 1.0.67 - Core
|
|
||||||
Series of core fixes
|
|
||||||
|
|
||||||
- Continued fixes and updates to core from version 1.0.55 to 1.0.67.
|
|
||||||
|
|
||||||
## 2020-11-29 - 1.0.61 - Core
|
|
||||||
Regular core fixes
|
|
||||||
|
|
||||||
- Ongoing core fixes and updates from version 1.0.55 to 1.0.61.
|
|
||||||
|
|
||||||
## 2020-09-19 - 1.0.58 - Core
|
|
||||||
Core updates
|
|
||||||
|
|
||||||
- Core has been updated and fixed multiple times from version 1.0.55 to 1.0.58.
|
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<!--gitzone element-->
|
<!--gitzone element-->
|
||||||
<!-- made by Task Venture Capital GmbH -->
|
<!-- made by Lossless GmbH -->
|
||||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@ -10,10 +10,6 @@
|
|||||||
/>
|
/>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<!--Lets load standard fonts-->
|
|
||||||
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
|
||||||
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
@ -21,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="module" src="/bundle.js"></script>
|
<script src="./index.ts"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
// dees tools
|
// dees tools
|
||||||
import * as deesWccTools from '@design.estate/dees-wcctools';
|
import * as deesWccTools from '@designestate/dees-wcctools';
|
||||||
import * as deesDomTools from '@design.estate/dees-domtools';
|
import * as deesDomTools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
// elements and pages
|
// elements and pages
|
||||||
import * as elements from '../ts_web/elements/index.js';
|
import * as elements from '../ts_web/elements';
|
||||||
import * as pages from '../ts_web/pages/index.js';
|
import * as pages from '../ts_web/pages';
|
||||||
|
|
||||||
deesWccTools.setupWccTools(elements as any, pages);
|
deesWccTools.setupWccTools(elements as any, pages);
|
||||||
deesDomTools.elementBasic.setup();
|
deesDomTools.elementBasic.setup();
|
||||||
|
|||||||
@ -2,25 +2,13 @@
|
|||||||
"gitzone": {
|
"gitzone": {
|
||||||
"projectType": "wcc",
|
"projectType": "wcc",
|
||||||
"module": {
|
"module": {
|
||||||
"githost": "code.foss.global",
|
"githost": "gitlab.com",
|
||||||
"gitscope": "uptime.link",
|
"gitscope": "uptimelink",
|
||||||
"gitrepo": "webwidget",
|
"gitrepo": "webwidget",
|
||||||
"description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
|
"shortDescription": "the webwidget for public use of uptimelink",
|
||||||
"npmPackagename": "@uptimelink/webwidget",
|
"npmPackagename": "@uptimelink/webwidget",
|
||||||
"license": "MIT",
|
"license": "UNLICENSED",
|
||||||
"projectDomain": "uptime.link",
|
"projectDomain": "uptime.link"
|
||||||
"keywords": [
|
|
||||||
"uptime",
|
|
||||||
"status",
|
|
||||||
"webwidget",
|
|
||||||
"monitoring",
|
|
||||||
"widget",
|
|
||||||
"typescript",
|
|
||||||
"web component",
|
|
||||||
"UI",
|
|
||||||
"frontend",
|
|
||||||
"npm package"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"npmci": {
|
"npmci": {
|
||||||
|
|||||||
10498
package-lock.json
generated
Normal file
10498
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
package.json
42
package.json
@ -1,30 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "@uptime.link/webwidget",
|
"name": "@uptimelink/webwidget",
|
||||||
"version": "1.2.3",
|
"version": "1.0.58",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
|
"description": "the webwidget for public use of uptimelink",
|
||||||
"main": "dist_ts_web/index.js",
|
"main": "dist_ts_web/index.js",
|
||||||
"typings": "dist_ts_web/index.d.ts",
|
"typings": "dist_ts_web/index.d.ts",
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "npm run build",
|
"test": "npm run build",
|
||||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
"build": "tsbuild element && tsbundle element --production",
|
||||||
"watch": "tswatch element"
|
"watch": "tswatch element"
|
||||||
},
|
},
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@design.estate/dees-catalog": "^1.3.3",
|
"@designestate/dees-domtools": "^1.0.41",
|
||||||
"@design.estate/dees-domtools": "^2.1.1",
|
"@designestate/dees-wcctools": "^1.0.37",
|
||||||
"@design.estate/dees-element": "^2.0.39",
|
"@gitzone/tsrun": "^1.2.12",
|
||||||
"@design.estate/dees-wcctools": "^1.0.90"
|
"@pushrocks/smartexpress": "^3.0.76",
|
||||||
|
"lit-element": "^2.3.1",
|
||||||
|
"typescript": "^4.0.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@git.zone/tsbuild": "^2.2.0",
|
"@gitzone/tsbuild": "^2.1.24",
|
||||||
"@git.zone/tsbundle": "^2.1.0",
|
"@gitzone/tsbundle": "^1.0.72",
|
||||||
"@git.zone/tsrun": "^1.3.3",
|
"@gitzone/tswatch": "^1.0.50",
|
||||||
"@git.zone/tswatch": "^2.0.37",
|
"@pushrocks/projectinfo": "^4.0.5",
|
||||||
"@push.rocks/projectinfo": "^5.0.2"
|
"tslint": "^6.1.3",
|
||||||
|
"tslint-config-prettier": "^1.17.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
@ -40,17 +42,5 @@
|
|||||||
],
|
],
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"last 1 Chrome versions"
|
"last 1 Chrome versions"
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"uptime",
|
|
||||||
"status",
|
|
||||||
"webwidget",
|
|
||||||
"monitoring",
|
|
||||||
"widget",
|
|
||||||
"typescript",
|
|
||||||
"web component",
|
|
||||||
"UI",
|
|
||||||
"frontend",
|
|
||||||
"npm package"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
7351
pnpm-lock.yaml
generated
7351
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
259
readme.md
259
readme.md
@ -1,245 +1,34 @@
|
|||||||
# @uptimelink/webwidget
|
# @uptimelink/webwidget
|
||||||
the webwidget for public use of uptimelink
|
the webwidget for public use of uptimelink
|
||||||
|
|
||||||
## Install
|
## Availabililty and Links
|
||||||
|
* [npmjs.org (npm package)](https://www.npmjs.com/package/@uptimelink/webwidget)
|
||||||
|
* [gitlab.com (source)](https://gitlab.com/uptimelink/webwidget)
|
||||||
|
* [github.com (source mirror)](https://github.com/uptimelink/webwidget)
|
||||||
|
* [docs (typedoc)](https://uptimelink.gitlab.io/webwidget/)
|
||||||
|
|
||||||
To install the `@uptimelink/webwidget` package, you need to have Node.js and npm (or yarn) installed. Once you have these prerequisites, you can install the package via npm by running the following command in your terminal:
|
## Status for master
|
||||||
|
|
||||||
```bash
|
Status Category | Status Badge
|
||||||
npm install @uptimelink/webwidget
|
-- | --
|
||||||
```
|
GitLab Pipelines | [](https://lossless.cloud)
|
||||||
|
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||||
Alternatively, if you use yarn, you can run:
|
npm | [](https://lossless.cloud)
|
||||||
|
Snyk | [](https://lossless.cloud)
|
||||||
```bash
|
TypeScript Support | [](https://lossless.cloud)
|
||||||
yarn add @uptimelink/webwidget
|
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||||
```
|
Code Style | [](https://lossless.cloud)
|
||||||
|
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||||
|
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||||
|
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||||
|
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Introduction
|
Use TypeScript for best in class intellisense
|
||||||
The `@uptimelink/webwidget` package provides a web component that can be embedded into web pages to display uptime information for a given project on the UptimeLink platform. The component is implemented using TypeScript and leverages modern web standards including Web Components and LitElement.
|
For further information read the linked docs at the top of this readme.
|
||||||
|
|
||||||
### Basic Setup
|
> UNLICENSED licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
||||||
First, you will need to import the `UptimelinkWebwidget` class and define it in your project. To do this, create an HTML file and include a script to register the web component.
|
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||||
|
|
||||||
```typescript
|
[](https://maintainedby.lossless.com)
|
||||||
// index.ts
|
|
||||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
|
||||||
|
|
||||||
// Append the webwidget component to the document body
|
|
||||||
document.body.appendChild(UptimelinkWebwidget.demo());
|
|
||||||
```
|
|
||||||
|
|
||||||
### Setting Up in HTML
|
|
||||||
To use the widget in an HTML document, you will need to include the built JavaScript file. Here is an example:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Uptime Link Widget</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script type="module">
|
|
||||||
import { UptimelinkWebwidget } from './path_to_your_built_index.js';
|
|
||||||
customElements.define('uptimelink-webwidget', UptimelinkWebwidget);
|
|
||||||
|
|
||||||
const widgetElement = document.createElement('uptimelink-webwidget');
|
|
||||||
widgetElement.projectSlug = 'uptime.link';
|
|
||||||
document.body.appendChild(widgetElement);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Creating a Custom Page with the Widget
|
|
||||||
You can integrate the widget into a custom page to display uptime status. First, create a new TypeScript file for the page.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// pages/customPage.ts
|
|
||||||
import { html } from '@design.estate/dees-element';
|
|
||||||
|
|
||||||
export const customPage = () => html`
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
height: 120px;
|
|
||||||
padding: 40px;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="container">
|
|
||||||
<uptimelink-webwidget projectSlug="custom-project-slug"></uptimelink-webwidget>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Styling the Widget
|
|
||||||
The `UptimelinkWebwidget` component comes with default styles but you can override those styles to match your site's aesthetics. Below is an example of how this can be done:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// customStyles.ts
|
|
||||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
|
||||||
import { cssManager } from '@design.estate/dees-element';
|
|
||||||
|
|
||||||
UptimelinkWebwidget.styles = [
|
|
||||||
cssManager.defaultStyles,
|
|
||||||
css`
|
|
||||||
.mainbox {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
color: #333;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
.statusindicator {
|
|
||||||
background: #28a745;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
];
|
|
||||||
|
|
||||||
document.body.appendChild(UptimelinkWebwidget.demo());
|
|
||||||
```
|
|
||||||
|
|
||||||
### Advanced Interactions
|
|
||||||
The `UptimelinkWebwidget` allows for advanced interactions such as hovering effects to show detailed information. This is handled within the component's lifecycle and event handlers. Below is a detailed code snippet demonstrating lifecycle hooks and event listeners:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// uppimelink-webwidget.ts
|
|
||||||
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
|
|
||||||
import { DeesWindowLayer } from '@design.estate/dees-catalog';
|
|
||||||
|
|
||||||
@customElement('uptimelink-webwidget')
|
|
||||||
export class UptimelinkWebwidget extends DeesElement {
|
|
||||||
@property({ type: Boolean }) isOnTop = false;
|
|
||||||
@property() public projectSlug: string;
|
|
||||||
@property() public isFocused = false;
|
|
||||||
@property() public isElevated = false;
|
|
||||||
@property() public showExpanded: boolean = false;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.setupEventing();
|
|
||||||
}
|
|
||||||
|
|
||||||
public static styles = [
|
|
||||||
cssManager.defaultStyles,
|
|
||||||
]
|
|
||||||
|
|
||||||
public render(): TemplateResult {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
/* Add your custom styles here */
|
|
||||||
</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`
|
|
||||||
<div class="expanded">
|
|
||||||
/* Expanded view content */
|
|
||||||
</div>
|
|
||||||
` : null}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async setupEventing() {
|
|
||||||
const domtools = await this.domtoolsPromise;
|
|
||||||
await this.updateComplete;
|
|
||||||
const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLDivElement;
|
|
||||||
|
|
||||||
mainbox.onmouseenter = async () => {
|
|
||||||
if (!this.isOnTop) {
|
|
||||||
const rect = mainbox.getBoundingClientRect();
|
|
||||||
const uptimelinkWidget = new UptimelinkWebwidget();
|
|
||||||
uptimelinkWidget.isOnTop = true;
|
|
||||||
uptimelinkWidget.style.position = 'fixed';
|
|
||||||
uptimelinkWidget.style.top = `${rect.top}px`;
|
|
||||||
uptimelinkWidget.style.left = `${rect.left}px`;
|
|
||||||
document.body.append(uptimelinkWidget);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.isElevated = true;
|
|
||||||
this.isFocused = true;
|
|
||||||
this.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
|
|
||||||
await domtools.convenience.smartdelay.delayFor(200);
|
|
||||||
if (!this.isFocused) return;
|
|
||||||
this.showExpanded = true;
|
|
||||||
await this.performUpdate();
|
|
||||||
await domtools.convenience.smartdelay.delayFor(50);
|
|
||||||
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
|
||||||
expandedDiv.style.opacity = '1';
|
|
||||||
};
|
|
||||||
|
|
||||||
mainbox.onmouseleave = async () => {
|
|
||||||
if (!this.isOnTop) return;
|
|
||||||
this.windowLayer.destroy();
|
|
||||||
domtools.convenience.smartdelay.delayFor(200).then(() => {
|
|
||||||
if (!this.isFocused) {
|
|
||||||
this.isElevated = false;
|
|
||||||
this.remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!this.showExpanded) {
|
|
||||||
this.isFocused = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.showExpanded = false;
|
|
||||||
await domtools.convenience.smartdelay.delayFor(50);
|
|
||||||
this.isFocused = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Utilizing Multiple Widgets
|
|
||||||
You can also utilize multiple instances of the web widget on a single page. Below is an example of how you could do this:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// multipleWidgets.ts
|
|
||||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
|
||||||
|
|
||||||
const widget1 = document.createElement('uptimelink-webwidget');
|
|
||||||
const widget2 = document.createElement('uptimelink-webwidget');
|
|
||||||
|
|
||||||
widget1.projectSlug = 'project1';
|
|
||||||
widget2.projectSlug = 'project2';
|
|
||||||
|
|
||||||
document.body.appendChild(widget1);
|
|
||||||
document.body.appendChild(widget2);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Building and Serving
|
|
||||||
To build the project, use the following npm scripts:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
To watch for changes and rebuild automatically:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run watch
|
|
||||||
```
|
|
||||||
|
|
||||||
### Testing
|
|
||||||
Currently, the `test` script is identical to the `build` script. Running tests requires building the project:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test
|
|
||||||
```
|
|
||||||
|
|
||||||
### Contributing
|
|
||||||
Contributions to the `@uptimelink/webwidget` project are welcome! Please follow the guidelines provided in the repository. Reach out on the project issues page for discussions, questions, or follow the established process for submitting pull requests.
|
|
||||||
|
|
||||||
### Conclusion
|
|
||||||
This guide covered the steps needed to install, set up, and use the `@uptimelink/webwidget` package in your TypeScript projects. We also explored various ways to customize and extend the widget, ensuring seamless integration into your existing web applications. For more detailed information, refer to the [documentation](https://uptimelink.gitlab.io/webwidget/).
|
|
||||||
|
|
||||||
Feel free to check the links provided in the initial sections for more context and updates about the project's status and availability.
|
|
||||||
undefined
|
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
/**
|
|
||||||
* autocreated commitinfo by @push.rocks/commitinfo
|
|
||||||
*/
|
|
||||||
export const commitinfo = {
|
|
||||||
name: '@uptime.link/webwidget',
|
|
||||||
version: '1.2.3',
|
|
||||||
description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
|
|
||||||
}
|
|
||||||
@ -1 +1 @@
|
|||||||
export * from './uptimelink-webwidget.js';
|
export * from './uptimelink-webwidget';
|
||||||
|
|||||||
@ -1,257 +1,54 @@
|
|||||||
import {
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
DeesElement,
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
property,
|
|
||||||
html,
|
|
||||||
customElement,
|
|
||||||
type TemplateResult,
|
|
||||||
cssManager,
|
|
||||||
css,
|
|
||||||
} from '@design.estate/dees-element';
|
|
||||||
|
|
||||||
import { DeesWindowLayer } from '@design.estate/dees-catalog';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
'uptimelink-webwidget': UptimelinkWebwidget;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@customElement('uptimelink-webwidget')
|
@customElement('uptimelink-webwidget')
|
||||||
export class UptimelinkWebwidget extends DeesElement {
|
export class UptimelinkWebwidget extends LitElement {
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
<uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
|
<uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property({
|
|
||||||
type: Boolean,
|
|
||||||
reflect: true,
|
|
||||||
})
|
|
||||||
isOnTop = false;
|
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public projectSlug: string;
|
public projectSlug: string;
|
||||||
|
|
||||||
@property()
|
|
||||||
public isFocused = false;
|
|
||||||
|
|
||||||
@property()
|
|
||||||
public isElevated = false;
|
|
||||||
|
|
||||||
@property({
|
|
||||||
type: Boolean,
|
|
||||||
reflect: true,
|
|
||||||
})
|
|
||||||
public showExpanded: boolean = false;
|
|
||||||
|
|
||||||
public parentWebwidget: UptimelinkWebwidget;
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.setupEventing();
|
domtools.DomTools.setupDomTools();
|
||||||
}
|
}
|
||||||
|
|
||||||
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 {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
<style>
|
<style>
|
||||||
:host {
|
.mainbox {
|
||||||
z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 26px auto;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 150px;
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 30px;
|
||||||
|
background: #222;
|
||||||
|
padding: 5px;
|
||||||
|
color: #CCC;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.statusindicator {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background: #66BB6A;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.statustext {
|
||||||
|
padding-top: 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
<div class="mainbox">
|
||||||
<div class="firstLine">
|
|
||||||
<div class="statusindicator"></div>
|
<div class="statusindicator"></div>
|
||||||
<div class="statustext">All systems are up!</div>
|
<div class="statustext">All systems are up!</div>
|
||||||
</div>
|
</div>
|
||||||
${this.showExpanded
|
|
||||||
? html`
|
|
||||||
<div class="expanded">
|
|
||||||
<div class="miniHeading">last 24 hours:</div>
|
|
||||||
<div class="miniOverview24h">
|
|
||||||
${(() => {
|
|
||||||
let counter = 0;
|
|
||||||
const returnArray = [];
|
|
||||||
while (counter < 24) {
|
|
||||||
returnArray.push(html`<div class="statusBar ok"></div>`);
|
|
||||||
counter++;
|
|
||||||
}
|
|
||||||
return returnArray;
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
<div class="viewStatuspage">View full Statuspage ...</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: null}
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public windowLayer: DeesWindowLayer;
|
|
||||||
private async setupEventing() {
|
|
||||||
const domtools = await this.domtoolsPromise;
|
|
||||||
await this.updateComplete;
|
|
||||||
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
|
|
||||||
mainbox.onmouseenter = async () => {
|
|
||||||
if (!this.isOnTop) {
|
|
||||||
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: false,
|
|
||||||
});
|
|
||||||
await domtools.convenience.smartdelay.delayFor(200);
|
|
||||||
if (!this.isFocused) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.showExpanded = true;
|
|
||||||
await this.performUpdate();
|
|
||||||
await domtools.convenience.smartdelay.delayFor(0);
|
|
||||||
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
|
||||||
expandedDiv.style.opacity = '1';
|
|
||||||
};
|
|
||||||
mainbox.onmouseleave = async () => {
|
|
||||||
if (!this.isOnTop) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.windowLayer.destroy();
|
|
||||||
this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
|
|
||||||
domtools.convenience.smartdelay.delayFor(200).then(async () => {
|
|
||||||
if (!this.isFocused) {
|
|
||||||
this.isElevated = false;
|
|
||||||
this.remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!this.showExpanded) {
|
|
||||||
this.isFocused = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.showExpanded = false;
|
|
||||||
await domtools.convenience.smartdelay.delayFor(50);
|
|
||||||
this.isFocused = false;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
export * from './elements/index.js';
|
export * from './elements/index';
|
||||||
|
|||||||
16
ts_web/tsconfig.json
Normal file
16
ts_web/tsconfig.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2017",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"lib": ["es2017", "dom"],
|
||||||
|
"declaration": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"inlineSourceMap": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"outDir": "dist/",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"experimentalDecorators": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"experimentalDecorators": true,
|
|
||||||
"useDefineForClassFields": false,
|
|
||||||
"target": "ES2022",
|
|
||||||
"module": "NodeNext",
|
|
||||||
"moduleResolution": "NodeNext",
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"verbatimModuleSyntax": true
|
|
||||||
},
|
|
||||||
"exclude": [
|
|
||||||
"dist_*/**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
17
tslint.json
Normal file
17
tslint.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": ["tslint:latest", "tslint-config-prettier"],
|
||||||
|
"rules": {
|
||||||
|
"semicolon": [true, "always"],
|
||||||
|
"no-console": false,
|
||||||
|
"ordered-imports": false,
|
||||||
|
"object-literal-sort-keys": false,
|
||||||
|
"member-ordering": {
|
||||||
|
"options":{
|
||||||
|
"order": [
|
||||||
|
"static-method"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultSeverity": "warning"
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user