From 47c2742878c60c27a5762ac7b5a3f15ad69955cc Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Sat, 3 Aug 2019 17:56:18 -0500
Subject: [PATCH] Move the "HUD" content title section into WholePage component

that way, ThisPage can dynamically trigger a change in the title HTML
---
 tailbone/templates/themes/falafel/base.mako | 150 ++++++++++----------
 1 file changed, 77 insertions(+), 73 deletions(-)

diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index c8fb0d71..7f746362 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/tailbone/templates/themes/falafel/base.mako
@@ -210,78 +210,15 @@
       </nav><!-- level -->
     </header>
 
-    ## Page Title
-    <section id="content-title" class="hero is-primary">
-      <div class="container">
-        % if capture(self.content_title):
+    ${self.body()}
 
-            % if show_prev_next is not Undefined and show_prev_next:
-                <div style="float: right;">
-                  % if prev_url:
-                      ${h.link_to(u"« Older", prev_url, class_='button autodisable')}
-                  % else:
-                      ${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
-                  % endif
-                  % if next_url:
-                      ${h.link_to(u"Newer »", next_url, class_='button autodisable')}
-                  % else:
-                      ${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
-                  % endif
-                </div>
-            % endif
+    <div id="whole-page-app">
+      <whole-page></whole-page>
+    </div>
 
-            <h1 class="title">${self.content_title()}</h1>
-        % endif
-      </div>
-    </section>
-
-    <div class="content-wrapper">
-
-    ## Page Body
-    <section id="page-body">
-
-      % if request.session.peek_flash('error'):
-          % for error in request.session.pop_flash('error'):
-              <div class="notification is-warning">
-                <!-- <button class="delete"></button> -->
-                ${error}
-              </div>
-          % endfor
-      % endif
-
-      % if request.session.peek_flash():
-          % for msg in request.session.pop_flash():
-              <div class="notification is-info">
-                <!-- <button class="delete"></button> -->
-                ${msg}
-              </div>
-          % endfor
-      % endif
-
-      ## ##############################
-      ## whole page
-      ## ##############################
-
-      ${self.body()}
-
-      <div id="whole-page-app">
-        <whole-page></whole-page>
-      </div>
-
-      ${self.render_whole_page_template()}
-      ${self.make_whole_page_component()}
-      ${self.make_whole_page_app()}
-
-    </section>
-
-    ## Footer
-    <footer class="footer">
-      <div class="content">
-        ${base_meta.footer()}
-      </div>
-    </footer>
-
-    </div><!-- content-wrapper -->
+    ${self.render_whole_page_template()}
+    ${self.make_whole_page_component()}
+    ${self.make_whole_page_app()}
 
   </body>
 </html>
@@ -427,7 +364,68 @@
 <%def name="render_whole_page_template()">
   <script type="text/x-template" id="whole-page-template">
     <div>
-      <this-page></this-page>
+
+      ## Page Title
+      <section id="content-title" class="hero is-primary">
+        <div class="container">
+          % if capture(self.content_title):
+
+              % if show_prev_next is not Undefined and show_prev_next:
+                  <div style="float: right;">
+                    % if prev_url:
+                        ${h.link_to(u"« Older", prev_url, class_='button autodisable')}
+                    % else:
+                        ${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
+                    % endif
+                    % if next_url:
+                        ${h.link_to(u"Newer »", next_url, class_='button autodisable')}
+                    % else:
+                        ${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
+                    % endif
+                  </div>
+              % endif
+
+              <h1 class="title" v-html="contentTitleHTML"></h1>
+          % endif
+        </div>
+      </section>
+
+      <div class="content-wrapper">
+
+      ## Page Body
+      <section id="page-body">
+
+        % if request.session.peek_flash('error'):
+            % for error in request.session.pop_flash('error'):
+                <div class="notification is-warning">
+                  <!-- <button class="delete"></button> -->
+                  ${error}
+                </div>
+            % endfor
+        % endif
+
+        % if request.session.peek_flash():
+            % for msg in request.session.pop_flash():
+                <div class="notification is-info">
+                  <!-- <button class="delete"></button> -->
+                  ${msg}
+                </div>
+            % endfor
+        % endif
+
+        <this-page
+           v-on:change-content-title="changeContentTitle">
+        </this-page>
+      </section>
+
+      ## Footer
+      <footer class="footer">
+        <div class="content">
+          ${base_meta.footer()}
+        </div>
+      </footer>
+
+      </div><!-- content-wrapper -->
     </div>
   </script>
 </%def>
@@ -437,10 +435,16 @@
 
     let WholePage = {
         template: '#whole-page-template',
-        methods: {}
+        methods: {
+            changeContentTitle(newTitle) {
+                this.contentTitleHTML = newTitle
+            }
+        },
     }
 
-    let WholePageData = {}
+    let WholePageData = {
+        contentTitleHTML: ${json.dumps(capture(self.content_title))|n}
+    }
 
   </script>
 </%def>