Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-27 21:44:39 +04:00
Code Issues Projects Releases Wiki Activity

maps components, mapbox, small fixes

Browse Source
This commit is contained in:
codecalm
2020-02-20 21:33:54 +01:00
parent c34031ffb3
commit c25b25936d
18 changed files with 207 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/libs.json
+4 -2
View File
@@ -27,7 +27,8 @@
"flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.js"
],
"nouislider": "nouislider/distribute/nouislider.min.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",
@@ -39,6 +40,7 @@
"@fullcalendar/list/main.min.css"
],
"flatpickr": "flatpickr/dist/flatpickr.min.css",
"nouislider": "nouislider/distribute/nouislider.min.css"
"nouislider": "nouislider/distribute/nouislider.min.css",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
}
}
pages/_data/maps-vector.yml
-1
View File
@@ -9,7 +9,6 @@ europe:
map: europe_en
zoom: true
usa:
title: Map of USA
map: usa_en
pages/_data/maps.yml
+15
View File
@@ -0,0 +1,15 @@
simple:
title: Simple map
light:
title: Light map style
center: [51.5285582, -0.2416782]
zoom: 11
style: light-v10
card:
title: Light map style
center: [0, 0]
zoom: 1
style: satellite-v9
card: true
pages/_data/menu.yml
+6
View File
@@ -29,6 +29,12 @@ base:
modals:
url: modals.html
title: Modals
maps:
url: maps.html
title: Maps
maps-vector:
url: maps-vector.html
title: Vector maps
charts:
url: charts.html
title: Charts
pages/_includes/cards/map.html
+1 -1
View File
@@ -4,6 +4,6 @@
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/map.html map-id=map color="blue" height=15 %}
{% include ui/map-vector.html map-id=map color="blue" height=15 %}
</div>
</div>
pages/_includes/layout/css.html
+1 -1
View File
@@ -2,7 +2,7 @@
<!-- Libs CSS -->
{% for lib in site.data.libs.css %}
{% for file in lib[1] %}
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<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 %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
{% endfor %}
{% endfor %}
{% endif %}
pages/_includes/layout/footer.html
+8 -14
View File
@@ -1,20 +1,14 @@
<footer class="footer footer-transparent">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</div>
</div>
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="{{ site.github_url }}" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © {{ site.time | date: '%Y' }}
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
All rights reserved.
pages/_includes/layout/js.html
+1 -1
View File
@@ -2,7 +2,7 @@
{% 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="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
<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 %}?{{ site.time | date: '%s' }}{% endif %}"></script>
{% endfor %}
{% endif %}
{% endfor %}
pages/_includes/layout/navbar-secondary.html
+1 -1
View File
@@ -8,7 +8,7 @@
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<a href="#" class="nav-link px-0" data-toggle="dropdown">
{% include ui/icon.html icon="settings" %}
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
pages/_includes/ui/chart.html
+1 -1
View File
@@ -196,7 +196,7 @@
show: true,
position: 'bottom',
height: 32,
offsetY: -12,
offsetY: 8,
markers: {
width: 8,
height: 8,
pages/_includes/ui/map-vector.html
+40 -35
View File
@@ -1,44 +1,49 @@
{% assign id = include.map-id %}
{% assign height = include.height | default: 20 %}
{% assign data = site.data.maps[id] %}
{% assign data = site.data.maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'green' %}
{% if data %}
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item">
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% append_lib jqvmap %}
{% capture script %}
<script>
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
{% append_lib jqvmap %}
{% capture script %}
<script>
// @formatter:on
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
{% if data.zoom %}enableZoom: true,{% endif %}
{% if data.values %}
{% assign color-light = color | append: "-100" %}
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
normalizeFunction: 'polynomial',
values: (chart_data = {{ data.values }}),
onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>');
}
},
{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
{% if data.zoom %}enableZoom: true,{% endif %}
{% if data.values %}
{% assign color-light = color | append: "-100" %}
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
normalizeFunction: 'polynomial',
values: (chart_data = {{ data.values }}),
onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>');
}
},
{% endif %}
});
});
});
</script>
{% endcapture %}
// @formatter:off
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
pages/_includes/ui/map.html
+31
View File
@@ -0,0 +1,31 @@
{% assign id = include.map-id %}
{% assign data = site.data.maps[id] %}
{% if data %}
<div class="embed-responsive embed-responsive-{{ data.ratio | default: include.ratio | default: '16by9' }}">
<div class="embed-responsive-item">
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% append_lib mapbox %}
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
mapboxgl.accessToken = '{{ site.mapbox_key }}';
var map = new mapboxgl.Map({
container: 'map-{{ id }}',
style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
zoom: {{ data.zoom | default: 13 }},
{% if data.center %}
center: [{{ data.center[1] }}, {{ data.center[0] }}],
{% else %}
center: [13.404900, 52.518827],
{% endif %}
});
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}
pages/maps-vector.html
+14 -12
View File
@@ -1,18 +1,20 @@
---
title: Maps
page-header: Maps
title: Vector Maps
page-header: Vector Maps
menu: base.maps-vector
---
<div class="row">
{% for map in site.data.maps %}
<div class="col-lg-6">
{% for map in site.data.maps-vector %}
<div class="col-lg-6">
<div class="card">
<div class="card-body">
{% assign id = map[0] %}
{% include ui/map-vector.html map-id=id %}
</div>
</div>
</div>
{% endfor %}
<div class="card">
<div class="card-body">
<div class="card-title">{{ map[1].title }}</div>
{% assign id = map[0] %}
{% include ui/map-vector.html map-id=id %}
</div>
</div>
</div>
{% endfor %}
</div>
pages/maps.html
+27
View File
@@ -0,0 +1,27 @@
---
title: Maps
page-header: Maps
menu: base.maps
---
<div class="row">
{% for map in site.data.maps %}
{% assign map-id = map[0] %}
{% if map[1].card %}
<div class="col-lg-12">
<div class="card">
{% include ui/map.html map-id=map-id ratio="16by9" %}
</div>
</div>
{% else %}
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div class="card-title">{{ map[1].title }}</div>
{% include ui/map.html map-id=map-id %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>