未验证 提交 7c885ad9 编写于 作者: P Paweł Kuna 提交者: GitHub

Merge pull request #600 from tabler/dev-vendors

Optimized libs loading
{
"global-libs": [
"bootstrap", "jquery"
],
"js": {
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"jquery": "jquery/dist/jquery.slim.min.js",
"autosize": "autosize/dist/autosize.min.js",
"imask": "imask/dist/imask.min.js",
"selectize": "selectize/dist/js/standalone/selectize.min.js",
"apexcharts": "apexcharts/dist/apexcharts.min.js",
"jqvmap": [
"jqvmap/dist/jquery.vmap.min.js",
"jqvmap/dist/maps/jquery.vmap.world.js",
"jqvmap/dist/maps/jquery.vmap.usa.js",
"jqvmap/dist/maps/continents/jquery.vmap.europe.js"
],
"peity": "peity/jquery.peity.min.js",
"fullcalendar": [
"@fullcalendar/core/main.min.js",
"@fullcalendar/daygrid/main.min.js",
"@fullcalendar/interaction/main.min.js",
"@fullcalendar/timegrid/main.min.js",
"@fullcalendar/list/main.min.js"
],
"flatpickr": [
"flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.js"
],
"nouislider": "nouislider/distribute/nouislider.min.js",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
},
"css": {
"jqvmap": "jqvmap/dist/jqvmap.min.css",
"selectize": "selectize/dist/css/selectize.css",
"fullcalendar": [
"@fullcalendar/core/main.min.css",
"@fullcalendar/daygrid/main.min.css",
"@fullcalendar/timegrid/main.min.css",
"@fullcalendar/list/main.min.css"
],
"flatpickr": "flatpickr/dist/flatpickr.min.css",
"nouislider": "nouislider/distribute/nouislider.min.css",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
}
"global-libs": [
"bootstrap"
],
"js": {
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"jquery": "jquery/dist/jquery.slim.min.js",
"autosize": "autosize/dist/autosize.min.js",
"imask": "imask/dist/imask.min.js",
"selectize": "selectize/dist/js/standalone/selectize.min.js",
"apexcharts": "apexcharts/dist/apexcharts.min.js",
"jqvmap": "jqvmap/dist/jquery.vmap.min.js",
"jqvmap-world": "jqvmap/dist/maps/jquery.vmap.world.js",
"jqvmap-usa": "jqvmap/dist/maps/jquery.vmap.usa.js",
"jqvmap-europe": "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
"peity": "peity/jquery.peity.min.js",
"fullcalendar": [
"@fullcalendar/core/main.min.js",
"@fullcalendar/daygrid/main.min.js",
"@fullcalendar/interaction/main.min.js",
"@fullcalendar/timegrid/main.min.js",
"@fullcalendar/list/main.min.js"
],
"flatpickr": [
"flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.js"
],
"nouislider": "nouislider/distribute/nouislider.min.js",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
},
"css": {
"jqvmap": "jqvmap/dist/jqvmap.min.css",
"selectize": "selectize/dist/css/selectize.css",
"fullcalendar": [
"@fullcalendar/core/main.min.css",
"@fullcalendar/daygrid/main.min.css",
"@fullcalendar/timegrid/main.min.css",
"@fullcalendar/list/main.min.css"
],
"flatpickr": "flatpickr/dist/flatpickr.min.css",
"nouislider": "nouislider/distribute/nouislider.min.css",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
}
}
......@@ -118,7 +118,7 @@ extra:
search-results:
title: Search results
url: search-results.html
pricing-cards:
pricing:
url: pricing.html
title: Pricing cards
users:
......
......@@ -3,6 +3,7 @@ title: Autosize
menu: docs.autosize
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
done: true
libs: autosize
---
......
......@@ -3,6 +3,7 @@ title: Buttons
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
bootstrap-link: components/buttons/
done: true
libs: tabler-buttons
---
......
......@@ -4,6 +4,7 @@ menu: docs.flags
description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
plugin: flags
done: true
libs: tabler-flags
---
......@@ -34,7 +35,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
## Types
To use the flag of a particular country, add the `flag-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-ad`.
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`.
<table>
{% for flag in site.data.flags %}
......
......@@ -2,6 +2,7 @@
title: Form elements
description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
bootstrap-link: components/forms/
libs: nouislider
---
......
{% if site.data.libs.css %}
<!-- Libs CSS -->
{% for lib in site.data.libs.css %}
{% for file in lib[1] %}
<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}" rel="stylesheet"/>
{% endfor %}
{% endfor %}
<!-- CSS files -->
{% if page.libs %}
{% for lib in site.data.libs.css %}
{% if page.libs contains lib[0] %}
{% for file in lib[1] %}
<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}" rel="stylesheet"/>
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
<!-- Tabler Core -->
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
<!-- Tabler Plugins -->
{% for plugin in site.tabler-plugins %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
{% endfor %}
{% if page.libs %}
{% for plugin in site.tabler-plugins %}
{% if page.libs contains plugin %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
{% endif %}
{% endfor %}
{% endif %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/demo{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
\ No newline at end of file
{% removeemptylines %}
{% for script in site.captured_global.scripts %}
{{ script }}
{% endfor %}
{% for script in site.captured_once.scripts %}
{{ script }}
{% endfor %}
{% endremoveemptylines %}
<!-- Libs JS -->
{% for lib in site.data.libs.js %}
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] or page.libs contains lib[0] %}
{% for file in lib[1] %}
<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
{% endfor %}
{% endif %}
{% if page.libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% for file in lib[1] %}
<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
{% endfor %}
{% endif %}
{% endfor %}
<!-- Tabler Core -->
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}"></script>
{% removeemptylines %}
{% for script in site.captured_global.scripts %}
{{ script }}
{% endfor %}
{% for script in site.captured_once.scripts %}
{{ script }}
{% endfor %}
{% endremoveemptylines %}
......@@ -18,7 +18,6 @@
<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug and jekyll.environment == 'development' %} style="outline: 1px solid red" {% endif %}></div>
{% append_lib apexcharts %}
{% capture script %}
{% assign chart-type = data.type | default: 'bar' %}
<script>
......
......@@ -3,7 +3,7 @@
<div class="empty-icon">
{% if include.illustration %}
{% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
{% include ui/illustration.html image=illustration-src class="h-8 mb-4" %}
{% include ui/illustration.html image=illustration-src class="mb-4" %}
{% elsif include.icon-text %}
<div class="display-4">{{ include.icon-text }}</div>
{% else %}
......
......@@ -23,7 +23,6 @@
{{ input }}
{% endif %}
{% append_lib flatpickr %}
{% capture_global scripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
......
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
{% append_lib imask %}
{% capture_once scripts %}
<script>
(function () {
......@@ -9,7 +8,6 @@
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
console.log('maskEl', maskEl);
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
......
......@@ -5,8 +5,6 @@
{% assign id = include.id %}
{% if id %}
{% append_lib nouislider %}
<div class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" id="range-{{ id }}"></div>
{% capture_global scripts %}
......
......@@ -29,7 +29,6 @@
{% endif %}
</select>
{% append_lib selectize %}
{% capture_global scripts %}
<script>
$(document).ready(function () {
......
{% append_lib autosize %}
<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Typing something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
{% capture_once scripts %}
......
......@@ -2,8 +2,6 @@
<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>
{% append_lib fullcalendar %}
{% capture_global scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
......
<img src="{{ site.base }}/static/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} alt="">
<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="128"{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} alt="">
......@@ -9,7 +9,6 @@
</div>
</div>
{% append_lib jqvmap %}
{% capture script %}
<script>
// @formatter:on
......
......@@ -8,7 +8,6 @@
</div>
</div>
{% append_lib mapbox %}
{% capture_global scripts %}
<script>
// @formatter:off
......
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
\ No newline at end of file
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" use-svg=true %}{% endif %}</div>
\ No newline at end of file
......@@ -7,8 +7,6 @@
{% assign data = include.percentage | append: "/100" %}
{% endif %}
{% append_lib peity %}
<div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
{% capture_global scripts %}
......
......@@ -5,14 +5,10 @@
{% assign class = include.color | default: 'yellow' | prepend: 'text-' %}
{% assign filled = include.filled | default: false %}
<div class="stars">
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% if forloop.index <= rate and filled %}
{% include ui/icon.html icon=icon class="icon-filled" %}
{% else %}
{% include ui/icon.html icon=icon %}
{% endif %}
</span>
{% endfor %}
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% include ui/icon.html icon=icon %}
</span>
{% endfor %}
</div>
{% endremoveemptylines %}
......@@ -53,8 +53,6 @@
{% include layout/js.html %}
{% include layout/js-capture.html %}
{% if site.debug and jekyll.environment == 'development' %}
{% include layout/debug.html %}
{% endif %}
......
......@@ -14,7 +14,7 @@ page-header: Documentation
<div class="sticky-top">
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" color="github" external=true block=true class="mb-6" %}
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %}
{% if toc != '' %}
<h5 class="subheader">On this page</h5>
......
......@@ -17,21 +17,6 @@ module Jekyll
end
end
class CaptureScripts < Liquid::Tag
def initialize(tag_name, text, tokens)
super
@text = text.strip
end
def render(context)
unless $captured_libs.include? @text
$captured_libs.push(@text)
end
''
end
end
class CaptureOnce < Liquid::Block
def initialize(tag_name, text, tokens)
super
......@@ -57,23 +42,19 @@ module Jekyll
Jekyll::Hooks.register [:pages, :docs], :post_init do |page|
$captured_global = {}
$captured_once = {}
$captured_libs = []
end
Jekyll::Hooks.register [:pages, :docs], :post_render do |page|
$captured_global = {}
$captured_once = {}
$captured_libs = []
end
Jekyll::Hooks.register [:pages, :docs], :pre_render do |page, jekyll|
jekyll.site['captured_global'] = $captured_global
jekyll.site['captured_once'] = $captured_once
jekyll.site['captured_libs'] = $captured_libs
end
end
Liquid::Template.register_tag('capture_global', Jekyll::Tags::CaptureGlobal)
Liquid::Template.register_tag('capture_once', Jekyll::Tags::CaptureOnce)
Liquid::Template.register_tag('append_lib', Jekyll::Tags::CaptureScripts)
......@@ -3,6 +3,7 @@ title: Buttons
page-header: Buttons
done: true
menu: base.buttons
libs: tabler-buttons
---
<div class="row">
......
......@@ -3,6 +3,7 @@ title: Calendar
page-header: Calendar
page-header-actions: calendar
menu: base.calendar
libs: fullcalendar
---
<div class="card">
......
......@@ -2,6 +2,7 @@
title: Cards
page-header: Cards
menu: base.cards
libs: imask
---
<div class="row">
......
......@@ -2,6 +2,7 @@
title: Charts
page-header: Charts
menu: base.charts
libs: apexcharts
---
<div class="row">
......
......@@ -5,4 +5,5 @@ menu: base.empty
page-header: Empty page
---
<!-- Content here -->
\ No newline at end of file
<!-- Content here -->
......@@ -2,6 +2,7 @@
title: Form elements
page-header: Form elements
menu: forms
libs: jquery, nouislider, imask, autosize, selectize, flatpickr
---
<div class="row">
......
......@@ -4,6 +4,7 @@ page-header: Dashboard
page-header-pretitle: Overview
page-header-actions: buttons
menu: home
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
......@@ -7,6 +7,7 @@ layout-navbar-hide-brand: true
layout-navbar-hide-menu: true
layout-navbar-class: "d-none d-lg-flex"
layout-navbar-condensed: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -3,6 +3,7 @@ page-header: Condensed dark layout
menu: layout.condensed-dark
layout-navbar-condensed: true
layout-navbar-dark: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -2,6 +2,7 @@
page-header: Condensed layout
menu: layout.condensed
layout-navbar-condensed: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -2,6 +2,7 @@
page-header: Dark mode
menu: layout.dark-mode
layout-dark: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
......@@ -5,6 +5,7 @@ layout-fluid: true
layout-sidebar: true
layout-sidebar-dark: true
layout-hide-topbar: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
......@@ -2,6 +2,7 @@
page-header: Fluid layout
menu: layout.fluid
layout-fluid: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
---
page-header: Horizontal layout
menu: layout.horizontal
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -2,6 +2,7 @@
page-header: Navbar dark
menu: layout.navbar-dark
layout-navbar-dark: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -4,6 +4,7 @@ menu: layout.vertical-right
layout-sidebar: true
layout-sidebar-right: true
layout-hide-topbar: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -4,6 +4,7 @@ menu: layout.vertical
layout-sidebar: true
layout-sidebar-dark: true
layout-hide-topbar: true
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}
\ No newline at end of file
......@@ -2,6 +2,7 @@
title: Vector Maps
page-header: Vector Maps
menu: base.maps-vector
libs: jquery, jqvmap, jqvmap-world, jqvmap-europe, jqvmap-usa
---
<div class="row">
......
......@@ -2,6 +2,7 @@
title: Maps
page-header: Maps
menu: base.maps
libs: mapbox
---
<div class="row">
......
......@@ -2,6 +2,7 @@
title: Pricing cards
page-header: Pricing cards
done: true
menu: extra.pricing
---
<div class="row">
......
......@@ -3,6 +3,7 @@ title: Snippets
page-header: Snippets
page-header-actions: date
menu: extra.snippets
libs: jquery, apexcharts, peity
---
<div class="row">
......
......@@ -8,9 +8,6 @@
}
}
.icon-filled {
fill: currentColor;
}
.icon-thin {
stroke-width: 1.5;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册