From a83b4bc97a32826a6333c9326886d935b9cfa4f2 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 10 Feb 2021 22:53:13 +0100
Subject: [PATCH] choices.js init

---
 package.json                                  |  7 +-
 src/pages/_data/libs.json                     |  5 +-
 .../_includes/forms/form-elements-6.html      | 12 +--
 .../_includes/parts/form/input-range.html     |  8 +-
 src/pages/_includes/ui/form/selectize.html    | 67 ---------------
 src/pages/_includes/ui/fullcalendar.html      | 86 -------------------
 src/pages/_includes/ui/{form => }/range.html  |  0
 src/pages/_includes/ui/select.html            | 42 +++++++++
 src/scss/tabler-vendors.scss                  |  1 -
 src/scss/vendor/_choices.scss                 |  0
 src/scss/vendor/_fullcalendar.scss            | 63 --------------
 11 files changed, 56 insertions(+), 235 deletions(-)
 delete mode 100644 src/pages/_includes/ui/form/selectize.html
 delete mode 100644 src/pages/_includes/ui/fullcalendar.html
 rename src/pages/_includes/ui/{form => }/range.html (100%)
 create mode 100644 src/pages/_includes/ui/select.html
 create mode 100644 src/scss/vendor/_choices.scss
 delete mode 100644 src/scss/vendor/_fullcalendar.scss

diff --git a/package.json b/package.json
index 253b1a66..de392406 100644
--- a/package.json
+++ b/package.json
@@ -80,19 +80,14 @@
     "yargs": "^16.2.0"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.5.1",
-    "@fullcalendar/daygrid": "^5.5.0",
-    "@fullcalendar/interaction": "^5.5.0",
-    "@fullcalendar/list": "^5.5.0",
-    "@fullcalendar/timegrid": "^5.5.1",
     "@popperjs/core": "^2.6.0",
     "@tabler/icons": "^1.39.1",
     "apexcharts": "^3.24.0",
     "autosize": "^4.0.2",
     "bootstrap": "twbs/bootstrap#c93d754d35eadf6cb81a8fccef9ce091ea4f28c9",
+    "choices.js": "^9.0.1",
     "countup.js": "^2.0.7",
     "flatpickr": "^4.6.9",
-    "fullcalendar": "^5.5.1",
     "imask": "^6.0.5",
     "litepicker": "^2.0.3",
     "nouislider": "^14.6.3"
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index e191cc06..e82d0e55 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -13,10 +13,11 @@
     "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
     "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
-    "litepicker": "litepicker/dist/litepicker.js"
+    "litepicker": "litepicker/dist/litepicker.js",
+    "choices": "choices.js/public/assets/scripts/choices.js"
   },
   "css": {
-    "selectize": "selectize/dist/css/selectize.css",
+    "choices": "choices.js/public/assets/styles/choices.css",
     "nouislider": "nouislider/distribute/nouislider.min.css",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
   }
diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html
index 5bb955a5..ceedfcc7 100644
--- a/src/pages/_includes/forms/form-elements-6.html
+++ b/src/pages/_includes/forms/form-elements-6.html
@@ -33,30 +33,30 @@
 
 <div class="mb-3">
 	<label class="form-label">Tags input</label>
