jqvmap plugin, ui fixes

build/copy-libs.js

@@ -2,7 +2,9 @@ const libs = require('../pages/_data/libs'),
   path = require('path'),
   { exec } = require('child_process');
 
-libs.forEach(function (lib) {
+const all_libs = libs.js.concat(libs.css);
+
+all_libs.forEach(function (lib) {
   let dirname = path.dirname(lib);
   let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib}`;
   exec(cmd)

js/tabler.js

@@ -134,7 +134,6 @@ $(document).ready(function() {
     (function() {
       const elements = document.querySelectorAll('[data-toggle="autosize"]');
 
-      console.log('elements.length', elements.length);
       if (elements.length) {
         elements.forEach(function(element) {
           console.log('1', element);

package.json

@@ -65,16 +65,16 @@
     "clean-css-cli": "4.3.0",
     "cross-env": "6.0.3",
     "eslint": "6.5.1",
-    "eslint-config-xo": "0.27.1",
+    "eslint-config-xo": "0.27.2",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-unicorn": "12.1.0",
     "http-server": "0.11.1",
     "icon-font-generator": "2.1.10",
     "node-sass": "4.12.0",
-    "nodemon": "1.19.3",
+    "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
-    "rollup": "1.24.0",
+    "rollup": "1.25.1",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.0",
     "rollup-plugin-commonjs": "10.1.0",
@@ -94,8 +94,8 @@
     "bootstrap": "twbs/bootstrap#8d56c19",
     "imask": "5.2.1",
     "jquery": "3.4.1",
+    "jqvmap": "1.5.1",
     "peity": "3.3.0",
-    "popper.js": "1.15.0",
     "selectize": "0.12.6"
   },
   "bundlesize": [

pages/_data/libs.json

-[
-  "jquery/dist/jquery.min.js",
-  "bootstrap/dist/js/bootstrap.bundle.min.js",
-  "autosize/dist/autosize.min.js",
-  "imask/dist/imask.min.js",
-  "selectize/dist/js/standalone/selectize.min.js",
-  "apexcharts/dist/apexcharts.min.js",
-  "peity/jquery.peity.min.js"
-]
+{
+  "js": [
+    "jquery/dist/jquery.min.js",
+    "bootstrap/dist/js/bootstrap.bundle.min.js",
+    "autosize/dist/autosize.min.js",
+    "imask/dist/imask.min.js",
+
+    "selectize/dist/js/standalone/selectize.min.js",
+    "apexcharts/dist/apexcharts.min.js",
+    "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/jquery.peity.min.js"
+  ],
+  "css": [
+    "jqvmap/dist/jqvmap.min.css"
+  ]
+}

pages/_data/maps.yml

 world:
-  map: "world_en"
-  backgroundColor: 'transparent'
-  borderColor: '#ffffff'
-  borderWidth: 0.25
-  borderOpacity: 0.25
-  color: 'rgba(120,130,140, 0.1)'
-  enableZoom: false
-  showTooltip: true
-  selectedColor: null
-  hoverColor: 'red'
+  title: World map
+  map: world_en
 
-france:
-  map: 'france_fr'
-  backgroundColor: 'transparent'
-  borderColor: '#ffffff'
-  borderWidth: 0.25
-  borderOpacity: 0.25
-  color: 'rgba(120,130,140, 0.1)'
-  enableZoom: false
-  showTooltip: true
-  selectedColor: null
-  hoverColor: null
\ No newline at end of file
+europe:
+  title: Map of Europe
+  map: europe_en
+  zoom: true
+
+usa:
+  title: Map of USA
+  map: usa_en

pages/_includes/js/maps.html

 <script>
 	$(document).ready(function () {
-		$(`#{{ include.id }}`).each(function () {
-			$(this).vectorMap(
-				{
-					map: `{{ include.data[1].map }}`,
-					backgroundColor: `{{ include.data[1].backgroundColor }}`,
-					borderColor: `{{ include.data[1].borderColor }}`,
-					borderWidth: `{{ include.data[1].borderWidth }}`,
-					borderOpacity: `{{ include.data[1].borderOpacity }}`,
-					color: `{{ include.data[1].color}}`,
-					enableZoom: `{{ include.data[1].enableZoom}}`,
-					showTooltip: `{{ include.data[1].showTooltip}}`,
-					selectedColor: `{{ include.data[1].selectedColor}}`,
-					hoverColor: `{{ include.data[1].hoverColor}}`
-				}
-			);
+		$('#{{ include.id }}').each(function () {
+			$(this).vectorMap({
+				map: '{{ include.data[1].map }}'
+			});
 		});
 	})
-</script>
\ No newline at end of file
+</script>

pages/_includes/layout/css.html

+{% if site.data.libs %}
+<!-- Libs CSS -->
+{% for lib in site.data.libs.css %}
+<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}" rel="stylesheet" />
+{% endfor %}
+{% endif %}
+
+<!-- Tabler Core -->
 <link href="{{ site.base }}/dist/css/tabler.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
