shibao/memEx
1
1
Fork 0
Code Issues 5 Pull Requests Projects Releases 16 Wiki Activity

use hooks for datetime, remove alpinejs

Browse Source
This commit is contained in:
shibao 2023-03-18 21:45:20 -04:00
parent 0d4deb6805
commit 5dedb4668b
9 changed files with 37 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/js/app.js
View File

@ -26,26 +26,18 @@ import 'phoenix_html'
import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view'
import topbar from 'topbar'
import Date from './date'
import DateTime from './datetime'
import MaintainAttrs from './maintain_attrs'
import Alpine from 'alpinejs'
const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
let csrfToken
if (csrfTokenElement) { csrfToken = csrfTokenElement.getAttribute('content') }
const liveSocket = new LiveSocket('/live', Socket, {
dom: {
onBeforeElUpdated (from, to) {
if (from._x_dataStack) { window.Alpine.clone(from, to) }
}
},
params: { _csrf_token: csrfToken },
hooks: { MaintainAttrs }
hooks: { Date, DateTime, MaintainAttrs }
})
// alpine.js
window.Alpine = Alpine
Alpine.start()
// Show progress bar on live navigation and form submits
topbar.config({ barThickness: 1, barColors: { 0: '#fff' }, shadowColor: 'rgba(0, 0, 0, .3)' })
window.addEventListener('phx:page-loading-start', info => topbar.show())

11
assets/js/date.js Normal file
View File

@ -0,0 +1,11 @@
export default {
displayDate (el) {
const date =
Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' })
.format(new Date(el.dateTime))
el.innerText = date
},
mounted () { this.displayDate(this.el) },
updated () { this.displayDate(this.el) }
}

11
assets/js/datetime.js Normal file
View File

@ -0,0 +1,11 @@
export default {
displayDateTime (el) {
const date =
Intl.DateTimeFormat([], { dateStyle: 'short', timeStyle: 'long' })
.format(new Date(el.dateTime))
el.innerText = date
},
mounted () { this.displayDateTime(this.el) },
updated () { this.displayDateTime(this.el) }
}

53
assets/package-lock.json generated
View File

@ -8,7 +8,6 @@
"dependencies": {
"@fontsource/nunito-sans": "^4.5.8",
"@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
@ -38,19 +37,19 @@
"webpack-dev-server": "^4.9.0"
},
"engines": {
"node": "18.12.1",
"npm": "8.19.2"
"node": "v18.9.1",
"npm": "8.19.1"
}
},
"../deps/phoenix": {
"version": "1.6.15",
"version": "1.6.16",
"license": "MIT"
},
"../deps/phoenix_html": {
"version": "3.2.0"
"version": "3.3.1"
},
"../deps/phoenix_live_view": {
"version": "0.18.11",
"version": "0.18.18",
"license": "MIT"
},
"node_modules/@ampproject/remapping": {
@ -2277,19 +2276,6 @@
"@types/node": "*"
}
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"node_modules/@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -2655,14 +2641,6 @@
"ajv": "^6.9.1"
}
},
"node_modules/alpinejs": {
"version": "3.10.2",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz",
"integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-html-community": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@ -14029,19 +14007,6 @@
"@types/node": "*"
}
},
"@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"requires": {
"@vue/shared": "3.1.5"
}
},
"@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -14355,14 +14320,6 @@
"dev": true,
"requires": {}
},
"alpinejs": {
"version": "3.10.2",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz",
"integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==",
"requires": {
"@vue/reactivity": "~3.1.1"
}
},
"ansi-html-community": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",

3
assets/package.json
View File

@ -4,7 +4,7 @@
"license": "MIT",
"engines": {
"node": "v18.9.1",
"npm": "8.10.0"
"npm": "8.19.1"
},
"scripts": {
"deploy": "NODE_ENV=production webpack --mode production",
@ -15,7 +15,6 @@
"dependencies": {
"@fontsource/nunito-sans": "^4.5.8",
"@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",

1
changelog.md
View File

@ -1,6 +1,7 @@
# v0.1.10
- Improve accessibility
- Code quality improvements
- Fix dates displaying incorrectly
# v0.1.9
- Improve server log

4
lib/memex_web/components/core_components.ex
View File

@ -89,7 +89,7 @@ defmodule MemexWeb.CoreComponents do
@doc """
Phoenix.Component for a <time> element that renders the naivedatetime in the
user's local timezone with Alpine.js
user's local timezone
"""
def datetime(assigns)
@ -105,7 +105,7 @@ defmodule MemexWeb.CoreComponents do
@doc """
Phoenix.Component for a <date> element that renders the Date in the user's
local timezone with Alpine.js
local timezone
"""
def date(assigns)

8
lib/memex_web/components/core_components/date.html.heex
View File

@ -1,7 +1,3 @@
<time :if={@date} id={@id} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
date:
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
.format(new Date("#{Date.to_iso8601(@date, :extended)}"))
}>} x-text="date">
<%= @date |> Date.to_iso8601(:extended) %>
<time :if={@date} id={@id} datetime={Date.to_iso8601(@date, :extended)} phx-hook="Date">
<%= Date.to_iso8601(@date, :extended) %>
</time>

6
lib/memex_web/components/core_components/datetime.html.heex
View File

@ -1,7 +1,3 @@
<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} x-data={~s/{
datetime:
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
.format(new Date("#{cast_datetime(@datetime)}"))
}/} x-text="datetime">
<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} phx-hook="DateTime">
<%= cast_datetime(@datetime) %>
</time>