Reader: add layout option

ui/menu.js

@@ -0,0 +1,42 @@
+const createMenuItemRadioGroup = (label, arr, onclick) => {
+    const group = document.createElement('ul')
+    group.setAttribute('role', 'group')
+    group.setAttribute('aria-label', label)
+    const map = new Map()
+    const select = value => {
+        onclick(value)
+        const item = map.get(value)
+        for (const child of group.children)
+            child.setAttribute('aria-checked', child === item ? 'true' : 'false')
+    }
+    for (const [label, value] of arr) {
+        const item = document.createElement('li')
+        item.setAttribute('role', 'menuitemradio')
+        item.innerText = label
+        item.onclick = () => select(value)
+        map.set(value, item)
+        group.append(item)
+    }
+    return { element: group, select }
+}
+
+export const createMenu = arr => {
+    const groups = {}
+    const element = document.createElement('ul')
+    element.setAttribute('role', 'menu')
+    const hide = () => element.classList.remove('show')
+    const hideAnd = f => (...args) => (hide(), f(...args))
+    for (const { name, label, type, items, onclick } of arr) {
+        const widget = type === 'radio'
+            ? createMenuItemRadioGroup(label, items, hideAnd(onclick))
+            : null
+        if (name) groups[name] = widget
+        element.append(widget.element)
+    }
+    // TODO: keyboard events
+    window.addEventListener('blur', () => hide())
+    window.addEventListener('click', e => {
+        if (!element.parentNode.contains(e.target)) hide()
+    })
+    return { element, groups }
+}