Skip to content

Changed the arrows to be + and - on the sub-menus #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Changed the arrows to be + and - on the sub-menus #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
var mkdocs_page_name = "{{ page_title }}";
var mkdocs_page_input_path = "{{ current_page.input_path }}";
var mkdocs_page_url = "{{ current_page.abs_url }}";

var ooahel = '{{page.url}}';

</script>
{% endif %}
<script src="{{ base_url }}/js/jquery-2.1.1.min.js"></script>
Expand Down Expand Up @@ -114,16 +117,30 @@
<!-- {% include "versions.html" %} -->

<script type="text/javascript">
// If cookie is defined toggle the id
if (typeof $.cookie('docToggle') !== 'undefined') {
// Parse cookie which is an array
var _parsed_cookie = JSON.parse($.cookie('docToggle'));
// Loop over array and show hidden divs
$.each(_parsed_cookie, function(index, value) {
// Toggle
$("[id='hidden_" + value + "']").css('display','');
})
// If cookie is defined toggle the id
if (typeof $.cookie('docToggle') !== 'undefined') {
// Parse cookie which is an array
var _parsed_cookie = JSON.parse($.cookie('docToggle'));
// Loop over array and show hidden divs
$.each(_parsed_cookie, function(index, value) {
// Toggle
$("[id='hidden_" + value + "']").css('display','');
$("[id='"+ value + "_butt']").removeClass("fa-plus-square").addClass("fa-minus-square");

});
//scroll to the correct item in the menu
var remSlash = /\//g;
var remDot = /\./g;
var remDash = /-/g;

var currentNav = mkdocs_page_url.replace(remSlash,'').replace('index.html','').replace(remDot,'').replace(remDash,'_');
//now scroll to the position of the nav
var pos = $('#'+currentNav).offset().top - 50;
$('nav').animate({scrollTop: pos},'fast');
}


//
</script>

</body>
Expand Down
30 changes: 18 additions & 12 deletions js/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,32 @@
// Function to show children
function showChildren(id) {
// Toggle
$("[id='hidden_" + id + "']").toggle();
//get the jquery object, the menu item
var navObj = $("[id='hidden_" + id + "']");
var toggleMenuObj = $("[id='"+id + "_butt']");

// Toggle, show or hide the menu item
navObj.toggle();
toggleMenuObj.toggleClass("fa-plus-square").toggleClass("fa-minus-square");

// Set cookie
if (typeof $.cookie('docToggle') === 'undefined') {
var _cookie = [];
}
else {
var _cookie = JSON.parse($.cookie('docToggle'));
}
var _cookie = (typeof $.cookie('docToggle') === 'undefined')?[]:JSON.parse($.cookie('docToggle'));

// Check if div is now closed
var _visible = $("[id='hidden_" + id + "']").is(':visible');
var _visible = navObj.is(':visible');

// if div is show we add value to cookie
if (_visible) {
// Make sure the value is not already in the array. this also pushed the value to the array
// Make sure the value is not already in the array. this also pushed the value to the array, and change the nev element to minus
_addToSet(_cookie, id);
toggleMenuObj.removeClass("fa-plus-square").addClass("fa-minus-square");
}
// remove value
// remove value from cookie if it is closed, and change the nav element to plus
else {
_removeFromSet(_cookie, id);
toggleMenuObj.removeClass("fa-minus-square").addClass("fa-plus-square");
}
// Set cookie

// Set cookie in the browser
$.cookie('docToggle', JSON.stringify(_cookie), { expires: 7, path: '/' });
// Return
return false;
Expand Down
98 changes: 91 additions & 7 deletions toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,106 @@

<ul class="subnav">
<li class="{% if nav_item.active%}current{%endif%}">
<a class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}" style="font-size:95%;font-weight:bold;">{{ nav_item.title }}</a>
<a class="{% if nav_item.active%}current{%endif%}"
{% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
id="{{ nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") }}"
style="font-size:95%;font-weight:bold;">
{{ nav_item.title }}
</a>
</li>
{% for nav_item in nav_item.children %}
<li class="{% if nav_item.active%}current{%endif%}">
<a style="padding-left:50px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ nav_item.title }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
{# setup the id for the first child to use to open on load and scroll to, see nav.js and base.html at bottom of page #}
{% if nav_item.children %}
{% set childaID = nav_item.title|replace(" ", "_") %}
{%else%}
{% if nav_item.active%}
{% set childaID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%else%}
{% set childaID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%endif%}
{%endif%}
<a style="padding-left:50px;"
class="{% if nav_item.active%}current{%endif%}"
{% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
id="{{ childaID }}"
{% if nav_item.children%} onclick="showChildren('{{ childaID }}')"{%endif%}>
{% if nav_item.children%}
<i class="fa fa-plus-square" id="{{ childaID }}_butt" style="padding-left:5px;font-size:13px;"></i>
{%endif%}
{{ nav_item.title }}
</a>
</li>
{% set id_hidden = nav_item.title %}

{# calculate the sub-menu to show and hide. This is a second level menu so Parent:(root) > Child:(sub-menu) #}
{# the id of the being hidden_[name] is toggled with the call to showChildren from the child element above #}
{# the id is calculated thus: hidden_parentUrlOrTitle #}
{% if nav_item.children %}
{% set id_hidden = nav_item.title|replace(" ", "_") %}
{%else%}
{% if nav_item.active%}
{% set id_hidden = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%else%}
{% set id_hidden = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%endif%}
{%endif%}

<div style="display:none" id="hidden_{{ id_hidden }}">
{% for nav_item in nav_item.children %}
{# childbID is the id of this specific child element, used in conjunction with the parent id_hidden #}
{% if nav_item.children %}
{% set childbID = nav_item.title|replace(" ", "_") %}
{%else%}
{% if nav_item.active%}
{% set childbID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%else%}
{% set childbID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%endif%}
{%endif%}
<li class="{% if nav_item.active%}current{%endif%}">
<a style="padding-left:70px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}{{ nav_item.title }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
<a style="padding-left:70px;"
class="{% if nav_item.active%}current{%endif%}"
{% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
id="{{childbID}}"
{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}{{childbID}}')"{%endif%}>
{% if nav_item.children%}
<i class="fa fa-plus-square" id="{{ id_hidden }}{{childbID}}_butt" style="padding-left:5px;font-size:13px;"></i>
{%endif%}
{{ nav_item.title }}
</a>
</li>
{% set id_hidden = id_hidden + nav_item.title %}
<div style="display:none" id="hidden_{{ id_hidden }}">
{# calculate the sub-menu to show and hide. This is a second level menu so Parent:(root) > Child:(sub-menu) > Grandchild:(2nd level) #}
{# the id of the being hidden_[name] is toggled with the call to showChildren from the child element above #}
{# the id is calculated thus: hidden_parentUrlOrTitle_childUrlOrTitle #}
{# ToDo: make recursive function to allow for unlimited depth of menus #}
{% if nav_item.children %}
{% set id_hidden = id_hidden + nav_item.title|replace(" ", "_") %}
{%else%}
{% if nav_item.active%}
{% set id_hidden = id_hidden + current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%else%}
{% set id_hidden = id_hidden + nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%endif%}
{%endif%}

<div style="display:none;" id="hidden_{{ id_hidden }}">
{% for nav_item in nav_item.children %}
{% if nav_item.active%}
{% set childcID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%else%}
{% set childcID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
{%endif%}
<li class="{% if nav_item.active%}current{%endif%}">
<a style="padding-left:90px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
<a style="padding-left:90px;"
class="{% if nav_item.active%}current{%endif%}"
{% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
id="{{childcID}}"
{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}')"{%endif%}>
{% if nav_item.children%}
<i class="fa fa-plus-square" id="{{id_hidden}}_butt" style="padding-left:5px;font-size:13px;"></i>
{%endif%}
{{ nav_item.title }}
</a>
</li>
{% endfor %}
</div>
Expand Down