skinny-widgets
Version:
skinnable web components widgets collection
53 lines (48 loc) • 1.59 kB
HTML
<body>
<sk-config
theme="antd"
base-path="/src"
lang="ru"
id="myConfig"
></sk-config>
<sk-config
theme="jquery"
base-path="/src"
lang="ru"
id="myConfig2"
></sk-config>
<sk-alert closable type="error">Alarm ! Alarm !</sk-alert>
<my-alert closable type="error">Alarm ! Alarm !</my-alert>
<script src="/examples/di/injection.bundle.js"></script>
<script type="module">
import { SkConfig } from '../../src/sk-config.js';
import { SkAlert } from '../../src/sk-alert.js';
import { JquerySkAlert } from '../../src/theme/jquery/jquery-sk-alert.js';
const { Inject, ReflectiveInjector } = window['injection-js'];
customElements.define('sk-config', SkConfig);
function MyAlertFactory(impl) {
class MyAlert extends SkAlert {
get configEl() {
return myConfig2; // get by global id
}
get impl() {
return new impl(this);
}
}
let alert = MyAlert;
return alert;
}
function MyAlertImplFactory() {
class MyImpl extends JquerySkAlert {
}
let impl = MyImpl;
return impl;
}
const injector = ReflectiveInjector.resolveAndCreate([
{ provide: 'MyAlertImpl', useFactory: () => new MyAlertImplFactory(), deps: [] },
{ provide: 'MyAlert', useFactory: (impl) => new MyAlertFactory(impl), deps: ['MyAlertImpl'] }
]);
customElements.define('sk-alert', SkAlert);
customElements.define('my-alert', injector.get('MyAlert'));
</script>
</body>