Compare commits
8 Commits
Author | SHA1 | Date | |
---|---|---|---|
581a046997 | |||
ee168a8ebc | |||
a955240dd2 | |||
29900c458b | |||
2ef19ab203 | |||
bcea796d69 | |||
1fc79c3ba2 | |||
cafe63348b |
22793
package-lock.json
generated
22793
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@ -1,28 +1,29 @@
|
|||||||
{
|
{
|
||||||
"name": "@uptimelink/webwidget",
|
"name": "@uptimelink/webwidget",
|
||||||
"version": "1.0.64",
|
"version": "1.0.68",
|
||||||
"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 --skiplibcheck && 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.84",
|
"@designestate/dees-domtools": "^2.0.1",
|
||||||
"@designestate/dees-element": "^1.0.10",
|
"@designestate/dees-element": "^2.0.4",
|
||||||
"@designestate/dees-wcctools": "^1.0.54",
|
"@designestate/dees-wcctools": "^1.0.73",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.32",
|
||||||
"typescript": "^4.2.3"
|
"typescript": "^4.2.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@gitzone/tsbuild": "^2.1.61",
|
||||||
"@gitzone/tsbundle": "^1.0.80",
|
"@gitzone/tsbundle": "^1.0.101",
|
||||||
"@gitzone/tswatch": "^1.0.52",
|
"@gitzone/tswatch": "^1.0.73",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@pushrocks/projectinfo": "^4.0.5",
|
||||||
"tslint": "^6.1.3",
|
"tslint": "^6.1.3",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
|
@ -1 +1 @@
|
|||||||
export * from './uptimelink-webwidget';
|
export * from './uptimelink-webwidget.js';
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
|
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'uptimelink-webwidget': UptimelinkWebwidget;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('uptimelink-webwidget')
|
@customElement('uptimelink-webwidget')
|
||||||
export class UptimelinkWebwidget extends DeesElement {
|
export class UptimelinkWebwidget extends DeesElement {
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
@ -13,6 +19,9 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||||||
@property()
|
@property()
|
||||||
public isFocused = false;
|
public isFocused = false;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public isElevated = false;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public showExpanded: boolean = false;
|
public showExpanded: boolean = false;
|
||||||
|
|
||||||
@ -30,7 +39,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
z-index:10;
|
z-index: ${this.isElevated ? '10' : 'auto'} ;
|
||||||
}
|
}
|
||||||
.mainbox {
|
.mainbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -120,6 +129,11 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||||||
border-radius: 3px 3px 10px 10px;
|
border-radius: 3px 3px 10px 10px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin-top: 10px;
|
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 ${this.isFocused ? 'focused' : null}">
|
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
||||||
@ -154,6 +168,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||||||
await this.updateComplete;
|
await this.updateComplete;
|
||||||
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
|
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
|
||||||
mainbox.onmouseenter = async () => {
|
mainbox.onmouseenter = async () => {
|
||||||
|
this.isElevated = true;
|
||||||
this.isFocused = true;
|
this.isFocused = true;
|
||||||
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
|
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
|
||||||
if (!this.isFocused) {
|
if (!this.isFocused) {
|
||||||
@ -161,11 +176,16 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||||||
}
|
}
|
||||||
this.showExpanded = true;
|
this.showExpanded = true;
|
||||||
await this.performUpdate();
|
await this.performUpdate();
|
||||||
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
|
await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
|
||||||
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
||||||
expandedDiv.style.opacity = '1';
|
expandedDiv.style.opacity = '1';
|
||||||
};
|
};
|
||||||
mainbox.onmouseleave = async () => {
|
mainbox.onmouseleave = async () => {
|
||||||
|
(await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
|
||||||
|
if (!this.isFocused) {
|
||||||
|
this.isElevated = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
if (!this.showExpanded) {
|
if (!this.showExpanded) {
|
||||||
this.isFocused = false;
|
this.isFocused = false;
|
||||||
return;
|
return;
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
9
tsconfig.json
Normal file
9
tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "ES2022",
|
||||||
|
"moduleResolution": "nodenext"
|
||||||
|
}
|
||||||
|
}
|
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