Add summary with JS implementation (track H2 in page content)

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 0998b802f5a78289c00a9fe849ef3a259f1952d0..3b03730ef68aa81cf2a1b5000236381df4093032 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -7,6 +7,7 @@ var OpenButton = require('./modules/open-button');
 var CloseButton = require('./modules/close-button');
 var CloseEscape = require('./modules/close-escape');
 var Search = require('./modules/search');
+var Summary = require('./modules/summary');
 var OverflowInit = require('./modules/overflow-init');
 var StickyKitInit = require('./modules/sticky-kit-init');
 
@@ -19,5 +20,6 @@ window[OpenButton] = new OpenButton();
 window[CloseButton] = new CloseButton();
 window[CloseEscape] = new CloseEscape();
 window[Search] = new Search();
+window[Summary] = new Summary();
 window[OverflowInit] = new OverflowInit();
 window[StickyKitInit] = new StickyKitInit();

diff --git a/app/static/src/js/modules/summary.js b/app/static/src/js/modules/summary.js
new file mode 100644 (file)
index 0000000..c6a1b8f
--- /dev/null
+++ b/app/static/src/js/modules/summary.js
@@ -0,0 +1,40 @@
+var Summary = function() {
+
+    this.$summary = $('[data-summary]');
+    this.$content = $('[data-summary-content]');
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+Summary.prototype.init = function() {
+
+    var that = this,
+        $template;
+
+    if(that.$summary.length == 1 && that.$content.length == 1) {
+
+        $template = that.$summary.find('li:first-child');
+        that.$content.find('h2').each(function(idx) {
+
+            var $element = $(this),
+                $template_clone = $template.clone();
+            $template_clone.find('a').text($element.text());
+            $template_clone.find('a').attr('href', '#section-' + idx);
+            $template_clone.removeClass('hide');
+            that.$summary.append($template_clone);
+
+            $element.attr('id', "section-" + idx);
+
+        });
+
+        $template.remove();
+
+    }
+
+};
+
+module.exports = Summary;

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 7dba8d906a659d6580a883af40127b2cbf0c31b8..fcfd9ef4bd6d3e15275af37de0824309b7854ff8 100755 (executable)
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -61,6 +61,9 @@
         }
     }
 }
+.hide {
+    display: none;
+}
 .hide-xxs {
     @include mq($until: xs) {
         display: none;

diff --git a/app/templates/pages/basicpage.html b/app/templates/pages/basicpage.html
index 1f8fccb8854aa72d02bdb823f711741d6ba7184f..83faf03b1b3eb3e372643daefa226c3e21f98f2e 100644 (file)
--- a/app/templates/pages/basicpage.html
+++ b/app/templates/pages/basicpage.html
@@ -15,18 +15,10 @@
 {{ page.description }}
 {% endmetablock %}{% endblock %}
 
-{% block title %}
-    {% editable page.title %}
-        {{ page.title }}
-    {% endeditable %}
-
-    {% editable page.basicpage.sub_title %}
-        {{ page.basicpage.sub_title }}
-    {% endeditable %}
+{% block page_class %}
+    basicpage
 {% endblock %}
 
-
-
 {% block page_title %}
 
     {% editable page.basicpage.title %}

diff --git a/app/templates/pages/menus/current_tree_secondary.html b/app/templates/pages/menus/current_tree_secondary.html
index b8dd8311f133f403680c615ffd360440dd8b36c8..bc19a646703e42d7c7ac1265f6eca3562855a3cd 100644 (file)
--- a/app/templates/pages/menus/current_tree_secondary.html
+++ b/app/templates/pages/menus/current_tree_secondary.html
@@ -33,10 +33,12 @@
         {% for page in page_branch %}
             <li class="nav-tree__item">
                 <a class="nav-tree__link{% if page.is_current or page.is_current_or_ascendant %} active{% endif %}" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+                {% if page.is_current_or_ascendant %}
+                    <ul class="nav-tree" data-summary>
+                        {% include "pages/menus/current_tree_summary.html" %}
+                    </ul>
+                {% endif %}
             </li>
-            {% if page.is_current_or_ascendant %}
-                {% include "pages/menus/current_tree_summary.html" %}
-            {% endif %}
         {% endfor %}
     {% endif %}
 {% endif %}

diff --git a/app/templates/pages/menus/current_tree_summary.html b/app/templates/pages/menus/current_tree_summary.html
index da5b1ab2b3cd0e8beb5d873ecdc90f2b8219869d..c1de486f2ee7b8235feca35f42f339b32dbfb73f 100644 (file)
--- a/app/templates/pages/menus/current_tree_summary.html
+++ b/app/templates/pages/menus/current_tree_summary.html
@@ -1,3 +1,3 @@
-{% comment %}
-We will use JS to populate the menu
-{% endcomment %}
+<li class="nav-tree__item nav-tree__item--sub hide">
+    <a class="nav-tree__link nav-tree__link--sub" href="#"></a>
+</li>

diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index f6183ccc3344a5db24696ff4b9ae880325544873..5a2ddce5d5dde79f8fba79777321a20f0044d75f 100644 (file)
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -16,30 +16,36 @@
 {% endmetablock %}{% endblock %}
 
 {% block main %}
+    <div class="page page--{% spaceless %}{% block page_class %}{% endblock %}{% endspaceless %}">
 
-    <div class="row">
-        <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
-            {% block page_title %}
-                {{ page.title }}
-            {% endblock %}
+        <div class="row">
+            <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                {% block page_title %}
+                    {{ page.title }}
+                {% endblock %}
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-3 col-lg-2">
-            {% block page_sidebar %}
-                {% if page.get_ascendants|length < 2 %}
-                    {% page_menu "pages/menus/current_tree_primary.html" %}
-                {% endif %}
-                {% if page.get_ascendants|length == 2 %}
-                    {% page_menu "pages/menus/current_tree_secondary.html" %}
-                {% endif %}
-            {% endblock %}
-        </div>
-        <div class="col-sm-9 col-lg-8">
-            {% block page_content %}
-                {{ page.content }}
-            {% endblock %}
+        <div class="row">
+            <div class="col-sm-3 col-lg-2">
+                <div class="page__sidebar">
+                    {% block page_sidebar %}
+                        {% if page.get_ascendants|length < 2 %}
+                            {% page_menu "pages/menus/current_tree_primary.html" %}
+                        {% endif %}
+                        {% if page.get_ascendants|length == 2 %}
+                            {% page_menu "pages/menus/current_tree_secondary.html" %}
+                        {% endif %}
+                    {% endblock %}
+                </div>
+            </div>
+            <div class="col-sm-9 col-lg-8">
+                <div class="page__content" data-summary-content>
+                    {% block page_content %}
+                        {{ page.content }}
+                    {% endblock %}
+                </div>
+            </div>
         </div>
-    </div>
 
+    </div>
 {% endblock %}