Compare commits
52 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 100f657e04 | |||
| 46e0b9f9db | |||
| 64d6379cd2 | |||
| 847733286c | |||
| 67a037c511 | |||
| 21bcdb2e01 | |||
| 1743490a26 | |||
| 2f9ec6a700 | |||
| 3a89888289 | |||
| 98909c61ff | |||
| 324808dd03 | |||
| c5eec2ac22 | |||
| b1350c463b | |||
| 40f54c574d | |||
| ebc2c82b7f | |||
| 15481c5e24 | |||
| 357320d40a | |||
| 08d92d9d3e | |||
| 0ce9a96b90 | |||
| 959a4cae89 | |||
| c8d6986aff | |||
| 53ff02c490 | |||
| ba83aad026 | |||
| 2531126935 | |||
| 00a2de6560 | |||
| b357bc67fa | |||
| 0665f85d49 | |||
| c222a66ead | |||
| 8d628d3285 | |||
| 681de01143 | |||
| 070d894ea6 | |||
| 6a6d782288 | |||
| ec1660cab5 | |||
| 5f182ba435 | |||
| f73df83768 | |||
| 0b09f3f61c | |||
| d2e0a55a13 | |||
| fb1fc7fa6b | |||
| 374a3c58c4 | |||
| b36846737b | |||
| b16c6948b2 | |||
| 2a51d7a7cd | |||
| b12f35484d | |||
| 7fe861f577 | |||
| ac999adfcb | |||
| fdd6e38e0c | |||
| 88ed2f294f | |||
| dcca98c535 | |||
| bb46890b58 | |||
| 4c3c7f18fc | |||
| 942670a733 | |||
| c0900e265b |
@ -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
|
||||
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
||||
"properties": {
|
||||
"projectType": {
|
||||
"type": "string",
|
||||
"enum": ["website", "element", "service", "npm"]
|
||||
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
0
assets/elements/elementone.ts
Normal file
0
assets/elements/elementone.ts
Normal 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,9 +17,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../ts_web/index.ts"></script>
|
||||
<script src="./index.ts"></script>
|
||||
</head>
|
||||
<body>
|
||||
<></>
|
||||
</body>
|
||||
</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": {
|
||||
"projectType": "element",
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
|
||||
6201
package-lock.json
generated
6201
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@ -1,30 +1,33 @@
|
||||
{
|
||||
"name": "@losslessone_private/dees-wcctools",
|
||||
"version": "1.0.18",
|
||||
"name": "@designestate/dees-wcctools",
|
||||
"version": "1.0.44",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"description": "wcc tools for creating element catalogues",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "npm run build",
|
||||
"build": "tsbuild custom ts_web --web",
|
||||
"test": "(npm run build)",
|
||||
"build": "(tsbuild custom ts_web --web && tsbundle element)",
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@gitzone/tsrun": "^1.1.17",
|
||||
"@pushrocks/smartexpress": "^3.0.10",
|
||||
"lit-element": "^2.0.0-rc.5",
|
||||
"lit-html": "^1.0.0-rc.2",
|
||||
"typescript": "^3.2.2"
|
||||
"@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",
|
||||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0",
|
||||
"typescript": "^4.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.8",
|
||||
"@gitzone/tswatch": "^1.0.30",
|
||||
"@pushrocks/parcel-plugin-wrapper": "^1.0.5",
|
||||
"@pushrocks/projectinfo": "^4.0.2",
|
||||
"tslint": "^5.11.0",
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.78",
|
||||
"@gitzone/tswatch": "^1.0.50",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
},
|
||||
"files": [
|
||||
@ -38,5 +41,8 @@
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 Chrome versions"
|
||||
]
|
||||
}
|
||||
|
||||
24
readme.md
24
readme.md
@ -8,16 +8,26 @@ wcc tools for creating element catalogues
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/dees-wcctools/)
|
||||
|
||||
## Status for master
|
||||
[](https://gitlab.com/designestate/dees-wcctools/commits/master)
|
||||
[](https://gitlab.com/designestate/dees-wcctools/commits/master)
|
||||
[](https://www.npmjs.com/package/@designestate/dees-wcctools)
|
||||
[](https://snyk.io/test/npm/@designestate/dees-wcctools)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://prettier.io/)
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribution
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
|
||||
## Contribution
|
||||
|
||||
|
||||
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, {});
|
||||
184
ts_web/elements/wcc-dashboard.ts
Normal file
184
ts_web/elements/wcc-dashboard.ts
Normal file
@ -0,0 +1,184 @@
|
||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||
|
||||
import * as plugins from '../wcctools.plugins';
|
||||
|
||||
import { WccDefaultElement } from './wcc-defaultelement';
|
||||
|
||||
// wcc tools
|
||||
import './wcc-frame';
|
||||
import './wcc-sidebar';
|
||||
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')
|
||||
export class WccDashboard extends LitElement {
|
||||
public domtools: plugins.deesDomtools.DomTools;
|
||||
|
||||
@property()
|
||||
public selectedType: TElementType;
|
||||
|
||||
@property()
|
||||
public selectedItemName: string;
|
||||
|
||||
@property()
|
||||
public selectedItem: (() => TemplateResult) | LitElement;
|
||||
|
||||
@property()
|
||||
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
||||
|
||||
@property()
|
||||
public selectedTheme: TTheme = 'dark';
|
||||
|
||||
@property()
|
||||
public pages: { [key: string]: () => TemplateResult } = {};
|
||||
|
||||
@property()
|
||||
public elements: { [key: string]: LitElement } = {};
|
||||
|
||||
@property()
|
||||
public warning: string = null;
|
||||
|
||||
constructor(
|
||||
elementsArg?: { [key: string]: LitElement },
|
||||
pagesArg?: { [key: string]: () => TemplateResult }
|
||||
) {
|
||||
super();
|
||||
if (elementsArg) {
|
||||
this.elements = elementsArg;
|
||||
console.log('got elements:');
|
||||
console.log(this.elements);
|
||||
}
|
||||
|
||||
if (pagesArg) {
|
||||
this.pages = pagesArg;
|
||||
}
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #fcfcfc;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<wcc-sidebar
|
||||
.dashboardRef=${this}
|
||||
.selectedItem=${this.selectedItem}
|
||||
@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}>
|
||||
${(() => {
|
||||
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) {
|
||||
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
||||
return;
|
||||
}
|
||||
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()}`;
|
||||
}
|
||||
})()}
|
||||
</wcc-frame>
|
||||
`;
|
||||
}
|
||||
|
||||
public setWarning(warningTextArg: string) {
|
||||
if (this.warning !== warningTextArg) {
|
||||
console.log(warningTextArg);
|
||||
this.warning = warningTextArg;
|
||||
setTimeout(() => {
|
||||
super.performUpdate();
|
||||
}, 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
|
||||
}`
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,9 @@
|
||||
import { LitElement, property, html, customElement } from 'lit-element';
|
||||
import { TemplateResult } from 'lit-html';
|
||||
|
||||
@customElement('lele-element')
|
||||
export class LeleElement extends LitElement {
|
||||
@property()
|
||||
public footerText = `Lossless GmbH - 2018`;
|
||||
@customElement('wcc-defaultelement')
|
||||
export class WccDefaultElement extends LitElement {
|
||||
public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@ -17,19 +16,22 @@ export class LeleElement 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;
|
||||
background: #333;
|
||||
text-align: center;
|
||||
padding:30px;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
No Element specified!
|
||||
`;
|
||||
}
|
||||
}
|
||||
73
ts_web/elements/wcc-frame.ts
Normal file
73
ts_web/elements/wcc-frame.ts
Normal file
@ -0,0 +1,73 @@
|
||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('wcc-frame')
|
||||
export class WccFrame extends LitElement {
|
||||
@property()
|
||||
public viewport: string;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
border: 10px solid #ffaeaf;
|
||||
background: #222;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 100px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
${(() => {
|
||||
switch (this.viewport) {
|
||||
case 'desktop':
|
||||
return `
|
||||
padding: 0px 0px;
|
||||
`;
|
||||
case 'tablet':
|
||||
return `
|
||||
padding: 0px ${
|
||||
(document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
|
||||
}px;
|
||||
`;
|
||||
case 'phablet':
|
||||
return `
|
||||
padding: 0px ${
|
||||
(document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
|
||||
}px;
|
||||
`;
|
||||
case 'phone':
|
||||
return `
|
||||
padding: 0px ${
|
||||
(document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
|
||||
}px;
|
||||
`;
|
||||
}
|
||||
})()}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: relative;
|
||||
${this.viewport !== 'desktop'
|
||||
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
|
||||
: html``}
|
||||
min-height: 100%;
|
||||
background:
|
||||
radial-gradient(#444444 3px, transparent 4px),
|
||||
radial-gradient(#444444 3px, transparent 4px),
|
||||
linear-gradient(#222222 4px, transparent 0),
|
||||
linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
|
||||
linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
|
||||
#222222;
|
||||
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
|
||||
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="viewport">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
235
ts_web/elements/wcc-properties.ts
Normal file
235
ts_web/elements/wcc-properties.ts
Normal file
@ -0,0 +1,235 @@
|
||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||
import { WccDashboard } from './wcc-dashboard';
|
||||
|
||||
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||
export type TTheme = 'bright' | 'dark';
|
||||
|
||||
let environment: TEnvironment = 'native';
|
||||
|
||||
export const setEnvironment = (envArg) => {
|
||||
environment = envArg;
|
||||
};
|
||||
|
||||
@customElement('wcc-properties')
|
||||
export class WccProperties extends LitElement {
|
||||
@property()
|
||||
dashboardRef: WccDashboard;
|
||||
|
||||
@property()
|
||||
public selectedItem: TemplateResult | LitElement;
|
||||
|
||||
@property()
|
||||
public selectedViewport: TEnvironment = 'native';
|
||||
|
||||
@property()
|
||||
public selectedTheme: TTheme = 'dark';
|
||||
|
||||
@property()
|
||||
public warning: string = null;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
height: 100px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 150px 300px 70px;
|
||||
}
|
||||
.properties {
|
||||
border-right: 1px solid #999;
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
|
||||
.properties .property {
|
||||
padding: 5px;
|
||||
background: #444;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.viewportSelector,
|
||||
.themeSelector {
|
||||
border-right: 1px solid #999;
|
||||
}
|
||||
.selectorButtons2 {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
.selectorButtons4 {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
}
|
||||
.button {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border: 1px solid #000;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.button.selected {
|
||||
background: #455a64;
|
||||
}
|
||||
|
||||
.button.selected:hover {
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
background: #455a64;
|
||||
}
|
||||
|
||||
.panelheading {
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
background: #444;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.docs {
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.docs:hover {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.warning {
|
||||
position: absolute;
|
||||
background: #800000;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 25px;
|
||||
}
|
||||
</style>
|
||||
<div class="grid">
|
||||
<div class="properties">
|
||||
<div class="panelheading">Properties</div>
|
||||
${(() => {
|
||||
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()) {
|
||||
returnArray.push(
|
||||
html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
|
||||
);
|
||||
}
|
||||
return returnArray;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
<div class="themeSelector">
|
||||
<div class="panelheading">Theme</div>
|
||||
<div class="selectorButtons2">
|
||||
<div
|
||||
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=${() => {
|
||||
this.selectViewport('phone');
|
||||
}}
|
||||
>
|
||||
Phone<br /><i class="material-icons">smartphone</i>
|
||||
</div>
|
||||
<div
|
||||
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
||||
@click=${() => {
|
||||
this.selectViewport('phablet');
|
||||
}}
|
||||
>
|
||||
Phablet<br /><i class="material-icons">smartphone</i>
|
||||
</div>
|
||||
<div
|
||||
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
||||
@click=${() => {
|
||||
this.selectViewport('tablet');
|
||||
}}
|
||||
>
|
||||
Tablet<br /><i class="material-icons">tablet</i>
|
||||
</div>
|
||||
<div
|
||||
class="button ${this.selectedViewport === 'desktop' ||
|
||||
this.selectedViewport === 'native'
|
||||
? 'selected'
|
||||
: null}"
|
||||
@click=${() => {
|
||||
this.selectViewport('native');
|
||||
}}
|
||||
>
|
||||
Desktop<br /><i class="material-icons">desktop_windows</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs">Docs</div>
|
||||
</div>
|
||||
${this.warning ? html`<div class="warning">${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) {
|
||||
this.selectedViewport = viewport;
|
||||
setEnvironment(viewport);
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('selectedViewport', {
|
||||
detail: viewport,
|
||||
})
|
||||
);
|
||||
this.dashboardRef.buildUrl();
|
||||
}
|
||||
}
|
||||
170
ts_web/elements/wcc-sidebar.ts
Normal file
170
ts_web/elements/wcc-sidebar.ts
Normal file
@ -0,0 +1,170 @@
|
||||
import * as plugins from '../wcctools.plugins';
|
||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||
import { WccDashboard } from './wcc-dashboard';
|
||||
|
||||
export type TElementType = 'element' | 'page';
|
||||
|
||||
@customElement('wcc-sidebar')
|
||||
export class WccSidebar extends LitElement {
|
||||
@property({type: Array})
|
||||
public websites: string[] = [];
|
||||
|
||||
@property({ attribute: false })
|
||||
public selectedItem: LitElement | (() => TemplateResult);
|
||||
|
||||
@property({ attribute: false })
|
||||
public selectedType: TElementType;
|
||||
|
||||
@property()
|
||||
public dashboardRef: WccDashboard;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
border-right: 1px solid #999;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 200px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin: 20px 5px 5px 5px;
|
||||
}
|
||||
.subheading {
|
||||
text-align: center;
|
||||
}
|
||||
.selectOption {
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
padding: 5px;
|
||||
transition: all 0.2s;
|
||||
display: grid;
|
||||
grid-template-columns: 28px auto;
|
||||
}
|
||||
.selectOption:hover {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.selectOption.selected {
|
||||
background: #455A64;;
|
||||
}
|
||||
|
||||
.selectOption.selected:hover {
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
background: #455A64;
|
||||
}
|
||||
|
||||
.selectOption .material-icons {
|
||||
color: #666;
|
||||
display: block;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.selectOption.selected .material-icons {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.selectOption .text {
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<div class="heading">
|
||||
wcc-tools
|
||||
</div>
|
||||
<div class="subheading">
|
||||
</div>
|
||||
<div class="menu">
|
||||
<h3>Live Websites</h3>
|
||||
${this.websites.map(website => {
|
||||
return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
|
||||
})}
|
||||
<h3>Pages</h3>
|
||||
${(() => {
|
||||
const pages = Object.keys(this.dashboardRef.pages);
|
||||
return pages.map(pageName => {
|
||||
const item = this.dashboardRef.pages[pageName];
|
||||
return html`
|
||||
<div
|
||||
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
|
||||
@click=${async () => {
|
||||
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||
this.selectItem('page', pageName, item);
|
||||
}}
|
||||
>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
<div class="text">${pageName}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
})()}
|
||||
<h3>Elements</h3>
|
||||
${(() => {
|
||||
const elements = Object.keys(this.dashboardRef.elements);
|
||||
return elements.map(elementName => {
|
||||
const item = this.dashboardRef.elements[elementName];
|
||||
return html`
|
||||
<div
|
||||
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
||||
@click=${async () => {
|
||||
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||
this.selectItem('element', elementName, item);
|
||||
}}
|
||||
>
|
||||
<i class="material-icons">featured_video</i>
|
||||
<div class="text">${elementName}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
})()}
|
||||
</menu>
|
||||
`;
|
||||
}
|
||||
|
||||
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('selectedType', {
|
||||
detail: typeArg
|
||||
})
|
||||
);
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('selectedItemName', {
|
||||
detail: itemNameArg
|
||||
})
|
||||
);
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('selectedItem', {
|
||||
detail: itemArg
|
||||
})
|
||||
);
|
||||
|
||||
this.dashboardRef.buildUrl();
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,19 @@
|
||||
import { LeleElement } from './elements/lele-element';
|
||||
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 {
|
||||
LeleElement
|
||||
setupWccTools
|
||||
};
|
||||
|
||||
11
ts_web/wcctools.plugins.ts
Normal file
11
ts_web/wcctools.plugins.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
|
||||
export {
|
||||
smartdelay
|
||||
};
|
||||
|
||||
import * as deesDomtools from '@designestate/dees-domtools';
|
||||
|
||||
export {
|
||||
deesDomtools
|
||||
};
|
||||
Reference in New Issue
Block a user