From 05e239b9ffc493372afec02b65c71bd18618c222 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Thu, 23 Jul 2020 22:33:52 +1000
Subject: [PATCH] Implement expand/collapse heading buttons

---
 wikinote/__init__.py               | 46 ++++++++++++++----------------
 wikinote/jinja2/image_about.html   |  2 ++
 wikinote/jinja2/page_404.html      |  2 ++
 wikinote/jinja2/page_base.html     |  2 --
 wikinote/jinja2/page_rendered.html | 14 +++++++++
 wikinote/markup.py                 |  4 ++-
 wikinote/static/css/main.css       | 16 +++++++++++
 7 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/wikinote/__init__.py b/wikinote/__init__.py
index f4bb372..2930462 100644
--- a/wikinote/__init__.py
+++ b/wikinote/__init__.py
@@ -20,6 +20,7 @@ import flask
 
 import os
 import pickle
+import xml.etree.ElementTree as ET
 
 app = flask.Flask(__name__, template_folder='jinja2')
 
@@ -98,7 +99,27 @@ def page_view(path):
 		page_source = f.read()
 	
 	md = WNMarkdown()
-	page_content = md.convert(page_source)
+	#page_content = md.convert(page_source)
+	root = md.parse(page_source)
+	
+	# Add expand/collapse buttons to h2
+	for elem in root:
+		if elem.tag == 'h2':
+			elem.text += ' '
+			btn = ET.SubElement(elem, 'button')
+			btn.text = '±'
+			btn.set('class', 'expcol')
+			btn.set('onclick', 'onClickExpCol(this);')
+	
+	# Handle collapsed sections
+	if root == '':
+		page_content = ''
+	else:
+		if 'collapsed' in flask.request.args:
+			for elem in root:
+				if elem.tag == 'section':
+					elem.set('class', 'collapsed')
+		page_content = md.serialise(root)
 	
 	return flask.render_template('page_rendered.html', page={
 		'path': path,
@@ -109,29 +130,6 @@ def page_view(path):
 		'children': children
 	})
 
-@app.route('/toc/<path:path>')
-def page_toc(path):
-	fname = flask.safe_join('./data/pages', path) + '.md'
-	
-	if not os.path.exists(fname):
-		return flask.render_template('page_404.html', page={
-			'path': path,
-			'title': path.split('/')[-1],
-			'children': []
-		})
-	
-	with(open(fname, 'r')) as f:
-		page_source = f.read()
-	
-	md = WNMarkdown()
-	_ = md.convert(page_source)
-	
-	return flask.render_template('page_toc.html', page={
-		'path': path,
-		'title': path.split('/')[-1],
-		'toc': md.toc_tokens
-	})
-
 @app.route('/preview/<path:path>')
 def page_preview(path):
 	fname = flask.safe_join('./data/pages', path) + '.md'
diff --git a/wikinote/jinja2/image_about.html b/wikinote/jinja2/image_about.html
index fec1d1f..12d5460 100644
--- a/wikinote/jinja2/image_about.html
+++ b/wikinote/jinja2/image_about.html
@@ -19,6 +19,8 @@
 {% extends 'page_base.html' %}
 
 {% block page_content %}
+	<h1>{{ page.title }}</h1>
+	
 	<img src="{{ url_for('image_view', name=page.path) }}">
 	
 	{{ page.content|safe }}
diff --git a/wikinote/jinja2/page_404.html b/wikinote/jinja2/page_404.html
index 3bf0e9d..ffe2da2 100644
--- a/wikinote/jinja2/page_404.html
+++ b/wikinote/jinja2/page_404.html
@@ -19,6 +19,8 @@
 {% extends 'page_base.html' %}
 
 {% block page_content %}
+	<h1>{{ page.title }}</h1>
+	
 	<div class="admonition error">
 		There is no page with the name <em>{{ page.title }}</em>.
 	</div>
diff --git a/wikinote/jinja2/page_base.html b/wikinote/jinja2/page_base.html
index 041e98a..c822fa2 100644
--- a/wikinote/jinja2/page_base.html
+++ b/wikinote/jinja2/page_base.html
@@ -33,8 +33,6 @@
 		</nav>
 	{% endif %}
 	
-	<h1>{{ page.title }}</h1>
-	
 	{% block page_content %}{% endblock %}
 	
 	<script src="{{ url_for('static', filename='js/page.js') }}"></script>
diff --git a/wikinote/jinja2/page_rendered.html b/wikinote/jinja2/page_rendered.html
index 7b3cfe1..acdae34 100644
--- a/wikinote/jinja2/page_rendered.html
+++ b/wikinote/jinja2/page_rendered.html
@@ -18,7 +18,21 @@
 
 {% extends 'page_base.html' %}
 
+{% block content %}
+	{{ super() }}
+	<script>
+		function onClickExpCol(el) {
+			if (el.parentNode.nextElementSibling.matches('section')) {
+				var section = el.parentNode.nextElementSibling;
+				section.classList.toggle('collapsed');
+			}
+		}
+	</script>
+{% endblock %}
+
 {% block page_content %}
+	<h1>{{ page.title }} <button class="expcol" onclick="onClickExpCol(this);">±</button></h1>
+	
 	{{ page.content|safe }}
 {% endblock %}
 
diff --git a/wikinote/markup.py b/wikinote/markup.py
index 46dbbbf..d9b9bd4 100644
--- a/wikinote/markup.py
+++ b/wikinote/markup.py
@@ -93,6 +93,8 @@ class WNMarkdown(markdown.Markdown):
 	# Put it together
 	def convert(self, source):
 		root = self.parse(source)
+		if root == '':
+			return ''
 		return self.serialise(root)
 	
 	def detab(self, text):
@@ -187,7 +189,7 @@ class WrapSectionProcessor(markdown.treeprocessors.Treeprocessor):
 		section = ET.Element('section')
 		
 		for child in list(root):
-			if child.tag in ('h1', 'h2', 'h3'):
+			if child.tag in ('h1', 'h2'):
 				if len(section) > 0:
 					root.insert(list(root).index(child), section)
 					section = ET.Element('section')
diff --git a/wikinote/static/css/main.css b/wikinote/static/css/main.css
index a5f5429..f9205ed 100644
--- a/wikinote/static/css/main.css
+++ b/wikinote/static/css/main.css
@@ -359,3 +359,19 @@ div.footnote {
 div.footnote ol {
 	margin: 0;
 }
+
+/* Expanding and collapsing */
+
+button.expcol {
+	border: 1px solid #888a85;
+	font-size: 0.5rem;
+	padding: 3px;
+	vertical-align: middle;
+	opacity: 0.2;
+}
+h1:hover button.expcol, h2:hover button.expcol {
+	opacity: 1.0;
+}
+section.collapsed {
+	display: none;
+}