From 11e8201a9d150b1c83649bf840cfef2b0354e185 Mon Sep 17 00:00:00 2001 From: "Ivan.Nginx" Date: Sat, 3 Mar 2018 22:06:50 +0300 Subject: [PATCH] Added sub-menu feature. 1. Added dynamic sub-menu option in main `menu` option within hierarchy structure. 2. Added select class in menu items for all possible sub-menu's (utils.js). 3. Removed `float: right` menu style in Mist scheme for better sub-menu(s) alignment. --- layout/_layout.swig | 3 + layout/_macro/menu/menu-badge-1.swig | 7 ++ layout/_macro/menu/menu-badge-2.swig | 25 ++++++ layout/_macro/menu/menu-item.swig | 10 +++ layout/_partials/header.swig | 51 ++++++------- layout/_partials/sub-menu.swig | 92 +++++++++++++++++++++++ source/css/_schemes/Gemini/index.styl | 20 +++++ source/css/_schemes/Mist/_menu.styl | 2 +- source/css/_schemes/Pisces/_sub-menu.styl | 31 ++++++++ source/css/_schemes/Pisces/index.styl | 1 + source/js/src/utils.js | 18 ++++- 11 files changed, 229 insertions(+), 31 deletions(-) create mode 100644 layout/_macro/menu/menu-badge-1.swig create mode 100644 layout/_macro/menu/menu-badge-2.swig create mode 100644 layout/_macro/menu/menu-item.swig create mode 100644 layout/_partials/sub-menu.swig create mode 100644 source/css/_schemes/Pisces/_sub-menu.styl diff --git a/layout/_layout.swig b/layout/_layout.swig index f81254451a..9e9d0e910d 100644 --- a/layout/_layout.swig +++ b/layout/_layout.swig @@ -33,6 +33,9 @@
+ {% if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %} + {% include '_partials/sub-menu.swig' %} + {% endif %}
{% block content %}{% endblock %}
diff --git a/layout/_macro/menu/menu-badge-1.swig b/layout/_macro/menu/menu-badge-1.swig new file mode 100644 index 0000000000..cfde7ae7b1 --- /dev/null +++ b/layout/_macro/menu/menu-badge-1.swig @@ -0,0 +1,7 @@ + {% macro render(value) %} +
  • + + {% if theme.menu_settings.icons %}{# + #}
    {# + #}{% endif %}{# +#}{% endmacro %} diff --git a/layout/_macro/menu/menu-badge-2.swig b/layout/_macro/menu/menu-badge-2.swig new file mode 100644 index 0000000000..f1db31b447 --- /dev/null +++ b/layout/_macro/menu/menu-badge-2.swig @@ -0,0 +1,25 @@ +{% macro render(name, value) %}{# + #}{% if theme.menu_settings.badges %}{# + #}{% if name == 'archives' %}{# + #}{{ __('menu.' + name) | replace('menu.', '') }}{# + #}{{ site.posts.length }} + {% elseif name == 'categories' %}{# + #}{{ __('menu.' + name) | replace('menu.', '') }}{# + #}{{ site.categories.length }} + {% elseif name == 'tags' %}{# + #}{{ __('menu.' + name) | replace('menu.', '') }}{# + #}{{ site.tags.length }} + {% else %}{# + #}{% if value != '[object Object]' %}{# + #}{{ __('menu.' + name) | replace('menu.', '') }}{# + #}{% endif %}{# + #}{% endif %}{# + #}{% else %}{# + #}{% if value != '[object Object]' %}{# + #}{{ __('menu.' + name) | replace('menu.', '') }}{# + #}{% endif %}{# + #}{% endif %}{# + +#}     +
    • +{% endmacro %} diff --git a/layout/_macro/menu/menu-item.swig b/layout/_macro/menu/menu-item.swig new file mode 100644 index 0000000000..452193ea48 --- /dev/null +++ b/layout/_macro/menu/menu-item.swig @@ -0,0 +1,10 @@ +{% macro render(name, value) %} +
  • + + {% if theme.menu_settings.icons %}{# + #}
    {# + #}{% endif %}{# +#}{{ __('menu.' + name ) | replace('menu.', '') }}{# +#}     +
    • +{% endmacro %} diff --git a/layout/_partials/header.swig b/layout/_partials/header.swig index 84697e3bbc..d6aec49d41 100644 --- a/layout/_partials/header.swig +++ b/layout/_partials/header.swig @@ -1,3 +1,7 @@ +{% import '../_macro/menu/menu-item.swig' as menu_item %} +{% import '../_macro/menu/menu-badge-1.swig' as menu_badge_1 %} +{% import '../_macro/menu/menu-badge-2.swig' as menu_badge_2 %} +
    {% if theme.custom_logo.image and theme.scheme === 'Muse' %} @@ -10,7 +14,7 @@ {% endif %}
    - + {{ config.title }} @@ -38,32 +42,21 @@ {% if theme.menu %} {% endif %} + {% if theme.scheme === 'Muse' || theme.scheme === 'Mist' %} + {% include 'sub-menu.swig' %} + {% endif %} + {% if hasSearch %}
    {% include 'search.swig' %} diff --git a/layout/_partials/sub-menu.swig b/layout/_partials/sub-menu.swig new file mode 100644 index 0000000000..96c655174d --- /dev/null +++ b/layout/_partials/sub-menu.swig @@ -0,0 +1,92 @@ +{% if not is_home() && not is_post() %} + {% if theme.menu %} + + {% import '../_macro/menu/menu-item.swig' as menu_item %} + + {# Submenu & Submenu-2 #} + {% for name, value in theme.menu %} + {% set respath = value %} + {% if value == '[object Object]' %} + + {# If current URL is value of parent submenu 'default' path #} + {% set currentParentUrl = page.path.split('/')[0] | trim %} + {% if currentParentUrl == value.default.split('||')[0] | trim | replace('/', '', 'g') %} + + {# Submenu items #} + + {# End Submenu items #} + + {# Submenu-2 #} + {% for name, value in theme.menu %} + {% set respath = value %} + {% if value == '[object Object]' %} + + {% for subname, subvalue in value %} + {% set itemName = subname.toLowerCase() %} + {% if itemName == 'default' %} + {% set parentValue = subvalue.split('||')[0] | trim %} + {% endif %} + {% if subvalue == '[object Object]' %} + + {# If current URL is value of parent submenu 'default' path #} + {% set paths = page.path.split('/') %} + {% for currentSubParentUrl in paths %} + {% if currentSubParentUrl == subvalue.default.split('||')[0] | trim | replace('/', '', 'g') %} + + {# Submenu-2 items #} + + {# End Submenu-2 items #} + + {% endif %} + {% endfor %} + {# End URL & path comparing #} + + {% endif %} + {% endfor %} + + {% endif %} + {% endfor %} + {# End Submenu-2 #} + + {% endif %} + {# End URL & path comparing #} + + {% endif %} + {% endfor %} + {# End Submenu & Submenu-2 #} + + {% endif %} +{% endif %} diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl index 7389578d40..68e08ace92 100644 --- a/source/css/_schemes/Gemini/index.styl +++ b/source/css/_schemes/Gemini/index.styl @@ -1,6 +1,7 @@ @import "../Pisces/_layout"; @import "../Pisces/_brand"; @import "../Pisces/_menu"; +@import "../Pisces/_sub-menu"; @import "../Pisces/_sidebar"; // Import _posts if want to justify text-align on mobile. //@import "../Pisces/_posts"; @@ -113,6 +114,25 @@ if $max-content-width { bottom: auto; } +// Sub-menu(s). +.sub-menu { + border-bottom: initial !important; + box-shadow: $box-shadow-inner; + // Adapt submenu(s) with post-blocks. + &+ #content > #posts { + .post-block { + box-shadow: $box-shadow; + margin-top: sboffset; + +tablet() { + margin-top: $content-tablet-padding; + } + +mobile() { + margin-top: $content-mobile-padding; + } + } + } +} + // ================================================= // Headers. // ================================================= diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl index f9e37c3213..bdf27a9541 100644 --- a/source/css/_schemes/Mist/_menu.styl +++ b/source/css/_schemes/Mist/_menu.styl @@ -6,7 +6,7 @@ } .menu { - float: right; + //float: right; margin: 8px 0 0 0; +mobile() { diff --git a/source/css/_schemes/Pisces/_sub-menu.styl b/source/css/_schemes/Pisces/_sub-menu.styl new file mode 100644 index 0000000000..e2b8147bf6 --- /dev/null +++ b/source/css/_schemes/Pisces/_sub-menu.styl @@ -0,0 +1,31 @@ +.sub-menu { + margin: 0; + padding: 6px 0; + background: #fff !important; + border-bottom: 1px solid $table-border-color; +} + +.sub-menu .menu-item { + display: inline-block !important; + + & a { + padding: initial !important; + margin: 5px 10px; + } + + & a:hover { + background: initial !important; + color: $sidebar-highlight; + } +} + +.sub-menu .menu-item-active a { + background: #fff !important; + color: $sidebar-highlight; + border-bottom-color: $sidebar-highlight; + + &:hover { + background: #fff !important; + border-bottom-color: $sidebar-highlight; + } +} diff --git a/source/css/_schemes/Pisces/index.styl b/source/css/_schemes/Pisces/index.styl index cda4936e38..0e3f37d840 100644 --- a/source/css/_schemes/Pisces/index.styl +++ b/source/css/_schemes/Pisces/index.styl @@ -1,5 +1,6 @@ @import "_layout"; @import "_brand"; @import "_menu"; +@import "_sub-menu"; @import "_sidebar"; @import "_posts"; diff --git a/source/js/src/utils.js b/source/js/src/utils.js index 62034cb9e0..1188bf5392 100644 --- a/source/js/src/utils.js +++ b/source/js/src/utils.js @@ -195,13 +195,25 @@ NexT.utils = NexT.$u = { }, /** - * Add `menu-item-active` class name to menu item + * Add `menu-item-active` class name to menu item(s) * via comparing location.path with menu item's href. */ addActiveClassToMenuItem: function () { var path = window.location.pathname; - path = path === '/' ? path : path.substring(0, path.length - 1); - $('.menu-item a[href^="' + path + '"]:first').parent().addClass('menu-item-active'); + + if (path !== '/') { + var path = path.split('/'); + var partPath = ''; + for (i = 0; i < path.length; i++) { + if (path[i] !== '') { + partPath += '/' + path[i]; + $('.menu-item a[href^="' + partPath + '"]:first').parent().addClass('menu-item-active'); + } + } + } else { + //path = path === '/' ? path : path.substring(0, path.length - 1); + $('.menu-item a[href^="' + path + '"]:first').parent().addClass('menu-item-active'); + } }, hasMobileUA: function () {