Compare commits
20 Commits
Author | SHA1 | Date | |
---|---|---|---|
100f657e04 | |||
46e0b9f9db | |||
64d6379cd2 | |||
847733286c | |||
67a037c511 | |||
21bcdb2e01 | |||
1743490a26 | |||
2f9ec6a700 | |||
3a89888289 | |||
98909c61ff | |||
324808dd03 | |||
c5eec2ac22 | |||
b1350c463b | |||
40f54c574d | |||
ebc2c82b7f | |||
15481c5e24 | |||
357320d40a | |||
08d92d9d3e | |||
0ce9a96b90 | |||
959a4cae89 |
@ -19,23 +19,35 @@ mirror:
|
|||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci git mirror
|
- npmci git mirror
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
- notpriv
|
- notpriv
|
||||||
|
|
||||||
audit:
|
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
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
- npmci npm prepare
|
||||||
- npmci command npm install --ignore-scripts
|
- npmci command npm install --ignore-scripts
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
- npmci command npm audit --audit-level=high
|
- npmci command npm audit --audit-level=high --only=dev
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
|
||||||
- docker
|
- docker
|
||||||
- notpriv
|
allow_failure: true
|
||||||
|
|
||||||
# ====================
|
# ====================
|
||||||
# test stage
|
# test stage
|
||||||
@ -50,9 +62,7 @@ testStable:
|
|||||||
- npmci npm test
|
- npmci npm test
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
|
||||||
- docker
|
- docker
|
||||||
- priv
|
|
||||||
|
|
||||||
testBuild:
|
testBuild:
|
||||||
stage: test
|
stage: test
|
||||||
@ -63,9 +73,7 @@ testBuild:
|
|||||||
- npmci command npm run build
|
- npmci command npm run build
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
|
||||||
- docker
|
- docker
|
||||||
- notpriv
|
|
||||||
|
|
||||||
release:
|
release:
|
||||||
stage: release
|
stage: release
|
||||||
@ -85,6 +93,8 @@ release:
|
|||||||
codequality:
|
codequality:
|
||||||
stage: metadata
|
stage: metadata
|
||||||
allow_failure: true
|
allow_failure: true
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
script:
|
script:
|
||||||
- npmci command npm install -g tslint typescript
|
- npmci command npm install -g tslint typescript
|
||||||
- npmci npm prepare
|
- npmci npm prepare
|
||||||
|
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
|||||||
"properties": {
|
"properties": {
|
||||||
"projectType": {
|
"projectType": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"enum": ["website", "element", "service", "npm"]
|
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,6 @@
|
|||||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||||
/>
|
/>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@ -18,9 +17,8 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="../ts_web/index.ts"></script>
|
<script src="./index.ts"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<wcc-dashboard></wcc-dashboard>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
10
html/index.ts
Normal file
10
html/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// dees tools
|
||||||
|
import * as deesWccTools from '../ts_web';
|
||||||
|
import * as deesDomTools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
// elements and pages
|
||||||
|
import * as elements from '../test/elements';
|
||||||
|
import * as pages from '../test/pages';
|
||||||
|
|
||||||
|
deesWccTools.setupWccTools(elements as any, pages);
|
||||||
|
deesDomTools.elementBasic.setup();
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"gitzone": {
|
"gitzone": {
|
||||||
"projectType": "element",
|
"projectType": "wcc",
|
||||||
"module": {
|
"module": {
|
||||||
"githost": "gitlab.com",
|
"githost": "gitlab.com",
|
||||||
"gitscope": "designestate",
|
"gitscope": "designestate",
|
||||||
|
3571
package-lock.json
generated
3571
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-wcctools",
|
"name": "@designestate/dees-wcctools",
|
||||||
"version": "1.0.34",
|
"version": "1.0.44",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "wcc tools for creating element catalogues",
|
"description": "wcc tools for creating element catalogues",
|
||||||
"main": "dist_ts_web/index.js",
|
"main": "dist_ts_web/index.js",
|
||||||
@ -13,20 +13,21 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.38",
|
"@designestate/dees-domtools": "^1.0.74",
|
||||||
|
"@designestate/dees-element": "^1.0.6",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.12",
|
||||||
"@pushrocks/smartdelay": "^2.0.10",
|
"@pushrocks/smartdelay": "^2.0.10",
|
||||||
"@pushrocks/smartexpress": "^3.0.73",
|
"@pushrocks/smartexpress": "^3.0.97",
|
||||||
"lit-element": "^2.0.0-rc.5",
|
"lit-element": "^2.4.0",
|
||||||
"lit-html": "^1.0.0-rc.2",
|
"lit-html": "^1.3.0",
|
||||||
"typescript": "^3.9.6"
|
"typescript": "^4.1.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@gitzone/tsbuild": "^2.1.25",
|
||||||
"@gitzone/tsbundle": "^1.0.72",
|
"@gitzone/tsbundle": "^1.0.78",
|
||||||
"@gitzone/tswatch": "^1.0.50",
|
"@gitzone/tswatch": "^1.0.50",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@pushrocks/projectinfo": "^4.0.5",
|
||||||
"tslint": "^6.1.2",
|
"tslint": "^6.1.3",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
1
test/elements/index.ts
Normal file
1
test/elements/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './test-demoelement';
|
38
test/elements/test-demoelement.ts
Normal file
38
test/elements/test-demoelement.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
@customElement('test-demoelement')
|
||||||
|
export class TestDemoelement extends DeesElement {
|
||||||
|
public static demo = () => html`<test-demoelement></test-demoelement>`;
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
.maincontainer, .themeindicator {
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.maincontainer {
|
||||||
|
color: #fff;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.themeindicator {
|
||||||
|
color: ${this.goBright ? '#000' : '#fff'};
|
||||||
|
background: ${this.goBright ? '#fff' : '#000'};
|
||||||
|
}
|
||||||
|
${domtools.breakpoints.cssForPhablet(`
|
||||||
|
.maincontainer, .themeindicator {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
`)}
|
||||||
|
</style>
|
||||||
|
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||||
|
<div class="themeindicator">
|
||||||
|
You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
3
test/index.ts
Normal file
3
test/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import * as wcctools from '../ts_web/index';
|
||||||
|
import * as elements from './elements';
|
||||||
|
wcctools.setupWccTools(elements as any, {});
|
@ -8,19 +8,31 @@ import { WccDefaultElement } from './wcc-defaultelement';
|
|||||||
import './wcc-frame';
|
import './wcc-frame';
|
||||||
import './wcc-sidebar';
|
import './wcc-sidebar';
|
||||||
import './wcc-properties';
|
import './wcc-properties';
|
||||||
|
import { TTheme } from './wcc-properties';
|
||||||
|
import { TElementType } from './wcc-sidebar';
|
||||||
|
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
|
||||||
|
|
||||||
@customElement('wcc-dashboard')
|
@customElement('wcc-dashboard')
|
||||||
export class WccDashboard extends LitElement {
|
export class WccDashboard extends LitElement {
|
||||||
public domtools: plugins.deesDomtools.DomTools;
|
public domtools: plugins.deesDomtools.DomTools;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedItem: TemplateResult | LitElement;
|
public selectedType: TElementType;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedItemName: string;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedItem: (() => TemplateResult) | LitElement;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public pages: { [key: string]: TemplateResult } = {};
|
public selectedTheme: TTheme = 'dark';
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public pages: { [key: string]: () => TemplateResult } = {};
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public elements: { [key: string]: LitElement } = {};
|
public elements: { [key: string]: LitElement } = {};
|
||||||
@ -28,33 +40,25 @@ export class WccDashboard extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public warning: string = null;
|
public warning: string = null;
|
||||||
|
|
||||||
constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
|
constructor(
|
||||||
|
elementsArg?: { [key: string]: LitElement },
|
||||||
|
pagesArg?: { [key: string]: () => TemplateResult }
|
||||||
|
) {
|
||||||
super();
|
super();
|
||||||
if (elementsArg) {
|
if (elementsArg) {
|
||||||
this.elements = elementsArg;
|
this.elements = elementsArg;
|
||||||
|
console.log('got elements:');
|
||||||
|
console.log(this.elements);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (pagesArg) {
|
if (pagesArg) {
|
||||||
this.pages = pagesArg;
|
this.pages = pagesArg;
|
||||||
}
|
}
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
public async init() {
|
|
||||||
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
|
||||||
this.domtools.router.on('/elements/:elementName', async routeInfo => {
|
|
||||||
this.selectedItem = this.elements[routeInfo.params.elementName];
|
|
||||||
});
|
|
||||||
|
|
||||||
this.domtools.router.on('/pages/:pageName', async routeInfo => {
|
|
||||||
this.selectedItem = this.pages[routeInfo.params.pageName];
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background: #fcfcfc;
|
background: #fcfcfc;
|
||||||
@ -65,53 +69,63 @@ export class WccDashboard extends LitElement {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<wcc-sidebar .dashboardRef=${this} @selectedItem=${eventArg => {
|
<wcc-sidebar
|
||||||
this.selectedItem = eventArg.detail;
|
.dashboardRef=${this}
|
||||||
}}></wcc-sidebar>
|
.selectedItem=${this.selectedItem}
|
||||||
<wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
|
@selectedType=${(eventArg) => {
|
||||||
|
this.selectedType = eventArg.detail;
|
||||||
|
}}
|
||||||
|
@selectedItemName=${(eventArg) => {
|
||||||
|
this.selectedItemName = eventArg.detail;
|
||||||
|
}}
|
||||||
|
@selectedItem=${(eventArg) => {
|
||||||
|
this.selectedItem = eventArg.detail;
|
||||||
|
}}
|
||||||
|
></wcc-sidebar>
|
||||||
|
<wcc-properties
|
||||||
|
.dashboardRef=${this}
|
||||||
|
.warning="${this.warning}"
|
||||||
|
.selectedItem=${this.selectedItem}
|
||||||
|
.selectedViewport=${this.selectedViewport}
|
||||||
|
.selectedTheme=${this.selectedTheme}
|
||||||
|
@selectedViewport=${(eventArg) => {
|
||||||
|
this.selectedViewport = eventArg.detail;
|
||||||
|
this.performUpdate();
|
||||||
|
}}
|
||||||
|
@selectedTheme=${(eventArg) => {
|
||||||
|
this.selectedTheme = eventArg.detail;
|
||||||
|
}}
|
||||||
|
></wcc-properties>
|
||||||
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
||||||
${(() => {
|
${(() => {
|
||||||
if (this.selectedItem instanceof TemplateResult) {
|
if (this.selectedType === 'page' && this.selectedItem) {
|
||||||
return this.selectedItem;
|
if (typeof this.selectedItem === 'function') {
|
||||||
} else if (this.selectedItem) {
|
return this.selectedItem();
|
||||||
console.log(this.selectedItem);
|
} else {
|
||||||
|
console.error('The selected item looks strange:')
|
||||||
|
console.log(this.selectedItem);
|
||||||
|
}
|
||||||
|
} else if (this.selectedType === 'element' && this.selectedItem) {
|
||||||
|
// console.log(this.selectedItem);
|
||||||
const anonItem: any = this.selectedItem;
|
const anonItem: any = this.selectedItem;
|
||||||
if (!anonItem.demo) {
|
if (!anonItem.demo) {
|
||||||
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!(typeof anonItem.demo === 'function')) {
|
if (!(typeof anonItem.demo === 'function')) {
|
||||||
this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
|
this.setWarning(
|
||||||
|
`component ${anonItem.name} has demo property, but it is not of type function`
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.setWarning(null);
|
this.setWarning(null);
|
||||||
return html`${anonItem.demo()}`;
|
return html`${anonItem.demo()}`;
|
||||||
} else {
|
|
||||||
this.updateSlot();
|
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
</wcc-frame>
|
</wcc-frame>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private currentlyUpdating: boolean = false;
|
|
||||||
public async updateSlot() {
|
|
||||||
if (this.currentlyUpdating) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.currentlyUpdating = true;
|
|
||||||
!this.selectedItem ? this.selectedItem = WccDefaultElement as any : null;
|
|
||||||
const localSelectedItem = this.selectedItem;
|
|
||||||
this.selectedItem = null;
|
|
||||||
console.log('updateSlot');
|
|
||||||
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
|
||||||
this.domtools.setVirtualViewport(this.selectedViewport);
|
|
||||||
// await super.performUpdate();
|
|
||||||
this.selectedItem = localSelectedItem;
|
|
||||||
await super.performUpdate();
|
|
||||||
this.currentlyUpdating = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
public setWarning(warningTextArg: string) {
|
public setWarning(warningTextArg: string) {
|
||||||
if (this.warning !== warningTextArg) {
|
if (this.warning !== warningTextArg) {
|
||||||
console.log(warningTextArg);
|
console.log(warningTextArg);
|
||||||
@ -121,4 +135,50 @@ export class WccDashboard extends LitElement {
|
|||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async firstUpdated() {
|
||||||
|
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
|
this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
|
||||||
|
if (routeInfo.params.itemType === 'element') {
|
||||||
|
this.selectedType = 'element';
|
||||||
|
this.selectedItem = this.elements[routeInfo.params.itemName];
|
||||||
|
} else if (routeInfo.params.itemType === 'page') {
|
||||||
|
this.selectedType = 'page';
|
||||||
|
this.selectedItem = this.pages[routeInfo.params.itemName];
|
||||||
|
}
|
||||||
|
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
|
||||||
|
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
|
||||||
|
this.selectedViewport = routeInfo.params.viewport as TViewport;
|
||||||
|
this.selectedTheme = routeInfo.params.theme as TTheme;
|
||||||
|
domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updating = false;
|
||||||
|
public async updated() {
|
||||||
|
if (this.updating) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
|
await this.domtools.router._handleRouteState();
|
||||||
|
this.updating = true;
|
||||||
|
const storeElement = this.selectedItem;
|
||||||
|
setTimeout(async () => {
|
||||||
|
this.selectedItem = null;
|
||||||
|
setTimeout(async () => {
|
||||||
|
this.selectedItem = storeElement;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updating = false;
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
public buildUrl() {
|
||||||
|
this.domtools.router.pushUrl(
|
||||||
|
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
|
||||||
|
this.selectedTheme
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
|
|||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background: #333;
|
background: #333;
|
||||||
|
@ -1,20 +1,28 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
import { WccDashboard } from './wcc-dashboard';
|
||||||
|
|
||||||
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||||
|
export type TTheme = 'bright' | 'dark';
|
||||||
|
|
||||||
let environment: TEnvironment = 'native';
|
let environment: TEnvironment = 'native';
|
||||||
|
|
||||||
export const setEnvironment = envArg => {
|
export const setEnvironment = (envArg) => {
|
||||||
environment = envArg;
|
environment = envArg;
|
||||||
};
|
};
|
||||||
|
|
||||||
@customElement('wcc-properties')
|
@customElement('wcc-properties')
|
||||||
export class WccProperties extends LitElement {
|
export class WccProperties extends LitElement {
|
||||||
|
@property()
|
||||||
|
dashboardRef: WccDashboard;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedItem: TemplateResult | LitElement;
|
public selectedItem: TemplateResult | LitElement;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedViewport = 'native';
|
public selectedViewport: TEnvironment = 'native';
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedTheme: TTheme = 'dark';
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public warning: string = null;
|
public warning: string = null;
|
||||||
@ -37,7 +45,7 @@ export class WccProperties extends LitElement {
|
|||||||
}
|
}
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 300px 70px;
|
grid-template-columns: auto 150px 300px 70px;
|
||||||
}
|
}
|
||||||
.properties {
|
.properties {
|
||||||
border-right: 1px solid #999;
|
border-right: 1px solid #999;
|
||||||
@ -52,30 +60,35 @@ export class WccProperties extends LitElement {
|
|||||||
background: #444;
|
background: #444;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.viewports {
|
.viewportSelector,
|
||||||
|
.themeSelector {
|
||||||
border-right: 1px solid #999;
|
border-right: 1px solid #999;
|
||||||
}
|
}
|
||||||
.viewport-selectors {
|
.selectorButtons2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
}
|
||||||
|
.selectorButtons4 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 25% 25% 25% 25%;
|
grid-template-columns: 25% 25% 25% 25%;
|
||||||
}
|
}
|
||||||
.viewport {
|
.button {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.viewport:hover {
|
.button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewport.selected {
|
.button.selected {
|
||||||
background: #455A64;
|
background: #455a64;
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewport.selected:hover {
|
.button.selected:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: #455a64;
|
background: #455a64;
|
||||||
@ -117,26 +130,46 @@ export class WccProperties extends LitElement {
|
|||||||
${(() => {
|
${(() => {
|
||||||
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
||||||
const anonItem: any = this.selectedItem;
|
const anonItem: any = this.selectedItem;
|
||||||
|
if (!anonItem._classProperties) {
|
||||||
|
return `You have selected a page!`;
|
||||||
|
}
|
||||||
const classProperties: Map<string, any> = anonItem._classProperties;
|
const classProperties: Map<string, any> = anonItem._classProperties;
|
||||||
const returnArray: TemplateResult[] = [];
|
const returnArray: TemplateResult[] = [];
|
||||||
for (const key of classProperties.keys()) {
|
for (const key of classProperties.keys()) {
|
||||||
returnArray.push(
|
returnArray.push(
|
||||||
html`
|
html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
|
||||||
<div class="property">
|
|
||||||
${key} / ${classProperties.get(key).type.name}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return returnArray;
|
return returnArray;
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
<div class="viewports">
|
<div class="themeSelector">
|
||||||
<div class="panelheading">Viewports</div>
|
<div class="panelheading">Theme</div>
|
||||||
<div class="viewport-selectors">
|
<div class="selectorButtons2">
|
||||||
<div
|
<div
|
||||||
class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
|
class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectTheme('dark');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Dark<br /><i class="material-icons">nights_stay</i>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectTheme('bright');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Bright<br /><i class="material-icons">flare</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewportSelector">
|
||||||
|
<div class="panelheading">Viewport</div>
|
||||||
|
<div class="selectorButtons4">
|
||||||
|
<div
|
||||||
|
class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectViewport('phone');
|
this.selectViewport('phone');
|
||||||
}}
|
}}
|
||||||
@ -144,7 +177,7 @@ export class WccProperties extends LitElement {
|
|||||||
Phone<br /><i class="material-icons">smartphone</i>
|
Phone<br /><i class="material-icons">smartphone</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectViewport('phablet');
|
this.selectViewport('phablet');
|
||||||
}}
|
}}
|
||||||
@ -152,7 +185,7 @@ export class WccProperties extends LitElement {
|
|||||||
Phablet<br /><i class="material-icons">smartphone</i>
|
Phablet<br /><i class="material-icons">smartphone</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectViewport('tablet');
|
this.selectViewport('tablet');
|
||||||
}}
|
}}
|
||||||
@ -160,7 +193,10 @@ export class WccProperties extends LitElement {
|
|||||||
Tablet<br /><i class="material-icons">tablet</i>
|
Tablet<br /><i class="material-icons">tablet</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
|
class="button ${this.selectedViewport === 'desktop' ||
|
||||||
|
this.selectedViewport === 'native'
|
||||||
|
? 'selected'
|
||||||
|
: null}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectViewport('native');
|
this.selectViewport('native');
|
||||||
}}
|
}}
|
||||||
@ -171,19 +207,29 @@ export class WccProperties extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs">Docs</div>
|
<div class="docs">Docs</div>
|
||||||
</div>
|
</div>
|
||||||
${this.warning ? html`<div class="warning">
|
${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
|
||||||
${this.warning}
|
|
||||||
</div>` : null}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public selectTheme(themeArg: TTheme) {
|
||||||
|
this.selectedTheme = themeArg;
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedTheme', {
|
||||||
|
detail: themeArg,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
console.log(this.dashboardRef.selectedType);
|
||||||
|
this.dashboardRef.buildUrl();
|
||||||
|
}
|
||||||
|
|
||||||
public selectViewport(viewport: TEnvironment) {
|
public selectViewport(viewport: TEnvironment) {
|
||||||
this.selectedViewport = viewport;
|
this.selectedViewport = viewport;
|
||||||
setEnvironment(viewport);
|
setEnvironment(viewport);
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('selectedViewport', {
|
new CustomEvent('selectedViewport', {
|
||||||
detail: viewport
|
detail: viewport,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
this.dashboardRef.buildUrl();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
|
import * as plugins from '../wcctools.plugins';
|
||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
import { WccDashboard } from './wcc-dashboard';
|
import { WccDashboard } from './wcc-dashboard';
|
||||||
|
|
||||||
|
export type TElementType = 'element' | 'page';
|
||||||
|
|
||||||
@customElement('wcc-sidebar')
|
@customElement('wcc-sidebar')
|
||||||
export class WccSidebar extends LitElement {
|
export class WccSidebar extends LitElement {
|
||||||
@property({type: Array})
|
@property({type: Array})
|
||||||
public websites: string[] = [];
|
public websites: string[] = [];
|
||||||
|
|
||||||
@property({ attribute: false })
|
@property({ attribute: false })
|
||||||
public selectedItem: LitElement | TemplateResult;
|
public selectedItem: LitElement | (() => TemplateResult);
|
||||||
|
|
||||||
|
@property({ attribute: false })
|
||||||
|
public selectedType: TElementType;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public dashboardRef: WccDashboard;
|
public dashboardRef: WccDashboard;
|
||||||
@ -86,10 +92,9 @@ export class WccSidebar extends LitElement {
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class="heading">
|
<div class="heading">
|
||||||
lele-catalog
|
wcc-tools
|
||||||
</div>
|
</div>
|
||||||
<div class="subheading">
|
<div class="subheading">
|
||||||
Lossless GmbH
|
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<h3>Live Websites</h3>
|
<h3>Live Websites</h3>
|
||||||
@ -103,10 +108,10 @@ export class WccSidebar extends LitElement {
|
|||||||
const item = this.dashboardRef.pages[pageName];
|
const item = this.dashboardRef.pages[pageName];
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
|
||||||
@click=${() => {
|
@click=${async () => {
|
||||||
this.selectItem(item);
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
this.dashboardRef.domtools.router.pushUrl(`/pages/${pageName}`);
|
this.selectItem('page', pageName, item);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i class="material-icons">insert_drive_file</i>
|
<i class="material-icons">insert_drive_file</i>
|
||||||
@ -123,9 +128,9 @@ export class WccSidebar extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
||||||
@click=${() => {
|
@click=${async () => {
|
||||||
this.selectItem(item);
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
this.dashboardRef.domtools.router.pushUrl(`/elements/${elementName}`);
|
this.selectItem('element', elementName, item);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i class="material-icons">featured_video</i>
|
<i class="material-icons">featured_video</i>
|
||||||
@ -138,13 +143,28 @@ export class WccSidebar extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public selectItem(item: TemplateResult | LitElement) {
|
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
|
||||||
console.log('selected item');
|
console.log('selected item');
|
||||||
this.selectedItem = item;
|
console.log(itemNameArg);
|
||||||
|
console.log(itemArg);
|
||||||
|
this.selectedItem = itemArg;
|
||||||
|
this.selectedType = typeArg;
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('selectedItem', {
|
new CustomEvent('selectedType', {
|
||||||
detail: item
|
detail: typeArg
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedItemName', {
|
||||||
|
detail: itemNameArg
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedItem', {
|
||||||
|
detail: itemArg
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.dashboardRef.buildUrl();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user