Principal Web Developer at Freedom of the Press Foundation
viewof contactDetails = view`
${['Name', Inputs.text({ label: 'Name' })]}
${['Email', Inputs.text({ label: 'Email' })]}
`
storable(viewof contactDetails)
viewof text = Inputs.text({ label: 'Just some text' })
storable(viewof text, 'different-key')
viewof config = view`${['colors', d3.range(0, 3).map(i => Inputs.color({ value: d3.hsl(60 + i * 130, 0.9, 0.6).formatHex() }))]}`
storable(
viewof config,
'storable-example-colors',
{
renderValue: (v, i, arr) => v.colors.map(
c => htl.html.fragment`<div><svg width=10 height=10><circle cx=5 cy=5 r=5 fill=${c} /></svg> ${c}</div>`
)
}
)
storable(contactDetails)
storable(viewof contactDetails, { key: [] })
storable(viewof contactDetails, { parse: [] })
storable(viewof contactDetails, { stringify: [] })
storable(viewof contactDetails, { renderValue: [] })
storable = (view_, keyOrOptions, options = {}) => {
validate(
view_ instanceof HTMLElement,
'View is not an HTMLElement. Did you forget to include the `viewof` keyword when passing to `storable`?'
)
const defaultKey = getNotebookKey()
const options_ = {
renderValue: inspect,
stringify: JSON.stringify,
parse: JSON.parse,
key: (typeof keyOrOptions === 'string') ? keyOrOptions : defaultKey,
...((typeof keyOrOptions === 'object') ? keyOrOptions : options),
}
// Check option types
;[
['renderValue', 'function'],
['stringify', 'function'],
['parse', 'function'],
['key', 'string']
].forEach(([key, type]) => validate(typeof options_[key] === type, `options.${key} must be a ${type}`))
const state = {
// Should be synced to the input field
name: '',
// Should be synced to localStorage[key]
currentList: [],
}
// Stringify state.currentList and save to localstorage. Note that each value is separately
// stringified using options._stringify and then the entire array is strinigified using the
// native JSON.stringify, to allow user configuration of the individual stringification process
const syncToLocalStorage = () => {
localStorage.setItem(
options_.key,
JSON.stringify(state.currentList.map(([n, v], i, arr) => [n, options_.stringify(v, i, arr)]))
)
}
// Parse the list of saved configurations from localStorage and put in state.currentList
// This is the reverse process of syncToLocalStorage
const syncFromLocalStorage = () => {
const stringList = localStorage.getItem(options_.key)
if (!stringList) {
state.currentList = []
return
}
state.currentList = JSON.parse(stringList).map(([n, vstring], i, arr) => [n, options_.parse(vstring, i, arr)])
}
// Pull from localstorage and rerender the table body to match
const update = () => {
// Pull from localstorage
syncFromLocalStorage()
// Rerender the table body
const tbody = saveInterface.querySelector('tbody[data-currentlist]')
tbody.replaceChildren(...renderCurrentList())
}
// When the input field is updated, sync state.name
const handleNameInput = e => {
state.name = e.target.value
if (state.name !== '') {
saveInterface.querySelector('button[data-savebutton]').disabled = false
} else {
saveInterface.querySelector('button[data-savebutton]').disabled = true
}
}
// Add the current value to state.currentList, then push to localStorage
const handleSave = e => {
e.preventDefault()
// If the name field is blank, don't save
if (state.name == '') return
// Push the current config to the current list
state.currentList.push([state.name, view_.value])
// Write list to localstorage
syncToLocalStorage()
update()
// Clear the name field
saveInterface.querySelector('input[data-nameinput]').value = ''
state.name = ''
}
// Factory that generates a handler function which removes the item
// at index i from state.currentList and then pushes to localStorage
const handleDeleteFactory = i => {
return e => {
state.currentList.splice(i, 1)
syncToLocalStorage()
update()
}
}
// Factory that generates a handler function which backwrites
// the value at index i in state.currentList to the view
const handleApplyFactory = i => {
return e => {
e.preventDefault()
const [name, value] = state.currentList[i]
view_.value = value
view_.dispatchEvent(new Event('input'))
}
}
// Handler that listens for changes to the view and updates the "new item"
// row in the table. We don't get this automatically because `viewof view`,
// which is the first argument to `storable` doesn't trigger reevaluation
// when `view` changes in Observable
const handleViewInput = () => {
saveInterface.querySelector('td[data-currentvalue]').replaceChildren(
htl.html.fragment`${options_.renderValue(view_.value)}`
)
}
// We bind the listener immediately to the view
view_.addEventListener('input', handleViewInput)
// Template for the table rows
const renderCurrentList = () => state.currentList.map(([name, value], i, arr) => htl.html.fragment`
<tr>
<td>
<a href="#" onclick=${handleApplyFactory(i)} style="font-weight: bold;">
${name}
</a>
</td>
<td>${options_.renderValue(value, i, arr)}</td>
<td>
<button onclick=${handleDeleteFactory(i)} type="button">Delete</button>
</td>
</tr>
`)
// We need to sync from localStorage once before rendering
syncFromLocalStorage()
// Render the whole table!
const saveInterface = htl.html`
<form data-saveform onsubmit=${handleSave} action="" style="max-width: 100%; overflow: auto">
<table>
<thead>
<tr>
<th>Name <span style="font-weight: 400">(click to restore)</span></th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody data-currentlist>
${renderCurrentList()}
</tbody>
<tfoot>
<tr style="border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;">
<td style="padding-top: 3px">
<label for=${DOM.uid(`name-${options_.key}`)} style="display: block; height: 0; width: 0; overflow: hidden;">Name</label>
<input id=${DOM.uid(`name-${options_.key}`)} data-nameinput oninput=${handleNameInput} type="text" placeholder="Name" style="max-width: 80px" />
</td>
<td style="padding-top: 3px" data-currentvalue>
${options_.renderValue(view_.value)}
</td>
<td style="padding-top: 3px">
<button data-savebutton disabled=${true} type="submit">Save</button>
</td>
</tr>
</tfoot>
</table>
</form>
`
return saveInterface
}
truncate = (str, length = 50, ellipsis = '…') => str.length > length ? str.substring(0, length) + ellipsis : str
getNotebookKey = () => new URL(document.baseURI).pathname.substring(1).replace('/', '-')
validate = (condition, error) => {
if (!!condition) return
throw error
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.