Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 18:04:26 +04:00
Code Issues Projects Releases Wiki Activity

tabler submenus refactoring

Browse Source
This commit is contained in:
codecalm
2019-10-27 17:16:16 +01:00
committed by Alex Safian
parent 212da5c6e8
commit c391a8cbde
5 changed files with 81 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
build/rollup.config.js
View File

@@ -13,12 +13,14 @@ import path from 'path';
import babel from 'rollup-plugin-babel'; import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve'; import resolve from 'rollup-plugin-node-resolve';
import minify from 'rollup-plugin-babel-minify'; import minify from 'rollup-plugin-babel-minify';
import commonjs from 'rollup-plugin-commonjs';
const fileDest = 'tabler', const fileDest = 'tabler',
banner = require('./banner'); banner = require('./banner');
let plugins = [ let plugins = [
resolve() resolve(),
commonjs()
]; ];
if (BUNDLE) { if (BUNDLE) {

4
js/tabler.js
View File

@@ -5,6 +5,8 @@
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE) * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/ */
require('./tabler/dropdowns');
const tabler = { const tabler = {
colorVariation: function(color, variation) { colorVariation: function(color, variation) {
const colorValue = this.colors[color]; const colorValue = this.colors[color];
@@ -112,8 +114,6 @@ const tabler = {
}, },
}; };
$(document).ready(function() { $(document).ready(function() {
const $body = $('body'); const $body = $('body');

7
js/tabler/dropdowns.js Normal file
View File

@@ -0,0 +1,7 @@
'use strict';
(function(){
let dropdown = document.querySelectorAll('.dropup, .dropright, .dropdown, .dropleft'),
dropdownToggle = document.querySelectorAll('.dropdown-menu .dropdown-toggle');
})();

140
pages/_includes/layout/menu.html
View File

@@ -1,11 +1,11 @@
{% removeemptylines %} {% removeemptylines %}
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}" id="menu"> <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% assign current-page = page.menu | default: layout.menu | split: '.' %} {% assign current-page = page.menu | default: layout.menu | split: '.' %}
{% for level-1 in site.data.menu %} {% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %} {% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %}dropdown{% endif %}"> <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}> <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
<span class="nav-icon"> <span class="nav-icon">
{% include ui/icon.html icon=icon %} {% include ui/icon.html icon=icon %}
</span> </span>
@@ -20,79 +20,75 @@
</span> </span>
</a> </a>
{% if level-1[1].children or level-1[1].docs %} {% if level-1[1].children or level-1[1].docs %}
<div class="navbar-subnav collapse" id="sidebar-{{ level-1[0] }}"> <ul class="dropdown-menu">
<ul class="nav">
{% if level-1[1].docs %} {% if level-1[1].docs %}
{% for d in site.data.docs %} {% for d in site.data.docs %}
{% assign doc = site.docs | where: "slug", d.page | first %} {% assign doc = site.docs | where: "slug", d.page | first %}
{% if doc %} {% if doc %}
<li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}"> <li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link"> <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
<span class="nav-text"> <span class="nav-text">
{{ doc.title }} {{ doc.title }}
{% if doc.new %} {% if doc.new %}
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span> <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
{% endif %} {% endif %}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% for level-2 in level-1[1].children %} {% for level-2 in level-1[1].children %}
<li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}"> <li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}{% if level-2[1].children %} dropdown{% endif %}">
<a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}> <a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
<span class="nav-text"> <span class="nav-text">
{{ level-2[1].title }} {{ level-2[1].title }}
{% if level-2[1].label %} {% if level-2[1].label %}
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span> <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
{% endif %} {% endif %}
</span> </span>
</a> </a>
{% if level-2[1].children %} {% if level-2[1].children %}
<div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}"> <ul class="dropdown-menu">
<ul class="nav nav-sm flex-column"> {% for level-3 in level-2[1].children %}
{% for level-3 in level-2[1].children %} <li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
<li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}"> <a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
<a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}> <span class="nav-text">
<span class="nav-text"> {{ level-3[1].title }}
{{ level-3[1].title }} {% if level-3[1].label %}
{% if level-3[1].label %} <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
<span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-3[1].children %}
<div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %}
<li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
<a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
<span class="nav-text">
{{ level-4[1].title }}
{% if level-4[1].label %}
<span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %} {% endif %}
</li> </span>
{% endfor %} </a>
</ul>
</div> {% if level-3[1].children %}
{% endif %} <div class="navbar-subnav collapse">
</li> <ul class="nav nav-sm flex-column">
{% endfor %} {% for level-4 in level-3[1].children %}
</ul> <li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
</div> <a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
<span class="nav-text">
{{ level-4[1].title }}
{% if level-4[1].label %}
<span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}

1
scss/ui/_dropdowns.scss
View File

@@ -1,6 +1,7 @@
.dropdown-menu { .dropdown-menu {
min-width: 12rem; min-width: 12rem;
box-shadow: $box-shadow; box-shadow: $box-shadow;
user-select: none;
.icon { .icon {
width: 1em; width: 1em;