Merge pull request #4074 from BirkbeckCTP/3671-toc_cms_pages

CMS pages can now display a table of contents

src/cms/forms.py

@@ -82,7 +82,6 @@ def __init__(self, *args, **kwargs):
             # Remove this at the journal level
             self.fields.pop('extend_to_journals')
 
-
     def clean_top_level_nav(self):
         top_level_nav = self.cleaned_data.get('top_level_nav')
         if (top_level_nav and self.instance) and (top_level_nav.pk == self.instance.pk):
@@ -101,8 +100,6 @@ class Meta:
         fields = ('title', 'text', 'order', 'existing_setting')
         exclude = ('journal',)
 
-
-
     def __init__(self, *args, **kwargs):
         self.journal = kwargs.pop('journal')
         super(SubmissionItemForm, self).__init__(*args, **kwargs)

src/cms/migrations/0019_auto_20240328_1743.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.2.20 on 2024-03-28 17:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0018_merge_20240315_1649'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='historicalpage',
+            name='display_toc',
+            field=models.BooleanField(default=False, help_text='When enabled this page will display a thinner reading pane with a table of contents side bar.', verbose_name='Display table of contents'),
+        ),
+        migrations.AddField(
+            model_name='page',
+            name='display_toc',
+            field=models.BooleanField(default=False, help_text='When enabled this page will display a thinner reading pane with a table of contents side bar.', verbose_name='Display table of contents'),
+        ),
+    ]

src/cms/models.py

@@ -55,6 +55,12 @@ class Page(models.Model):
     )
     is_markdown = models.BooleanField(default=True)
     edited = models.DateTimeField(auto_now=timezone.now)
+    display_toc = models.BooleanField(
+        default=False,
+        help_text='When enabled this page will display a thinner reading pane '
+                  'with a table of contents side bar.',
+        verbose_name='Display table of contents',
+    )
 
     # history = HistoricalRecords() is defined in cms.translation
     # for compatibility with django-modeltranslation

src/templates/admin/cms/page_manage.html

@@ -29,6 +29,7 @@ <h2>Edit Page</h2>
                     {{ form.name|foundation }}
                     {{ form.template|foundation }}
                     {{ form.content|foundation }}
+                    {{ form.display_toc|foundation }}
                     <div class="row expanded">
                         <div class="large-12 columns">
                             <p>If you want to upload and link to a file, use the <a target="_blank" href="{% url 'cms_file_list' %}">Media

src/themes/OLH/templates/cms/page.html

@@ -6,12 +6,27 @@
 
 {% block body %}
     <section id="content">
-      <div class="row column">
-        <h1 id="cms-title">{{ page.display_name }}</h1>
-        <hr />
-        <div id="cms">
-          {{ page.content|safe }}
+        <div class="row">
+            <div class="{% if page.display_toc %}border-right medium-8 small-12{% else %}medium-12{% endif %} columns">
+                <h1 id="cms-title">{{ page.display_name }}</h1>
+                <hr/>
+                <div id="main_article">
+                    {{ page.content|safe }}
+                </div>
+            </div>
+            {% if page.display_toc %}
+                <aside class="medium-4 columns sticky-container hide-for-small-only">
+                    <div class="sticky" data-sticky data-margin-top="0"
+                         data-anchor="content" data-sticky-on="large">
+                        <div class="section">
+                            <h3>{% trans "Table of Contents" %}</h3>
+                            <ul id="toc">
+
+                            </ul>
+                        </div>
+                    </div>
+                </aside>
+            {% endif %}
         </div>
-      </div>
     </section>
 {% endblock body %}

src/themes/clean/templates/cms/page.html

@@ -1,4 +1,5 @@
 {% extends "core/base.html" %}
+{% load static %}
 
 {% block title %}{{ page.display_name }}{% endblock title %}
 
@@ -7,11 +8,23 @@
 {% block body %}
     <section id="content">
         <div class="row">
-            <div class="col-md-12">
+            <div class="{% if page.display_toc %}col-md-8 col-sm-12{% else %}col-md-12{% endif %}">
                 <h1 id="cms-title">{{ page.display_name }}</h1>
                 <hr/>
-                <div id="cms">{{ page.content|safe }}</div>
+                <div id="main_article">{{ page.content|safe }}</div>
             </div>
+            {% if page.display_toc %}
+                <div class="col-md-4 d-none d-sm-none d-md-block">
+                    <div class="sticky-top">
+                        <h2>{% trans "Table of Contents" %}</h2>
+                        <ul id="toc" class="table-of-contents"></ul>
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </section>
 {% endblock body %}
+
+{% block js %}
+<script src="{% static 'material/toc.js' %}"></script>
+{% endblock %}

src/themes/material/templates/cms/page.html

@@ -1,19 +1,53 @@
 {% extends "core/base.html" %}
+{% load static %}
 
 {% block title %}{{ page.display_name }}{% endblock title %}
 
 {% block page_title %}{{ page.display_name }}{% endblock %}
 
 {% block body %}
-	<div id="row">
-		<div class="col s12">
+    <div class="row">
+        <div class="col {% if page.display_toc %}m9 s12{% else %}m12{% endif %}">
             <div class="card">
                 <div id="cms-title" class="card-content">
-                  <h1 class="no-bottom-margin">{{ page.display_name }}</h1>
-                  <div class="divider spacer"></div>
-                    <div id="cms" class="default-li">{{ page.content|safe }}</<div>
+                    <h1 class="no-bottom-margin">{{ page.display_name }}</h1>
+                    <div class="divider spacer"></div>
+                    <div id="main_article" class="default-li">{{ page.content|safe }}</div>
                 </div>
             </div>
-		</div>
-	</div>
+        </div>
+        {% if page.display_toc %}
+            <div class="col m3 hide-on-small-and-down">
+                <div class="card toc-card" id="toc-card"
+                     style="display: none;">
+                    <div class="card-content">
+                        <h4>
+                            {% trans "Table of Contents" %}
+                        </h4>
+                        <ul id="toc" class="section table-of-contents">
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
 {% endblock body %}
+
+{% block js %}
+    <script src="{% static 'material/toc.js' %}"></script>
+    <script>
+        $(document).ready(function () {
+            $('.scrollspy').scrollSpy();
+        });
+        $(document).scroll(function () {
+            var infobar_y = document.querySelector('nav').offsetHeight
+                + document.querySelector('.m3').offsetHeight
+            var y = $(this).scrollTop();
+            if (y > infobar_y) {
+                $('#toc-card').fadeIn();
+            } else {
+                $('#toc-card').fadeOut();
+            }
+        });
+    </script>
+{% endblock js %}