diff --git a/html/index.html b/html/index.html index fe28e32..3850161 100644 --- a/html/index.html +++ b/html/index.html @@ -21,6 +21,6 @@ - <> + diff --git a/package-lock.json b/package-lock.json index 154deae..33612a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1933,15 +1933,6 @@ "symbol-tree": "^3.2.4" } }, - "@pushrocks/parcel-plugin-wrapper": { - "version": "1.0.5", - "resolved": "https://verdaccio.lossless.one/@pushrocks%2fparcel-plugin-wrapper/-/parcel-plugin-wrapper-1.0.5.tgz", - "integrity": "sha512-xsWIffLeBEB6P6V1+y3LHB1fko3e3nh8qDxH5meWcIMe8/BiaXhtDx1NyvHMWUXWFF0UzbQ1FGT9QBUwwyac6Q==", - "dev": true, - "requires": { - "@gitzone/tsrun": "^1.1.17" - } - }, "@pushrocks/projectinfo": { "version": "4.0.2", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fprojectinfo/-/projectinfo-4.0.2.tgz", diff --git a/package.json b/package.json index 4f98f45..b12ffa1 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "@losslessone_private/dees-wcctools", + "name": "@designestate/dees-wcctools", "version": "1.0.18", "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": { @@ -22,7 +22,6 @@ "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", "tslint-config-prettier": "^1.17.0" diff --git a/ts_web/elements/wcc-dashboard.ts b/ts_web/elements/wcc-dashboard.ts new file mode 100644 index 0000000..5bc7d06 --- /dev/null +++ b/ts_web/elements/wcc-dashboard.ts @@ -0,0 +1,80 @@ +import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; + +import { WccDefaultElement } from './wcc-defaultelement'; + +// wcc tools +import './wcc-frame'; +import './wcc-sidebar'; +import './wcc-properties'; + +@customElement('wcc-dashboard') +export class WccDashboard extends LitElement { + @property() + public selectedItem: TemplateResult | LitElement = WccDefaultElement as any; + + @property() + public selectedInstance; + + @property() + public selectedViewport: string = 'desktop'; + + @property() + public pages: TemplateResult[] = []; + + @property() + public elements: LitElement[] = []; + + constructor() { + super(); + } + + public render(): TemplateResult { + return html` + + { + this.selectedItem = eventArg.detail; + }}> + {this.selectedViewport = eventArg.detail; this.updateSlot();}}> + + ${(() => { + if (this.selectedItem instanceof TemplateResult) { + return this.selectedItem; + } else if (this.selectedItem) { + console.log(this.selectedItem); + const anonItem: any = this.selectedItem; + if (anonItem.demo) { + return html`${anonItem.demo}`; + } else { + alert(`component does not expose a demo property.`); + } + } else { + + } + })()} + + ${this.selectedViewport} + `; + } + + public updateSlot() { + console.log('updateSlot'); + const oldSelectedItem = this.selectedItem; + this.selectedItem = null; + setTimeout(() => { + this.selectedItem = oldSelectedItem; + }, 0); + } + + +} diff --git a/ts_web/elements/lele-element.ts b/ts_web/elements/wcc-defaultelement.ts similarity index 69% rename from ts_web/elements/lele-element.ts rename to ts_web/elements/wcc-defaultelement.ts index 4e27eb6..20aaf6f 100644 --- a/ts_web/elements/lele-element.ts +++ b/ts_web/elements/wcc-defaultelement.ts @@ -1,8 +1,10 @@ import { LitElement, property, html, customElement } from 'lit-element'; import { TemplateResult } from 'lit-html'; -@customElement('lele-element') -export class LeleElement extends LitElement { +@customElement('wcc-defaultelement') +export class WccDefaultElement extends LitElement { + public static demo = html``; + @property() public footerText = `Lossless GmbH - 2018`; @@ -20,16 +22,20 @@ export class LeleElement extends LitElement { @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; } - + No Element specified! `; } } diff --git a/ts_web/elements/wcc-frame.ts b/ts_web/elements/wcc-frame.ts new file mode 100644 index 0000000..ac12649 --- /dev/null +++ b/ts_web/elements/wcc-frame.ts @@ -0,0 +1,71 @@ +import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; + +const breakpoints = { + desktop: 1240, + tablet: 700, + phablet: 500, + phone: 340, +}; + +@customElement('wcc-frame') +export class WccFrame extends LitElement { + @property() + public viewport: string; + + public render(): TemplateResult { + return html` + +
+ +
+ `; + } +} diff --git a/ts_web/elements/wcc-properties.ts b/ts_web/elements/wcc-properties.ts new file mode 100644 index 0000000..6159d28 --- /dev/null +++ b/ts_web/elements/wcc-properties.ts @@ -0,0 +1,182 @@ +import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; + +export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'; + +let environment: TEnvironment = 'native'; + +export const setEnvironment = envArg => { + environment = envArg; +}; + +@customElement('wcc-properties') +export class WccProperties extends LitElement { + @property() + public selectedItem: TemplateResult | LitElement; + + @property() + public selectedInstance; + + @property() + public selectedViewport = 'native'; + + public render(): TemplateResult { + return html` + + +
+
+
Properties
+ ${(() => { + if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) { + const anonItem: any = this.selectedItem; + const classProperties: Map = anonItem._classProperties; + const returnArray: TemplateResult[] = []; + for (const key of classProperties.keys()) { + returnArray.push( + html` +
+ ${key} / ${classProperties.get(key).type.name} / + 
+${(() => {
+                          const result = this.selectedInstance
+                            ? JSON.stringify(this.selectedInstance[key], null, 2)
+                            : null;
+                          return result;
+                        })()}
+
+ ` + ); + } + return returnArray; + } + })()} +
+
+
Viewports
+
+
{ + this.selectViewport('phone'); + }} + > + Phone
smartphone +
+
{ + this.selectViewport('phablet'); + }} + > + Phablet
smartphone +
+
{ + this.selectViewport('tablet'); + }} + > + Tablet
tablet +
+
{ + this.selectViewport('native'); + }} + > + Desktop
desktop_windows +
+
+
+
Docs
+
+ `; + } + + public selectViewport(viewport: TEnvironment) { + this.selectedViewport = viewport; + setEnvironment(viewport); + this.dispatchEvent( + new CustomEvent('selectedViewport', { + detail: viewport + }) + ); + } +} diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts new file mode 100644 index 0000000..dd18ed8 --- /dev/null +++ b/ts_web/elements/wcc-sidebar.ts @@ -0,0 +1,147 @@ +import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; + +@customElement('wcc-sidebar') +export class WccSidebar extends LitElement { + @property() + public pages: { [key: string]: TemplateResult }; + + @property() + public elements: { [key: string]: LitElement }; + + @property({ attribute: false }) + public selectedItem: LitElement | TemplateResult; + + public render(): TemplateResult { + return html` + + +
+ lele-catalog +
+
+ Lossless GmbH +
+
+

Live Websites

+
ondemand_video
lossless.com
+
ondemand_video
central.eu
+
ondemand_video
coffee.link
+

Pages

+ ${(() => { + const pages = Object.keys(this.pages); + return pages.map(pageName => { + const item = this.pages[pageName]; + return html` +
{ + this.selectItem(item); + }} + > + insert_drive_file +
${pageName}
+
+ `; + }); + })()} +

Elements

+ ${(() => { + const elements = Object.keys(this.elements); + return elements.map(elementName => { + const item = this.elements[elementName]; + return html` +
{ + this.selectItem(item); + }} + > + featured_video +
${elementName}
+
+ `; + }); + })()} + + `; + } + + public selectItem(item: TemplateResult | LitElement) { + console.log('selected item'); + this.selectedItem = item; + this.dispatchEvent( + new CustomEvent('selectedItem', { + detail: item + }) + ); + } +} diff --git a/ts_web/index.ts b/ts_web/index.ts index e2c5152..100ea43 100644 --- a/ts_web/index.ts +++ b/ts_web/index.ts @@ -1,5 +1,5 @@ -import { LeleElement } from './elements/lele-element'; +import { WccDashboard } from './elements/wcc-dashboard'; export { - LeleElement + WccDashboard };