mirror of
https://github.com/tabler/tabler.git
synced 2026-09-01 23:01:29 +04:00
Refactor breadcrumb and vector map components, add clipboard functionality (#2378)
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
Paweł Kuna
co-authored by
ethancrawford
ethancrawford
parent
638f36c0c5
commit
72a1d67709
@@ -1,5 +1,9 @@
|
||||
{%- assign el = 'span' -%}
|
||||
<{{ el }} class="badge{% if include['size'] %} badge-{{ include['size'] }}{% endif %}{% if include.color %} bg-{{ include.color }} text-{{ include.color }}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<{{ el }} class="badge{% if include.scale %} badge-{{ include.scale }}{% endif %}{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% endif %} text-{{ include.color }}{% if include.light %}-lt{% endif %}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{%- if include.icon -%}
|
||||
{%- assign icon = include.icon -%}
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
{%- endif -%}
|
||||
{%- if include.person-id -%}
|
||||
{%- assign person-id = include.person-id | minus: 1 -%}
|
||||
{%- assign person = people[person-id] -%}
|
||||
|
||||
@@ -1,10 +1,20 @@
|
||||
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," %}
|
||||
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
|
||||
{% for page in breadcrumb-pages %}
|
||||
{% if forloop.last %}
|
||||
<li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-item"><a href="#">{{ page }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
|
||||
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}" aria-label="breadcrumbs">
|
||||
{%- for page in breadcrumb-pages -%}
|
||||
{%- if forloop.last -%}
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
<a href="#">{{ page }}</a>
|
||||
</li>
|
||||
{%- else -%}
|
||||
<li class="breadcrumb-item">
|
||||
{% if forloop.first and include.home-icon-%}
|
||||
<a href="{{ site.baseurl }}/">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</a>
|
||||
{%- else -%}
|
||||
<a href="#">{{ page }}</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ol>
|
||||
|
||||
+101
-101
@@ -1,117 +1,117 @@
|
||||
{% removeemptylines %}
|
||||
{% assign id = include.map-id %}
|
||||
{% assign data = maps-vector[id] %}
|
||||
{% assign color = include.color | default: data.color | default: 'green' %}
|
||||
{% assign color = include.color | default: data.color | default: 'primary' %}
|
||||
|
||||
{% if data %}
|
||||
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
|
||||
<div>
|
||||
<div id="map-{{ id }}" class="w-100 h-100"></div>
|
||||
</div>
|
||||
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
|
||||
<div>
|
||||
<div id="map-{{ id }}" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture script %}
|
||||
<script>
|
||||
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
|
||||
{% capture script %}
|
||||
{% removeemptylines %}
|
||||
<script>
|
||||
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
|
||||
selector: '#map-{{ id }}',
|
||||
map: '{{ data.map }}',
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
{% unless data.filled %}
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: 'var(--tblr-border-color)',
|
||||
strokeWidth: 2,
|
||||
{% else %}
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
{% endunless %}
|
||||
}
|
||||
},
|
||||
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
{% if data.values %}
|
||||
series: {
|
||||
regions: [{
|
||||
attribute: "fill",
|
||||
scale: {
|
||||
{% for i in (1..10) %}
|
||||
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
|
||||
{% endfor %}
|
||||
},
|
||||
values: {{ data.values | json }},
|
||||
}]
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
|
||||
selector: '#map-{{ id }}',
|
||||
map: '{{ data.map }}',
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
{% unless data.filled %}
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: 'var(--tblr-border-color)',
|
||||
strokeWidth: 2,
|
||||
{% else %}
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
{% endunless %}
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.markers %}
|
||||
markers: [
|
||||
{% for marker in data.markers %}
|
||||
{
|
||||
coords: [{{ marker.coords }}],
|
||||
name: "{{ marker.name }}",
|
||||
},
|
||||
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
{% if data.values %}
|
||||
series: {
|
||||
regions: [{
|
||||
attribute: "fill",
|
||||
scale: {
|
||||
{% for i in (1..10) %}
|
||||
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
|
||||
{% endfor %}
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 4,
|
||||
stroke: '#fff',
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: .5,
|
||||
fill: 'var(--tblr-{{ color }})'
|
||||
},
|
||||
hover: {
|
||||
fill: 'var(--tblr-{{ color }})',
|
||||
stroke: 'var(--tblr-{{ color }})'
|
||||
}
|
||||
values: {{ data.values | json }},
|
||||
}]
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.markers %}
|
||||
markers: [
|
||||
{% for marker in data.markers %}
|
||||
{
|
||||
coords: [{{ marker.coords }}],
|
||||
name: "{{ marker.name }}",
|
||||
},
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10
|
||||
{% endfor %}
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 4,
|
||||
stroke: '#fff',
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: .5,
|
||||
fill: 'var(--tblr-{{ color }})'
|
||||
},
|
||||
hover: {
|
||||
fill: 'var(--tblr-{{ color }})',
|
||||
stroke: 'var(--tblr-{{ color }})'
|
||||
}
|
||||
},
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function(marker) {
|
||||
return marker.name
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function(marker) {
|
||||
return marker.name
|
||||
},
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.lines %}
|
||||
lines: [
|
||||
{% for line in data.lines %}
|
||||
{
|
||||
from: "{{ line.from }}",
|
||||
to: "{{ line.to }}"
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.lines %}
|
||||
lines: [
|
||||
{% for line in data.lines %}
|
||||
{
|
||||
from: "{{ line.from }}",
|
||||
to: "{{ line.to }}"
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
lineStyle: {
|
||||
strokeDasharray:"4 4",
|
||||
animation: true,
|
||||
stroke: "rgba(98, 105, 118, .75)",
|
||||
strokeWidth: .5,
|
||||
},
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
{% endfor %}
|
||||
],
|
||||
lineStyle: {
|
||||
strokeDasharray:"4 4",
|
||||
animation: true,
|
||||
stroke: "rgba(98, 105, 118, .75)",
|
||||
strokeWidth: .5,
|
||||
},
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
|
||||
{% if include.show-scripts %}
|
||||
{{ script }}
|
||||
{% else %}
|
||||
{% capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
{% endif %}
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
{% endremoveemptylines %}
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
|
||||
{% capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
{% endif %}
|
||||
{% endremoveemptylines %}
|
||||
Reference in New Issue
Block a user