Compare commits

...

12 Commits

Author SHA1 Message Date
100f657e04 1.0.44 2020-11-27 16:40:38 +00:00
46e0b9f9db fix(core): update 2020-11-27 16:40:38 +00:00
64d6379cd2 1.0.43 2020-11-27 15:59:18 +00:00
847733286c fix(core): update 2020-11-27 15:59:18 +00:00
67a037c511 1.0.42 2020-11-26 03:16:19 +00:00
21bcdb2e01 fix(core): update 2020-11-26 03:16:18 +00:00
1743490a26 1.0.41 2020-11-26 02:59:47 +00:00
2f9ec6a700 fix(core): update 2020-11-26 02:59:46 +00:00
3a89888289 1.0.40 2020-11-26 02:56:12 +00:00
98909c61ff fix(core): update 2020-11-26 02:56:11 +00:00
324808dd03 1.0.39 2020-11-26 02:50:50 +00:00
c5eec2ac22 fix(core): update 2020-11-26 02:50:50 +00:00
12 changed files with 1046 additions and 2983 deletions

View File

@ -19,23 +19,35 @@ mirror:
stage: security
script:
- npmci git mirror
only:
- tags
tags:
- lossless
- docker
- 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
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
- npmci command npm audit --audit-level=high --only=dev
tags:
- lossless
- docker
- notpriv
allow_failure: true
# ====================
# test stage
@ -50,9 +62,7 @@ testStable:
- npmci npm test
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- priv
testBuild:
stage: test
@ -63,9 +73,7 @@ testBuild:
- npmci command npm run build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- notpriv
release:
stage: release
@ -85,6 +93,8 @@ release:
codequality:
stage: metadata
allow_failure: true
only:
- tags
script:
- npmci command npm install -g tslint typescript
- npmci npm prepare

View File

@ -15,7 +15,7 @@
"properties": {
"projectType": {
"type": "string",
"enum": ["website", "element", "service", "npm"]
"enum": ["website", "element", "service", "npm", "wcc"]
}
}
}

View File

@ -9,7 +9,6 @@
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" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
body {
@ -18,7 +17,8 @@
}
</style>
<script src="../test/index.ts"></script>
<script src="./index.ts"></script>
</head>
<body></body>
<body>
</body>
</html>

10
html/index.ts Normal file
View 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();

View File

