From 0821a54b701c2f0640060c626a6437c140ad6d48 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <blackmagik88@gmail.com>
Date: Mon, 25 Jul 2016 14:32:42 +0200
Subject: [PATCH] Add summary with JS implementation (track H2 in page content)

---
 app/static/src/js/index.js                    |  2 +
 app/static/src/js/modules/summary.js          | 40 +++++++++++++++
 app/static/src/sass/global/_helpers.scss      |  3 ++
 app/templates/pages/basicpage.html            | 12 +----
 .../pages/menus/current_tree_secondary.html   |  8 +--
 .../pages/menus/current_tree_summary.html     |  6 +--
 app/templates/pages/page.html                 | 50 +++++++++++--------
 7 files changed, 83 insertions(+), 38 deletions(-)
 create mode 100644 app/static/src/js/modules/summary.js

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 0998b802..3b03730e 100644
--- 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
index 00000000..c6a1b8f2
--- /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 7dba8d90..fcfd9ef4 100755
--- 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 1f8fccb8..83faf03b 100644
--- 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 b8dd8311..bc19a646 100644
--- 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 da5b1ab2..c1de486f 100644
--- 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 f6183ccc..5a2ddce5 100644
--- 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 %}
-- 
2.39.5