More work on EM page

src/pyj/book_list/edit_metadata.pyj

@@ -19,6 +19,7 @@ from session import get_interface_data
 from utils import (
     conditional_timeout, fmt_sidx, parse_url_params, safe_set_inner_html
 )
+from widgets import create_button
 
 CLASS_NAME = 'edit-metadata-panel'
 IGNORED_FIELDS = {'formats', 'sort', 'uuid', 'id', 'urls_from_identifiers', 'lang_names', 'last_modified', 'path', 'marked', 'size', 'ondevice', 'cover', 'au_map', 'isbn'}
@@ -40,8 +41,65 @@ def truncated_html(val):
     return ans
 
 
+def onsubmit_field(get_value, container_id, book_id, field):
+    c = document.getElementById(container_id)
+    if not c:
+        return
+    d = c.querySelector('div[data-ctype="edit"]')
+    if not d:
+        return
+    ok, value = get_value(d)
+    if not ok:
+        return
+    if value is book_metadata(book_id)[field]:
+        on_close(container_id)
+        return
+
+    def proceed():
+        clear(d)
+        d.appendChild(E.div(style='margin: 1ex 1rem', _('Contacting server, please wait') + '…'))
+        value
+        # TODO: ajax to server with field and value and get updated metadata
+    window.setTimeout(proceed, 0)  # needed to avoid console error about form submission failing because form is removed from DOM in onsubmit handler
+
+
+def create_form(widget, get_value, container_id, book_id, field, *edit_widgets):
+    submit_action = onsubmit_field.bind(None, get_value, container_id, book_id, field)
+    button = create_button(_('OK'), action=submit_action)
+    widget.classList.add('metadata-editor')
+    form = E.form(
+        action='javascript: void(0)', onsubmit=submit_action, style='margin: 1ex auto',
+        E.div(widget, style='margin-bottom: 1ex'),
+        E.div(button)
+    )
+    return form
+
+
+def line_edit_get_value(container):
+    return True, container.querySelector('input[type="text"]').value
+
+
+def simple_line_edit(container_id, book_id, field, fm, div, mi):
+    le = E.input(type='text')
+    le.value = mi[field] or ''
+    name = fm.name or field
+    form = create_form(le, line_edit_get_value, container_id, book_id, field)
+    div.appendChild(E.div(style='margin: 0.5ex 1rem', _('Edit the "{}" below').format(name)))
+    div.appendChild(E.div(style='margin: 0.5ex 1rem', form))
+    le.focus(), le.select()
+
+
 def edit_field(container_id, book_id, field):
-    print(1111111, field)
+    fm = library_data.field_metadata[field]
+    c = document.getElementById(container_id)
+    mi = book_metadata(book_id)
+    if not c or not fm or not mi:
+        return
+    d = c.querySelector('div[data-ctype="edit"]')
+    d.style.display = 'block'
+    d.previousSibling.style.display = 'none'
+    clear(d)
+    simple_line_edit(container_id, book_id, field, fm, d, mi)
 
 
 def render_metadata(mi, table, container_id, book_id):  # {{{