Clear code
This commit is contained in:
Stanislav Romanov
parent
51f907b081
commit
8c7e93db4d
7 changed files with 62 additions and 94 deletions
|
|
@ -1,22 +1,27 @@
|
|||
<div
|
||||
class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
|
||||
role='alert'
|
||||
>
|
||||
<div class='inline-flex flex-shrink-0 justify-center items-center self-start'>
|
||||
<Icons::Loading @spin={{true}} class='mr-4' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{@text}}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
class='ml-auto self-start'
|
||||
{{! data-dismiss-target='#toast-default' }}
|
||||
aria-label='Close'
|
||||
{{on 'click' this.destroyFromPlate}}
|
||||
{{#in-element this.toasts.destinationElement insertBefore=null}}
|
||||
<div
|
||||
class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
|
||||
role='alert'
|
||||
{{did-insert this.registerInPlate}}
|
||||
>
|
||||
<Icons::Close />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class='inline-flex flex-shrink-0 justify-center items-center self-start'
|
||||
>
|
||||
<Icons::Loading @spin={{true}} class='mr-4' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{@text}}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
class='ml-auto self-start'
|
||||
{{! data-dismiss-target='#toast-default' }}
|
||||
aria-label='Close'
|
||||
{{on 'click' this.triggerOnClose}}
|
||||
>
|
||||
<Icons::Close />
|
||||
</button>
|
||||
</div>
|
||||
{{/in-element}}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,17 @@ import { action } from '@ember/object';
|
|||
export default class ToastComponent extends Component {
|
||||
@service toasts;
|
||||
|
||||
constructor(owner, args) {
|
||||
super(owner, args);
|
||||
|
||||
// registerDestructor(this, this.destroy);
|
||||
@action
|
||||
triggerOnClose() {
|
||||
this.args.onClose?.();
|
||||
}
|
||||
|
||||
@action
|
||||
destroyFromPlate() {
|
||||
this.args?.willDestroy();
|
||||
registerInPlate() {
|
||||
this.toasts.add(this);
|
||||
|
||||
registerDestructor(this, () => {
|
||||
this.toasts.remove(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
{{#in-element this.toasts.destinationElement}}
|
||||
<div ...attributes>
|
||||
{{#each this.toasts.plate as |Item|}}
|
||||
<Item />
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/in-element}}
|
||||
<div ...attributes>
|
||||
{{#each this.toasts.container as |Item|}}
|
||||
<Item />
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,51 +4,8 @@ import Toast from '../components/toast';
|
|||
import { hbs } from 'ember-template-imports';
|
||||
import { fn } from '@ember/helper';
|
||||
|
||||
// const toast = hbs`
|
||||
// {{component Toast text="hel"}}
|
||||
// `;
|
||||
|
||||
// import { RenderingTestCase, moduleFor, strip } from 'internal-test-helpers';
|
||||
|
||||
// import { precompileJSON } from '@glimmer/compiler';
|
||||
// import { getTemplateLocals } from '@glimmer/syntax';
|
||||
// import { createTemplateFactory } from '@ember/template-factory';
|
||||
|
||||
// // import { Helper } from '../../index';
|
||||
// import { setComponentTemplate } from '@glimmer/manager';
|
||||
// import { templateOnlyComponent } from '@glimmer/runtime';
|
||||
|
||||
// function precompileTemplate(source, { moduleName, scope = {} }) {
|
||||
// let locals = getTemplateLocals(source);
|
||||
|
||||
// let options = {
|
||||
// strictMode: true,
|
||||
// moduleName,
|
||||
// locals,
|
||||
// isProduction: false,
|
||||
// meta: { moduleName },
|
||||
// };
|
||||
|
||||
// // Copied from @glimmer/compiler/lib/compiler#precompile
|
||||
// let [block, usedLocals] = precompileJSON(source, options);
|
||||
// let usedScope = usedLocals.map((key) => scope[key]);
|
||||
|
||||
// let blockJSON = JSON.stringify(block);
|
||||
// let templateJSONObject = {
|
||||
// id: moduleName,
|
||||
// block: blockJSON,
|
||||
// moduleName: moduleName ?? '(unknown template module)',
|
||||
// scope: () => usedScope,
|
||||
// isStrictMode: true,
|
||||
// };
|
||||
|
||||
// let factory = createTemplateFactory(templateJSONObject);
|
||||
|
||||
// return factory;
|
||||
// }
|
||||
|
||||
// console.log(toast);
|
||||
export default class ToastsService extends Service {
|
||||
@tracked container = [];
|
||||
@tracked plate = [];
|
||||
|
||||
constructor() {
|
||||
|
|
@ -60,16 +17,20 @@ export default class ToastsService extends Service {
|
|||
}
|
||||
|
||||
successToast({ text }) {
|
||||
const removeFromPlate = (toast) => {
|
||||
this.plate = this.plate.filter((item) => item !== toast);
|
||||
const onClose = () => {
|
||||
this.container = this.container.filter((item) => item !== wrapper);
|
||||
};
|
||||
|
||||
const toast = hbs`<Toast @text={{text}} @willDestroy={{fn removeFromPlate toast}} />`;
|
||||
console.log('successToast', toast);
|
||||
this.addToPlate(toast);
|
||||
const wrapper = hbs`<Toast @text={{text}} @onClose={{onClose}} />`;
|
||||
|
||||
this.container = this.container.concat([wrapper]);
|
||||
}
|
||||
|
||||
addToPlate(toast) {
|
||||
this.plate = this.plate.concat(toast);
|
||||
add(toast) {
|
||||
this.queue = this.queue.concat(toast);
|
||||
}
|
||||
|
||||
remove(toast) {
|
||||
this.queue = this.queue.filter((item) => item !== toast);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,4 +18,6 @@
|
|||
<Button @text='Cancel' @onClick={{this.cancel}} />
|
||||
</form>
|
||||
|
||||
{{!-- <Toast @text="HO-HO-HO" /> --}}
|
||||
{{!-- {{#unless this.show}}
|
||||
<Toast @text="HO-HO-HO" @onClose={{fn (set this 'show') true}} />
|
||||
{{/unless}} --}}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
"qunit": "^2.19.1",
|
||||
"qunit-dom": "^2.0.0",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"tracked-built-ins": "^2.0.1",
|
||||
"tracked-built-ins": "^3.1.0",
|
||||
"webpack": "^5.74.0"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -12779,17 +12779,16 @@ tr46@~0.0.3:
|
|||
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
|
||||
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
|
||||
|
||||
tracked-built-ins@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/tracked-built-ins/-/tracked-built-ins-2.0.1.tgz#9d6d0db29ad187e8533591f0e891e15b7a2259c5"
|
||||
integrity sha512-v0DwPVNm3zA4cmJLpcBJxJfKefN6ldhkc8l5YA+cWHq7kI8WMUcXjIXgl/AIxmt1SoO1bwPdpikPRHHrIBDtFQ==
|
||||
tracked-built-ins@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tracked-built-ins/-/tracked-built-ins-3.1.0.tgz#827703e8e8857e45ac449dfc41e8706e0d6da309"
|
||||
integrity sha512-yPEZV1aYaw7xFWdoEluvdwNxIJIA834HaBQaMATjNAYPwd1fRqIJ46YnuRo6+9mRRWu6nM6sJqrVVa5H6UhFuw==
|
||||
dependencies:
|
||||
ember-cli-babel "^7.26.10"
|
||||
ember-cli-typescript "^4.1.0"
|
||||
ember-cli-typescript "^5.1.0"
|
||||
ember-tracked-storage-polyfill "^1.0.0"
|
||||
tracked-maps-and-sets "^3.0.2"
|
||||
|
||||
tracked-maps-and-sets@^3.0.1, tracked-maps-and-sets@^3.0.2:
|
||||
tracked-maps-and-sets@^3.0.1:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tracked-maps-and-sets/-/tracked-maps-and-sets-3.0.2.tgz#6ea1b9f2a367d24f2e9905b74b24437fbce76ea6"
|
||||
integrity sha512-UIRcWsX1kDOcC/Q2R58weYWlw01EnmWWBwUv3okWS+zMBvsgIfYoO6veHhuNE3hgzWCEImNp46QS5CyKnw5QUA==
|
||||
|
|
|
|||
Loading…
Reference in a new issue