Line | |
---|
1 | <template>
|
---|
2 | <div class="paper bar" :class="{ 'bar-show': hasContent }">
|
---|
3 | {{ content }}
|
---|
4 | </div>
|
---|
5 | </template>
|
---|
6 |
|
---|
7 | <style lang="scss" scoped>
|
---|
8 | .bar {
|
---|
9 | position: absolute;
|
---|
10 | bottom: 1em;
|
---|
11 | left: 35%;
|
---|
12 |
|
---|
13 | opacity: 0;
|
---|
14 | width: 30%;
|
---|
15 |
|
---|
16 | transition-duration: 250ms;
|
---|
17 | --paper-color: #2E2E2E;
|
---|
18 | color: white;
|
---|
19 | }
|
---|
20 |
|
---|
21 | .bar-show {
|
---|
22 | opacity: 1;
|
---|
23 | }
|
---|
24 | </style>
|
---|
25 |
|
---|
26 | <script>
|
---|
27 | export default {
|
---|
28 | name: "SnackBar",
|
---|
29 | data() {
|
---|
30 | return {
|
---|
31 | content: null
|
---|
32 | }
|
---|
33 | },
|
---|
34 | computed: {
|
---|
35 | hasContent() {
|
---|
36 | return this.content !== null && this.content !== undefined && this.content.length > 0;
|
---|
37 | }
|
---|
38 | },
|
---|
39 | methods: {
|
---|
40 | setContent(content, timeout = 3000) {
|
---|
41 | this.content = content;
|
---|
42 |
|
---|
43 | setTimeout(() => {
|
---|
44 | this.content = null;
|
---|
45 | }, timeout);
|
---|
46 | }
|
---|
47 | }
|
---|
48 | }
|
---|
49 |
|
---|
50 | export class SnackController {
|
---|
51 | /**
|
---|
52 | * The internal snack queue. Do not manipulate externally.
|
---|
53 | * @type {Array<{c: String, t: Number}>}
|
---|
54 | */
|
---|
55 | static queue = [];
|
---|
56 |
|
---|
57 | /**
|
---|
58 | * The SnackBar Vue component used by this controller.
|
---|
59 | */
|
---|
60 | static bar = null;
|
---|
61 |
|
---|
62 | /**
|
---|
63 | * A value defining whether or not a snackbar is active. Do not manipulate externally.
|
---|
64 | */
|
---|
65 | static isActive = false;
|
---|
66 |
|
---|
67 | /**
|
---|
68 | * Sets the SnackBar Vue component that this controller should use.
|
---|
69 | */
|
---|
70 | static setBar(snackBar) {
|
---|
71 | this.bar = snackBar;
|
---|
72 | }
|
---|
73 |
|
---|
74 | /**
|
---|
75 | * Adds a snack to the queue.
|
---|
76 | * @param {String} content The message of the snackbar.
|
---|
77 | * @param {Number} timeoutMS The time in milliseconds for which the snack will be displayed.
|
---|
78 | */
|
---|
79 | static addSnack(content, timeoutMS = 3000) {
|
---|
80 | this.queue.push({
|
---|
81 | c: content,
|
---|
82 | t: timeoutMS
|
---|
83 | });
|
---|
84 |
|
---|
85 | if (!this.isActive) {
|
---|
86 | this.eatSnacks();
|
---|
87 | }
|
---|
88 | }
|
---|
89 |
|
---|
90 | /**
|
---|
91 | * Do not use this method externally.
|
---|
92 | */
|
---|
93 | static eatSnacks() {
|
---|
94 | if (this.isActive || this.queue.length === 0) {
|
---|
95 | return;
|
---|
96 | }
|
---|
97 |
|
---|
98 | this.isActive = true;
|
---|
99 | const { c, t } = this.queue.shift();
|
---|
100 | this.bar.setContent(c, t);
|
---|
101 |
|
---|
102 | setTimeout(function() {
|
---|
103 | SnackController.isActive = false;
|
---|
104 | SnackController.eatSnacks();
|
---|
105 | }, t + 500);
|
---|
106 | }
|
---|
107 | }
|
---|
108 | </script>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.