Compare commits
16 Commits
Author | SHA1 | Date | |
---|---|---|---|
070d894ea6 | |||
6a6d782288 | |||
ec1660cab5 | |||
5f182ba435 | |||
f73df83768 | |||
0b09f3f61c | |||
d2e0a55a13 | |||
fb1fc7fa6b | |||
374a3c58c4 | |||
b36846737b | |||
b16c6948b2 | |||
2a51d7a7cd | |||
b12f35484d | |||
7fe861f577 | |||
ac999adfcb | |||
fdd6e38e0c |
@ -21,6 +21,6 @@
|
|||||||
<script src="../ts_web/index.ts"></script>
|
<script src="../ts_web/index.ts"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<></>
|
<wcc-dashboard></wcc-dashboard>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
823
package-lock.json
generated
823
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@ -1,29 +1,31 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-wcctools",
|
"name": "@designestate/dees-wcctools",
|
||||||
"version": "1.0.21",
|
"version": "1.0.29",
|
||||||
"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",
|
||||||
"typings": "dist_ts_web/index.d.ts",
|
"typings": "dist_ts_web/index.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "npm run build",
|
"test": "(npm run build)",
|
||||||
"build": "tsbuild custom ts_web --web",
|
"build": "(tsbuild custom ts_web --web && tsbundle element)",
|
||||||
"watch": "tswatch element"
|
"watch": "tswatch element"
|
||||||
},
|
},
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@designestate/dees-domtools": "^1.0.26",
|
||||||
"@gitzone/tsrun": "^1.1.17",
|
"@gitzone/tsrun": "^1.1.17",
|
||||||
"@pushrocks/smartexpress": "^3.0.10",
|
"@pushrocks/smartexpress": "^3.0.10",
|
||||||
"lit-element": "^2.0.0-rc.5",
|
"lit-element": "^2.0.0-rc.5",
|
||||||
"lit-html": "^1.0.0-rc.2",
|
"lit-html": "^1.0.0-rc.2",
|
||||||
"typescript": "^3.2.2"
|
"typescript": "^3.9.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.8",
|
"@gitzone/tsbuild": "^2.1.24",
|
||||||
"@gitzone/tswatch": "^1.0.30",
|
"@gitzone/tsbundle": "^1.0.69",
|
||||||
|
"@gitzone/tswatch": "^1.0.46",
|
||||||
"@pushrocks/projectinfo": "^4.0.2",
|
"@pushrocks/projectinfo": "^4.0.2",
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^6.1.2",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
@ -37,5 +39,8 @@
|
|||||||
"cli.js",
|
"cli.js",
|
||||||
"npmextra.json",
|
"npmextra.json",
|
||||||
"readme.md"
|
"readme.md"
|
||||||
|
],
|
||||||
|
"browserslist": [
|
||||||
|
"last 2 Chrome versions"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
import * as deesDomtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
import { WccDefaultElement } from './wcc-defaultelement';
|
import { WccDefaultElement } from './wcc-defaultelement';
|
||||||
|
|
||||||
// wcc tools
|
// wcc tools
|
||||||
@ -10,13 +12,10 @@ import './wcc-properties';
|
|||||||
@customElement('wcc-dashboard')
|
@customElement('wcc-dashboard')
|
||||||
export class WccDashboard extends LitElement {
|
export class WccDashboard extends LitElement {
|
||||||
@property()
|
@property()
|
||||||
public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
|
public selectedItem: TemplateResult | LitElement;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedInstance;
|
public selectedViewport: deesDomtools.breakpoints.TViewport = 'desktop';
|
||||||
|
|
||||||
@property()
|
|
||||||
public selectedViewport: string = 'desktop';
|
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public pages: { [key: string]: TemplateResult } = {};
|
public pages: { [key: string]: TemplateResult } = {};
|
||||||
@ -24,6 +23,9 @@ export class WccDashboard extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public elements: { [key: string]: LitElement } = {};
|
public elements: { [key: string]: LitElement } = {};
|
||||||
|
|
||||||
|
@property()
|
||||||
|
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) {
|
||||||
@ -52,7 +54,7 @@ export class WccDashboard extends LitElement {
|
|||||||
<wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
|
<wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
|
||||||
this.selectedItem = eventArg.detail;
|
this.selectedItem = eventArg.detail;
|
||||||
}}></wcc-sidebar>
|
}}></wcc-sidebar>
|
||||||
<wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
|
<wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
|
||||||
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
||||||
${(() => {
|
${(() => {
|
||||||
if (this.selectedItem instanceof TemplateResult) {
|
if (this.selectedItem instanceof TemplateResult) {
|
||||||
@ -60,13 +62,19 @@ export class WccDashboard extends LitElement {
|
|||||||
} else if (this.selectedItem) {
|
} else if (this.selectedItem) {
|
||||||
console.log(this.selectedItem);
|
console.log(this.selectedItem);
|
||||||
const anonItem: any = this.selectedItem;
|
const anonItem: any = this.selectedItem;
|
||||||
if (anonItem.demo) {
|
if (!anonItem.demo) {
|
||||||
return html`${anonItem.demo}`;
|
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
||||||
} else {
|
return;
|
||||||
alert(`component does not expose a demo property.`);
|
|
||||||
}
|
}
|
||||||
|
if (!(typeof anonItem.demo === 'function')) {
|
||||||
|
this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setWarning(null);
|
||||||
|
return html`${anonItem.demo()}`;
|
||||||
} else {
|
} else {
|
||||||
|
this.selectedItem = WccDefaultElement as any;
|
||||||
|
this.updateSlot();
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
</wcc-frame>
|
</wcc-frame>
|
||||||
@ -74,14 +82,22 @@ export class WccDashboard extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateSlot() {
|
public async updateSlot() {
|
||||||
console.log('updateSlot');
|
console.log('updateSlot');
|
||||||
const oldSelectedItem = this.selectedItem;
|
const oldSelectedItem = this.selectedItem;
|
||||||
this.selectedItem = null;
|
this.selectedItem = null;
|
||||||
setTimeout(() => {
|
const domtools = await deesDomtools.DomTools.setupDomTools();
|
||||||
|
domtools.setVirtualViewport(this.selectedViewport);
|
||||||
this.selectedItem = oldSelectedItem;
|
this.selectedItem = oldSelectedItem;
|
||||||
}, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public setWarning(warningTextArg: string) {
|
||||||
|
if (this.warning !== warningTextArg) {
|
||||||
|
console.log(warningTextArg);
|
||||||
|
this.warning = warningTextArg;
|
||||||
|
setTimeout(() => {
|
||||||
|
super.performUpdate();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,10 +3,7 @@ import { TemplateResult } from 'lit-html';
|
|||||||
|
|
||||||
@customElement('wcc-defaultelement')
|
@customElement('wcc-defaultelement')
|
||||||
export class WccDefaultElement extends LitElement {
|
export class WccDefaultElement extends LitElement {
|
||||||
public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
|
public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
|
||||||
|
|
||||||
@property()
|
|
||||||
public footerText = `Lossless GmbH - 2018`;
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
@ -1,11 +1,6 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
const breakpoints = {
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
desktop: 1240,
|
|
||||||
tablet: 700,
|
|
||||||
phablet: 500,
|
|
||||||
phone: 340,
|
|
||||||
};
|
|
||||||
|
|
||||||
@customElement('wcc-frame')
|
@customElement('wcc-frame')
|
||||||
export class WccFrame extends LitElement {
|
export class WccFrame extends LitElement {
|
||||||
@ -33,19 +28,26 @@ export class WccFrame extends LitElement {
|
|||||||
`;
|
`;
|
||||||
case 'tablet':
|
case 'tablet':
|
||||||
return `
|
return `
|
||||||
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
|
padding: 0px ${
|
||||||
|
(document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
|
||||||
|
}px;
|
||||||
`;
|
`;
|
||||||
case 'phablet':
|
case 'phablet':
|
||||||
return `
|
return `
|
||||||
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
|
padding: 0px ${
|
||||||
|
(document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
|
||||||
|
}px;
|
||||||
`;
|
`;
|
||||||
case 'phone':
|
case 'phone':
|
||||||
return `
|
return `
|
||||||
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
|
padding: 0px ${
|
||||||
|
(document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
|
||||||
|
}px;
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
position: relative;
|
position: relative;
|
||||||
${this.viewport !== 'desktop'
|
${this.viewport !== 'desktop'
|
||||||
|
@ -19,6 +19,9 @@ export class WccProperties extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public selectedViewport = 'native';
|
public selectedViewport = 'native';
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public warning: string = null;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
@ -98,6 +101,18 @@ export class WccProperties extends LitElement {
|
|||||||
color: #333;
|
color: #333;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
position: absolute;
|
||||||
|
background: #800000;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="properties">
|
<div class="properties">
|
||||||
@ -111,15 +126,7 @@ export class WccProperties extends LitElement {
|
|||||||
returnArray.push(
|
returnArray.push(
|
||||||
html`
|
html`
|
||||||
<div class="property">
|
<div class="property">
|
||||||
${key} / ${classProperties.get(key).type.name} /
|
${key} / ${classProperties.get(key).type.name}
|
||||||
<pre>
|
|
||||||
${(() => {
|
|
||||||
const result = this.selectedInstance
|
|
||||||
? JSON.stringify(this.selectedInstance[key], null, 2)
|
|
||||||
: null;
|
|
||||||
return result;
|
|
||||||
})()}</pre
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
@ -167,6 +174,9 @@ ${(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs">Docs</div>
|
<div class="docs">Docs</div>
|
||||||
</div>
|
</div>
|
||||||
|
${this.warning ? html`<div class="warning">
|
||||||
|
${this.warning}
|
||||||
|
</div>` : null}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,19 @@
|
|||||||
import { WccDashboard } from './elements/wcc-dashboard';
|
import { WccDashboard } from './elements/wcc-dashboard';
|
||||||
|
import { LitElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) => {
|
||||||
|
let hasRun = false;
|
||||||
|
const runWccToolsSetup = async () => {
|
||||||
|
if (document.readyState === 'complete' && !hasRun) {
|
||||||
|
hasRun = true;
|
||||||
|
const wccTools = new WccDashboard(elementsArg as any, pagesArg);
|
||||||
|
document.querySelector('body').append(wccTools);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('readystatechange', runWccToolsSetup);
|
||||||
|
runWccToolsSetup();
|
||||||
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
WccDashboard
|
setupWccTools
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user