From 6874eb31d7308d972ac1e246f6b9fa7700a51a49 Mon Sep 17 00:00:00 2001 From: REJack Date: Tue, 27 Aug 2019 16:23:07 +0200 Subject: [PATCH] enhanced navbar dropdown & top-nav example - added Dropdown.js - added .dropdown-submenu - added .dropdown-hover - added dropdown example & fixed card headers in pages/layout/top-nav.html --- build/js/AdminLTE.js | 4 +- build/js/Dropdown.js | 112 ++++++++++++++++++++++++++++++++++++++ build/scss/_dropdown.scss | 32 +++++++++++ pages/layout/top-nav.html | 39 ++++++++++++- 4 files changed, 183 insertions(+), 4 deletions(-) create mode 100644 build/js/Dropdown.js diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js index 04df64f67..0c0a84c11 100644 --- a/build/js/AdminLTE.js +++ b/build/js/AdminLTE.js @@ -6,6 +6,7 @@ import DirectChat from './DirectChat' import TodoList from './TodoList' import CardWidget from './CardWidget' import CardRefresh from './CardRefresh' +import Dropdown from './Dropdown' export { ControlSidebar, @@ -15,5 +16,6 @@ export { DirectChat, TodoList, CardWidget, - CardRefresh + CardRefresh, + Dropdown } diff --git a/build/js/Dropdown.js b/build/js/Dropdown.js new file mode 100644 index 000000000..2c58cdfef --- /dev/null +++ b/build/js/Dropdown.js @@ -0,0 +1,112 @@ +/** + * -------------------------------------------- + * AdminLTE Dropdown.js + * License MIT + * -------------------------------------------- + */ + +const Dropdown = (($) => { + /** + * Constants + * ==================================================== + */ + + const NAME = 'Dropdown' + const DATA_KEY = 'lte.dropdown' + const EVENT_KEY = `.${DATA_KEY}` + const JQUERY_NO_CONFLICT = $.fn[NAME] + + const Selector = { + DROPDOWN_MENU: 'ul.dropdown-menu', + DROPDOWN_TOGGLE: '[data-toggle="dropdown"]', + } + + const ClassName = { + DROPDOWN_HOVER: '.dropdown-hover' + } + + const Default = { + } + + + /** + * Class Definition + * ==================================================== + */ + + class Dropdown { + constructor(element, config) { + this._config = config + this._element = element + } + + // Public + + toggleSubmenu() { + this._element.siblings().show().toggleClass("show"); + + if (! this._element.next().hasClass('show')) { + this._element.parents('.dropdown-menu').first().find('.show').removeClass("show").hide(); + } + + this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { + $('.dropdown-submenu .show').removeClass("show").hide(); + }); + + } + + // Static + + static _jQueryInterface(config) { + return this.each(function () { + let data = $(this).data(DATA_KEY) + const _config = $.extend({}, Default, $(this).data()) + + if (!data) { + data = new Dropdown($(this), _config) + $(this).data(DATA_KEY, data) + } + + if (config === 'toggleSubmenu') { + data[config]() + } + }) + } + } + + /** + * Data API + * ==================================================== + */ + + $(Selector.DROPDOWN_MENU + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) { + event.preventDefault(); + event.stopPropagation(); + + Dropdown._jQueryInterface.call($(this), 'toggleSubmenu') + }); + + // $(Selector.SIDEBAR + ' a').on('focusin', () => { + // $(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED); + // }) + + // $(Selector.SIDEBAR + ' a').on('focusout', () => { + // $(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED); + // }) + + /** + * jQuery API + * ==================================================== + */ + + $.fn[NAME] = Dropdown._jQueryInterface + $.fn[NAME].Constructor = Dropdown + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return Dropdown._jQueryInterface + } + + return Dropdown +})(jQuery) + +export default Dropdown diff --git a/build/scss/_dropdown.scss b/build/scss/_dropdown.scss index 0092051f3..9beb71a55 100644 --- a/build/scss/_dropdown.scss +++ b/build/scss/_dropdown.scss @@ -37,6 +37,38 @@ } } +// Dropdown Submenu +.dropdown-submenu { + position: relative; + + & > a:after { + @include caret-right; + float: right; + margin-left: .5rem; + margin-top: .5rem; + } + + & > .dropdown-menu { + left: 100%; + margin-left: 0px; + margin-top: 0px; + top: 0; + } +} + +// Dropdown Hover +.dropdown-hover { + &.nav-item.dropdown:hover, + .dropdown-submenu:hover, + &.dropdown-submenu:hover { + > ul.dropdown-menu { + display: block; + } + } +} + + + // Dropdown Sizes .dropdown-menu-xl { max-width: 420px; diff --git a/pages/layout/top-nav.html b/pages/layout/top-nav.html index 7799e5135..3119dfc21 100644 --- a/pages/layout/top-nav.html +++ b/pages/layout/top-nav.html @@ -40,6 +40,39 @@ scratch. This page gets rid of all links and provides the needed markup only.
  • Contact
    • +
  • + + +
    • @@ -207,7 +240,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
    -
    Featured
    +
    Featured
    Special title treatment
    @@ -219,7 +252,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
    -
    Featured
    +
    Featured
    Special title treatment
    @@ -267,6 +300,6 @@ scratch. This page gets rid of all links and provides the needed markup only. - +