Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..5c5ae99b9 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + _blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockBody() { + this._blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockBody() { + this._blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..c3e546133 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,4 @@ +import { OverlaysManager } from './index.js'; +import { singletonManager } from 'singleton-manager'; + +export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js new file mode 100644 index 000000000..bc65fde08 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js @@ -0,0 +1,49 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + getInstance(sym, fallback) { + const ev = new CustomEvent('request-instance', { + detail: { key: sym }, + bubbles: true, + cancelable: true, + composed: true, + }); + this.dispatchEvent(ev); + return ev.detail.instance || fallback(); + } + + connectedCallback() { + super.connectedCallback(); + } + + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays._blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js new file mode 100644 index 000000000..384537215 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js @@ -0,0 +1,70 @@ +import { OverlaysManager } from 'overlays'; +import { singletonManager } from 'singleton-manager'; +import { OverlaysManager as OverlaysManager2 } from './node_modules/page-b/node_modules/overlays/index.js'; + +let compatibleManager1; +let compatibleManager2; + +const blocker = document.createElement('div'); +blocker.setAttribute( + 'style', + 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;', +); +blocker.innerText = `Shared Blocker for App`; +document.body.appendChild(blocker); + +class CompatibleManager1 extends OverlaysManager { + constructor() { + super(); + this.name = 'Compatible1 from App'; + } + + block(sync = true) { + super.block(); + if (sync) { + compatibleManager2.blockBody(false); + } + } + + unBlock(sync = true) { + super.unBlock(); + if (sync) { + compatibleManager2.unBlockBody(false); + } + } + + _setupBlocker() { + this.blocker = blocker; + } +} + +class CompatibleManager2 extends OverlaysManager2 { + constructor() { + super(); + this.name = 'Compatible2 from App'; + } + + blockBody(sync = true) { + super.blockBody(); + if (sync) { + compatibleManager1.block(); + } + } + + unBlockBody(sync = true) { + super.unBlockBody(); + if (sync) { + compatibleManager1.unBlock(); + } + } + + _setupBlocker() { + this.blocker = blocker; + } +} + +compatibleManager1 = new CompatibleManager1(); +compatibleManager2 = new CompatibleManager2(); + +singletonManager.set('overlays::overlays::1.x', compatibleManager1); +singletonManager.set('overlays::overlays::2.x', compatibleManager2); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js new file mode 100644 index 000000000..802bb6d85 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js @@ -0,0 +1,91 @@ +import { LitElement, css, html } from 'lit'; + +import 'page-a/page-a.js'; +import 'page-b/page-b.js'; + +class DemoApp extends LitElement { + constructor() { + super(); + this.page = 'A'; + } + + static get properties() { + return { + page: { type: String }, + }; + } + + static get styles() { + return css` + :host { + display: block; + max-width: 680px; + margin: 0 auto; + } + + nav { + padding: 0 10px 10px 10px; + } + + button { + border: none; + padding: 1rem 2rem; + background: #0069ed; + color: #fff; + font-size: 1rem; + cursor: pointer; + text-align: center; + transition: background 250ms ease-in-out, transform 150ms ease; + } + + button:hover, + button:focus { + background: #0053ba; + } + + button:focus { + outline: 1px solid #fff; + outline-offset: -4px; + } + + button:active { + transform: scale(0.99); + } + + button.active { + background: #33a43f; + } + + h1 { + text-align: center; + } + `; + } + + render() { + return html` +Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..ea2f3b178 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + _blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockBody() { + this._blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockBody() { + this._blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..f73ca3b47 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,3 @@ +import { OverlaysManager } from './index.js'; + +export const overlays = new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js new file mode 100644 index 000000000..94a90c0c0 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js @@ -0,0 +1,34 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays._blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js new file mode 100644 index 000000000..057392db9 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js @@ -0,0 +1,93 @@ +import { LitElement, css, html } from 'lit'; + +import './overlayCompatibility.js'; + +import 'page-a/page-a.js'; +import 'page-b/page-b.js'; + +class DemoApp extends LitElement { + constructor() { + super(); + this.page = 'A'; + } + + static get properties() { + return { + page: { type: String }, + }; + } + + static get styles() { + return css` + :host { + display: block; + max-width: 680px; + margin: 0 auto; + } + + nav { + padding: 0 10px 10px 10px; + } + + button { + border: none; + padding: 1rem 2rem; + background: #0069ed; + color: #fff; + font-size: 1rem; + cursor: pointer; + text-align: center; + transition: background 250ms ease-in-out, transform 150ms ease; + } + + button:hover, + button:focus { + background: #0053ba; + } + + button:focus { + outline: 1px solid #fff; + outline-offset: -4px; + } + + button:active { + transform: scale(0.99); + } + + button.active { + background: #33a43f; + } + + h1 { + text-align: center; + } + `; + } + + render() { + return html` +Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..a2e56314e --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockingBody() { + this.blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockingBody() { + this.blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..c3e546133 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,4 @@ +import { OverlaysManager } from './index.js'; +import { singletonManager } from 'singleton-manager'; + +export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js new file mode 100644 index 000000000..41fa08ad4 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js @@ -0,0 +1,34 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js new file mode 100644 index 000000000..36a9c73c0 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js @@ -0,0 +1,23 @@ +import { OverlaysManager } from 'overlays'; +import { singletonManager } from 'singleton-manager'; + +class CompatibleManager extends OverlaysManager { + constructor() { + super(); + this.name = 'Compatible from App'; + this.blocker.innerText = `Blocker for ${this.name}`; + } + + blockingBody() { + this.block(); + } + + unBlockingBody() { + this.unBlock(); + } +} + +const compatibleManager = new CompatibleManager(); + +singletonManager.set('overlays::overlays::1.x', compatibleManager); +singletonManager.set('overlays::overlays::2.x', compatibleManager); diff --git a/packages/ui/package.json b/packages/ui/package.json index 293f1194f..7225619fe 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -39,7 +39,7 @@ "debug:firefox": "cd ../../ && npm run debug:firefox", "debug:webkit": "cd ../../ && npm run debug:webkit", "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../", - "prepublishOnly": "npm run types && npm run publish-docs && npm run custom-elements-manifest", + "prepublishOnly": "npm run types && node ./scripts/copy-doc-assets.js && npm run publish-docs && npm run custom-elements-manifest", "test": "cd ../../ && npm run test:browser", "types": "wireit", "types-check-only": "tsc --project tsconfig-check-only.json",