+
+<!-- Tabler Plugins -->
 <link href="{{ site.base }}/dist/css/tabler-flags.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
 <link href="{{ site.base }}/dist/css/tabler-charts.css?{{ site.time | date: '%s' }}" rel="stylesheet" />

pages/_includes/layout/js.html

@@ -4,15 +4,15 @@
 	};
 </script>
 
-<!-- Libs JS -->
-{% for lib in site.data.libs %}
-<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}"></script>
-{% endfor %}
+{% if site.data.libs %}
+   <!-- Libs JS -->
+   {% for lib in site.data.libs.js %}
+   <script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}"></script>
+   {% endfor %}
+{% endif %}
 
 <!-- Tabler Core -->
 <script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
 
 <!-- Tabler Plugins -->
 <script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
-
-

pages/_includes/ui/map.html

+{% assign id = include.map %}
+{% assign height = include.height | default: 20 %}
+{% assign data = site.data.maps[id] %}
+
+{% if data %}
+<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
+<script>
+	$(document).ready(function () {
+		$('#map-{{ id }}').vectorMap({
+			map: '{{ data.map }}',
+			backgroundColor: 'transparent',
+			color: 'rgba(120, 130, 140, .1)',
+		  borderColor: 'transparent'
+			{% if data.zoom %}enableZoom: true,{% endif %}
+		});
+	});
+</script>
+{% endif %}

pages/_layouts/base.html

@@ -26,9 +26,11 @@
    <meta name="description" content="{{ page.description | escape }}"/>
    {% endif %}
 
-   {% include layout/css.html %}
    {% include layout/og.html %}
 
+   {% include layout/css.html %}
+   {% include layout/js.html %}
+
    <style>body { display: none; }</style>
 </head>
 <body
@@ -42,7 +44,6 @@
 {% endif %}
 {% endif %}
 
-{% include layout/js.html %}
 <script>document.body.style.display = 'block';</script>
 </body>
 </html>

pages/maps.html

@@ -3,13 +3,16 @@ title: Maps
 page-title: Maps
 ---
 
+<div class="row">
+   {% for map in site.data.maps %}
+   <div class="col-lg-6">
 
-{% for map in site.data.maps %}
-{% assign title = map[0] %}
-{% assign key = 'map-' | append: title %}
-
-<div id="{{ key }}" style="height: 600px;"></div>
-
-{% include js/maps.html id=key data=map %}
-
-{% endfor %}
+      <div class="card">
+         <div class="card-body">
+            {% assign id = map[0] %}
+            {% include ui/map.html map=id %}
+         </div>
+      </div>
+   </div>
+   {% endfor %}
+</div>

scss/tabler.scss

@@ -50,6 +50,7 @@
 
 @import "vendor/pace";
 @import "vendor/selectize";
+@import "vendor/jqvmap";
 
 @import "utils/border";
 @import "utils/background";

scss/vendor/_jqvmap.scss

+.jqvmap-zoomin,
+.jqvmap-zoomout {
+  @extend .btn;
+  @extend .btn-sm;
+  @extend .btn-secondary;
+  height: auto;
+  width: auto;
+  left: .5rem;
+}
+
+.jqvmap-zoomin {
+  top: .5rem;
+}
+
+.jqvmap-zoomout {
+  top: 2rem;
+}