add MaintainAttrs hook

This commit is contained in:
shibao 2022-01-22 23:59:58 -05:00 committed by oliviasculley
parent 50a8a79596
commit f1f3082368
2 changed files with 13 additions and 1 deletions

View File

@ -25,9 +25,13 @@ import 'phoenix_html'
import { Socket } from 'phoenix' import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view' import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar' import topbar from '../vendor/topbar'
import MaintainAttrs from './maintain_attrs'
const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
const liveSocket = new LiveSocket('/live', Socket, { params: { _csrf_token: csrfToken } }) const liveSocket = new LiveSocket('/live', Socket, {
params: { _csrf_token: csrfToken },
hooks: { MaintainAttrs }
})
// Show progress bar on live navigation and form submits // Show progress bar on live navigation and form submits
topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' }) topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })

View File

@ -0,0 +1,8 @@
// maintain user adjusted attributes, like textbox length on phoenix liveview
// update. https://github.com/phoenixframework/phoenix_live_view/issues/1011
export default {
attrs(){ return this.el.getAttribute("data-attrs").split(", ") },
beforeUpdate(){ this.prevAttrs = this.attrs().map(name => [name, this.el.getAttribute(name)]) },
updated(){ this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val)) }
}