add show and hide for tags on homepage (#64)

* add show and hide for tags on homepage

* Move tags JS to separate init function

* Remove unused template comment

* Clean up template whitespace

* Remove unused tag__body class

* Only add event listener if the element is on the page

* JS styleguide tweaks

* Tweak tag toggle text and styles

* Add support for no-JS browsing in tags logic

* Clean up HTML of unnecessary tag attributes

* Change implementation so speed is the same regardless of number of tags

* Fix rendering of tags in no-JS mode

* Add ARIA attributes to facilitate tags toggle for screen readers

* Extract tags toggle code to separate file

* Clean up unused/duplicate HTML and CSS

* Order tags by item count

* Use slug instead of name for tag filtering

Fix #44

* Extract tag to specific template

* Use slug instead of name for tag filtering

Missing from f62c2eb.
Fix #44

core/frontend/js/components/tagsToggle.js

@@ -0,0 +1,27 @@
+/**
+ * Toggles the visibility of the whole tag list.
+ * By default only a subset of all tags is shown.
+ */
+const toggleTagsVisibility = (tagsContainer, e) => {
+    const tagsToggle = e.target;
+    const wasVisible = JSON.parse(tagsToggle.getAttribute('aria-expanded'));
+    const isVisible = !wasVisible;
+    tagsToggle.setAttribute('aria-expanded', isVisible);
+    tagsContainer.setAttribute('aria-hidden', !isVisible);
+
+    // First toggle hide/show in the inner element, then toggle the animation.
+    tagsContainer.children[0].classList.toggle('u-hide', !isVisible);
+    tagsContainer.classList.toggle('tags__additional--show', isVisible)
+    tagsToggle.innerHTML = isVisible ? 'Show fewer tags' : 'Show more tags';
+};
+
+export default {
+    init() {
+        const tagsToggle = document.querySelector('[data-tags-toggle]');
+        const tagsContainer = document.querySelector('[data-tags-additional]');
+
+        if (tagsToggle) {
+            tagsToggle.addEventListener('click', toggleTagsVisibility.bind(null, tagsContainer));
+        }
+    },
+};

core/frontend/js/wagtailsites.js

@@ -1,6 +1,8 @@
 
 import GA from 'springload-analytics.js';
 
+import tagsToggle from './components/tagsToggle';
+
 if ('ontouchstart' in window) {
     document.documentElement.className = document.documentElement.className + ' touch';
 } else {
@@ -17,6 +19,7 @@ Send your CV to apply@springload.co.nz, or better yet, send us a pull request: h
 class Site {
     constructor() {
         GA.init();
+        tagsToggle.init();
 
         if ('info' in console) {
             console.info(message);

core/frontend/sass/modules/_tags.scss

@@ -0,0 +1,23 @@
+.js .tags__additional {
+    opacity: 0;
+    transition: opacity .75s;
+
+    &.tags__additional--show {
+        opacity: 1;
+    }
+}
+
+.tag__button {
+    border: none;
+    background: none;
+    font-size: .75rem;
+    padding: 0;
+    color: $color-base-link;
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    @include hover(background-color, transparent);
+    @include hover(color, $color-base-link-hover);
+}

core/frontend/sass/screen.scss

@@ -205,6 +205,7 @@ $outer-margin-small: 5%;
 
 @import 'modules/icons';
 @import 'modules/buttons';
+@import 'modules/tags';
 @import 'modules/nav';
 @import 'modules/media';
 @import 'modules/header';
@@ -252,6 +253,9 @@ hr {
 .no-js .no-js__show {
     display: block !important;
 }
+.no-js .no-js__inline {
+    display: inline !important;
+}
 
 
 

core/models.py

@@ -3,6 +3,7 @@
 
 import django.db.models.options as options
 from django.db import models
+from django.db.models import Count
 from django.core.exceptions import ObjectDoesNotExist
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
@@ -87,7 +88,7 @@ def get_context(self, request):
         # Filter by tag
         tag = request.GET.get('tag')
         if tag:
-            pages = pages.filter(tags__name__iexact=tag)
+            pages = pages.filter(tags__slug__iexact=tag)
 
         # Pagination
         page = request.GET.get('page')
@@ -107,7 +108,7 @@ def get_context(self, request):
         context['tags'] = Tag.objects.filter(
             core_pagetag_items__isnull=False,
             core_pagetag_items__content_object__live=True
-        ).distinct().order_by('name')
+        ).annotate(count=Count('core_pagetag_items')).distinct().order_by('-count', 'name')
 
         return context
 

core/templates/core/home_page.html

@@ -24,14 +24,27 @@ <h1 class="">
                     </div>
                 {% endif %}
             {% endif %}
+        </div>
 
-            {% if not request.GET.tag|length %}
-            {% for tag in tags %}
-                <a href="/?tag={{ tag }}" title="" class="btn -tag">{{ tag }}</a>
-            {% endfor %}
-            {% endif %}
+        {% if not request.GET.tag|length %}
+            <div class="content-width vertical-bottom-l">
+                <div>
+                    {% for tag in tags|slice:"10" %}
+                        {% include 'core/includes/tag.html' with tag=tag %}
+                    {% endfor %}
+
+                    <span data-tags-additional class="tags__additional">
+                        <span class="u-hide no-js__inline">
+                            {% for tag in tags|slice:"10:" %}
+                                {% include 'core/includes/tag.html' with tag=tag %}
+                            {% endfor %}
+                        </span>
+                    </span>
+                </div>
+                <button type="button" class="btn tag__button no-js__hide" aria-expanded="false" data-tags-toggle>Show more tags</button>
+            </div>
+        {% endif %}
 
-        </div>
         <div class="content-width">
             {% include "core/includes/sites.html" with pages=pages tag=tag only %}
         </div>

core/templates/core/includes/tag.html

@@ -0,0 +1,4 @@
+<a href="/?tag={{ tag.slug }}" class="btn -tag">
+    {{ tag.name }}
+    {% if tag.count %}<span>{{ tag.count }}</span>{% endif %}
+</a>

core/templates/core/wagtail_site_page.html

@@ -35,9 +35,13 @@ <h2>{{ self.title }}</h2>
 
                     <hr>
 
-                    {% include "core/includes/tags.html" %}
+                    <div class="btn-group">
+                        {% for tag in self.tags.all %}
+                            {% include 'core/includes/tag.html' with tag=tag %}
+                        {% endfor %}
+                    </div>
                 </div>
             </div>
     </div>
 
-{% endblock %}
+{% endblock %}