An experiment with a single-modal interface. Click any element with

class="editable" and the corresponding formfield will be unhidden. The
Read/Write Web as Sir Berners-Lee intended it.

However, it looks and works silly and leaves a lot to be desired. I hope to
continue this branch one day.

cms/templates/cms/page.html

@@ -5,9 +5,11 @@
 {% block title %}{{block.super}} - {{page.title}}{% endblock %}
 
 {% block content %}
-  {% for section in sections %}
-    {% include_section section %}
-  {% endfor %}
+  <form class="cms">
+    {% for section in sections %}
+      {% include_section section %}
+    {% endfor %}
+  </form>
 
   <div class="edit page">
     {% if user.is_staff %}
@@ -22,3 +24,30 @@
   </div>
 
 {% endblock %}
+
+{% block extrabody %}
+  <script>
+    // https://stackoverflow.com/a/25621277
+    var tx = document.getElementsByTagName('textarea');
+    for (var i = 0; i < tx.length; i++) {
+        tx[i].setAttribute('style', 'height:0;overflow-y:hidden;');
+        tx[i].style.height = (tx[i].scrollHeight) + 'px';
+        tx[i].addEventListener("input", OnInput, false);
+    }
+    function OnInput() {
+        this.style.height = '0';
+        this.style.height = (this.scrollHeight) + 'px';
+    }
+
+    var editables = document.querySelectorAll('.editable');
+    for (el of editables) {
+        formfield = document.getElementById(el.dataset.formId);
+        formfield.style.display = 'none';
+        el.addEventListener('click', function(event) {
+            formfield = document.getElementById(this.dataset.formId);
+            formfield.style.display = 'inline-block';
+            this.style.display = 'none';
+        });
+    }
+  </script>
+{% endblock %}

cms/views.py

@@ -89,12 +89,13 @@ class PageView(MenuMixin, MemoryMixin, generic.DetailView):
         '''Supply a default argument for slug'''
         super().setup(*args, slug=slug, **kwargs)
 
-    def initialize_section(self, section):
+    def initialize_section(self, section, form=None):
         section.view = section.__class__.view_class()
         section.view.setup(self.request, section)
         section.context = section.view.get_context_data(
             request = self.request,
             section = section,
+            form = form,
         )
 
     def get(self, request, *args, **kwargs):
@@ -102,8 +103,13 @@ class PageView(MenuMixin, MemoryMixin, generic.DetailView):
         page = self.object = self.get_object()
         context = self.get_context_data(**kwargs)
         sections = page.sections.all()
-        for section in sections:
-            self.initialize_section(section)
+
+        if request.user.has_perm('cms.change_page'):
+            formset = SectionFormSet(instance=page)
+            for form, section in zip(formset, sections):
+                self.initialize_section(section, form)
+                #raise ValueError(dir(form['title']))
+
         context.update({
             'page': page,
             'sections': sections,