From 56f2309edccc99809cb9d9051043a6dadabb11df Mon Sep 17 00:00:00 2001 From: Jason McBrayer Date: Mon, 3 Sep 2018 17:28:45 -0400 Subject: [PATCH] Fix the page title issue and factor out javascript --- brutaldon/static/js/brutaldon-enhancements.js | 62 +++++++++++++++++++ brutaldon/templates/base.html | 59 +++--------------- 2 files changed, 72 insertions(+), 49 deletions(-) create mode 100644 brutaldon/static/js/brutaldon-enhancements.js diff --git a/brutaldon/static/js/brutaldon-enhancements.js b/brutaldon/static/js/brutaldon-enhancements.js new file mode 100644 index 0000000..24af7ae --- /dev/null +++ b/brutaldon/static/js/brutaldon-enhancements.js @@ -0,0 +1,62 @@ +function scrollTop() +{ + window.scrollTo(0,0); + return true; +} + +function setTitle(user, page) +{ + document.title = `Brutaldon (${user}) – ${page}`; +} + +function afterPage(user, page) +{ + scrollTop(); + setTitle(user,page); +} + +function menuPrepare() { + // Remove is-active from navbar menu + var menu = document.querySelector('#navMenu'); + menu.classList.remove('is-active'); + + // Add the burger + var brand = document.querySelector('.navbar-brand'); + var burger = document.createElement('a'); + burger.classList.toggle('navbar-burger'); + burger.setAttribute("aria-label", "menu"); + burger.setAttribute("aria-expanded", "false"); + burger.setAttribute("data-target", "navMenu"); + for (var index = 0; index < 3; index++) + { + var span = document.createElement('span'); + span.setAttribute('aria-hidden', "true"); + burger.appendChild(span); + } + brand.appendChild(burger); + + + + // Get all "navbar-burger" elements + var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + + // Check if there are any navbar burgers + if ($navbarBurgers.length > 0) { + + // Add a click event on each of them + $navbarBurgers.forEach(function ($el) { + $el.addEventListener('click', function () { + + // Get the target from the "data-target" attribute + var target = $el.dataset.target; + var $target = document.getElementById(target); + + // Toggle the class on both the "navbar-burger" and the "navbar-menu" + $el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); + }); + } + +} diff --git a/brutaldon/templates/base.html b/brutaldon/templates/base.html index ec150a4..8a6b5cd 100644 --- a/brutaldon/templates/base.html +++ b/brutaldon/templates/base.html @@ -8,7 +8,7 @@ {% block title %} {% if own_acct %} - brutaldon ({{ own_acct.username }}) + brutaldon ('{{ own_acct.username }}') {% else %} brutaldon {% endif %} @@ -28,6 +28,7 @@ href="{% static 'css/fork-awesome.min.css' %}"> <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/intercooler.js' %}"></script> + <script type="text/javascript" src="{% static 'js/brutaldon-enhancements.js' %}"></script> {% block page_scripts %} {% endblock %} {% endif %} @@ -48,7 +49,7 @@ {% if own_acct %} <img src="{{ own_acct.avatar_static }}" class="image is-32x32 avatar" - alt="Brutaldon ({{ own_acct.username }})"> + alt="Brutaldon ('{{ own_acct.username }}')"> {% else %} <img src="{% static "images/brutaldon.png" %}" class="image is-32x32" alt="Brutaldon"> @@ -65,6 +66,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'Home');" ic-indicator="#page-load-indicator"> <span class="fa fa-home"></span> <span>  Home</span> @@ -74,6 +76,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'Notifications');" ic-indicator="#page-load-indicator"> <span class="fa fa-bell-o"></span> <span >  Notifications</span> @@ -83,6 +86,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'Local timeline');" ic-indicator="#page-load-indicator"> <span class="fa fa-community"></span> <span >  Local</span> @@ -92,6 +96,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'Federated timeline');" ic-indicator="#page-load-indicator"> <span class="fa fa-globe"></span> <span > Federated</span> @@ -101,6 +106,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'New toot');" ic-indicator="#page-load-indicator"> <span class="fa fa-edit"> </span> <span >  New Toot</span> @@ -110,6 +116,7 @@ ic-target="#main" ic-select-from-response="#main" ic-push-url="true" + ic-on-success="afterPage('{{ own_acct.username }}', 'Search');" ic-indicator="#page-load-indicator"> <span class="fa fa-search"> </span> <span >  Search</span> @@ -171,53 +178,7 @@ {% if not preferences.theme.is_brutalist %} <script type="application/javascript"> - document.addEventListener('DOMContentLoaded', function () { - // Remove is-active from navbar menu - var menu = document.querySelector('#navMenu'); - menu.classList.remove('is-active'); - - // Add the burger - var brand = document.querySelector('.navbar-brand'); - var burger = document.createElement('a'); - burger.classList.toggle('navbar-burger'); - burger.setAttribute("aria-label", "menu"); - burger.setAttribute("aria-expanded", "false"); - burger.setAttribute("data-target", "navMenu"); - for (var index = 0; index < 3; index++) - { - var span = document.createElement('span'); - span.setAttribute('aria-hidden', "true"); - burger.appendChild(span); - } - brand.appendChild(burger); - - - - // Get all "navbar-burger" elements - var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); - - // Check if there are any navbar burgers - if ($navbarBurgers.length > 0) { - - // Add a click event on each of them - $navbarBurgers.forEach(function ($el) { - $el.addEventListener('click', function () { - - // Get the target from the "data-target" attribute - var target = $el.dataset.target; - var $target = document.getElementById(target); - - // Toggle the class on both the "navbar-burger" and the "navbar-menu" - $el.classList.toggle('is-active'); - $target.classList.toggle('is-active'); - - }); - }); - } - - }); - - + document.addEventListener('DOMContentLoaded', menuPrepare); </script> {% block page_scripts_inline %} {% endblock %}