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() {
|
Router.map(function() {
|
||||||
|
this.route('storage');
|
||||||
|
this.route('scanner');
|
||||||
|
this.route('summary');
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Router;
|
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