Committing laravel (part 3)
committing js templating files and components
This commit is contained in:
parent
74c4b1d3f4
commit
82f958e5da
87 changed files with 3138 additions and 0 deletions
7
resources/js/app.js
Normal file
7
resources/js/app.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import "./bootstrap";
|
||||
import "./vendor/dom";
|
||||
import "./vendor/tailwind-merge";
|
||||
import "./vendor/svg-loader";
|
||||
|
||||
// Load static files
|
||||
import.meta.glob(["../images/**"]);
|
||||
41
resources/js/bootstrap.js
vendored
Normal file
41
resources/js/bootstrap.js
vendored
Normal file
|
|
@ -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'],
|
||||
// });
|
||||
24
resources/js/colors.js
Normal file
24
resources/js/colors.js
Normal file
|
|
@ -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 };
|
||||
10
resources/js/components/balloon-block-editor/index.js
Normal file
10
resources/js/components/balloon-block-editor/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
$(".editor").each(function () {
|
||||
const el = this;
|
||||
BalloonBlockEditor.create(el).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
})();
|
||||
10
resources/js/components/balloon-editor/index.js
Normal file
10
resources/js/components/balloon-editor/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
$(".editor").each(function () {
|
||||
const el = this;
|
||||
BalloonEditor.create(el).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
})();
|
||||
17
resources/js/components/calendar/draggable/index.js
Normal file
17
resources/js/components/calendar/draggable/index.js
Normal file
|
|
@ -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()),
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
})();
|
||||
65
resources/js/components/calendar/index.js
Normal file
65
resources/js/components/calendar/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
10
resources/js/components/classic-editor/index.js
Normal file
10
resources/js/components/classic-editor/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
$(".editor").each(function () {
|
||||
const el = this;
|
||||
ClassicEditor.create(el).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
})();
|
||||
17
resources/js/components/dark-mode-switcher/index.js
Normal file
17
resources/js/components/dark-mode-switcher/index.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
})();
|
||||
17
resources/js/components/document-editor/index.js
Normal file
17
resources/js/components/document-editor/index.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
})();
|
||||
44
resources/js/components/donut-chart/index.js
Normal file
44
resources/js/components/donut-chart/index.js
Normal file
|
|
@ -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%",
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
39
resources/js/components/dropzone/index.js
Normal file
39
resources/js/components/dropzone/index.js
Normal file
|
|
@ -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!");
|
||||
});
|
||||
});
|
||||
})();
|
||||
32
resources/js/components/highlight/index.js
Normal file
32
resources/js/components/highlight/index.js
Normal file
|
|
@ -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 = $(
|
||||
'<textarea class="absolute w-0 h-0 p-0 -mt-1 -ml-1"></textarea>'
|
||||
).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();
|
||||
})();
|
||||
88
resources/js/components/horizontal-bar-chart/index.js
Normal file
88
resources/js/components/horizontal-bar-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
10
resources/js/components/inline-editor/index.js
Normal file
10
resources/js/components/inline-editor/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
$(".editor").each(function () {
|
||||
const el = this;
|
||||
InlineEditor.create(el).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
})();
|
||||
98
resources/js/components/leaflet-map-loader/index.js
Normal file
98
resources/js/components/leaflet-map-loader/index.js
Normal file
|
|
@ -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(`<svg xmlns="http://www.w3.org/2000/svg" width="55.066" height="47.691" viewBox="0 0 55.066 47.691">
|
||||
<g id="Group_15" data-name="Group 15" transform="translate(-319.467 -83.991)">
|
||||
<g id="Group_14" data-name="Group 14">
|
||||
<path id="Intersection_4" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
|
||||
<path id="Intersection_5" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
|
||||
<path id="Intersection_6" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
|
||||
</g>
|
||||
<g id="Group_13" data-name="Group 13" transform="translate(427.806 461.061) rotate(-120)">
|
||||
<path id="Intersection_4-2" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
|
||||
<path id="Intersection_5-2" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
|
||||
<path id="Intersection_6-2" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
|
||||
</g>
|
||||
<circle id="Ellipse_9" data-name="Ellipse 9" cx="11" cy="11" r="11" transform="translate(336 96)" fill="${color}"/>
|
||||
<g id="Group_12" data-name="Group 12" transform="translate(613.194 -139.96) rotate(120)">
|
||||
<path id="Intersection_4-3" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
|
||||
<path id="Intersection_5-3" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
|
||||
<path id="Intersection_6-3" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`);
|
||||
|
||||
return L.divIcon({
|
||||
html: `<div class="relative w-full h-full">
|
||||
<div class="absolute inset-0 flex items-center justify-center ml-1.5 mb-0.5 font-medium text-white">${cluster.getChildCount()}</div>
|
||||
<img class="w-full h-full" src="data:image/svg+xml;base64,${mapMarkerRegionSvg}">
|
||||
</div>`,
|
||||
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(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="31.063" viewBox="0 0 20 31.063">
|
||||
<g id="Group_16" data-name="Group 16" transform="translate(-408 -150.001)">
|
||||
<path id="Subtraction_21" data-name="Subtraction 21" d="M10,31.064h0L1.462,15.208A10,10,0,1,1,20,10a9.9,9.9,0,0,1-1.078,4.522l-.056.108c-.037.071-.077.146-.121.223L10,31.062ZM10,2a8,8,0,1,0,8,8,8,8,0,0,0-8-8Z" transform="translate(408 150)" fill="${color}"/>
|
||||
<circle id="Ellipse_26" data-name="Ellipse 26" cx="6" cy="6" r="6" transform="translate(412 154)" fill="${color}"/>
|
||||
</g>
|
||||
</svg>
|
||||
`);
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
98
resources/js/components/line-chart/index.js
Normal file
98
resources/js/components/line-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
44
resources/js/components/litepicker/index.js
Normal file
44
resources/js/components/litepicker/index.js
Normal file
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
})();
|
||||
10
resources/js/components/lucide/index.js
Normal file
10
resources/js/components/lucide/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
// Lucide Icons
|
||||
createIcons({
|
||||
icons,
|
||||
"stroke-width": 1.5,
|
||||
nameAttr: "data-lucide",
|
||||
});
|
||||
})();
|
||||
49
resources/js/components/mobile-menu/index.js
Normal file
49
resources/js/components/mobile-menu/index.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
43
resources/js/components/pie-chart/index.js
Normal file
43
resources/js/components/pie-chart/index.js
Normal file
|
|
@ -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),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
20
resources/js/components/preview-component/index.js
Normal file
20
resources/js/components/preview-component/index.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
85
resources/js/components/report-bar-chart-1/index.js
Normal file
85
resources/js/components/report-bar-chart-1/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
89
resources/js/components/report-bar-chart/index.js
Normal file
89
resources/js/components/report-bar-chart/index.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
})();
|
||||
44
resources/js/components/report-donut-chart-1/index.js
Normal file
44
resources/js/components/report-donut-chart-1/index.js
Normal file
|
|
@ -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%",
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
42
resources/js/components/report-donut-chart-2/index.js
Normal file
42
resources/js/components/report-donut-chart-2/index.js
Normal file
|
|
@ -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%",
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
46
resources/js/components/report-donut-chart/index.js
Normal file
46
resources/js/components/report-donut-chart/index.js
Normal file
|
|
@ -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%",
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
96
resources/js/components/report-line-chart/index.js
Normal file
96
resources/js/components/report-line-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
45
resources/js/components/report-pie-chart/index.js
Normal file
45
resources/js/components/report-pie-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
77
resources/js/components/simple-line-chart-1/index.js
Normal file
77
resources/js/components/simple-line-chart-1/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
77
resources/js/components/simple-line-chart-2/index.js
Normal file
77
resources/js/components/simple-line-chart-2/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
84
resources/js/components/simple-line-chart-3/index.js
Normal file
84
resources/js/components/simple-line-chart-3/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
84
resources/js/components/simple-line-chart-4/index.js
Normal file
84
resources/js/components/simple-line-chart-4/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
71
resources/js/components/simple-line-chart/index.js
Normal file
71
resources/js/components/simple-line-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
18
resources/js/components/source/index.js
Normal file
18
resources/js/components/source/index.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
})();
|
||||
78
resources/js/components/stacked-bar-chart-1/index.js
Normal file
78
resources/js/components/stacked-bar-chart-1/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
93
resources/js/components/stacked-bar-chart/index.js
Normal file
93
resources/js/components/stacked-bar-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
110
resources/js/components/tiny-slider/index.js
Normal file
110
resources/js/components/tiny-slider/index.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
56
resources/js/components/tippy-content/index.js
Normal file
56
resources/js/components/tippy-content/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
34
resources/js/components/tippy/index.js
Normal file
34
resources/js/components/tippy/index.js
Normal file
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
})();
|
||||
55
resources/js/components/tom-select/index.js
Normal file
55
resources/js/components/tom-select/index.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
})();
|
||||
15
resources/js/components/top-bar/index.js
Normal file
15
resources/js/components/top-bar/index.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
})();
|
||||
87
resources/js/components/vertical-bar-chart/index.js
Normal file
87
resources/js/components/vertical-bar-chart/index.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
127
resources/js/helper.js
Normal file
127
resources/js/helper.js
Normal file
|
|
@ -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;
|
||||
68
resources/js/layouts/side-menu/index.js
Normal file
68
resources/js/layouts/side-menu/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
81
resources/js/pages/calendar/index.js
Normal file
81
resources/js/pages/calendar/index.js
Normal file
|
|
@ -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();
|
||||
// }
|
||||
// })();
|
||||
19
resources/js/pages/chat/index.js
Normal file
19
resources/js/pages/chat/index.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
53
resources/js/pages/login/index.js
Normal file
53
resources/js/pages/login/index.js
Normal file
|
|
@ -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(
|
||||
'<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>'
|
||||
);
|
||||
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();
|
||||
});
|
||||
})();
|
||||
24
resources/js/pages/modal/index.js
Normal file
24
resources/js/pages/modal/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
125
resources/js/pages/notification/index.js
Normal file
125
resources/js/pages/notification/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
24
resources/js/pages/slideover/index.js
Normal file
24
resources/js/pages/slideover/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
300
resources/js/pages/tabulator/index.js
Normal file
300
resources/js/pages/tabulator/index.js
Normal file
|
|
@ -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 `<div>
|
||||
<div class="font-medium whitespace-nowrap">${response.name}</div>
|
||||
<div class="text-xs text-slate-500 whitespace-nowrap">${response.category}</div>
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "IMAGES",
|
||||
minWidth: 200,
|
||||
field: "images",
|
||||
hozAlign: "center",
|
||||
headerHozAlign: "center",
|
||||
vertAlign: "middle",
|
||||
print: false,
|
||||
download: false,
|
||||
formatter(cell) {
|
||||
return `<div class="flex lg:justify-center">
|
||||
<div class="w-10 h-10 intro-x image-fit">
|
||||
<img alt="Midone Tailwind HTML Admin Template" class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]" src="${
|
||||
imageAssets[
|
||||
"/resources/images/fakers/" +
|
||||
cell.getData().images[0]
|
||||
].default
|
||||
}">
|
||||
</div>
|
||||
<div class="w-10 h-10 -ml-5 intro-x image-fit">
|
||||
<img alt="Midone Tailwind HTML Admin Template" class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]" src="${
|
||||
imageAssets[
|
||||
"/resources/images/fakers/" +
|
||||
cell.getData().images[1]
|
||||
].default
|
||||
}">
|
||||
</div>
|
||||
<div class="w-10 h-10 -ml-5 intro-x image-fit">
|
||||
<img alt="Midone Tailwind HTML Admin Template" class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]" src="${
|
||||
imageAssets[
|
||||
"/resources/images/fakers/" +
|
||||
cell.getData().images[2]
|
||||
].default
|
||||
}">
|
||||
</div>
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
{
|
||||
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 `<div class="flex items-center lg:justify-center ${
|
||||
response.status ? "text-success" : "text-danger"
|
||||
}">
|
||||
<i data-lucide="check-square" class="w-4 h-4 mr-2"></i> ${
|
||||
response.status ? "Active" : "Inactive"
|
||||
}
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "ACTIONS",
|
||||
minWidth: 200,
|
||||
field: "actions",
|
||||
responsive: 1,
|
||||
hozAlign: "center",
|
||||
headerHozAlign: "center",
|
||||
vertAlign: "middle",
|
||||
print: false,
|
||||
download: false,
|
||||
formatter() {
|
||||
let a =
|
||||
$(`<div class="flex items-center lg:justify-center">
|
||||
<a class="flex items-center mr-3 edit" href="javascript:;">
|
||||
<i data-lucide="check-square" class="w-4 h-4 mr-1"></i> Edit
|
||||
</a>
|
||||
<a class="flex items-center delete text-danger" href="javascript:;">
|
||||
<i data-lucide="trash-2" class="w-4 h-4 mr-1"></i> Delete
|
||||
</a>
|
||||
</div>`);
|
||||
$(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();
|
||||
});
|
||||
}
|
||||
})();
|
||||
63
resources/js/pages/validation/index.js
Normal file
63
resources/js/pages/validation/index.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
})();
|
||||
1
resources/js/vendor/accordion/index.js
vendored
Normal file
1
resources/js/vendor/accordion/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/accordion";
|
||||
1
resources/js/vendor/alert/index.js
vendored
Normal file
1
resources/js/vendor/alert/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/alert";
|
||||
2
resources/js/vendor/calendar/index.js
vendored
Normal file
2
resources/js/vendor/calendar/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import { Calendar } from "@fullcalendar/core";
|
||||
window.Calendar = Calendar;
|
||||
2
resources/js/vendor/calendar/plugins/day-grid.js
vendored
Normal file
2
resources/js/vendor/calendar/plugins/day-grid.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
window.dayGridPlugin = dayGridPlugin;
|
||||
3
resources/js/vendor/calendar/plugins/interaction.js
vendored
Normal file
3
resources/js/vendor/calendar/plugins/interaction.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
|
||||
window.interactionPlugin = interactionPlugin;
|
||||
window.Draggable = Draggable;
|
||||
2
resources/js/vendor/calendar/plugins/list.js
vendored
Normal file
2
resources/js/vendor/calendar/plugins/list.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import listPlugin from "@fullcalendar/list";
|
||||
window.listPlugin = listPlugin;
|
||||
2
resources/js/vendor/calendar/plugins/time-grid.js
vendored
Normal file
2
resources/js/vendor/calendar/plugins/time-grid.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
window.timeGridPlugin = timeGridPlugin;
|
||||
2
resources/js/vendor/chartjs/index.js
vendored
Normal file
2
resources/js/vendor/chartjs/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Chart from "chart.js/auto";
|
||||
window.Chart = Chart;
|
||||
2
resources/js/vendor/ckeditor/balloon-block/index.js
vendored
Normal file
2
resources/js/vendor/ckeditor/balloon-block/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import BalloonBlockEditor from "@ckeditor/ckeditor5-build-balloon-block";
|
||||
window.BalloonBlockEditor = BalloonBlockEditor;
|
||||
2
resources/js/vendor/ckeditor/balloon/index.js
vendored
Normal file
2
resources/js/vendor/ckeditor/balloon/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import BalloonEditor from "@ckeditor/ckeditor5-build-balloon";
|
||||
window.BalloonEditor = BalloonEditor;
|
||||
2
resources/js/vendor/ckeditor/classic/index.js
vendored
Normal file
2
resources/js/vendor/ckeditor/classic/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||||
window.ClassicEditor = ClassicEditor;
|
||||
2
resources/js/vendor/ckeditor/document/index.js
vendored
Normal file
2
resources/js/vendor/ckeditor/document/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import DocumentEditor from "@ckeditor/ckeditor5-build-decoupled-document";
|
||||
window.DocumentEditor = DocumentEditor;
|
||||
2
resources/js/vendor/ckeditor/inline/index.js
vendored
Normal file
2
resources/js/vendor/ckeditor/inline/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import InlineEditor from "@ckeditor/ckeditor5-build-inline";
|
||||
window.InlineEditor = InlineEditor;
|
||||
2
resources/js/vendor/dom/index.js
vendored
Normal file
2
resources/js/vendor/dom/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import dom from "@left4code/tw-starter/dist/js/dom";
|
||||
window.$ = dom;
|
||||
1
resources/js/vendor/dropdown/index.js
vendored
Normal file
1
resources/js/vendor/dropdown/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/dropdown";
|
||||
2
resources/js/vendor/dropzone/index.js
vendored
Normal file
2
resources/js/vendor/dropzone/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Dropzone from "dropzone";
|
||||
window.Dropzone = Dropzone;
|
||||
4
resources/js/vendor/highlight/index.js
vendored
Normal file
4
resources/js/vendor/highlight/index.js
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import hljs from "highlight.js";
|
||||
import jsBeautify from "js-beautify";
|
||||
window.hljs = hljs;
|
||||
window.jsBeautify = jsBeautify;
|
||||
1
resources/js/vendor/image-zoom/index.js
vendored
Normal file
1
resources/js/vendor/image-zoom/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "zoom-vanilla.js/dist/zoom-vanilla.min.js";
|
||||
3
resources/js/vendor/leaflet-map/index.js
vendored
Normal file
3
resources/js/vendor/leaflet-map/index.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import L from "leaflet";
|
||||
import "leaflet.markercluster";
|
||||
window.L = L;
|
||||
2
resources/js/vendor/litepicker/index.js
vendored
Normal file
2
resources/js/vendor/litepicker/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Litepicker from "litepicker";
|
||||
window.Litepicker = Litepicker;
|
||||
3
resources/js/vendor/lucide/index.js
vendored
Normal file
3
resources/js/vendor/lucide/index.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { createIcons, icons } from "lucide";
|
||||
window.createIcons = createIcons;
|
||||
window.icons = icons;
|
||||
1
resources/js/vendor/modal/index.js
vendored
Normal file
1
resources/js/vendor/modal/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/modal";
|
||||
2
resources/js/vendor/pristine/index.js
vendored
Normal file
2
resources/js/vendor/pristine/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Pristine from "pristinejs";
|
||||
window.Pristine = Pristine;
|
||||
2
resources/js/vendor/simplebar/index.js
vendored
Normal file
2
resources/js/vendor/simplebar/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import SimpleBar from "simplebar";
|
||||
window.SimpleBar = SimpleBar;
|
||||
1
resources/js/vendor/svg-loader/index.js
vendored
Normal file
1
resources/js/vendor/svg-loader/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/svg-loader";
|
||||
1
resources/js/vendor/tab/index.js
vendored
Normal file
1
resources/js/vendor/tab/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/tab";
|
||||
2
resources/js/vendor/tabulator/index.js
vendored
Normal file
2
resources/js/vendor/tabulator/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import { TabulatorFull as Tabulator } from "tabulator-tables";
|
||||
window.Tabulator = Tabulator;
|
||||
10
resources/js/vendor/tailwind-merge/index.js
vendored
Normal file
10
resources/js/vendor/tailwind-merge/index.js
vendored
Normal file
|
|
@ -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;
|
||||
2
resources/js/vendor/tiny-slider/index.js
vendored
Normal file
2
resources/js/vendor/tiny-slider/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import { tns } from "tiny-slider/src/tiny-slider";
|
||||
window.tns = tns;
|
||||
4
resources/js/vendor/tippy/index.js
vendored
Normal file
4
resources/js/vendor/tippy/index.js
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import tippy, { roundArrow, animateFill as animateFillPlugin } from "tippy.js";
|
||||
window.tippy = tippy;
|
||||
window.roundArrow = roundArrow;
|
||||
window.animateFillPlugin = animateFillPlugin;
|
||||
2
resources/js/vendor/toastify/index.js
vendored
Normal file
2
resources/js/vendor/toastify/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Toastify from "toastify-js";
|
||||
window.Toastify = Toastify;
|
||||
2
resources/js/vendor/tom-select/index.js
vendored
Normal file
2
resources/js/vendor/tom-select/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import TomSelect from "tom-select";
|
||||
window.TomSelect = TomSelect;
|
||||
1
resources/js/vendor/transition/index.js
vendored
Normal file
1
resources/js/vendor/transition/index.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@left4code/tw-starter/dist/js/transition";
|
||||
2
resources/js/vendor/xlsx/index.js
vendored
Normal file
2
resources/js/vendor/xlsx/index.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import * as xlsx from "xlsx";
|
||||
window.xlsx = xlsx;
|
||||
Loading…
Reference in a new issue