Skip to content
Snippets Groups Projects
Commit c2069906 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Start porting to scoped elements

parent cc293db3
No related branches found
No related tags found
No related merge requests found
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
"vpu-person-profile": "file:./vendor/person-profile" "vpu-person-profile": "file:./vendor/person-profile"
}, },
"dependencies": { "dependencies": {
"@open-wc/scoped-elements": "^1.0.8",
"i18next": "^19.4.1", "i18next": "^19.4.1",
"lit-element": "^2.2.1", "lit-element": "^2.2.1",
"lit-html": "^1.1.2", "lit-html": "^1.1.2",
......
import {html, LitElement, css} from 'lit-element'; import {html, LitElement, css} from 'lit-element';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
import buildinfo from 'consts:buildinfo'; import buildinfo from 'consts:buildinfo';
class VPUBuildInfo extends LitElement { export class BuildInfo extends LitElement {
constructor() { constructor() {
super(); super();
...@@ -33,6 +32,4 @@ class VPUBuildInfo extends LitElement { ...@@ -33,6 +32,4 @@ class VPUBuildInfo extends LitElement {
</a> </a>
`; `;
} }
} }
\ No newline at end of file
commonUtils.defineCustomElement('vpu-build-info', VPUBuildInfo);
import {createI18nInstance} from './i18n.js'; import {createI18nInstance} from './i18n.js';
import {html, css, LitElement} from 'lit-element'; import {html, css, LitElement} from 'lit-element';
import 'vpu-language-select'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {LanguageSelect} from 'vpu-language-select';
import 'vpu-common/vpu-button.js'; import 'vpu-common/vpu-button.js';
import 'vpu-auth'; import 'vpu-auth';
import 'vpu-notification'; import 'vpu-notification';
...@@ -10,8 +11,8 @@ import buildinfo from 'consts:buildinfo'; ...@@ -10,8 +11,8 @@ import buildinfo from 'consts:buildinfo';
import {classMap} from 'lit-html/directives/class-map.js'; import {classMap} from 'lit-html/directives/class-map.js';
import {Router} from './router.js'; import {Router} from './router.js';
import * as events from 'vpu-common/events.js'; import * as events from 'vpu-common/events.js';
import './build-info.js'; import {BuildInfo} from './build-info.js';
import './tugraz-logo.js'; import {TUGrazLogo} from './tugraz-logo.js';
import {send as notify} from 'vpu-notification'; import {send as notify} from 'vpu-notification';
import {userProfileMeta} from './vpu-app-shell-user-profile.js'; import {userProfileMeta} from './vpu-app-shell-user-profile.js';
import {appWelcomeMeta} from './vpu-app-shell-welcome.js'; import {appWelcomeMeta} from './vpu-app-shell-welcome.js';
...@@ -41,8 +42,7 @@ const importNotify = async (promise) => { ...@@ -41,8 +42,7 @@ const importNotify = async (promise) => {
} }
}; };
class VPUApp extends ScopedElementsMixin(LitElement) {
class VPUApp extends LitElement {
constructor() { constructor() {
super(); super();
this.lang = i18n.language; this.lang = i18n.language;
...@@ -62,6 +62,18 @@ class VPUApp extends LitElement { ...@@ -62,6 +62,18 @@ class VPUApp extends LitElement {
this._attrObserver = new MutationObserver(this.onAttributeObserved); this._attrObserver = new MutationObserver(this.onAttributeObserved);
} }
static get scopedElements() {
return {
'vpu-language-select': LanguageSelect,
'vpu-tugraz-logo': TUGrazLogo,
'vpu-build-info': BuildInfo,
// https://github.com/open-wc/open-wc/issues/1541
'vpu-auth': customElements.get('vpu-auth'),
'vpu-notification': customElements.get('vpu-notification'),
'vpu-icon': customElements.get('vpu-icon'),
};
}
onAttributeObserved(mutationsList, observer) { onAttributeObserved(mutationsList, observer) {
for(let mutation of mutationsList) { for(let mutation of mutationsList) {
if (mutation.type === 'attributes') { if (mutation.type === 'attributes') {
......
import {html, LitElement, css} from 'lit-element'; import {html, LitElement, css} from 'lit-element';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
import {createI18nInstance} from './i18n.js'; import {createI18nInstance} from './i18n.js';
const i18n = createI18nInstance(); const i18n = createI18nInstance();
class VPUTUGrazLogo extends LitElement { export class TUGrazLogo extends LitElement {
constructor() { constructor() {
super(); super();
...@@ -77,6 +76,4 @@ class VPUTUGrazLogo extends LitElement { ...@@ -77,6 +76,4 @@ class VPUTUGrazLogo extends LitElement {
</a> </a>
`; `;
} }
} }
\ No newline at end of file
commonUtils.defineCustomElement('vpu-tugraz-logo', VPUTUGrazLogo);
...@@ -2,20 +2,26 @@ import {createI18nInstance} from './i18n.js'; ...@@ -2,20 +2,26 @@ import {createI18nInstance} from './i18n.js';
import {css, html, LitElement} from 'lit-element'; import {css, html, LitElement} from 'lit-element';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import 'vpu-person-profile'; import 'vpu-person-profile';
const i18n = createI18nInstance(); const i18n = createI18nInstance();
class AppShellUserProfile extends LitElement { class AppShellUserProfile extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.lang = i18n.language; this.lang = i18n.language;
this._personId = window.VPUPersonId; this._personId = window.VPUPersonId;
this.entryPointUrl = commonUtils.getAPiUrl(); this.entryPointUrl = commonUtils.getAPiUrl();
} }
static get scopedElements() {
return {
'vpu-person-profile': customElements.get('vpu-person-profile'),
};
}
static get properties() { static get properties() {
return { return {
lang: { type: String }, lang: { type: String },
......
import {createI18nInstance} from './i18n.js'; import {createI18nInstance} from './i18n.js';
import {css, html, LitElement} from 'lit-element'; import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
const i18n = createI18nInstance(); const i18n = createI18nInstance();
class AppShellWelcome extends LitElement { class AppShellWelcome extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
......
language-select @ f6797279
Subproject commit 9a3c9052ed1809b302d2738e6aa3da7e4d29b819 Subproject commit f6797279a5f00dfe4db52e44f1e016aedeec6a6d
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment