diff --git a/package-lock.json b/package-lock.json index c68a765..776da44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@fortawesome/free-brands-svg-icons": "^6.1.2", "@fortawesome/free-regular-svg-icons": "^6.1.2", "@fortawesome/free-solid-svg-icons": "^6.1.2", + "@tsclass/tsclass": "^4.0.19", "pdfjs-dist": "^2.15.349" }, "devDependencies": { @@ -1399,15 +1400,6 @@ "integrity": "sha512-pK8niCiRglpdPv5v0vlAR7iMhWr6v1AkDlFUC8dhOcQDIIl/OM/sZT6EcsdvUXHI9FWa/dnDo2s4VptlURwKsw==", "license": "MIT" }, - "node_modules/@pushrocks/smartexpress/node_modules/@tsclass/tsclass": { - "version": "4.0.19", - "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-4.0.19.tgz", - "integrity": "sha512-DBEssoRYrrXthRCBje211LtzFUSbgjfYGkV8piy2sLKrsTY2xdY/nLtsx/0iUdEI4Sc/KE+sMJdKnl3AeDc3Qw==", - "license": "MIT", - "dependencies": { - "type-fest": "^2.18.0" - } - }, "node_modules/@pushrocks/smartexpress/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://verdaccio.lossless.one/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -1459,6 +1451,15 @@ "rss-parser": "^3.10.0" } }, + "node_modules/@pushrocks/smartfeed/node_modules/@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "license": "MIT", + "dependencies": { + "type-fest": "^2.8.0" + } + }, "node_modules/@pushrocks/smartfile": { "version": "9.0.6", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartfile/-/smartfile-9.0.6.tgz", @@ -1877,6 +1878,15 @@ "@tsclass/tsclass": "^3.0.48" } }, + "node_modules/@pushrocks/smartsitemap/node_modules/@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "license": "MIT", + "dependencies": { + "type-fest": "^2.8.0" + } + }, "node_modules/@pushrocks/smartsocket": { "version": "2.0.7", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartsocket/-/smartsocket-2.0.7.tgz", @@ -2168,6 +2178,15 @@ "@tsclass/tsclass": "^3.0.37" } }, + "node_modules/@pushrocks/websetup/node_modules/@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "license": "MIT", + "dependencies": { + "type-fest": "^2.8.0" + } + }, "node_modules/@pushrocks/webstore": { "version": "2.0.5", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fwebstore/-/webstore-2.0.5.tgz", @@ -2254,12 +2273,12 @@ } }, "node_modules/@tsclass/tsclass": { - "version": "3.0.48", - "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", - "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "version": "4.0.19", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-4.0.19.tgz", + "integrity": "sha512-DBEssoRYrrXthRCBje211LtzFUSbgjfYGkV8piy2sLKrsTY2xdY/nLtsx/0iUdEI4Sc/KE+sMJdKnl3AeDc3Qw==", "license": "MIT", "dependencies": { - "type-fest": "^2.8.0" + "type-fest": "^2.18.0" } }, "node_modules/@tsconfig/node10": { @@ -9686,14 +9705,6 @@ } } }, - "@tsclass/tsclass": { - "version": "4.0.19", - "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-4.0.19.tgz", - "integrity": "sha512-DBEssoRYrrXthRCBje211LtzFUSbgjfYGkV8piy2sLKrsTY2xdY/nLtsx/0iUdEI4Sc/KE+sMJdKnl3AeDc3Qw==", - "requires": { - "type-fest": "^2.18.0" - } - }, "brace-expansion": { "version": "2.0.1", "resolved": "https://verdaccio.lossless.one/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -9732,6 +9743,16 @@ "@tsclass/tsclass": "^3.0.29", "feed": "^4.2.1", "rss-parser": "^3.10.0" + }, + "dependencies": { + "@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "requires": { + "type-fest": "^2.8.0" + } + } } }, "@pushrocks/smartfile": { @@ -10113,6 +10134,16 @@ "@pushrocks/smartyaml": "^2.0.5", "@pushrocks/webrequest": "^3.0.3", "@tsclass/tsclass": "^3.0.48" + }, + "dependencies": { + "@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "requires": { + "type-fest": "^2.8.0" + } + } } }, "@pushrocks/smartsocket": { @@ -10387,6 +10418,16 @@ "@pushrocks/smartdelay": "^2.0.13", "@pushrocks/smartpromise": "^3.1.6", "@tsclass/tsclass": "^3.0.37" + }, + "dependencies": { + "@tsclass/tsclass": { + "version": "3.0.48", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", + "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "requires": { + "type-fest": "^2.8.0" + } + } } }, "@pushrocks/webstore": { @@ -10464,11 +10505,11 @@ } }, "@tsclass/tsclass": { - "version": "3.0.48", - "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-3.0.48.tgz", - "integrity": "sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==", + "version": "4.0.19", + "resolved": "https://verdaccio.lossless.one/@tsclass%2ftsclass/-/tsclass-4.0.19.tgz", + "integrity": "sha512-DBEssoRYrrXthRCBje211LtzFUSbgjfYGkV8piy2sLKrsTY2xdY/nLtsx/0iUdEI4Sc/KE+sMJdKnl3AeDc3Qw==", "requires": { - "type-fest": "^2.8.0" + "type-fest": "^2.18.0" } }, "@tsconfig/node10": { diff --git a/package.json b/package.json index b83aee0..cf238fa 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@fortawesome/free-brands-svg-icons": "^6.1.2", "@fortawesome/free-regular-svg-icons": "^6.1.2", "@fortawesome/free-solid-svg-icons": "^6.1.2", + "@tsclass/tsclass": "^4.0.19", "pdfjs-dist": "^2.15.349" }, "devDependencies": { diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index ffd1067..8bb4292 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@designestate/dees-catalog', - version: '1.0.95', + version: '1.0.96', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation.ts new file mode 100644 index 0000000..6813dfd --- /dev/null +++ b/ts_web/elements/dees-mobilenavigation.ts @@ -0,0 +1,140 @@ +import * as plugins from './plugins.js'; +import { + cssManager, + css, + customElement, + DeesElement, + domtools, + html, + property, +} from '@designestate/dees-element'; +import { DeesWindowLayer } from './dees-windowlayer.js'; + +@customElement('lele-mobilenavigation') +export class LeleMobilenavigation extends DeesElement { + private static singletonRef: LeleMobilenavigation; + public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) { + if (!this.singletonRef) { + this.singletonRef = new LeleMobilenavigation(); + document.body.append(this.singletonRef); + await this.singletonRef.init(); + } + this.singletonRef.menuItems = menuItemsArg; + await this.singletonRef.readyDeferred.promise; + this.singletonRef.show(); + return this.singletonRef; + } + + // INSTANCE + @property({ + type: Object, + }) + public menuItems: plugins.tsclass.website.IMenuItem[] = []; + + readyDeferred = domtools.plugins.smartpromise.defer(); + + /** + * inits the mobile navigation + */ + public async init() { + await this.updateComplete; + this.readyDeferred.resolve(); + } + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + } + + .main { + transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); + will-change: transform; + position: fixed; + height: 100vh; + min-width: 370px; + transform: translateX(200px); + color: #fff; + z-index: 100; + opacity: 0; + padding: 16px; + right: 0px; + background: #000; + border-left: 1px dashed #444; + pointer-events: none; + } + + .main.show { + pointer-events: all; + transform: translateX(0px); + opacity: 1; + } + + .menuItem { + text-align: center; + padding: 8px; + cursor: pointer; + border-radius: 3px; + } + .menuItem:hover { + background: #333; + } + `, + ]; + + public render() { + return html` +
+ ${this.menuItems.map((menuItem) => { + return html` +
+ ${menuItem.name} +
+ `; + })} +
+ `; + } + + private windowLayer: DeesWindowLayer; + + /** + * inits the show + */ + public async show() { + const domtools = await this.domtoolsPromise; + const main = this.shadowRoot.querySelector('.main'); + if (!this.windowLayer) { + this.windowLayer = new DeesWindowLayer(); + this.windowLayer.addEventListener('click', () => { + this.hide(); + }); + } + document.body.append(this.windowLayer); + await domtools.convenience.smartdelay.delayFor(0); + this.windowLayer.show(); + + await domtools.convenience.smartdelay.delayFor(0); + main.classList.add('show'); + } + + /** + * inits the hide function + */ + public async hide() { + const domtools = await this.domtoolsPromise; + const main = this.shadowRoot.querySelector('.main'); + main.classList.remove('show'); + this.windowLayer.hide(); + } + + async disconnectedCallback () { + document.body.removeChild(this.windowLayer); + } +} diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index b3af1d6..6322306 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -10,6 +10,7 @@ export * from './dees-input-fileupload.js'; export * from './dees-input-quantityselector.js'; export * from './dees-input-radio.js'; export * from './dees-input-text.js'; +export * from './dees-mobilenavigation.js'; export * from './dees-pdf.js'; export * from './dees-speechbubble.js'; export * from './dees-spinner.js'; diff --git a/ts_web/elements/plugins.ts b/ts_web/elements/plugins.ts new file mode 100644 index 0000000..296f6ea --- /dev/null +++ b/ts_web/elements/plugins.ts @@ -0,0 +1,5 @@ +import * as tsclass from '@tsclass/tsclass'; + +export { + tsclass +}