@ -1,6 +1,6 @@
{
"gitzone": {
"projectType": "element",
"projectType": "wcc",
"module": {
"githost": "gitlab.com",
"gitscope": "designestate",

3874
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "@designestate/dees-wcctools",
"version": "1.0.38",
"version": "1.0.44",
"private": false,
"description": "wcc tools for creating element catalogues",
"main": "dist_ts_web/index.js",
@ -14,6 +14,7 @@
"license": "UNLICENSED",
"dependencies": {
"@designestate/dees-domtools": "^1.0.74",
"@designestate/dees-element": "^1.0.6",
"@gitzone/tsrun": "^1.2.12",
"@pushrocks/smartdelay": "^2.0.10",
"@pushrocks/smartexpress": "^3.0.97",

View File

@ -1,27 +1,38 @@
import { LitElement, customElement, TemplateResult, html } from 'lit-element';
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement')
export class TestDemoelement extends LitElement {
export class TestDemoelement extends DeesElement {
public static demo = () => html`<test-demoelement></test-demoelement>`;
public render() {
return html`
<style>
.maincontainer {
.maincontainer, .themeindicator {
display: block;
background: #fff;
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 {
background: #000;
.maincontainer, .themeindicator {
border-radius: 50px;
}
`)}
</style>
<div class="maincontainer">This is a demo element</div>
</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>
`;
}
}
}

View File

@ -20,7 +20,10 @@ export class WccDashboard extends LitElement {
public selectedType: TElementType;
@property()
public selectedItem: TemplateResult | LitElement;
public selectedItemName: string;
@property()
public selectedItem: (() => TemplateResult) | LitElement;
@property()
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@ -29,7 +32,7 @@ export class WccDashboard extends LitElement {
public selectedTheme: TTheme = 'dark';
@property()
public pages: { [key: string]: TemplateResult } = {};
public pages: { [key: string]: () => TemplateResult } = {};
@property()
public elements: { [key: string]: LitElement } = {};
@ -39,7 +42,7 @@ export class WccDashboard extends LitElement {
constructor(
elementsArg?: { [key: string]: LitElement },
pagesArg?: { [key: string]: TemplateResult }
pagesArg?: { [key: string]: () => TemplateResult }
) {
super();
if (elementsArg) {
@ -56,7 +59,6 @@ export class WccDashboard extends LitElement {
public render(): TemplateResult {
return html`
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: 'Roboto', sans-serif;
background: #fcfcfc;
@ -70,17 +72,22 @@ export class WccDashboard extends LitElement {
<wcc-sidebar
.dashboardRef=${this}
.selectedItem=${this.selectedItem}
@selectedItem=${(eventArg) => {
this.selectedItem = eventArg.detail;
}}
@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();
@ -91,9 +98,14 @@ export class WccDashboard extends LitElement {
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedItem instanceof TemplateResult) {
return this.selectedItem;
} else if (this.selectedItem) {
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
return 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;
if (!anonItem.demo) {
@ -132,12 +144,13 @@ export class WccDashboard extends LitElement {
this.selectedItem = this.elements[routeInfo.params.itemName];
} else if (routeInfo.params.itemType === 'page') {
this.selectedType = 'page';
this.selectedItem = this.pages[routeInfo.params.pageName];
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';
});
}
@ -150,10 +163,8 @@ export class WccDashboard extends LitElement {
await this.domtools.router._handleRouteState();
this.updating = true;
const storeElement = this.selectedItem;
setTimeout(async () => {
this.selectedItem = null;
setTimeout(async () => {
this.selectedItem = storeElement;
setTimeout(() => {
@ -165,10 +176,9 @@ export class WccDashboard extends LitElement {
public buildUrl() {
this.domtools.router.pushUrl(
`/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
this.selectedTheme
}`,
0
}`
);
}
}

View File

@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
public render(): TemplateResult {
return html`
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: 'Roboto', sans-serif;
background: #333;

View File

@ -130,6 +130,9 @@ export class WccProperties extends LitElement {
${(() => {
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
const anonItem: any = this.selectedItem;
if (!anonItem._classProperties) {
return `You have selected a page!`;
}
const classProperties: Map<string, any> = anonItem._classProperties;
const returnArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {

View File

@ -10,7 +10,7 @@ export class WccSidebar extends LitElement {
public websites: string[] = [];
@property({ attribute: false })
public selectedItem: LitElement | TemplateResult;
public selectedItem: LitElement | (() => TemplateResult);
@property({ attribute: false })
public selectedType: TElementType;
@ -92,10 +92,9 @@ export class WccSidebar extends LitElement {
</style>
<div class="heading">
lele-catalog
wcc-tools
</div>
<div class="subheading">
Lossless GmbH
</div>
<div class="menu">
<h3>Live Websites</h3>
@ -109,10 +108,10 @@ export class WccSidebar extends LitElement {
const item = this.dashboardRef.pages[pageName];
return html`
<div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
@click=${async () => {
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.selectItem('page', item);
this.selectItem('page', pageName, item);
}}
>
<i class="material-icons">insert_drive_file</i>
@ -131,7 +130,7 @@ export class WccSidebar extends LitElement {
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${async () => {
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.selectItem('element', item);
this.selectItem('element', elementName, item);
}}
>
<i class="material-icons">featured_video</i>
@ -144,20 +143,28 @@ export class WccSidebar extends LitElement {
`;
}
public selectItem(typeArg: TElementType, itemArg: TemplateResult | LitElement) {
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
console.log('selected item');
console.log(itemNameArg);
console.log(itemArg);
this.selectedItem = itemArg;
this.selectedType = typeArg;
this.dispatchEvent(
new CustomEvent('selectedItem', {
detail: itemArg
})
);
this.dispatchEvent(
new CustomEvent('selectedType', {
detail: typeArg
})
);
this.dispatchEvent(
new CustomEvent('selectedItemName', {
detail: itemNameArg
})
);
this.dispatchEvent(
new CustomEvent('selectedItem', {
detail: itemArg
})
);
this.dashboardRef.buildUrl();
}
}