|
16 | 16 | // |
17 | 17 |
|
18 | 18 | // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. |
19 | | -import "phoenix_html" |
| 19 | +import "phoenix_html"; |
20 | 20 | // Establish Phoenix Socket and LiveView configuration. |
21 | | -import { Socket } from "phoenix" |
22 | | -import { LiveSocket } from "phoenix_live_view" |
23 | | -import topbar from "../vendor/topbar" |
| 21 | +import { Socket } from "phoenix"; |
| 22 | +import { LiveSocket } from "phoenix_live_view"; |
| 23 | +import topbar from "../vendor/topbar"; |
24 | 24 |
|
25 | 25 | // if the duration is zero, return "done" |
26 | 26 | // if the duration is less than a minute, return "{seconds}s" |
27 | 27 | // if the duration is less than an hour, return "{minutes}m {seconds}s" |
28 | 28 | // if the duration is less than a day, return "{hours}h {minutes}m {seconds}s" |
29 | 29 | // if the duration is less than a year, return "{days}d {hours}h {minutes}m {seconds}s" |
30 | 30 | function formatDuration(seconds) { |
31 | | - if (seconds === 0) { |
32 | | - return "done" |
33 | | - } |
34 | | - |
35 | | - let minutes = Math.floor(seconds / 60) |
36 | | - let hours = Math.floor(minutes / 60) |
37 | | - let days = Math.floor(hours / 24) |
38 | | - let years = Math.floor(days / 365) |
| 31 | + if (seconds === 0) { |
| 32 | + return "done"; |
| 33 | + } |
39 | 34 |
|
40 | | - if (years > 0) { |
41 | | - return `${years}y ${days % 365}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s` |
42 | | - } else if (days > 0) { |
43 | | - return `${days}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s` |
44 | | - } else if (hours > 0) { |
45 | | - return `${hours}h ${minutes % 60}m ${seconds % 60}s` |
46 | | - } else if (minutes > 0) { |
47 | | - return `${minutes}m ${seconds % 60}s` |
48 | | - } else { |
49 | | - return `${seconds}s` |
50 | | - } |
| 35 | + let minutes = Math.floor(seconds / 60); |
| 36 | + let hours = Math.floor(minutes / 60); |
| 37 | + let days = Math.floor(hours / 24); |
| 38 | + let years = Math.floor(days / 365); |
51 | 39 |
|
| 40 | + if (years > 0) { |
| 41 | + return `${years}y ${days % 365}d ${hours % 24}h ${minutes % 60}m ${ |
| 42 | + seconds % 60 |
| 43 | + }s`; |
| 44 | + } else if (days > 0) { |
| 45 | + return `${days}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s`; |
| 46 | + } else if (hours > 0) { |
| 47 | + return `${hours}h ${minutes % 60}m ${seconds % 60}s`; |
| 48 | + } else if (minutes > 0) { |
| 49 | + return `${minutes}m ${seconds % 60}s`; |
| 50 | + } else { |
| 51 | + return `${seconds}s`; |
| 52 | + } |
52 | 53 | } |
53 | 54 |
|
54 | | -let Hooks = {} |
| 55 | +let Hooks = {}; |
55 | 56 |
|
56 | 57 | Hooks.Countdown = { |
57 | | - tick() { |
58 | | - let seconds = Math.floor((this.target - new Date()) / 1000) |
59 | | - if (seconds <= 0) { |
60 | | - this.el.innerHTML = "done" |
61 | | - pushEvent("update_timers", this.el, {}) |
62 | | - return |
63 | | - } else { |
64 | | - this.el.innerHTML = formatDuration(seconds) |
65 | | - this.timeout = setTimeout(() => this.tick(), 1000) |
66 | | - } |
67 | | - }, |
68 | | - mounted() { |
69 | | - this.target = new Date(this.el.dataset.target) |
70 | | - this.tick() |
71 | | - }, |
72 | | - destroyed() { |
73 | | - clearTimeout(this.timeout) |
74 | | - }, |
75 | | - updated() { |
76 | | - clearTimeout(this.timeout) |
77 | | - this.mounted() |
| 58 | + tick() { |
| 59 | + let seconds = Math.floor((this.target - new Date()) / 1000); |
| 60 | + if (seconds <= 0) { |
| 61 | + this.el.innerHTML = "done"; |
| 62 | + setTimeout(() => { |
| 63 | + this.pushEvent("countdown-ended", {}); |
| 64 | + console.debug("sent countdown-ended event"); |
| 65 | + }, 500); |
| 66 | + return; |
| 67 | + } else { |
| 68 | + this.el.innerHTML = formatDuration(seconds); |
| 69 | + this.timeout = setTimeout(() => this.tick(), 1000); |
78 | 70 | } |
79 | | -} |
| 71 | + }, |
| 72 | + mounted() { |
| 73 | + this.target = new Date(this.el.dataset.target); |
| 74 | + this.tick(); |
| 75 | + }, |
| 76 | + updated() { |
| 77 | + clearTimeout(this.timeout); |
| 78 | + this.mounted(); |
| 79 | + }, |
| 80 | + destroyed() { |
| 81 | + clearTimeout(this.timeout); |
| 82 | + }, |
| 83 | +}; |
80 | 84 |
|
81 | | -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") |
| 85 | +let csrfToken = document |
| 86 | + .querySelector("meta[name='csrf-token']") |
| 87 | + .getAttribute("content"); |
82 | 88 | let liveSocket = new LiveSocket("/live", Socket, { |
83 | | - params: { _csrf_token: csrfToken }, |
84 | | - hooks: Hooks |
85 | | -}) |
| 89 | + params: { _csrf_token: csrfToken }, |
| 90 | + hooks: Hooks, |
| 91 | +}); |
86 | 92 |
|
87 | 93 | // Show progress bar on live navigation and form submits |
88 | | -topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }) |
89 | | -window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) |
90 | | -window.addEventListener("phx:page-loading-stop", _info => topbar.hide()) |
| 94 | +topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }); |
| 95 | +window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)); |
| 96 | +window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()); |
91 | 97 |
|
92 | 98 | // connect if there are any LiveViews on the page |
93 | | -liveSocket.connect() |
| 99 | +liveSocket.connect(); |
94 | 100 |
|
95 | 101 | // expose liveSocket on window for web console debug logs and latency simulation: |
96 | 102 | // >> liveSocket.enableDebug() |
97 | 103 | // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session |
98 | 104 | // >> liveSocket.disableLatencySim() |
99 | | -window.liveSocket = liveSocket |
100 | | - |
| 105 | +window.liveSocket = liveSocket; |
0 commit comments