From 82f958e5da60dd768055dc58bcf5865dd0423e31 Mon Sep 17 00:00:00 2001 From: Ale Gallo Date: Fri, 10 Nov 2023 16:00:59 +0100 Subject: [PATCH] Committing laravel (part 3) committing js templating files and components --- resources/js/app.js | 7 + resources/js/bootstrap.js | 41 +++ resources/js/colors.js | 24 ++ .../components/balloon-block-editor/index.js | 10 + .../js/components/balloon-editor/index.js | 10 + .../js/components/calendar/draggable/index.js | 17 + resources/js/components/calendar/index.js | 65 ++++ .../js/components/classic-editor/index.js | 10 + .../js/components/dark-mode-switcher/index.js | 17 + .../js/components/document-editor/index.js | 17 + resources/js/components/donut-chart/index.js | 44 +++ resources/js/components/dropzone/index.js | 39 +++ resources/js/components/highlight/index.js | 32 ++ .../components/horizontal-bar-chart/index.js | 88 +++++ .../js/components/inline-editor/index.js | 10 + .../js/components/leaflet-map-loader/index.js | 98 ++++++ resources/js/components/line-chart/index.js | 98 ++++++ resources/js/components/litepicker/index.js | 44 +++ resources/js/components/lucide/index.js | 10 + resources/js/components/mobile-menu/index.js | 49 +++ resources/js/components/pie-chart/index.js | 43 +++ .../js/components/preview-component/index.js | 20 ++ .../js/components/report-bar-chart-1/index.js | 85 +++++ .../js/components/report-bar-chart/index.js | 89 ++++++ .../components/report-donut-chart-1/index.js | 44 +++ .../components/report-donut-chart-2/index.js | 42 +++ .../js/components/report-donut-chart/index.js | 46 +++ .../js/components/report-line-chart/index.js | 96 ++++++ .../js/components/report-pie-chart/index.js | 45 +++ .../components/simple-line-chart-1/index.js | 77 +++++ .../components/simple-line-chart-2/index.js | 77 +++++ .../components/simple-line-chart-3/index.js | 84 +++++ .../components/simple-line-chart-4/index.js | 84 +++++ .../js/components/simple-line-chart/index.js | 71 +++++ resources/js/components/source/index.js | 18 ++ .../components/stacked-bar-chart-1/index.js | 78 +++++ .../js/components/stacked-bar-chart/index.js | 93 ++++++ resources/js/components/tiny-slider/index.js | 110 +++++++ .../js/components/tippy-content/index.js | 56 ++++ resources/js/components/tippy/index.js | 34 ++ resources/js/components/tom-select/index.js | 55 ++++ resources/js/components/top-bar/index.js | 15 + .../js/components/vertical-bar-chart/index.js | 87 +++++ resources/js/helper.js | 127 ++++++++ resources/js/layouts/side-menu/index.js | 68 ++++ resources/js/pages/calendar/index.js | 81 +++++ resources/js/pages/chat/index.js | 19 ++ resources/js/pages/login/index.js | 53 ++++ resources/js/pages/modal/index.js | 24 ++ resources/js/pages/notification/index.js | 125 ++++++++ resources/js/pages/slideover/index.js | 24 ++ resources/js/pages/tabulator/index.js | 300 ++++++++++++++++++ resources/js/pages/validation/index.js | 63 ++++ resources/js/vendor/accordion/index.js | 1 + resources/js/vendor/alert/index.js | 1 + resources/js/vendor/calendar/index.js | 2 + .../js/vendor/calendar/plugins/day-grid.js | 2 + .../js/vendor/calendar/plugins/interaction.js | 3 + resources/js/vendor/calendar/plugins/list.js | 2 + .../js/vendor/calendar/plugins/time-grid.js | 2 + resources/js/vendor/chartjs/index.js | 2 + .../js/vendor/ckeditor/balloon-block/index.js | 2 + resources/js/vendor/ckeditor/balloon/index.js | 2 + resources/js/vendor/ckeditor/classic/index.js | 2 + .../js/vendor/ckeditor/document/index.js | 2 + resources/js/vendor/ckeditor/inline/index.js | 2 + resources/js/vendor/dom/index.js | 2 + resources/js/vendor/dropdown/index.js | 1 + resources/js/vendor/dropzone/index.js | 2 + resources/js/vendor/highlight/index.js | 4 + resources/js/vendor/image-zoom/index.js | 1 + resources/js/vendor/leaflet-map/index.js | 3 + resources/js/vendor/litepicker/index.js | 2 + resources/js/vendor/lucide/index.js | 3 + resources/js/vendor/modal/index.js | 1 + resources/js/vendor/pristine/index.js | 2 + resources/js/vendor/simplebar/index.js | 2 + resources/js/vendor/svg-loader/index.js | 1 + resources/js/vendor/tab/index.js | 1 + resources/js/vendor/tabulator/index.js | 2 + resources/js/vendor/tailwind-merge/index.js | 10 + resources/js/vendor/tiny-slider/index.js | 2 + resources/js/vendor/tippy/index.js | 4 + resources/js/vendor/toastify/index.js | 2 + resources/js/vendor/tom-select/index.js | 2 + resources/js/vendor/transition/index.js | 1 + resources/js/vendor/xlsx/index.js | 2 + 87 files changed, 3138 insertions(+) create mode 100644 resources/js/app.js create mode 100644 resources/js/bootstrap.js create mode 100644 resources/js/colors.js create mode 100644 resources/js/components/balloon-block-editor/index.js create mode 100644 resources/js/components/balloon-editor/index.js create mode 100644 resources/js/components/calendar/draggable/index.js create mode 100644 resources/js/components/calendar/index.js create mode 100644 resources/js/components/classic-editor/index.js create mode 100644 resources/js/components/dark-mode-switcher/index.js create mode 100644 resources/js/components/document-editor/index.js create mode 100644 resources/js/components/donut-chart/index.js create mode 100644 resources/js/components/dropzone/index.js create mode 100644 resources/js/components/highlight/index.js create mode 100644 resources/js/components/horizontal-bar-chart/index.js create mode 100644 resources/js/components/inline-editor/index.js create mode 100644 resources/js/components/leaflet-map-loader/index.js create mode 100644 resources/js/components/line-chart/index.js create mode 100644 resources/js/components/litepicker/index.js create mode 100644 resources/js/components/lucide/index.js create mode 100644 resources/js/components/mobile-menu/index.js create mode 100644 resources/js/components/pie-chart/index.js create mode 100644 resources/js/components/preview-component/index.js create mode 100644 resources/js/components/report-bar-chart-1/index.js create mode 100644 resources/js/components/report-bar-chart/index.js create mode 100644 resources/js/components/report-donut-chart-1/index.js create mode 100644 resources/js/components/report-donut-chart-2/index.js create mode 100644 resources/js/components/report-donut-chart/index.js create mode 100644 resources/js/components/report-line-chart/index.js create mode 100644 resources/js/components/report-pie-chart/index.js create mode 100644 resources/js/components/simple-line-chart-1/index.js create mode 100644 resources/js/components/simple-line-chart-2/index.js create mode 100644 resources/js/components/simple-line-chart-3/index.js create mode 100644 resources/js/components/simple-line-chart-4/index.js create mode 100644 resources/js/components/simple-line-chart/index.js create mode 100644 resources/js/components/source/index.js create mode 100644 resources/js/components/stacked-bar-chart-1/index.js create mode 100644 resources/js/components/stacked-bar-chart/index.js create mode 100644 resources/js/components/tiny-slider/index.js create mode 100644 resources/js/components/tippy-content/index.js create mode 100644 resources/js/components/tippy/index.js create mode 100644 resources/js/components/tom-select/index.js create mode 100644 resources/js/components/top-bar/index.js create mode 100644 resources/js/components/vertical-bar-chart/index.js create mode 100644 resources/js/helper.js create mode 100644 resources/js/layouts/side-menu/index.js create mode 100644 resources/js/pages/calendar/index.js create mode 100644 resources/js/pages/chat/index.js create mode 100644 resources/js/pages/login/index.js create mode 100644 resources/js/pages/modal/index.js create mode 100644 resources/js/pages/notification/index.js create mode 100644 resources/js/pages/slideover/index.js create mode 100644 resources/js/pages/tabulator/index.js create mode 100644 resources/js/pages/validation/index.js create mode 100644 resources/js/vendor/accordion/index.js create mode 100644 resources/js/vendor/alert/index.js create mode 100644 resources/js/vendor/calendar/index.js create mode 100644 resources/js/vendor/calendar/plugins/day-grid.js create mode 100644 resources/js/vendor/calendar/plugins/interaction.js create mode 100644 resources/js/vendor/calendar/plugins/list.js create mode 100644 resources/js/vendor/calendar/plugins/time-grid.js create mode 100644 resources/js/vendor/chartjs/index.js create mode 100644 resources/js/vendor/ckeditor/balloon-block/index.js create mode 100644 resources/js/vendor/ckeditor/balloon/index.js create mode 100644 resources/js/vendor/ckeditor/classic/index.js create mode 100644 resources/js/vendor/ckeditor/document/index.js create mode 100644 resources/js/vendor/ckeditor/inline/index.js create mode 100644 resources/js/vendor/dom/index.js create mode 100644 resources/js/vendor/dropdown/index.js create mode 100644 resources/js/vendor/dropzone/index.js create mode 100644 resources/js/vendor/highlight/index.js create mode 100644 resources/js/vendor/image-zoom/index.js create mode 100644 resources/js/vendor/leaflet-map/index.js create mode 100644 resources/js/vendor/litepicker/index.js create mode 100644 resources/js/vendor/lucide/index.js create mode 100644 resources/js/vendor/modal/index.js create mode 100644 resources/js/vendor/pristine/index.js create mode 100644 resources/js/vendor/simplebar/index.js create mode 100644 resources/js/vendor/svg-loader/index.js create mode 100644 resources/js/vendor/tab/index.js create mode 100644 resources/js/vendor/tabulator/index.js create mode 100644 resources/js/vendor/tailwind-merge/index.js create mode 100644 resources/js/vendor/tiny-slider/index.js create mode 100644 resources/js/vendor/tippy/index.js create mode 100644 resources/js/vendor/toastify/index.js create mode 100644 resources/js/vendor/tom-select/index.js create mode 100644 resources/js/vendor/transition/index.js create mode 100644 resources/js/vendor/xlsx/index.js diff --git a/resources/js/app.js b/resources/js/app.js new file mode 100644 index 0000000..92e351e --- /dev/null +++ b/resources/js/app.js @@ -0,0 +1,7 @@ +import "./bootstrap"; +import "./vendor/dom"; +import "./vendor/tailwind-merge"; +import "./vendor/svg-loader"; + +// Load static files +import.meta.glob(["../images/**"]); \ No newline at end of file diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js new file mode 100644 index 0000000..be97cde --- /dev/null +++ b/resources/js/bootstrap.js @@ -0,0 +1,41 @@ +import _ from "lodash"; +import helper from "./helper"; +import { getColor } from "./colors"; +import dayjs from "dayjs"; +window._ = _; +window.helper = helper; +window.getColor = getColor; +window.dayjs = dayjs; + +/** + * We'll load the axios HTTP library which allows us to easily issue requests + * to our Laravel back-end. This library automatically handles sending the + * CSRF token as a header based on the value of the "XSRF" token cookie. + */ + +import axios from "axios"; +window.axios = axios; + +window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; + +/** + * Echo exposes an expressive API for subscribing to channels and listening + * for events that are broadcast by Laravel. Echo and event broadcasting + * allows your team to easily build robust real-time web applications. + */ + +// import Echo from 'laravel-echo'; + +// import Pusher from 'pusher-js'; +// window.Pusher = Pusher; + +// window.Echo = new Echo({ +// broadcaster: 'pusher', +// key: import.meta.env.VITE_PUSHER_APP_KEY, +// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1', +// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`, +// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, +// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, +// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https', +// enabledTransports: ['ws', 'wss'], +// }); diff --git a/resources/js/colors.js b/resources/js/colors.js new file mode 100644 index 0000000..01fb7e4 --- /dev/null +++ b/resources/js/colors.js @@ -0,0 +1,24 @@ +import helper from "./helper"; +import resolveConfig from "tailwindcss/resolveConfig"; +import tailwindConfig from "tailwind-config"; +import flatten from "flat"; + +const twConfig = resolveConfig(tailwindConfig); +const colors = twConfig.theme?.colors; + +function getColor(colorKey, opacity = 1) { + const flattenColors = flatten(colors); + + if (flattenColors[colorKey].search("var") === -1) { + return `rgb(${helper.toRGB(flattenColors[colorKey])} / ${opacity})`; + } else { + const cssVariableName = `--color-${ + flattenColors[colorKey].split("--color-")[1].split(")")[0] + }`; + return `rgb(${getComputedStyle(document.body).getPropertyValue( + cssVariableName + )} / ${opacity})`; + } +} + +export { getColor }; diff --git a/resources/js/components/balloon-block-editor/index.js b/resources/js/components/balloon-block-editor/index.js new file mode 100644 index 0000000..bdc6291 --- /dev/null +++ b/resources/js/components/balloon-block-editor/index.js @@ -0,0 +1,10 @@ +(function () { + "use strict"; + + $(".editor").each(function () { + const el = this; + BalloonBlockEditor.create(el).catch((error) => { + console.error(error); + }); + }); +})(); diff --git a/resources/js/components/balloon-editor/index.js b/resources/js/components/balloon-editor/index.js new file mode 100644 index 0000000..c56f0cc --- /dev/null +++ b/resources/js/components/balloon-editor/index.js @@ -0,0 +1,10 @@ +(function () { + "use strict"; + + $(".editor").each(function () { + const el = this; + BalloonEditor.create(el).catch((error) => { + console.error(error); + }); + }); +})(); diff --git a/resources/js/components/calendar/draggable/index.js b/resources/js/components/calendar/draggable/index.js new file mode 100644 index 0000000..3f0c4f5 --- /dev/null +++ b/resources/js/components/calendar/draggable/index.js @@ -0,0 +1,17 @@ +(function () { + "use strict"; + + $(".full-calendar-draggable").each(function () { + new Draggable(this, { + itemSelector: ".event", + eventData: function (eventEl) { + return { + title: $(eventEl).find(".event__title").html(), + duration: { + days: parseInt($(eventEl).find(".event__days").text()), + }, + }; + }, + }); + }); +})(); diff --git a/resources/js/components/calendar/index.js b/resources/js/components/calendar/index.js new file mode 100644 index 0000000..5218825 --- /dev/null +++ b/resources/js/components/calendar/index.js @@ -0,0 +1,65 @@ +(function () { + "use strict"; + + $(".full-calendar").each(function () { + let calendar = new Calendar(this, { + plugins: [ + interactionPlugin, + dayGridPlugin, + timeGridPlugin, + listPlugin, + ], + droppable: true, + headerToolbar: { + left: "prev,next today", + center: "title", + right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", + }, + initialDate: "2021-01-12", + navLinks: true, + editable: true, + dayMaxEvents: true, + events: [ + { + title: "Vue Vixens Day", + start: "2021-01-05", + end: "2021-01-08", + }, + { + title: "VueConfUS", + start: "2021-01-11", + end: "2021-01-15", + }, + { + title: "VueJS Amsterdam", + start: "2021-01-17", + end: "2021-01-21", + }, + { + title: "Vue Fes Japan 2019", + start: "2021-01-21", + end: "2021-01-24", + }, + { + title: "Laracon 2021", + start: "2021-01-24", + end: "2021-01-27", + }, + ], + drop: function (info) { + if ( + $("#checkbox-events").length && + $("#checkbox-events")[0].checked + ) { + $(info.draggedEl).parent().remove(); + + if ($("#calendar-events").children().length == 1) { + $("#calendar-no-events").removeClass("hidden"); + } + } + }, + }); + + calendar.render(); + }); +})(); diff --git a/resources/js/components/classic-editor/index.js b/resources/js/components/classic-editor/index.js new file mode 100644 index 0000000..1d3baad --- /dev/null +++ b/resources/js/components/classic-editor/index.js @@ -0,0 +1,10 @@ +(function () { + "use strict"; + + $(".editor").each(function () { + const el = this; + ClassicEditor.create(el).catch((error) => { + console.error(error); + }); + }); +})(); diff --git a/resources/js/components/dark-mode-switcher/index.js b/resources/js/components/dark-mode-switcher/index.js new file mode 100644 index 0000000..9b5d06a --- /dev/null +++ b/resources/js/components/dark-mode-switcher/index.js @@ -0,0 +1,17 @@ +(function () { + "use strict"; + + // Dark mode switcher + $(".dark-mode-switcher").on("click", function () { + if ($(this).hasClass("dark-mode-switcher--active")) { + $(this).removeClass("dark-mode-switcher--active"); + } else { + $(this).addClass("dark-mode-switcher--active"); + } + + setTimeout(() => { + const link = $(".dark-mode-switcher").data("url"); + window.location.href = link; + }, 500); + }); +})(); diff --git a/resources/js/components/document-editor/index.js b/resources/js/components/document-editor/index.js new file mode 100644 index 0000000..5ee7abb --- /dev/null +++ b/resources/js/components/document-editor/index.js @@ -0,0 +1,17 @@ +(function () { + "use strict"; + + $(".editor").each(function () { + const el = this; + DocumentEditor.create($(el).find(".document-editor__editable")[0]) + .then((editor) => { + $(el) + .closest(".editor") + .find(".document-editor__toolbar") + .append(editor.ui.view.toolbar.element); + }) + .catch((error) => { + console.error(error); + }); + }); +})(); diff --git a/resources/js/components/donut-chart/index.js b/resources/js/components/donut-chart/index.js new file mode 100644 index 0000000..b67dbef --- /dev/null +++ b/resources/js/components/donut-chart/index.js @@ -0,0 +1,44 @@ +(function () { + "use strict"; + + // Chart + if ($(".donut-chart").length) { + let ctx = $(".donut-chart")[0].getContext("2d"); + let myDoughnutChart = new Chart(ctx, { + type: "doughnut", + data: { + labels: ["Html", "Vuejs", "Laravel"], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 5, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + cutout: "80%", + }, + }); + } +})(); diff --git a/resources/js/components/dropzone/index.js b/resources/js/components/dropzone/index.js new file mode 100644 index 0000000..c1e4b45 --- /dev/null +++ b/resources/js/components/dropzone/index.js @@ -0,0 +1,39 @@ +(function () { + "use strict"; + + // Dropzone + Dropzone.autoDiscover = false; + $(".dropzone").each(function () { + let options = { + accept: (file, done) => { + console.log("Uploaded"); + done(); + }, + }; + + if ($(this).data("single")) { + options.maxFiles = 1; + } + + if ($(this).data("file-types")) { + options.accept = (file, done) => { + if ( + $(this).data("file-types").split("|").indexOf(file.type) === + -1 + ) { + alert("Error! Files of this type are not accepted"); + done("Error! Files of this type are not accepted"); + } else { + console.log("Uploaded"); + done(); + } + }; + } + + let dz = new Dropzone(this, options); + + dz.on("maxfilesexceeded", (file) => { + alert("No more files please!"); + }); + }); +})(); diff --git a/resources/js/components/highlight/index.js b/resources/js/components/highlight/index.js new file mode 100644 index 0000000..946729e --- /dev/null +++ b/resources/js/components/highlight/index.js @@ -0,0 +1,32 @@ +(function () { + "use strict"; + + // Highlight code + $(".highlight").each(function () { + let source = $(this).find("code").html(); + + // First replace + let replace = helper.replaceAll(source, "HTMLOpenTag", "<"); + replace = helper.replaceAll(replace, "HTMLCloseTag", ">"); + + // Save for copy code function + let originalSource = $( + '' + ).val(replace); + $(this).append(originalSource); + + // Beautify code + if ($(this).find("code").hasClass("javascript")) { + replace = jsBeautify(replace); + } else { + replace = jsBeautify.html(replace); + } + + // Format for highlight.js + replace = helper.replaceAll(replace, "<", "<"); + replace = helper.replaceAll(replace, ">", ">"); + $(this).find("code").html(replace); + }); + + hljs.highlightAll(); +})(); diff --git a/resources/js/components/horizontal-bar-chart/index.js b/resources/js/components/horizontal-bar-chart/index.js new file mode 100644 index 0000000..8c34ea9 --- /dev/null +++ b/resources/js/components/horizontal-bar-chart/index.js @@ -0,0 +1,88 @@ +(function () { + "use strict"; + + // Chart + if ($(".horizontal-bar-chart").length) { + let ctx = $(".horizontal-bar-chart")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "bar", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + ], + datasets: [ + { + label: "Html Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + data: [0, 200, 250, 200, 500, 450, 850, 1050], + backgroundColor: getColor("primary"), + }, + { + label: "VueJs Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + data: [0, 300, 400, 560, 320, 600, 720, 850], + backgroundColor: $("html").hasClass("dark") + ? getColor("darkmode.200") + : getColor("slate.300"), + }, + ], + }, + options: { + indexAxis: "y", + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + scales: { + x: { + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/inline-editor/index.js b/resources/js/components/inline-editor/index.js new file mode 100644 index 0000000..e179306 --- /dev/null +++ b/resources/js/components/inline-editor/index.js @@ -0,0 +1,10 @@ +(function () { + "use strict"; + + $(".editor").each(function () { + const el = this; + InlineEditor.create(el).catch((error) => { + console.error(error); + }); + }); +})(); diff --git a/resources/js/components/leaflet-map-loader/index.js b/resources/js/components/leaflet-map-loader/index.js new file mode 100644 index 0000000..13d5727 --- /dev/null +++ b/resources/js/components/leaflet-map-loader/index.js @@ -0,0 +1,98 @@ +import locations from "../../../json/location.json" + +(function () { + "use strict"; + + $(".leaflet").each(async function () { + const map = L.map(this, { + center: [$(this).data("lat"), $(this).data("long")], + zoom: 9, + }); + + if (map) { + const apiKey = $(this).data("api-key"); + + L.tileLayer( + `https://tile.thunderforest.com/atlas/{z}/{x}/{y}@2x.png?apikey=${apiKey}`, + { + attribution: + "Map data © OpenStreetMap contributors, Tiles © Thunderforest", + } + ).addTo(map); + + const markers = L.markerClusterGroup({ + maxClusterRadius: 30, + iconCreateFunction: function (cluster) { + const color = $("html").hasClass("dark") + ? getColor("darkmode.100", 0.6) + : getColor("primary", 0.8); + const mapMarkerRegionSvg = + window.btoa(` + + + + + + + + + + + + + + + + + + + + `); + + return L.divIcon({ + html: `
+
${cluster.getChildCount()}
+ +
`, + className: "", + iconSize: L.point(42, 42), + iconAnchor: L.point(20, 45), + }); + }, + spiderfyOnMaxZoom: false, + showCoverageOnHover: false, + }); + + map.addLayer(markers); + + const color = $("html").hasClass("dark") + ? getColor("darkmode.100") + : getColor("primary"); + const mapMarkerSvg = + window.btoa(` + + + + + + `); + + locations.map(function (markerElem) { + const marker = L.marker( + { + lat: parseFloat(markerElem.latitude), + lng: parseFloat(markerElem.longitude), + }, + { + title: markerElem.name, + icon: L.icon({ + iconUrl: `data:image/svg+xml;base64,${mapMarkerSvg}`, + iconAnchor: L.point(10, 35), + }), + } + ); + markers.addLayer(marker); + }); + } + }); +})(); diff --git a/resources/js/components/line-chart/index.js b/resources/js/components/line-chart/index.js new file mode 100644 index 0000000..872c6f9 --- /dev/null +++ b/resources/js/components/line-chart/index.js @@ -0,0 +1,98 @@ +(function () { + "use strict"; + + // Chart + if ($(".line-chart").length) { + let ctx = $(".line-chart")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "Html Template", + data: [ + 0, 200, 250, 200, 500, 450, 850, 1050, 950, 1100, + 900, 1200, + ], + borderWidth: 2, + borderColor: getColor("primary"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + { + label: "VueJs Template", + data: [ + 0, 300, 400, 560, 320, 600, 720, 850, 690, 805, + 1200, 1010, + ], + borderWidth: 2, + borderDash: [2, 2], + borderColor: $("html").hasClass("dark") + ? getColor("slate.400", 0.6) + : getColor("slate.400"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + scales: { + x: { + ticks: { + font: { + size: "12", + }, + font: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/litepicker/index.js b/resources/js/components/litepicker/index.js new file mode 100644 index 0000000..7acb2dd --- /dev/null +++ b/resources/js/components/litepicker/index.js @@ -0,0 +1,44 @@ +(function () { + "use strict"; + + // Litepicker + $(".datepicker").each(function () { + let options = { + autoApply: false, + singleMode: false, + numberOfColumns: 2, + numberOfMonths: 2, + showWeekNumbers: true, + format: "D MMM, YYYY", + dropdowns: { + minYear: 1990, + maxYear: null, + months: true, + years: true, + }, + }; + + if ($(this).data("single-mode")) { + options.singleMode = true; + options.numberOfColumns = 1; + options.numberOfMonths = 1; + } + + if ($(this).data("format")) { + options.format = $(this).data("format"); + } + + if (!$(this).val()) { + let date = dayjs().format(options.format); + date += !options.singleMode + ? " - " + dayjs().add(1, "month").format(options.format) + : ""; + $(this).val(date); + } + + new Litepicker({ + element: this, + ...options, + }); + }); +})(); diff --git a/resources/js/components/lucide/index.js b/resources/js/components/lucide/index.js new file mode 100644 index 0000000..1dd47c1 --- /dev/null +++ b/resources/js/components/lucide/index.js @@ -0,0 +1,10 @@ +(function () { + "use strict"; + + // Lucide Icons + createIcons({ + icons, + "stroke-width": 1.5, + nameAttr: "data-lucide", + }); +})(); diff --git a/resources/js/components/mobile-menu/index.js b/resources/js/components/mobile-menu/index.js new file mode 100644 index 0000000..b7dbb34 --- /dev/null +++ b/resources/js/components/mobile-menu/index.js @@ -0,0 +1,49 @@ +(function () { + "use strict"; + + // Scrollbar + if ($(".mobile-menu .scrollable").length) { + new SimpleBar($(".mobile-menu .scrollable")[0]); + } + + // Mobile Menu + $(".mobile-menu-toggler").on("click", function () { + if ($(".mobile-menu").hasClass("mobile-menu--active")) { + $(".mobile-menu").removeClass("mobile-menu--active"); + } else { + $(".mobile-menu").addClass("mobile-menu--active"); + } + }); + + $(".mobile-menu") + .find(".menu") + .on("click", function () { + if ($(this).parent().find("ul").length) { + if ( + $(this).parent().find("ul").first()[0].offsetParent !== null + ) { + $(this) + .find(".menu__sub-icon") + .removeClass("transform rotate-180"); + $(this) + .parent() + .find("ul") + .first() + .slideUp(300, function () { + $(this).removeClass("menu__sub-open"); + }); + } else { + $(this) + .find(".menu__sub-icon") + .addClass("transform rotate-180"); + $(this) + .parent() + .find("ul") + .first() + .slideDown(300, function () { + $(this).addClass("menu__sub-open"); + }); + } + } + }); +})(); diff --git a/resources/js/components/pie-chart/index.js b/resources/js/components/pie-chart/index.js new file mode 100644 index 0000000..72c8693 --- /dev/null +++ b/resources/js/components/pie-chart/index.js @@ -0,0 +1,43 @@ +(function () { + "use strict"; + + // Chart + if ($(".pie-chart").length) { + let ctx = $(".pie-chart")[0].getContext("2d"); + let myPieChart = new Chart(ctx, { + type: "pie", + data: { + labels: ["Html", "Vuejs", "Laravel"], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 5, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/preview-component/index.js b/resources/js/components/preview-component/index.js new file mode 100644 index 0000000..2160d75 --- /dev/null +++ b/resources/js/components/preview-component/index.js @@ -0,0 +1,20 @@ +(function () { + "use strict"; + + // Show code or preview + $(".preview-component").each(function () { + const previewComponent = this; + $(this) + .find('input[type="checkbox"]') + .first() + .on("click", function () { + if ($(this).is(":checked")) { + $(previewComponent).find(".preview").hide(); + $(previewComponent).find(".source").fadeIn(200); + } else { + $(previewComponent).find(".preview").fadeIn(200); + $(previewComponent).find(".source").hide(); + } + }); + }); +})(); diff --git a/resources/js/components/report-bar-chart-1/index.js b/resources/js/components/report-bar-chart-1/index.js new file mode 100644 index 0000000..1776fe2 --- /dev/null +++ b/resources/js/components/report-bar-chart-1/index.js @@ -0,0 +1,85 @@ +(function () { + "use strict"; + + // Chart + if ($(".report-bar-chart-1").length) { + let ctx = $(".report-bar-chart-1")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "bar", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "Html Template", + barThickness: 8, + maxBarThickness: 6, + data: [ + 60, 150, 30, 200, 180, 50, 180, 120, 230, 180, 250, + 270, + ], + backgroundColor: getColor("primary", 0.9), + }, + { + label: "VueJs Template", + barThickness: 8, + maxBarThickness: 6, + data: [ + 50, 135, 40, 180, 190, 60, 150, 90, 250, 170, 240, + 250, + ], + backgroundColor: $("html").hasClass("dark") + ? getColor("darkmode.400") + : getColor("slate.300"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + font: { + size: 11, + }, + color: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("darkmode.300", 0.8) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/report-bar-chart/index.js b/resources/js/components/report-bar-chart/index.js new file mode 100644 index 0000000..e048401 --- /dev/null +++ b/resources/js/components/report-bar-chart/index.js @@ -0,0 +1,89 @@ +(function () { + "use strict"; + + // Chart + if ($(".report-bar-chart").length) { + // Fake visitor data + let reportBarChartData = new Array(40).fill(0).map((data, key) => { + if (key % 3 == 0 || key % 5 == 0) { + return Math.ceil(Math.random() * (0 - 20) + 20); + } else { + return Math.ceil(Math.random() * (0 - 7) + 7); + } + }); + + // Fake visitor bar color + let reportBarChartColor = reportBarChartData.map((data) => { + if (data >= 8 && data <= 14) { + return $("html").hasClass("dark") + ? "#2E51BBA6" + : getColor("primary", 0.65); + } else if (data >= 15) { + return $("html").hasClass("dark") + ? "#2E51BB" + : getColor("primary"); + } + + return $("html").hasClass("dark") + ? "#2E51BB59" + : getColor("primary", 0.35); + }); + + let ctx = $(".report-bar-chart")[0].getContext("2d"); + let myBarChart = new Chart(ctx, { + type: "bar", + data: { + labels: reportBarChartData, + datasets: [ + { + label: "Html Template", + barThickness: 6, + data: reportBarChartData, + backgroundColor: reportBarChartColor, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + + setInterval(() => { + // Swap visitor data + let newData = reportBarChartData[0]; + reportBarChartData.shift(); + reportBarChartData.push(newData); + + // Swap visitor bar color + let newColor = reportBarChartColor[0]; + reportBarChartColor.shift(); + reportBarChartColor.push(newColor); + + myBarChart.update(); + }, 1000); + } +})(); diff --git a/resources/js/components/report-donut-chart-1/index.js b/resources/js/components/report-donut-chart-1/index.js new file mode 100644 index 0000000..9988c44 --- /dev/null +++ b/resources/js/components/report-donut-chart-1/index.js @@ -0,0 +1,44 @@ +(function () { + "use strict"; + + // Chart + if ($(".report-donut-chart-1").length) { + $(".report-donut-chart-1").each(function () { + let ctx = $(this)[0].getContext("2d"); + let myDoughnutChart = new Chart(ctx, { + type: "doughnut", + data: { + labels: ["Yellow", "Dark"], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 2, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + cutout: "83%", + }, + }); + }); + } +})(); diff --git a/resources/js/components/report-donut-chart-2/index.js b/resources/js/components/report-donut-chart-2/index.js new file mode 100644 index 0000000..8084251 --- /dev/null +++ b/resources/js/components/report-donut-chart-2/index.js @@ -0,0 +1,42 @@ +(function () { + "use strict"; + + // Chart + if ($(".report-donut-chart-2").length) { + let ctx = $(".report-donut-chart-2")[0].getContext("2d"); + let myDoughnutChart = new Chart(ctx, { + type: "doughnut", + data: { + labels: ["Yellow", "Dark"], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 2, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + cutout: "83%", + }, + }); + } +})(); diff --git a/resources/js/components/report-donut-chart/index.js b/resources/js/components/report-donut-chart/index.js new file mode 100644 index 0000000..964949a --- /dev/null +++ b/resources/js/components/report-donut-chart/index.js @@ -0,0 +1,46 @@ +(function () { + "use stirct"; + + // Chart + if ($("#report-donut-chart").length) { + let ctx = $("#report-donut-chart")[0].getContext("2d"); + let myDoughnutChart = new Chart(ctx, { + type: "doughnut", + data: { + labels: [ + "31 - 50 Years old", + ">= 50 Years old", + "17 - 30 Years old", + ], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 5, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + cutout: "80%", + }, + }); + } +})(); diff --git a/resources/js/components/report-line-chart/index.js b/resources/js/components/report-line-chart/index.js new file mode 100644 index 0000000..65db3f2 --- /dev/null +++ b/resources/js/components/report-line-chart/index.js @@ -0,0 +1,96 @@ +(function () { + "use strict"; + + // Chart + if ($("#report-line-chart").length) { + let ctx = $("#report-line-chart")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: [ + 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100, + 900, 1200, + ], + borderWidth: 2, + borderColor: getColor("primary", 0.8), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + { + label: "# of Votes", + data: [ + 0, 300, 400, 560, 320, 600, 720, 850, 690, 805, + 1200, 1010, + ], + borderWidth: 2, + borderDash: [2, 2], + borderColor: $("html").hasClass("dark") + ? getColor("slate.400", 0.6) + : getColor("slate.400"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + font: { + size: 12, + }, + color: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + font: { + size: 12, + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/report-pie-chart/index.js b/resources/js/components/report-pie-chart/index.js new file mode 100644 index 0000000..f3ae3a0 --- /dev/null +++ b/resources/js/components/report-pie-chart/index.js @@ -0,0 +1,45 @@ +(function () { + "use strict"; + + // Chart + if ($("#report-pie-chart").length) { + let ctx = $("#report-pie-chart")[0].getContext("2d"); + let myPieChart = new Chart(ctx, { + type: "pie", + data: { + labels: [ + "31 - 50 Years old", + ">= 50 Years old", + "17 - 30 Years old", + ], + datasets: [ + { + data: [15, 10, 65], + backgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + hoverBackgroundColor: [ + getColor("pending", 0.9), + getColor("warning", 0.9), + getColor("primary", 0.9), + ], + borderWidth: 5, + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.700") + : getColor("white"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/simple-line-chart-1/index.js b/resources/js/components/simple-line-chart-1/index.js new file mode 100644 index 0000000..b360b23 --- /dev/null +++ b/resources/js/components/simple-line-chart-1/index.js @@ -0,0 +1,77 @@ +(function () { + "use strict"; + + // Chart + if ($(".simple-line-chart-1").length) { + $(".simple-line-chart-1").each(function () { + let ctx = $(this)[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: + $(this).data("random") !== undefined + ? helper.randomNumbers(0, 5, 12) + : [ + 0, 200, 250, 200, 500, 450, 850, 1050, + 950, 1100, 900, 1200, + ], + borderWidth: 2, + borderColor: + $(this).data("line-color") !== undefined + ? $(this).data("line-color") + : getColor("primary", 0.8), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + }); + } +})(); diff --git a/resources/js/components/simple-line-chart-2/index.js b/resources/js/components/simple-line-chart-2/index.js new file mode 100644 index 0000000..b66a5bb --- /dev/null +++ b/resources/js/components/simple-line-chart-2/index.js @@ -0,0 +1,77 @@ +(function () { + "use strict"; + + // Chart + if ($(".simple-line-chart-2").length) { + $(".simple-line-chart-2").each(function () { + let ctx = $(this)[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: + $(this).data("random") !== undefined + ? helper.randomNumbers(0, 5, 12) + : [ + 0, 300, 400, 560, 320, 600, 720, 850, + 690, 805, 1200, 1010, + ], + borderWidth: 2, + borderDash: [2, 2], + borderColor: + $(this).data("line-color") !== undefined + ? $(this).data("line-color") + : getColor("slate.300"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + }); + } +})(); diff --git a/resources/js/components/simple-line-chart-3/index.js b/resources/js/components/simple-line-chart-3/index.js new file mode 100644 index 0000000..0c36e9d --- /dev/null +++ b/resources/js/components/simple-line-chart-3/index.js @@ -0,0 +1,84 @@ +(function () { + "use strict"; + + // Chart + if ($(".simple-line-chart-3").length) { + let ctx = $(".simple-line-chart-3")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: [ + 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100, + 900, 1200, + ], + borderWidth: 2, + borderColor: getColor("primary", 0.8), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + { + label: "# of Votes", + data: [ + 0, 300, 400, 560, 320, 600, 720, 850, 690, 805, + 1200, 1010, + ], + borderWidth: 2, + borderDash: [2, 2], + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.100") + : getColor("slate.400"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/simple-line-chart-4/index.js b/resources/js/components/simple-line-chart-4/index.js new file mode 100644 index 0000000..a7a627f --- /dev/null +++ b/resources/js/components/simple-line-chart-4/index.js @@ -0,0 +1,84 @@ +(function () { + "use strict"; + + // Chart + if ($(".simple-line-chart-4").length) { + let ctx = $(".simple-line-chart-4")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: [ + 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100, + 900, 1200, + ], + borderWidth: 2, + borderColor: getColor("primary", 0.8), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + { + label: "# of Votes", + data: [ + 0, 300, 400, 560, 320, 600, 720, 850, 690, 805, + 1200, 1010, + ], + borderWidth: 2, + borderDash: [2, 2], + borderColor: $("html").hasClass("dark") + ? getColor("darkmode.100") + : getColor("slate.400"), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/simple-line-chart/index.js b/resources/js/components/simple-line-chart/index.js new file mode 100644 index 0000000..61419a1 --- /dev/null +++ b/resources/js/components/simple-line-chart/index.js @@ -0,0 +1,71 @@ +(function () { + "use strict"; + + // Chart + if ($(".simple-line-chart").length) { + $(".simple-line-chart").each(function () { + let ctx = $(this)[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "# of Votes", + data: helper.randomNumbers(0, 5, 12), + borderWidth: 2, + borderColor: + $(this).data("line-color") !== undefined + ? $(this).data("line-color") + : getColor("primary", 0.8), + backgroundColor: "transparent", + pointBorderColor: "transparent", + tension: 0.4, + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + display: false, + }, + grid: { + display: false, + drawBorder: false, + }, + }, + }, + }, + }); + }); + } +})(); diff --git a/resources/js/components/source/index.js b/resources/js/components/source/index.js new file mode 100644 index 0000000..18a94ea --- /dev/null +++ b/resources/js/components/source/index.js @@ -0,0 +1,18 @@ +(function () { + "use strict"; + + // Copy original code + $("body").on("click", ".copy-code", function () { + const content = $(this).html(); + const self = this; + $(self).html(content.replace("Copy example code", "Copied!")); + setTimeout(() => { + $(self).html(content); + }, 1500); + + const highlight = $(this).closest(".highlight"); + $(highlight).find("textarea")[0].select(); + $(highlight).find("textarea")[0].setSelectionRange(0, 99999); + document.execCommand("copy"); + }); +})(); diff --git a/resources/js/components/stacked-bar-chart-1/index.js b/resources/js/components/stacked-bar-chart-1/index.js new file mode 100644 index 0000000..61fc8f3 --- /dev/null +++ b/resources/js/components/stacked-bar-chart-1/index.js @@ -0,0 +1,78 @@ +(function () { + "use strict"; + + // Chart + if ($(".stacked-bar-chart-1").length) { + let ctx = $(".stacked-bar-chart-1")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "bar", + data: { + labels: [...Array(16).keys()], + datasets: [ + { + label: "Html Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + backgroundColor: getColor("primary", 0.8), + data: helper.randomNumbers(-100, 100, 16), + }, + { + label: "VueJs Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + backgroundColor: $("html").hasClass("dark") + ? getColor("darkmode.200") + : getColor("slate.300"), + data: helper.randomNumbers(-100, 100, 16), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + stacked: true, + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + stacked: true, + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/stacked-bar-chart/index.js b/resources/js/components/stacked-bar-chart/index.js new file mode 100644 index 0000000..6ed6632 --- /dev/null +++ b/resources/js/components/stacked-bar-chart/index.js @@ -0,0 +1,93 @@ +(function () { + "use strict"; + + // Chart + if ($(".stacked-bar-chart").length) { + let ctx = $(".stacked-bar-chart")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "bar", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + datasets: [ + { + label: "Html Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + backgroundColor: getColor("primary"), + data: helper.randomNumbers(-100, 100, 12), + }, + { + label: "VueJs Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + backgroundColor: $("html").hasClass("dark") + ? getColor("darkmode.200") + : getColor("slate.300"), + data: helper.randomNumbers(-100, 100, 12), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + scales: { + x: { + stacked: true, + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + stacked: true, + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/components/tiny-slider/index.js b/resources/js/components/tiny-slider/index.js new file mode 100644 index 0000000..fc8737c --- /dev/null +++ b/resources/js/components/tiny-slider/index.js @@ -0,0 +1,110 @@ +(function () { + "use strict"; + + const defaultConfig = { + slideBy: "page", + mouseDrag: true, + autoplay: true, + controls: false, + nav: false, + speed: 500, + }; + + const singleItemConfig = { + slideBy: "page", + mouseDrag: true, + autoplay: false, + controls: true, + nav: false, + speed: 500, + }; + + const multipleItemsConfig = { + slideBy: "page", + mouseDrag: true, + autoplay: false, + controls: true, + items: 1, + nav: false, + speed: 500, + responsive: { + 600: { + items: 3, + }, + 480: { + items: 2, + }, + }, + }; + + const responsiveConfig = { + slideBy: "page", + mouseDrag: true, + autoplay: false, + controls: true, + items: 1, + nav: true, + speed: 500, + responsive: { + 600: { + items: 3, + }, + 480: { + items: 2, + }, + }, + }; + + const centerModeConfig = { + mouseDrag: true, + autoplay: false, + controls: true, + center: true, + items: 1, + nav: false, + speed: 500, + responsive: { + 600: { + items: 2, + }, + }, + }; + + const fadeConfig = { + mode: "gallery", + slideBy: "page", + mouseDrag: true, + autoplay: true, + controls: true, + nav: true, + speed: 500, + }; + + // Tiny Slider + if ($(".tiny-slider").length) { + $(".tiny-slider").each(function () { + const config = $(this).data("config"); + this.tns = tns({ + container: this, + ...(config === undefined || config === "" ? defaultConfig : {}), + ...(config === "single-item" ? singleItemConfig : {}), + ...(config === "multiple-items" ? multipleItemsConfig : {}), + ...(config === "responsive" ? responsiveConfig : {}), + ...(config === "center-mode" ? centerModeConfig : {}), + ...(config === "fade" ? fadeConfig : {}), + }); + }); + } + + if ($(".tiny-slider-navigator").length) { + $(".tiny-slider-navigator").each(function () { + $(this).on("click", function () { + if ($(this).data("target") == "prev") { + $("#" + $(this).data("carousel"))[0].tns.goTo("prev"); + } else { + $("#" + $(this).data("carousel"))[0].tns.goTo("next"); + } + }); + }); + } +})(); diff --git a/resources/js/components/tippy-content/index.js b/resources/js/components/tippy-content/index.js new file mode 100644 index 0000000..48978ea --- /dev/null +++ b/resources/js/components/tippy-content/index.js @@ -0,0 +1,56 @@ +(function () { + "use strict"; + + // Tooltips + $(".tippy-content").each(function () { + let options = {}; + + if ($(this).data("trigger") !== undefined) { + options.trigger = $(this).data("trigger"); + } + + if ($(this).data("placement") !== undefined) { + options.placement = $(this).data("placement"); + } + + if ($(this).data("theme") !== undefined) { + options.theme = $(this).data("theme"); + } + + const initTippyContent = () => { + if ( + !$(this).find("canvas").hasClass("chart") || + ($(this).find("canvas").hasClass("chart") && + $(this).find("canvas").attr("style") !== undefined) + ) { + tippy(`[data-tooltip="${$(this).attr("id")}"]`, { + plugins: [animateFillPlugin], + content: $(this)[0], + allowHTML: true, + arrow: roundArrow, + popperOptions: { + modifiers: [ + { + name: "preventOverflow", + options: { + rootBoundary: "viewport", + }, + }, + ], + }, + animateFill: false, + animation: "shift-away", + theme: "light", + trigger: "click", + ...options, + }); + } else { + setTimeout(() => { + initTippyContent(); + }, 500); + } + }; + + initTippyContent(); + }); +})(); diff --git a/resources/js/components/tippy/index.js b/resources/js/components/tippy/index.js new file mode 100644 index 0000000..73e31da --- /dev/null +++ b/resources/js/components/tippy/index.js @@ -0,0 +1,34 @@ +(function () { + "use strict"; + + // Tooltips + $(".tooltip").each(function () { + let options = { + content: $(this).attr("title"), + }; + + if ($(this).data("trigger") !== undefined) { + options.trigger = $(this).data("trigger"); + } + + if ($(this).data("placement") !== undefined) { + options.placement = $(this).data("placement"); + } + + if ($(this).data("theme") !== undefined) { + options.theme = $(this).data("theme"); + } + + if ($(this).data("tooltip-content") !== undefined) { + options.content = $($(this).data("tooltip-content"))[0]; + } + + $(this).removeAttr("title"); + + tippy(this, { + arrow: roundArrow, + animation: "shift-away", + ...options, + }); + }); +})(); diff --git a/resources/js/components/tom-select/index.js b/resources/js/components/tom-select/index.js new file mode 100644 index 0000000..b8363e8 --- /dev/null +++ b/resources/js/components/tom-select/index.js @@ -0,0 +1,55 @@ +(function () { + "use strict"; + + // Tom Select + $(".tom-select").each(function () { + let options = { + plugins: { + dropdown_input: {}, + }, + }; + + if ($(this).data("placeholder")) { + options.placeholder = $(this).data("placeholder"); + } + + if ($(this).attr("multiple") !== undefined) { + options = { + ...options, + plugins: { + ...options.plugins, + remove_button: { + title: "Remove this item", + }, + }, + persist: false, + create: true, + onDelete: function (values) { + return confirm( + values.length > 1 + ? "Are you sure you want to remove these " + + values.length + + " items?" + : 'Are you sure you want to remove "' + + values[0] + + '"?' + ); + }, + }; + } + + if ($(this).data("header")) { + options = { + ...options, + plugins: { + ...options.plugins, + dropdown_header: { + title: $(this).data("header"), + }, + }, + }; + } + + new TomSelect(this, options); + }); +})(); diff --git a/resources/js/components/top-bar/index.js b/resources/js/components/top-bar/index.js new file mode 100644 index 0000000..6315a3a --- /dev/null +++ b/resources/js/components/top-bar/index.js @@ -0,0 +1,15 @@ +(function () { + "use strict"; + + $(".search") + .find("input") + .each(function () { + $(this).on("focus", function () { + $(".search-result").addClass("show"); + }); + + $(this).on("focusout", function () { + $(".search-result").removeClass("show"); + }); + }); +})(); diff --git a/resources/js/components/vertical-bar-chart/index.js b/resources/js/components/vertical-bar-chart/index.js new file mode 100644 index 0000000..203a34d --- /dev/null +++ b/resources/js/components/vertical-bar-chart/index.js @@ -0,0 +1,87 @@ +(function () { + "use strict"; + + // Chart + if ($(".vertical-bar-chart").length) { + let ctx = $(".vertical-bar-chart")[0].getContext("2d"); + let myChart = new Chart(ctx, { + type: "bar", + data: { + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + ], + datasets: [ + { + label: "Html Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + data: [0, 200, 250, 200, 500, 450, 850, 1050], + backgroundColor: getColor("primary"), + }, + { + label: "VueJs Template", + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + data: [0, 300, 400, 560, 320, 600, 720, 850], + backgroundColor: $("html").hasClass("dark") + ? getColor("darkmode.200") + : getColor("slate.300"), + }, + ], + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: getColor("slate.500", 0.8), + }, + }, + }, + scales: { + x: { + ticks: { + font: { + size: 12, + }, + color: getColor("slate.500", 0.8), + }, + grid: { + display: false, + drawBorder: false, + }, + }, + y: { + ticks: { + font: { + size: "12", + }, + color: getColor("slate.500", 0.8), + callback: function (value, index, values) { + return "$" + value; + }, + }, + grid: { + color: $("html").hasClass("dark") + ? getColor("slate.500", 0.3) + : getColor("slate.300"), + borderDash: [2, 2], + drawBorder: false, + }, + }, + }, + }, + }); + } +})(); diff --git a/resources/js/helper.js b/resources/js/helper.js new file mode 100644 index 0000000..4647b33 --- /dev/null +++ b/resources/js/helper.js @@ -0,0 +1,127 @@ +import dayjs from "dayjs"; +import { parseColor } from "tailwindcss/lib/util/color"; + +const helpers = { + cutText(text, length) { + if (text.split(" ").length > 1) { + let string = text.substring(0, length); + let splitText = string.split(" "); + splitText.pop(); + return splitText.join(" ") + "..."; + } else { + return text; + } + }, + formatDate(date, format) { + return dayjs(date).format(format); + }, + capitalizeFirstLetter(string) { + if (string) { + return string.charAt(0).toUpperCase() + string.slice(1); + } + }, + onlyNumber(number) { + if (number) { + return number.replace(/\D/g, ""); + } else { + return ""; + } + }, + formatCurrency(number) { + if (number) { + let formattedNumber = number.toString().replace(/\D/g, ""); + let rest = formattedNumber.length % 3; + let currency = formattedNumber.substr(0, rest); + let thousand = formattedNumber.substr(rest).match(/\d{3}/g); + let separator; + + if (thousand) { + separator = rest ? "." : ""; + currency += separator + thousand.join("."); + } + + return currency; + } else { + return ""; + } + }, + timeAgo(time) { + let date = new Date( + (time || "").replace(/-/g, "/").replace(/[TZ]/g, " ") + ), + diff = (new Date().getTime() - date.getTime()) / 1000, + dayDiff = Math.floor(diff / 86400); + + if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) + return dayjs(time).format("MMMM DD, YYYY"); + + return ( + (dayDiff == 0 && + ((diff < 60 && "just now") || + (diff < 120 && "1 minute ago") || + (diff < 3600 && Math.floor(diff / 60) + " minutes ago") || + (diff < 7200 && "1 hour ago") || + (diff < 86400 && + Math.floor(diff / 3600) + " hours ago"))) || + (dayDiff == 1 && "Yesterday") || + (dayDiff < 7 && dayDiff + " days ago") || + (dayDiff < 31 && Math.ceil(dayDiff / 7) + " weeks ago") + ); + }, + diffTimeByNow(time) { + let startDate = dayjs(dayjs().format("YYYY-MM-DD HH:mm:ss").toString()); + let endDate = dayjs( + dayjs(time).format("YYYY-MM-DD HH:mm:ss").toString() + ); + + let duration = dayjs.duration(endDate.diff(startDate)); + let milliseconds = Math.floor(duration.asMilliseconds()); + + let days = Math.round(milliseconds / 86400000); + let hours = Math.round((milliseconds % 86400000) / 3600000); + let minutes = Math.round(((milliseconds % 86400000) % 3600000) / 60000); + let seconds = Math.round( + (((milliseconds % 86400000) % 3600000) % 60000) / 1000 + ); + + if (seconds < 30 && seconds >= 0) { + minutes += 1; + } + + return { + days: days.toString().length < 2 ? "0" + days : days, + hours: hours.toString().length < 2 ? "0" + hours : hours, + minutes: minutes.toString().length < 2 ? "0" + minutes : minutes, + seconds: seconds.toString().length < 2 ? "0" + seconds : seconds, + }; + }, + isset(obj) { + return Object.keys(obj).length; + }, + assign(obj) { + return JSON.parse(JSON.stringify(obj)); + }, + delay(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(); + }, time); + }); + }, + randomNumbers(from, to, length) { + let numbers = [0]; + for (let i = 1; i < length; i++) { + numbers.push(Math.ceil(Math.random() * (from - to) + to)); + } + + return numbers; + }, + replaceAll(str, find, replace) { + return str.replace(new RegExp(find, "g"), replace); + }, + toRGB(value) { + return parseColor(value).color.join(" "); + }, +}; + +export default helpers; diff --git a/resources/js/layouts/side-menu/index.js b/resources/js/layouts/side-menu/index.js new file mode 100644 index 0000000..337bc9b --- /dev/null +++ b/resources/js/layouts/side-menu/index.js @@ -0,0 +1,68 @@ +(function () { + "use strict"; + + // Side Menu Dropdown + $(".side-menu").on("click", function () { + if ($(this).parent().find("ul").length) { + if ($(this).parent().find("ul").first()[0].offsetParent !== null) { + $(this) + .find(".side-menu__sub-icon") + .removeClass("transform rotate-180"); + $(this).removeClass("side-menu--open"); + $(this) + .parent() + .find("ul") + .first() + .slideUp(300, function () { + $(this).removeClass("side-menu__sub-open"); + }); + } else { + $(this) + .find(".side-menu__sub-icon") + .addClass("transform rotate-180"); + $(this).addClass("side-menu--open"); + $(this) + .parent() + .find("ul") + .first() + .slideDown(300, function () { + $(this).addClass("side-menu__sub-open"); + }); + } + } + }); + + // Side Menu Tooltips + const initTooltips = (function tooltips() { + $(".side-menu").each(function () { + if (this._tippy == undefined) { + const content = $(this) + .find(".side-menu__title") + .html() + .replace(/<[^>]*>?/gm, "") + .trim(); + tippy(this, { + content: content, + arrow: roundArrow, + animation: "shift-away", + placement: "right", + }); + } + + if ( + $(window).width() <= 1260 || + $(this).closest(".side-nav").hasClass("side-nav--simple") + ) { + this._tippy.enable(); + } else { + this._tippy.disable(); + } + }); + + return tooltips; + })(); + + window.addEventListener("resize", () => { + initTooltips(); + }); +})(); diff --git a/resources/js/pages/calendar/index.js b/resources/js/pages/calendar/index.js new file mode 100644 index 0000000..8ced7c2 --- /dev/null +++ b/resources/js/pages/calendar/index.js @@ -0,0 +1,81 @@ +// (function () { +// "use strict"; + +// if ($("#calendar").length) { +// if ($("#calendar-events").length) { +// new Draggable($("#calendar-events")[0], { +// itemSelector: ".event", +// eventData: function (eventEl) { +// return { +// title: $(eventEl).find(".event__title").html(), +// duration: { +// days: parseInt( +// $(eventEl).find(".event__days").text() +// ), +// }, +// }; +// }, +// }); +// } + +// let calendar = new Calendar($("#calendar")[0], { +// plugins: [ +// interactionPlugin, +// dayGridPlugin, +// timeGridPlugin, +// listPlugin, +// ], +// droppable: true, +// headerToolbar: { +// left: "prev,next today", +// center: "title", +// right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", +// }, +// initialDate: "2021-01-12", +// navLinks: true, +// editable: true, +// dayMaxEvents: true, +// events: [ +// { +// title: "Vue Vixens Day", +// start: "2021-01-05", +// end: "2021-01-08", +// }, +// { +// title: "VueConfUS", +// start: "2021-01-11", +// end: "2021-01-15", +// }, +// { +// title: "VueJS Amsterdam", +// start: "2021-01-17", +// end: "2021-01-21", +// }, +// { +// title: "Vue Fes Japan 2019", +// start: "2021-01-21", +// end: "2021-01-24", +// }, +// { +// title: "Laracon 2021", +// start: "2021-01-24", +// end: "2021-01-27", +// }, +// ], +// drop: function (info) { +// if ( +// $("#checkbox-events").length && +// $("#checkbox-events")[0].checked +// ) { +// $(info.draggedEl).parent().remove(); + +// if ($("#calendar-events").children().length == 1) { +// $("#calendar-no-events").removeClass("hidden"); +// } +// } +// }, +// }); + +// calendar.render(); +// } +// })(); diff --git a/resources/js/pages/chat/index.js b/resources/js/pages/chat/index.js new file mode 100644 index 0000000..3cec112 --- /dev/null +++ b/resources/js/pages/chat/index.js @@ -0,0 +1,19 @@ +(function () { + "use strict"; + + $(".chat-list") + .children() + .each(function () { + $(this).on("click", function () { + $(".chat-box") + .children("div:nth-child(2)") + .fadeOut(300, function () { + $(".chat-box") + .children("div:nth-child(1)") + .fadeIn(300, function (el) { + $(el).removeClass("hidden").removeAttr("style"); + }); + }); + }); + }); +})(); diff --git a/resources/js/pages/login/index.js b/resources/js/pages/login/index.js new file mode 100644 index 0000000..841535d --- /dev/null +++ b/resources/js/pages/login/index.js @@ -0,0 +1,53 @@ +(function () { + "use strict"; + + async function login() { + // Reset state + $("#login-form").find(".login__input").removeClass("border-danger"); + $("#login-form").find(".login__input-error").html(""); + + // Post form + let email = $("#email").val(); + let password = $("#password").val(); + + // Loading state + $("#btn-login").html( + '' + ); + tailwind.svgLoader(); + await helper.delay(1500); + + axios + .post(`login`, { + email: email, + password: password, + }) + .then((res) => { + location.href = "/"; + }) + .catch((err) => { + $("#btn-login").html("Login"); + if (err.response.data.message != "Wrong email or password.") { + for (const [key, val] of Object.entries( + err.response.data.errors + )) { + $(`#${key}`).addClass("border-danger"); + $(`#error-${key}`).html(val); + } + } else { + $(`#password`).addClass("border-danger"); + $(`#error-password`).html(err.response.data.message); + } + }); + } + + $("#login-form").on("keyup", function (e) { + if (e.keyCode === 13) { + login(); + } + }); + + $("#btn-login").on("click", function () { + login(); + }); +})(); diff --git a/resources/js/pages/modal/index.js b/resources/js/pages/modal/index.js new file mode 100644 index 0000000..fa6e753 --- /dev/null +++ b/resources/js/pages/modal/index.js @@ -0,0 +1,24 @@ +(function () { + "use strict"; + + // Show modal + $("#programmatically-show-modal").on("click", function () { + const el = document.querySelector("#programmatically-modal"); + const modal = tailwind.Modal.getOrCreateInstance(el); + modal.show(); + }); + + // Hide modal + $("#programmatically-hide-modal").on("click", function () { + const el = document.querySelector("#programmatically-modal"); + const modal = tailwind.Modal.getOrCreateInstance(el); + modal.hide(); + }); + + // Toggle modal + $("#programmatically-toggle-modal").on("click", function () { + const el = document.querySelector("#programmatically-modal"); + const modal = tailwind.Modal.getOrCreateInstance(el); + modal.toggle(); + }); +})(); diff --git a/resources/js/pages/notification/index.js b/resources/js/pages/notification/index.js new file mode 100644 index 0000000..77d9572 --- /dev/null +++ b/resources/js/pages/notification/index.js @@ -0,0 +1,125 @@ +(function () { + "use strict"; + + // Basic non sticky notification + $("#basic-non-sticky-notification-toggle").on("click", function () { + Toastify({ + node: $("#basic-non-sticky-notification-content") + .clone() + .removeClass("hidden")[0], + duration: 3000, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + }); + + // Basic sticky notification + $("#basic-sticky-notification-toggle").on("click", function () { + Toastify({ + node: $("#basic-non-sticky-notification-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + }); + + // Success notification + $("#success-notification-toggle").on("click", function () { + Toastify({ + node: $("#success-notification-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + }); + + // Notification with actions + $("#notification-with-actions-toggle").on("click", function () { + Toastify({ + node: $("#notification-with-actions-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + }); + + // Notification with avatar + $("#notification-with-avatar-toggle").on("click", function () { + // Init toastify + let avatarNotification = Toastify({ + node: $("#notification-with-avatar-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: false, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + + // Close notification event + $(avatarNotification.toastElement) + .find('[data-dismiss="notification"]') + .on("click", function () { + avatarNotification.hideToast(); + }); + }); + + // Notification with split buttons + $("#notification-with-split-buttons-toggle").on("click", function () { + // Init toastify + let splitButtonsNotification = Toastify({ + node: $("#notification-with-split-buttons-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: false, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + + // Close notification event + $(splitButtonsNotification.toastElement) + .find('[data-dismiss="notification"]') + .on("click", function () { + splitButtonsNotification.hideToast(); + }); + }); + + // Notification with buttons below + $("#notification-with-buttons-below-toggle").on("click", function () { + // Init toastify + Toastify({ + node: $("#notification-with-buttons-below-content") + .clone() + .removeClass("hidden")[0], + duration: -1, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + }); +})(); diff --git a/resources/js/pages/slideover/index.js b/resources/js/pages/slideover/index.js new file mode 100644 index 0000000..9e0f02e --- /dev/null +++ b/resources/js/pages/slideover/index.js @@ -0,0 +1,24 @@ +(function () { + "use strict"; + + // Show slide over + $("#programmatically-show-slideover").on("click", function () { + const el = document.querySelector("#programmatically-slideover"); + const slideOver = tailwind.Modal.getOrCreateInstance(el); + slideOver.show(); + }); + + // Hide slide over + $("#programmatically-hide-slideover").on("click", function () { + const el = document.querySelector("#programmatically-slideover"); + const slideOver = tailwind.Modal.getOrCreateInstance(el); + slideOver.hide(); + }); + + // Toggle slide over + $("#programmatically-toggle-slideover").on("click", function () { + const el = document.querySelector("#programmatically-slideover"); + const slideOver = tailwind.Modal.getOrCreateInstance(el); + slideOver.toggle(); + }); +})(); diff --git a/resources/js/pages/tabulator/index.js b/resources/js/pages/tabulator/index.js new file mode 100644 index 0000000..c1c2db3 --- /dev/null +++ b/resources/js/pages/tabulator/index.js @@ -0,0 +1,300 @@ +(function () { + "use strict"; + + const imageAssets = import.meta.glob( + "/resources/images/fakers/*.{jpg,jpeg,png,svg}", + { eager: true } + ); + + // Tabulator + if ($("#tabulator").length) { + // Setup Tabulator + const tabulator = new Tabulator("#tabulator", { + ajaxURL: "https://dummy-data.left4code.com", + paginationMode: "remote", + filterMode: "remote", + sortMode: "remote", + printAsHtml: true, + printStyled: true, + pagination: true, + paginationSize: 10, + paginationSizeSelector: [10, 20, 30, 40], + layout: "fitColumns", + responsiveLayout: "collapse", + placeholder: "No matching records found", + columns: [ + { + title: "", + formatter: "responsiveCollapse", + width: 40, + minWidth: 30, + hozAlign: "center", + resizable: false, + headerSort: false, + }, + + // For HTML table + { + title: "PRODUCT NAME", + minWidth: 200, + responsive: 0, + field: "name", + vertAlign: "middle", + print: false, + download: false, + formatter(cell) { + const response = cell.getData(); + return `
+
${response.name}
+
${response.category}
+
`; + }, + }, + { + title: "IMAGES", + minWidth: 200, + field: "images", + hozAlign: "center", + headerHozAlign: "center", + vertAlign: "middle", + print: false, + download: false, + formatter(cell) { + return `
+
+ Midone Tailwind HTML Admin Template +
+
+ Midone Tailwind HTML Admin Template +
+
+ Midone Tailwind HTML Admin Template +
+
`; + }, + }, + { + title: "REMAINING STOCK", + minWidth: 200, + field: "remaining_stock", + hozAlign: "center", + headerHozAlign: "center", + vertAlign: "middle", + print: false, + download: false, + }, + { + title: "STATUS", + minWidth: 200, + field: "status", + hozAlign: "center", + headerHozAlign: "center", + vertAlign: "middle", + print: false, + download: false, + formatter(cell) { + const response = cell.getData(); + return `
+ ${ + response.status ? "Active" : "Inactive" + } +
`; + }, + }, + { + title: "ACTIONS", + minWidth: 200, + field: "actions", + responsive: 1, + hozAlign: "center", + headerHozAlign: "center", + vertAlign: "middle", + print: false, + download: false, + formatter() { + let a = + $(`
+ + Edit + + + Delete + +
`); + $(a) + .find(".edit") + .on("click", function () { + alert("EDIT"); + }); + + $(a) + .find(".delete") + .on("click", function () { + alert("DELETE"); + }); + return a[0]; + }, + }, + + // For print format + { + title: "PRODUCT NAME", + field: "name", + visible: false, + print: true, + download: true, + }, + { + title: "CATEGORY", + field: "category", + visible: false, + print: true, + download: true, + }, + { + title: "REMAINING STOCK", + field: "remaining_stock", + visible: false, + print: true, + download: true, + }, + { + title: "STATUS", + field: "status", + visible: false, + print: true, + download: true, + formatterPrint(cell) { + return cell.getValue() ? "Active" : "Inactive"; + }, + }, + { + title: "IMAGE 1", + field: "images", + visible: false, + print: true, + download: true, + formatterPrint(cell) { + return cell.getValue()[0]; + }, + }, + { + title: "IMAGE 2", + field: "images", + visible: false, + print: true, + download: true, + formatterPrint(cell) { + return cell.getValue()[1]; + }, + }, + { + title: "IMAGE 3", + field: "images", + visible: false, + print: true, + download: true, + formatterPrint(cell) { + return cell.getValue()[2]; + }, + }, + ], + }); + + tabulator.on("renderComplete", () => { + createIcons({ + icons, + attrs: { + "stroke-width": 1.5, + }, + nameAttr: "data-lucide", + }); + }); + + // Redraw table onresize + window.addEventListener("resize", () => { + tabulator.redraw(); + createIcons({ + icons, + "stroke-width": 1.5, + nameAttr: "data-lucide", + }); + }); + + // Filter function + function filterHTMLForm() { + let field = $("#tabulator-html-filter-field").val(); + let type = $("#tabulator-html-filter-type").val(); + let value = $("#tabulator-html-filter-value").val(); + tabulator.setFilter(field, type, value); + } + + // On submit filter form + $("#tabulator-html-filter-form")[0].addEventListener( + "keypress", + function (event) { + let keycode = event.keyCode ? event.keyCode : event.which; + if (keycode == "13") { + event.preventDefault(); + filterHTMLForm(); + } + } + ); + + // On click go button + $("#tabulator-html-filter-go").on("click", function (event) { + filterHTMLForm(); + }); + + // On reset filter form + $("#tabulator-html-filter-reset").on("click", function (event) { + $("#tabulator-html-filter-field").val("name"); + $("#tabulator-html-filter-type").val("like"); + $("#tabulator-html-filter-value").val(""); + filterHTMLForm(); + }); + + // Export + $("#tabulator-export-csv").on("click", function (event) { + tabulator.download("csv", "data.csv"); + }); + + $("#tabulator-export-json").on("click", function (event) { + tabulator.download("json", "data.json"); + }); + + $("#tabulator-export-xlsx").on("click", function (event) { + tabulator.download("xlsx", "data.xlsx", { + sheetName: "Products", + }); + }); + + $("#tabulator-export-html").on("click", function (event) { + tabulator.download("html", "data.html", { + style: true, + }); + }); + + // Print + $("#tabulator-print").on("click", function (event) { + tabulator.print(); + }); + } +})(); diff --git a/resources/js/pages/validation/index.js b/resources/js/pages/validation/index.js new file mode 100644 index 0000000..29698c1 --- /dev/null +++ b/resources/js/pages/validation/index.js @@ -0,0 +1,63 @@ +(function () { + "use strict"; + + function onSubmit(pristine) { + let valid = pristine.validate(); + + if (valid) { + Toastify({ + node: $("#success-notification-content") + .clone() + .removeClass("hidden")[0], + duration: 3000, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + } else { + Toastify({ + node: $("#failed-notification-content") + .clone() + .removeClass("hidden")[0], + duration: 3000, + newWindow: true, + close: true, + gravity: "top", + position: "right", + stopOnFocus: true, + }).showToast(); + } + } + + $(".validate-form").each(function () { + let pristine = new Pristine(this, { + classTo: "input-form", + errorClass: "has-error", + errorTextParent: "input-form", + errorTextClass: "text-danger mt-2", + }); + + pristine.addValidator( + $(this).find('input[type="url"]')[0], + function (value) { + let expression = + /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; + let regex = new RegExp(expression); + if (!value.length || (value.length && value.match(regex))) { + return true; + } + return false; + }, + "This field is URL format only", + 2, + false + ); + + $(this).on("submit", function (e) { + e.preventDefault(); + onSubmit(pristine); + }); + }); +})(); diff --git a/resources/js/vendor/accordion/index.js b/resources/js/vendor/accordion/index.js new file mode 100644 index 0000000..06ad031 --- /dev/null +++ b/resources/js/vendor/accordion/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/accordion"; diff --git a/resources/js/vendor/alert/index.js b/resources/js/vendor/alert/index.js new file mode 100644 index 0000000..aa5f9d0 --- /dev/null +++ b/resources/js/vendor/alert/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/alert"; diff --git a/resources/js/vendor/calendar/index.js b/resources/js/vendor/calendar/index.js new file mode 100644 index 0000000..83301bc --- /dev/null +++ b/resources/js/vendor/calendar/index.js @@ -0,0 +1,2 @@ +import { Calendar } from "@fullcalendar/core"; +window.Calendar = Calendar; diff --git a/resources/js/vendor/calendar/plugins/day-grid.js b/resources/js/vendor/calendar/plugins/day-grid.js new file mode 100644 index 0000000..f343814 --- /dev/null +++ b/resources/js/vendor/calendar/plugins/day-grid.js @@ -0,0 +1,2 @@ +import dayGridPlugin from "@fullcalendar/daygrid"; +window.dayGridPlugin = dayGridPlugin; diff --git a/resources/js/vendor/calendar/plugins/interaction.js b/resources/js/vendor/calendar/plugins/interaction.js new file mode 100644 index 0000000..eadb97c --- /dev/null +++ b/resources/js/vendor/calendar/plugins/interaction.js @@ -0,0 +1,3 @@ +import interactionPlugin, { Draggable } from "@fullcalendar/interaction"; +window.interactionPlugin = interactionPlugin; +window.Draggable = Draggable; diff --git a/resources/js/vendor/calendar/plugins/list.js b/resources/js/vendor/calendar/plugins/list.js new file mode 100644 index 0000000..392719d --- /dev/null +++ b/resources/js/vendor/calendar/plugins/list.js @@ -0,0 +1,2 @@ +import listPlugin from "@fullcalendar/list"; +window.listPlugin = listPlugin; diff --git a/resources/js/vendor/calendar/plugins/time-grid.js b/resources/js/vendor/calendar/plugins/time-grid.js new file mode 100644 index 0000000..7b67875 --- /dev/null +++ b/resources/js/vendor/calendar/plugins/time-grid.js @@ -0,0 +1,2 @@ +import timeGridPlugin from "@fullcalendar/timegrid"; +window.timeGridPlugin = timeGridPlugin; diff --git a/resources/js/vendor/chartjs/index.js b/resources/js/vendor/chartjs/index.js new file mode 100644 index 0000000..2118ada --- /dev/null +++ b/resources/js/vendor/chartjs/index.js @@ -0,0 +1,2 @@ +import Chart from "chart.js/auto"; +window.Chart = Chart; diff --git a/resources/js/vendor/ckeditor/balloon-block/index.js b/resources/js/vendor/ckeditor/balloon-block/index.js new file mode 100644 index 0000000..a7e5033 --- /dev/null +++ b/resources/js/vendor/ckeditor/balloon-block/index.js @@ -0,0 +1,2 @@ +import BalloonBlockEditor from "@ckeditor/ckeditor5-build-balloon-block"; +window.BalloonBlockEditor = BalloonBlockEditor; diff --git a/resources/js/vendor/ckeditor/balloon/index.js b/resources/js/vendor/ckeditor/balloon/index.js new file mode 100644 index 0000000..646162f --- /dev/null +++ b/resources/js/vendor/ckeditor/balloon/index.js @@ -0,0 +1,2 @@ +import BalloonEditor from "@ckeditor/ckeditor5-build-balloon"; +window.BalloonEditor = BalloonEditor; diff --git a/resources/js/vendor/ckeditor/classic/index.js b/resources/js/vendor/ckeditor/classic/index.js new file mode 100644 index 0000000..3818a1c --- /dev/null +++ b/resources/js/vendor/ckeditor/classic/index.js @@ -0,0 +1,2 @@ +import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; +window.ClassicEditor = ClassicEditor; diff --git a/resources/js/vendor/ckeditor/document/index.js b/resources/js/vendor/ckeditor/document/index.js new file mode 100644 index 0000000..b0fa60b --- /dev/null +++ b/resources/js/vendor/ckeditor/document/index.js @@ -0,0 +1,2 @@ +import DocumentEditor from "@ckeditor/ckeditor5-build-decoupled-document"; +window.DocumentEditor = DocumentEditor; diff --git a/resources/js/vendor/ckeditor/inline/index.js b/resources/js/vendor/ckeditor/inline/index.js new file mode 100644 index 0000000..4dceaab --- /dev/null +++ b/resources/js/vendor/ckeditor/inline/index.js @@ -0,0 +1,2 @@ +import InlineEditor from "@ckeditor/ckeditor5-build-inline"; +window.InlineEditor = InlineEditor; diff --git a/resources/js/vendor/dom/index.js b/resources/js/vendor/dom/index.js new file mode 100644 index 0000000..3a9d8b7 --- /dev/null +++ b/resources/js/vendor/dom/index.js @@ -0,0 +1,2 @@ +import dom from "@left4code/tw-starter/dist/js/dom"; +window.$ = dom; diff --git a/resources/js/vendor/dropdown/index.js b/resources/js/vendor/dropdown/index.js new file mode 100644 index 0000000..af7eb27 --- /dev/null +++ b/resources/js/vendor/dropdown/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/dropdown"; diff --git a/resources/js/vendor/dropzone/index.js b/resources/js/vendor/dropzone/index.js new file mode 100644 index 0000000..f48a65a --- /dev/null +++ b/resources/js/vendor/dropzone/index.js @@ -0,0 +1,2 @@ +import Dropzone from "dropzone"; +window.Dropzone = Dropzone; diff --git a/resources/js/vendor/highlight/index.js b/resources/js/vendor/highlight/index.js new file mode 100644 index 0000000..7ef26e9 --- /dev/null +++ b/resources/js/vendor/highlight/index.js @@ -0,0 +1,4 @@ +import hljs from "highlight.js"; +import jsBeautify from "js-beautify"; +window.hljs = hljs; +window.jsBeautify = jsBeautify; diff --git a/resources/js/vendor/image-zoom/index.js b/resources/js/vendor/image-zoom/index.js new file mode 100644 index 0000000..1913697 --- /dev/null +++ b/resources/js/vendor/image-zoom/index.js @@ -0,0 +1 @@ +import "zoom-vanilla.js/dist/zoom-vanilla.min.js"; diff --git a/resources/js/vendor/leaflet-map/index.js b/resources/js/vendor/leaflet-map/index.js new file mode 100644 index 0000000..c39ef90 --- /dev/null +++ b/resources/js/vendor/leaflet-map/index.js @@ -0,0 +1,3 @@ +import L from "leaflet"; +import "leaflet.markercluster"; +window.L = L; diff --git a/resources/js/vendor/litepicker/index.js b/resources/js/vendor/litepicker/index.js new file mode 100644 index 0000000..fd2691e --- /dev/null +++ b/resources/js/vendor/litepicker/index.js @@ -0,0 +1,2 @@ +import Litepicker from "litepicker"; +window.Litepicker = Litepicker; diff --git a/resources/js/vendor/lucide/index.js b/resources/js/vendor/lucide/index.js new file mode 100644 index 0000000..cd3773e --- /dev/null +++ b/resources/js/vendor/lucide/index.js @@ -0,0 +1,3 @@ +import { createIcons, icons } from "lucide"; +window.createIcons = createIcons; +window.icons = icons; diff --git a/resources/js/vendor/modal/index.js b/resources/js/vendor/modal/index.js new file mode 100644 index 0000000..8107090 --- /dev/null +++ b/resources/js/vendor/modal/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/modal"; diff --git a/resources/js/vendor/pristine/index.js b/resources/js/vendor/pristine/index.js new file mode 100644 index 0000000..aa441b6 --- /dev/null +++ b/resources/js/vendor/pristine/index.js @@ -0,0 +1,2 @@ +import Pristine from "pristinejs"; +window.Pristine = Pristine; diff --git a/resources/js/vendor/simplebar/index.js b/resources/js/vendor/simplebar/index.js new file mode 100644 index 0000000..1901ff9 --- /dev/null +++ b/resources/js/vendor/simplebar/index.js @@ -0,0 +1,2 @@ +import SimpleBar from "simplebar"; +window.SimpleBar = SimpleBar; diff --git a/resources/js/vendor/svg-loader/index.js b/resources/js/vendor/svg-loader/index.js new file mode 100644 index 0000000..406b2db --- /dev/null +++ b/resources/js/vendor/svg-loader/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/svg-loader"; diff --git a/resources/js/vendor/tab/index.js b/resources/js/vendor/tab/index.js new file mode 100644 index 0000000..215fb23 --- /dev/null +++ b/resources/js/vendor/tab/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/tab"; diff --git a/resources/js/vendor/tabulator/index.js b/resources/js/vendor/tabulator/index.js new file mode 100644 index 0000000..b4bf173 --- /dev/null +++ b/resources/js/vendor/tabulator/index.js @@ -0,0 +1,2 @@ +import { TabulatorFull as Tabulator } from "tabulator-tables"; +window.Tabulator = Tabulator; diff --git a/resources/js/vendor/tailwind-merge/index.js b/resources/js/vendor/tailwind-merge/index.js new file mode 100644 index 0000000..c65cdf7 --- /dev/null +++ b/resources/js/vendor/tailwind-merge/index.js @@ -0,0 +1,10 @@ +import * as tailwindMerge from "tailwind-merge"; + +const { twMerge } = tailwindMerge; + +document.querySelectorAll("[data-tw-merge]").forEach((el) => { + el.setAttribute("class", twMerge(el.getAttribute("class"))); + el.removeAttribute("data-tw-merge"); +}); + +window.twMerge = tailwindMerge; diff --git a/resources/js/vendor/tiny-slider/index.js b/resources/js/vendor/tiny-slider/index.js new file mode 100644 index 0000000..80d040c --- /dev/null +++ b/resources/js/vendor/tiny-slider/index.js @@ -0,0 +1,2 @@ +import { tns } from "tiny-slider/src/tiny-slider"; +window.tns = tns; diff --git a/resources/js/vendor/tippy/index.js b/resources/js/vendor/tippy/index.js new file mode 100644 index 0000000..7e5a14b --- /dev/null +++ b/resources/js/vendor/tippy/index.js @@ -0,0 +1,4 @@ +import tippy, { roundArrow, animateFill as animateFillPlugin } from "tippy.js"; +window.tippy = tippy; +window.roundArrow = roundArrow; +window.animateFillPlugin = animateFillPlugin; diff --git a/resources/js/vendor/toastify/index.js b/resources/js/vendor/toastify/index.js new file mode 100644 index 0000000..a09e707 --- /dev/null +++ b/resources/js/vendor/toastify/index.js @@ -0,0 +1,2 @@ +import Toastify from "toastify-js"; +window.Toastify = Toastify; diff --git a/resources/js/vendor/tom-select/index.js b/resources/js/vendor/tom-select/index.js new file mode 100644 index 0000000..573801e --- /dev/null +++ b/resources/js/vendor/tom-select/index.js @@ -0,0 +1,2 @@ +import TomSelect from "tom-select"; +window.TomSelect = TomSelect; diff --git a/resources/js/vendor/transition/index.js b/resources/js/vendor/transition/index.js new file mode 100644 index 0000000..5d43093 --- /dev/null +++ b/resources/js/vendor/transition/index.js @@ -0,0 +1 @@ +import "@left4code/tw-starter/dist/js/transition"; diff --git a/resources/js/vendor/xlsx/index.js b/resources/js/vendor/xlsx/index.js new file mode 100644 index 0000000..71a16aa --- /dev/null +++ b/resources/js/vendor/xlsx/index.js @@ -0,0 +1,2 @@ +import * as xlsx from "xlsx"; +window.xlsx = xlsx;