Compare commits
32 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 326fed9bb5 | |||
| ae9f65e9f5 | |||
| 4d5e2f824a | |||
| 3aeb16f0a3 | |||
| 2a5792e3b4 | |||
| 10d59a6947 | |||
| af23ed0ad2 | |||
| fe6cd43047 | |||
| d7830def2d | |||
| 7f14fc3790 | |||
| 35aea33703 | |||
| 0c4f2773cf | |||
| 2e24d99f56 | |||
| d5a2d4b83e | |||
| 581a046997 | |||
| ee168a8ebc | |||
| a955240dd2 | |||
| 29900c458b | |||
| 2ef19ab203 | |||
| bcea796d69 | |||
| 1fc79c3ba2 | |||
| cafe63348b | |||
| 830eab2b18 | |||
| 89bd6259df | |||
| d8ee065e25 | |||
| 058384e0a0 | |||
| b637f4e53a | |||
| 0122b2dd20 | |||
| e8800996ce | |||
| 669c341080 | |||
| c36d0dc243 | |||
| 6d81526bd1 |
137
.gitlab-ci.yml
137
.gitlab-ci.yml
@ -1,137 +0,0 @@
|
|||||||
# 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,28 +2,10 @@
|
|||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [
|
||||||
{
|
{
|
||||||
"name": "current file",
|
"command": "npm test",
|
||||||
"type": "node",
|
"name": "Run npm test",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"args": [
|
"type": "node-terminal"
|
||||||
"${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"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--gitzone element-->
|
<!--gitzone element-->
|
||||||
<!-- made by Lossless GmbH -->
|
<!-- made by Task Venture Capital 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,6 +10,10 @@
|
|||||||
/>
|
/>
|
||||||
<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;
|
||||||
@ -17,7 +21,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="./index.ts"></script>
|
<script type="module" src="/bundle.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
// dees tools
|
// dees tools
|
||||||
import * as deesWccTools from '@designestate/dees-wcctools';
|
import * as deesWccTools from '@design.estate/dees-wcctools';
|
||||||
import * as deesDomTools from '@designestate/dees-domtools';
|
import * as deesDomTools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
// elements and pages
|
// elements and pages
|
||||||
import * as elements from '../ts_web/elements';
|
import * as elements from '../ts_web/elements/index.js';
|
||||||
import * as pages from '../ts_web/pages';
|
import * as pages from '../ts_web/pages/index.js';
|
||||||
|
|
||||||
deesWccTools.setupWccTools(elements as any, pages);
|
deesWccTools.setupWccTools(elements as any, pages);
|
||||||
deesDomTools.elementBasic.setup();
|
deesDomTools.elementBasic.setup();
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
"githost": "gitlab.com",
|
"githost": "gitlab.com",
|
||||||
"gitscope": "uptimelink",
|
"gitscope": "uptimelink",
|
||||||
"gitrepo": "webwidget",
|
"gitrepo": "webwidget",
|
||||||
"shortDescription": "the webwidget for public use of uptimelink",
|
"description": "the webwidget for public use of uptimelink",
|
||||||
"npmPackagename": "@uptimelink/webwidget",
|
"npmPackagename": "@uptimelink/webwidget",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"projectDomain": "uptime.link"
|
"projectDomain": "uptime.link"
|
||||||
|
|||||||
10721
package-lock.json
generated
10721
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@ -1,31 +1,29 @@
|
|||||||
{
|
{
|
||||||
"name": "@uptimelink/webwidget",
|
"name": "@uptime.link/webwidget",
|
||||||
"version": "1.0.59",
|
"version": "1.0.75",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "the webwidget for public use of uptimelink",
|
"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 element && tsbundle element --production",
|
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
||||||
"watch": "tswatch element"
|
"watch": "tswatch element"
|
||||||
},
|
},
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.65",
|
"@design.estate/dees-domtools": "^2.0.1",
|
||||||
"@designestate/dees-wcctools": "^1.0.37",
|
"@design.estate/dees-element": "^2.0.4",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@design.estate/dees-wcctools": "^1.0.73"
|
||||||
"lit-element": "^2.3.1",
|
|
||||||
"typescript": "^4.1.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@git.zone/tsbuild": "^2.1.61",
|
||||||
"@gitzone/tsbundle": "^1.0.72",
|
"@git.zone/tsbundle": "^2.0.10",
|
||||||
"@gitzone/tswatch": "^1.0.50",
|
"@git.zone/tsrun": "^1.2.32",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@git.zone/tswatch": "^2.0.13",
|
||||||
"tslint": "^6.1.3",
|
"@push.rocks/projectinfo": "^5.0.2"
|
||||||
"tslint-config-prettier": "^1.17.0"
|
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
|
|||||||
3162
pnpm-lock.yaml
generated
Normal file
3162
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* autocreated commitinfo by @pushrocks/commitinfo
|
||||||
|
*/
|
||||||
|
export const commitinfo = {
|
||||||
|
name: '@uptime.link/webwidget',
|
||||||
|
version: '1.0.75',
|
||||||
|
description: 'the webwidget for public use of uptimelink'
|
||||||
|
}
|
||||||
@ -1 +1 @@
|
|||||||
export * from './uptimelink-webwidget';
|
export * from './uptimelink-webwidget.js';
|
||||||
|
|||||||
0
ts_web/elements/uptimelink
Normal file
0
ts_web/elements/uptimelink
Normal file
@ -1,44 +1,84 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
|
||||||
|
import { UptimelinkWindowLayer } from './uptimelink-windowlayer.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'uptimelink-webwidget': UptimelinkWebwidget;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('uptimelink-webwidget')
|
@customElement('uptimelink-webwidget')
|
||||||
export class UptimelinkWebwidget extends LitElement {
|
export class UptimelinkWebwidget extends DeesElement {
|
||||||
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
|
||||||
|
})
|
||||||
|
isOnTop = false;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public projectSlug: string;
|
public projectSlug: string;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public isFocused = false;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public isElevated = false;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public showExpanded: boolean = false;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
domtools.DomTools.setupDomTools();
|
this.setupEventing();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
]
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
height: 30px;
|
||||||
|
z-index: ${this.isElevated ? '1000' : 'auto'} ;
|
||||||
}
|
}
|
||||||
.mainbox {
|
.mainbox {
|
||||||
|
position: relative;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 26px auto;
|
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 400;
|
font-weight: 540;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
border-radius: 20px;
|
border-radius: 15px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: #222;
|
background: ${this.goBright ? '#fff' : '#222' };
|
||||||
|
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
color: #CCC;
|
color: ${this.goBright ? '#333' : '#CCC' };
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.firstLine {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 26px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox.focused {
|
||||||
|
width: 182px;
|
||||||
|
height: 117px;
|
||||||
|
}
|
||||||
|
|
||||||
.statusindicator {
|
.statusindicator {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
@ -46,13 +86,141 @@ export class UptimelinkWebwidget extends LitElement {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.statustext {
|
.statustext {
|
||||||
padding-top: 3px;
|
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>
|
</style>
|
||||||
<div class="mainbox">
|
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
||||||
<div class="statusindicator"></div>
|
<div class="firstLine">
|
||||||
<div class="statustext">All systems are up!</div>
|
<div class="statusindicator"></div>
|
||||||
|
<div class="statustext">All systems are up!</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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public windowLayer: UptimelinkWindowLayer;
|
||||||
|
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.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 UptimelinkWindowLayer.createAndShow({
|
||||||
|
blur: true,
|
||||||
|
});
|
||||||
|
await domtools.convenience.smartdelay.delayFor(200);
|
||||||
|
if (!this.isFocused) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.showExpanded = true;
|
||||||
|
await this.performUpdate();
|
||||||
|
await (await this.domtoolsPromise).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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
113
ts_web/elements/uptimelink-windowlayer.ts
Normal file
113
ts_web/elements/uptimelink-windowlayer.ts
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'uptimelink-windowlayer': UptimelinkWindowLayer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IOptions_UptimeLinkWindowLayer {
|
||||||
|
blur: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('dees-windowlayer')
|
||||||
|
export class UptimelinkWindowLayer extends DeesElement {
|
||||||
|
// STATIC
|
||||||
|
public static demo = () => html`<uptimelink-windowlayer></uptimelink-windowlayer>`;
|
||||||
|
|
||||||
|
public static async createAndShow(optionsArg?: IOptions_UptimeLinkWindowLayer) {
|
||||||
|
const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
|
||||||
|
const windowLayer = new UptimelinkWindowLayer();
|
||||||
|
windowLayer.options = {
|
||||||
|
...windowLayer.options,
|
||||||
|
...optionsArg,
|
||||||
|
}
|
||||||
|
document.body.append(windowLayer);
|
||||||
|
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||||
|
windowLayer.show();
|
||||||
|
return windowLayer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@state()
|
||||||
|
public options: IOptions_UptimeLinkWindowLayer = {
|
||||||
|
blur: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
@property({
|
||||||
|
type: Boolean
|
||||||
|
})
|
||||||
|
public visible = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
domtools.elementBasic.setup();
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<style>
|
||||||
|
.windowOverlay {
|
||||||
|
transition: all 0.2s;
|
||||||
|
will-change: transform;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0, 0, 0, 0.0);
|
||||||
|
backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
firstUpdated() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.visible = true;
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
dispatchClicked() {
|
||||||
|
this.dispatchEvent(new CustomEvent('clicked'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleVisibility () {
|
||||||
|
this.visible = !this.visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async show() {
|
||||||
|
const domtools = await this.domtoolsPromise;
|
||||||
|
await domtools.convenience.smartdelay.delayFor(0);
|
||||||
|
this.visible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async hide() {
|
||||||
|
const domtools = await this.domtoolsPromise;
|
||||||
|
await domtools.convenience.smartdelay.delayFor(0);
|
||||||
|
this.visible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async destroy() {
|
||||||
|
const domtools = await this.domtoolsPromise;
|
||||||
|
await this.hide();
|
||||||
|
await domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
this.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1 +1 @@
|
|||||||
export * from './elements/index';
|
export * from './elements/index.js';
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "NodeNext",
|
||||||
|
"moduleResolution": "NodeNext",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"verbatimModuleSyntax": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"dist_*/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
17
tslint.json
17
tslint.json
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user