add routes, modal service and component
This commit is contained in:
parent
d32c931f96
commit
8a3e5c3512
69
app/components/modals/basic-modal.js
Normal file
69
app/components/modals/basic-modal.js
Normal file
@ -0,0 +1,69 @@
|
||||
import Component from '@ember/component';
|
||||
import move from 'ember-animated/motions/move';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { fadeIn } from 'ember-animated/motions/opacity';
|
||||
import { fadeOut } from 'ember-animated/motions/opacity';
|
||||
import { set } from '@ember/object';
|
||||
import bezier from 'bezier-easing';
|
||||
|
||||
export default Component.extend({
|
||||
modal: service(),
|
||||
tagName: '',
|
||||
isActive: false,
|
||||
duration: 500,
|
||||
|
||||
didInsertElement() {
|
||||
this.name && this.modal.registerModal(this);
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this.name && this.modal.destroyModal(this);
|
||||
},
|
||||
|
||||
actions: {
|
||||
onOutsideClick() {
|
||||
this.close();
|
||||
},
|
||||
|
||||
open() {
|
||||
this.open();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
* transitionModalOverlay({ insertedSprites, removedSprites }) { // eslint-disable-line require-yield
|
||||
for (let sprite of insertedSprites) {
|
||||
fadeIn(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
|
||||
}
|
||||
|
||||
for (let sprite of removedSprites) {
|
||||
fadeOut(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
|
||||
}
|
||||
},
|
||||
|
||||
* transitionModalContent({ insertedSprites, removedSprites }) { // eslint-disable-line require-yield
|
||||
|
||||
for (let sprite of insertedSprites) {
|
||||
sprite.startTranslatedBy(0, 1000);
|
||||
move(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
|
||||
}
|
||||
|
||||
for (let sprite of removedSprites) {
|
||||
sprite.endTranslatedBy(0, 1000);
|
||||
move(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
|
||||
}
|
||||
},
|
||||
|
||||
open() {
|
||||
set(this, 'isActive', true);
|
||||
this.onOpen && this.onOpen();
|
||||
},
|
||||
|
||||
close() {
|
||||
set(this, 'isActive', false);
|
||||
}
|
||||
});
|
||||
|
7
app/components/modals/basic-modal/-content.js
Normal file
7
app/components/modals/basic-modal/-content.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
click(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
4
app/components/modals/basic-modal/-overlay.js
Normal file
4
app/components/modals/basic-modal/-overlay.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
});
|
@ -7,6 +7,9 @@ const Router = EmberRouter.extend({
|
||||
});
|
||||
|
||||
Router.map(function() {
|
||||
this.route('storage');
|
||||
this.route('scanner');
|
||||
this.route('summary');
|
||||
});
|
||||
|
||||
export default Router;
|
||||
|
4
app/routes/scanner.js
Normal file
4
app/routes/scanner.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Route from '@ember/routing/route';
|
||||
|
||||
export default Route.extend({
|
||||
});
|
4
app/routes/storage.js
Normal file
4
app/routes/storage.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Route from '@ember/routing/route';
|
||||
|
||||
export default Route.extend({
|
||||
});
|
4
app/routes/summary.js
Normal file
4
app/routes/summary.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Route from '@ember/routing/route';
|
||||
|
||||
export default Route.extend({
|
||||
});
|
25
app/services/modal.js
Normal file
25
app/services/modal.js
Normal file
@ -0,0 +1,25 @@
|
||||
import Service from '@ember/service';
|
||||
|
||||
export default Service.extend({
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
this.modals = {};
|
||||
},
|
||||
|
||||
registerModal(reference) {
|
||||
this.modals[reference.name] = reference;
|
||||
},
|
||||
|
||||
destroyModal(reference) {
|
||||
this.modals[reference.name] = null;
|
||||
},
|
||||
|
||||
open(name) {
|
||||
this.modals[name].open();
|
||||
},
|
||||
|
||||
close(name) {
|
||||
this.modals[name].close();
|
||||
}
|
||||
});
|
||||
|
19
app/templates/components/modals/basic-modal.hbs
Normal file
19
app/templates/components/modals/basic-modal.hbs
Normal file
@ -0,0 +1,19 @@
|
||||
{{#modals/basic-modal/-overlay
|
||||
isActive=this.isActive
|
||||
animation=this.transitionModalOverlay
|
||||
duration=this.duration
|
||||
}}
|
||||
{{/modals/basic-modal/-overlay}}
|
||||
|
||||
{{#animated-if this.isActive use=this.transitionModalContent duration=this.duration}}
|
||||
<div
|
||||
role="button"
|
||||
class="fixed top-0 left-0 w-full h-full flex justify-center items-center
|
||||
z-60"
|
||||
{{action "onOutsideClick"}}
|
||||
>
|
||||
<div class="flex flex-col w-1/3 bg-white rounded modal-css-animation">
|
||||
{{yield (hash content=(component "modals/basic-modal/-content"))}}
|
||||
</div>
|
||||
</div>
|
||||
{{/animated-if}}
|
1
app/templates/components/modals/basic-modal/-content.hbs
Normal file
1
app/templates/components/modals/basic-modal/-content.hbs
Normal file
@ -0,0 +1 @@
|
||||
{{yield}}
|
8
app/templates/components/modals/basic-modal/-overlay.hbs
Normal file
8
app/templates/components/modals/basic-modal/-overlay.hbs
Normal file
@ -0,0 +1,8 @@
|
||||
{{#animated-if @isActive use=@animation duration=@duration}}
|
||||
<div
|
||||
class="fixed top-0 left-0 bg-black-transparent w-full h-full flex justify-center items-center z-50"
|
||||
>
|
||||
{{yield}}
|
||||
</div>
|
||||
{{/animated-if}}
|
||||
|
Loading…
Reference in New Issue
Block a user