-	{% include ui/form/selectize.html key="tags" %}
+	{% include ui/select.html id="tags" key="tags" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced tags input</label>
-	{% include ui/form/selectize.html key="tags-advanced" %}
+	{% include ui/select.html id="tags-advanced" key="tags-advanced" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select</label>
-	{% include ui/form/selectize.html key="users" %}
+	{% include ui/select.html id="users" key="users" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with avatars</label>
-	{% include ui/form/selectize.html key="people" %}
+	{% include ui/select.html id="people" key="people" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with flags</label>
-	{% include ui/form/selectize.html key="countries"  %}
+	{% include ui/select.html id="countries" key="countries"  %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select with validation state</label>
-	{% include ui/form/selectize.html key="countries" state="valid" select-id="states" %}
+	{% include ui/select.html id="countries" key="countries" state="valid" %}
 </div>
\ No newline at end of file
diff --git a/src/pages/_includes/parts/form/input-range.html b/src/pages/_includes/parts/form/input-range.html
index fd6df9c3..c4962306 100644
--- a/src/pages/_includes/parts/form/input-range.html
+++ b/src/pages/_includes/parts/form/input-range.html
@@ -1,8 +1,8 @@
 <div class="mb-3">
 	<label class="form-label">Range input</label>
 
-	{% include ui/form/range.html value=40 %}
-	{% include ui/form/range.html value="20" id="simple" connect=true %}
-	{% include ui/form/range.html value="60,90" id="connect" %}
-	{% include ui/form/range.html value="40" id="color" class="text-green" connect=true %}
+	{% include ui/range.html value=40 %}
+	{% include ui/range.html value="20" id="simple" connect=true %}
+	{% include ui/range.html value="60,90" id="connect" %}
+	{% include ui/range.html value="40" id="color" class="text-green" connect=true %}
 </div>
diff --git a/src/pages/_includes/ui/form/selectize.html b/src/pages/_includes/ui/form/selectize.html
deleted file mode 100644
index 8131b2cf..00000000
--- a/src/pages/_includes/ui/form/selectize.html
+++ /dev/null
@@ -1,67 +0,0 @@
-{% assign key = include.key | default: 'people' %}
-{% assign id = include.select-id | default: key %}
-{% assign data = site.data.selects[key] %}
-{% assign options = data.options %}
-
-<select name="{{ key }}" id="select-{{ id }}" class="form-select{% if include.state %} is-{{ include.state }}{% endif %}"{% if data.multiple %} multiple{% endif %}>
-	{% if options == 'people' %}
-		{% for person in site.data.people limit: 20 %}
-		{% capture avatar %}
-			{% include ui/avatar.html person=person class="avatar-xs rounded me-2" %}
-		{% endcapture %}
-		<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip  | replace: '"', '\"' }}"}'{% if person.id == data.value %} selected{% endif %}>{{ person.full_name }}</option>
-		{% endfor %}
-
-	{% else %}
-		{% for option in options %}
-		{% if option[1] %}
-			{% assign current-value = option[0] %}
-			{% assign current-name = option[1].name %}
-			{% assign all-data = option[1] %}
-		{% else %}
-			{% assign current-value = option %}
-			{% assign current-name = option %}
-		{% endif %}
-
-		<option value="{{ current-value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == current-value or data.value contains current-value %} selected{% endif %}>{{ current-name }}</option>
-		{% endfor %}
-
-	{% endif %}
-</select>
-
-{% capture_global scripts %}
-{% comment %}
-<script>
-	$(document).ready(function () {
-		$('#select-{{ id }}').selectize({
-			{% if key == "countries" %}
-			render: {
-				option: function (data, escape) {
-					return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-				},
-				item: function (data, escape) {
-					return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-				}
-			}
-			{% elsif key == "people" %}
-			render: {
-				option: function (data, escape) {
-					return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
-				},
-				item: function (data, escape) {
-					return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
-				}
-			}
-			{% endif %}
-			{% if data.max-items %}
-			maxItems: {{ data.max-items }},
-			{% endif %}
-
-			{% if data.removable %}
-			plugins: ['remove_button'],
-			{% endif %}
-		});
-	});
-</script>
-{% endcomment %}
-{% endcapture_global %}
diff --git a/src/pages/_includes/ui/fullcalendar.html b/src/pages/_includes/ui/fullcalendar.html
deleted file mode 100644
index 8cf7f9fb..00000000
--- a/src/pages/_includes/ui/fullcalendar.html
+++ /dev/null
@@ -1,86 +0,0 @@
-{% assign calendar-id = include.calendar-id | default: 'main' %}
-
-<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>
-
-{% capture_global scripts %}
-<script>
-	document.addEventListener('DOMContentLoaded', function () {
-      {% if jekyll.environment == 'development' %}window.tabler_calendar = window.tabler_calendar || {};{% endif %}
-      var calendarEl = document.getElementById('calendar-{{ calendar-id }}'),
-         today = new Date(),
-         y = today.getFullYear(),
-         m = today.getMonth(),
-         d = today.getDate();
-
-      window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
-		   plugins: [ 'interaction', 'dayGrid' ],
-         themeSystem: 'standard',
-
-		   header: {
-			   left: 'title',
-			   center: '',
-			   right: 'prev,next'
-		   },
-
-		   selectable: true,
-		   selectHelper: true,
-		   nowIndicator: true,
-		   views: {
-			   dayGridMonth: { buttonText: 'month' },
-			   timeGridWeek: { buttonText: 'week' },
-			   timeGridDay: { buttonText: 'day' }
-		   },
-		   defaultView: 'dayGridMonth',
-		   timeFormat: 'H(:mm)',
-
-		   events: [
-		   	{
-               title: 'All Day Event',
-               start: new Date(y, m, 1),
-				   className: 'bg-blue-lt'
-            },
-            {
-               id: 999,
-               title: 'Repeating Event',
-               start: new Date(y, m, 7, 6, 0),
-               allDay: false,
-               className: 'bg-blue-lt'
-            },
-            {
-               id: 999,
-               title: 'Repeating Event',
-               start: new Date(y, m, 14, 6, 0),
-               allDay: false,
-               className: 'bg-lime-lt'
-            },
-            {
-               title: 'Meeting',
-               start: new Date(y, m, 4, 10, 30),
-               allDay: false,
-               className: 'bg-green-lt'
-            },
-            {
-               title: 'Lunch',
-               start: new Date(y, m, 5, 12, 0),
-               end: new Date(y, m, 5, 14, 0),
-               allDay: false,
-               className: 'bg-red-lt'
-            },
-            {
-               title: 'LBD Launch',
-               start: new Date(y, m, 19, 12, 0),
-               allDay: true,
-               className: 'bg-azure-lt'
-            },
-            {
-               title: 'Birthday Party',
-               start: new Date(y, m, 16, 19, 0),
-               end: new Date(y, m, 16, 22, 30),
-               allDay: false,
-			      className: 'bg-orange-lt'
-            }
-         ]
-	   })).render();
-	});
-</script>
-{% endcapture_global %}
diff --git a/src/pages/_includes/ui/form/range.html b/src/pages/_includes/ui/range.html
similarity index 100%
rename from src/pages/_includes/ui/form/range.html
rename to src/pages/_includes/ui/range.html
diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
new file mode 100644
index 00000000..26b42780
--- /dev/null
+++ b/src/pages/_includes/ui/select.html
@@ -0,0 +1,42 @@
+{% assign id = include.id %}
+
+{% if id %}
+
+{% assign key = include.key | default: 'people' %}
+{% assign data = site.data.selects[key] %}
+{% assign options = data.options %}
+
+<select type="text" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
+	{% for option in options %}
+	<option value="{{ option }}">{{ option }}</option>
+	{% endfor %}
+</select>
+
+
+{% capture script %}
+<script>
+	// @formatter:off
+	document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_select = window.tabler_select || {};
+		{% endif %}
+
+		window.Choices && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new Choices(document.getElementById('select-{{ id }}'), {
+
+		}));
+
+	});
+	// @formatter:on
+</script>
+{% endcapture %}
+
+
+{% if include.show-scripts %}
+{{ script }}
+{% else %}
+{% capture_global scripts %}
+{{ script }}
+{% endcapture_global %}
+{% endif %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss
index 1563385a..7453be9f 100644
--- a/src/scss/tabler-vendors.scss
+++ b/src/scss/tabler-vendors.scss
@@ -1,6 +1,5 @@
 @import "config";
 
 @import "vendor/apexcharts";
-@import "vendor/fullcalendar";
 @import "vendor/nouislider";
 @import "vendor/litepicker";
\ No newline at end of file
diff --git a/src/scss/vendor/_choices.scss b/src/scss/vendor/_choices.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/scss/vendor/_fullcalendar.scss b/src/scss/vendor/_fullcalendar.scss
deleted file mode 100644
index 3495ad7e..00000000
--- a/src/scss/vendor/_fullcalendar.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-
-.fc-unthemed {
-  .fc-content,
-  .fc-divider,
-  .fc-list-heading td,
-  .fc-list-view,
-  .fc-popover,
-  .fc-row,
-  tbody,
-  td,
-  th,
-  thead {
-    border-color: $border-color;
-  }
-
-  .fc-toolbar {
-    h2 {
-      font-size: $h2-font-size;
-      margin: 0;
-    }
-  }
-
-  .fc-button {
-    //@include button-variant($white, $border-color, $text-muted);
-    //@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
-    //@include transition($btn-transition);
-  }
-
-  .fc-widget-header {
-    border: 0;
-  }
-
-  .fc-day-header {
-    padding-bottom: .25rem;
-    font-weight: $font-weight-bold;
-  }
-
-  &.card-calendar {
-    .fc-day-grid-container {
-      border-bottom: 0;
-      border-left: 0;
-
-      td:last-child {
-        //border-right: 0;
-      }
-
-      td:first-child {
-        //border-left: 0;
-      }
-    }
-  }
-
-  .fc-time {
-    font-weight: $font-weight-bold;
-  }
-
-  .fc-event {
-    border-color: rgba(0, 0, 0, .05);
-    color: $primary;
-    background-color: theme-color-lighter($primary);
-    padding: 0 .25rem;
-  }
-}
-- 
GitLab