Initial commit - CMS Gov Bapenda Garut dengan EditorJS
This commit is contained in:
315
assets/js/components/calendar-init.js
Normal file
315
assets/js/components/calendar-init.js
Normal file
@@ -0,0 +1,315 @@
|
||||
import { Calendar } from "@fullcalendar/core";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
|
||||
/*========Calender Js=========*/
|
||||
/*==========================*/
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const calendarWrapper = document.querySelector("#calendar");
|
||||
|
||||
if (calendarWrapper) {
|
||||
/*=================*/
|
||||
// Calender Date variable
|
||||
/*=================*/
|
||||
const newDate = new Date();
|
||||
const getDynamicMonth = () => {
|
||||
const month = newDate.getMonth() + 1;
|
||||
return month < 10 ? `0${month}` : `${month}`;
|
||||
};
|
||||
|
||||
/*=================*/
|
||||
// Calender Modal Elements
|
||||
/*=================*/
|
||||
const getModalTitleEl = document.querySelector("#event-title");
|
||||
const getModalStartDateEl = document.querySelector("#event-start-date");
|
||||
const getModalEndDateEl = document.querySelector("#event-end-date");
|
||||
const getModalAddBtnEl = document.querySelector(".btn-add-event");
|
||||
const getModalUpdateBtnEl = document.querySelector(".btn-update-event");
|
||||
const calendarsEvents = {
|
||||
Danger: "danger",
|
||||
Success: "success",
|
||||
Primary: "primary",
|
||||
Warning: "warning",
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Calendar Elements and options
|
||||
/*=====================*/
|
||||
const calendarEl = document.querySelector("#calendar");
|
||||
|
||||
const calendarHeaderToolbar = {
|
||||
left: "prev,next addEventButton",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
};
|
||||
|
||||
const calendarEventsList = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Event Conf.",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-01`,
|
||||
extendedProps: { calendar: "Danger" },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seminar #4",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-10`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
groupId: "999",
|
||||
id: 3,
|
||||
title: "Meeting #5",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-09T16:00:00`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
{
|
||||
groupId: "999",
|
||||
id: 4,
|
||||
title: "Submission #1",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-16T16:00:00`,
|
||||
extendedProps: { calendar: "Warning" },
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Seminar #6",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-11`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-13`,
|
||||
extendedProps: { calendar: "Danger" },
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Meeting 3",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T10:30:00`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:30:00`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Meetup #",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:00:00`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Submission",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T14:30:00`,
|
||||
extendedProps: { calendar: "Warning" },
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Attend event",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-13T07:00:00`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "Project submission #2",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-28`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
];
|
||||
|
||||
/*=====================*/
|
||||
// Modal Functions
|
||||
/*=====================*/
|
||||
const openModal = () => {
|
||||
document.getElementById("eventModal").style.display = "flex";
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
document.getElementById("eventModal").style.display = "none";
|
||||
resetModalFields();
|
||||
};
|
||||
|
||||
// Close modal when clicking outside of it
|
||||
window.onclick = function (event) {
|
||||
const modal = document.getElementById("eventModal");
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Calendar Select fn.
|
||||
/*=====================*/
|
||||
const calendarSelect = (info) => {
|
||||
resetModalFields();
|
||||
|
||||
getModalAddBtnEl.style.display = "flex";
|
||||
getModalUpdateBtnEl.style.display = "none";
|
||||
openModal();
|
||||
getModalStartDateEl.value = info.startStr;
|
||||
getModalEndDateEl.value = info.endStr || info.startStr;
|
||||
getModalTitleEl.value = "";
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Calendar AddEvent fn.
|
||||
/*=====================*/
|
||||
const calendarAddEvent = () => {
|
||||
const currentDate = new Date();
|
||||
const dd = String(currentDate.getDate()).padStart(2, "0");
|
||||
const mm = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
const yyyy = currentDate.getFullYear();
|
||||
const combineDate = `${yyyy}-${mm}-${dd}T00:00:00`;
|
||||
|
||||
getModalAddBtnEl.style.display = "flex";
|
||||
getModalUpdateBtnEl.style.display = "none";
|
||||
openModal();
|
||||
getModalStartDateEl.value = combineDate;
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Calender Event Function
|
||||
/*=====================*/
|
||||
const calendarEventClick = (info) => {
|
||||
const eventObj = info.event;
|
||||
|
||||
if (eventObj.url) {
|
||||
window.open(eventObj.url);
|
||||
info.jsEvent.preventDefault();
|
||||
} else {
|
||||
const getModalEventId = eventObj._def.publicId;
|
||||
const getModalEventLevel = eventObj._def.extendedProps.calendar;
|
||||
const getModalCheckedRadioBtnEl = document.querySelector(
|
||||
`input[value="${getModalEventLevel}"]`,
|
||||
);
|
||||
|
||||
getModalTitleEl.value = eventObj.title;
|
||||
getModalStartDateEl.value = eventObj.startStr.slice(0, 10);
|
||||
getModalEndDateEl.value = eventObj.endStr
|
||||
? eventObj.endStr.slice(0, 10)
|
||||
: "";
|
||||
if (getModalCheckedRadioBtnEl) {
|
||||
getModalCheckedRadioBtnEl.checked = true;
|
||||
}
|
||||
getModalUpdateBtnEl.dataset.fcEventPublicId = getModalEventId;
|
||||
getModalAddBtnEl.style.display = "none";
|
||||
getModalUpdateBtnEl.style.display = "block";
|
||||
openModal();
|
||||
}
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Active Calender
|
||||
/*=====================*/
|
||||
const calendar = new Calendar(calendarEl, {
|
||||
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
|
||||
selectable: true,
|
||||
initialView: "dayGridMonth",
|
||||
initialDate: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
|
||||
headerToolbar: calendarHeaderToolbar,
|
||||
events: calendarEventsList,
|
||||
select: calendarSelect,
|
||||
eventClick: calendarEventClick,
|
||||
dateClick: calendarAddEvent,
|
||||
customButtons: {
|
||||
addEventButton: {
|
||||
text: "Add Event +",
|
||||
click: calendarAddEvent,
|
||||
},
|
||||
},
|
||||
eventClassNames({ event: calendarEvent }) {
|
||||
const getColorValue =
|
||||
calendarsEvents[calendarEvent._def.extendedProps.calendar];
|
||||
return [`event-fc-color`, `fc-bg-${getColorValue}`];
|
||||
},
|
||||
});
|
||||
|
||||
/*=====================*/
|
||||
// Update Calender Event
|
||||
/*=====================*/
|
||||
getModalUpdateBtnEl.addEventListener("click", () => {
|
||||
const getPublicID = getModalUpdateBtnEl.dataset.fcEventPublicId;
|
||||
const getTitleUpdatedValue = getModalTitleEl.value;
|
||||
const setModalStartDateValue = getModalStartDateEl.value;
|
||||
const setModalEndDateValue = getModalEndDateEl.value;
|
||||
const getEvent = calendar.getEventById(getPublicID);
|
||||
const getModalUpdatedCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked',
|
||||
);
|
||||
|
||||
const getModalUpdatedCheckedRadioBtnValue =
|
||||
getModalUpdatedCheckedRadioBtnEl
|
||||
? getModalUpdatedCheckedRadioBtnEl.value
|
||||
: "";
|
||||
|
||||
getEvent.setProp("title", getTitleUpdatedValue);
|
||||
getEvent.setDates(setModalStartDateValue, setModalEndDateValue);
|
||||
getEvent.setExtendedProp("calendar", getModalUpdatedCheckedRadioBtnValue);
|
||||
closeModal();
|
||||
});
|
||||
|
||||
/*=====================*/
|
||||
// Add Calender Event
|
||||
/*=====================*/
|
||||
getModalAddBtnEl.addEventListener("click", () => {
|
||||
const getModalCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked',
|
||||
);
|
||||
|
||||
const getTitleValue = getModalTitleEl.value;
|
||||
const setModalStartDateValue = getModalStartDateEl.value;
|
||||
const setModalEndDateValue = getModalEndDateEl.value;
|
||||
const getModalCheckedRadioBtnValue = getModalCheckedRadioBtnEl
|
||||
? getModalCheckedRadioBtnEl.value
|
||||
: "";
|
||||
|
||||
calendar.addEvent({
|
||||
id: Date.now(), // Use unique ID based on timestamp
|
||||
title: getTitleValue,
|
||||
start: setModalStartDateValue,
|
||||
end: setModalEndDateValue,
|
||||
allDay: true,
|
||||
extendedProps: { calendar: getModalCheckedRadioBtnValue },
|
||||
});
|
||||
closeModal();
|
||||
});
|
||||
|
||||
/*=====================*/
|
||||
// Calendar Init
|
||||
/*=====================*/
|
||||
calendar.render();
|
||||
|
||||
// Reset modal fields when hidden
|
||||
document.getElementById("eventModal").addEventListener("click", (event) => {
|
||||
if (event.target.classList.contains("modal-close-btn")) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
function resetModalFields() {
|
||||
getModalTitleEl.value = "";
|
||||
getModalStartDateEl.value = "";
|
||||
getModalEndDateEl.value = "";
|
||||
const getModalIfCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked',
|
||||
);
|
||||
if (getModalIfCheckedRadioBtnEl) {
|
||||
getModalIfCheckedRadioBtnEl.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("eventModal")
|
||||
.addEventListener("hidden.bs.modal", () => {
|
||||
resetModalFields();
|
||||
});
|
||||
|
||||
// Close modal when clicking on close button or outside modal
|
||||
document.querySelectorAll(".modal-close-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", closeModal);
|
||||
});
|
||||
|
||||
window.addEventListener("click", (event) => {
|
||||
if (event.target === document.getElementById("eventModal")) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
106
assets/js/components/charts/chart-01.js
Normal file
106
assets/js/components/charts/chart-01.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
// ===== chartOne
|
||||
const chart01 = () => {
|
||||
const chartOneOptions = {
|
||||
series: [
|
||||
{
|
||||
name: "Sales",
|
||||
data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
|
||||
},
|
||||
],
|
||||
colors: ["#465fff"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
type: "bar",
|
||||
height: 180,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: "39%",
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: "end",
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 4,
|
||||
colors: ["transparent"],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
fontFamily: "Outfit",
|
||||
|
||||
markers: {
|
||||
radius: 99,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: false,
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chartSelector = document.querySelectorAll("#chartOne");
|
||||
|
||||
if (chartSelector.length) {
|
||||
const chartFour = new ApexCharts(
|
||||
document.querySelector("#chartOne"),
|
||||
chartOneOptions,
|
||||
);
|
||||
chartFour.render();
|
||||
}
|
||||
};
|
||||
|
||||
export default chart01;
|
||||
65
assets/js/components/charts/chart-02.js
Normal file
65
assets/js/components/charts/chart-02.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
// ===== chartTwo
|
||||
const chart02 = () => {
|
||||
const chartTwoOptions = {
|
||||
series: [75.55],
|
||||
colors: ["#465FFF"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
type: "radialBar",
|
||||
height: 330,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: "80%",
|
||||
},
|
||||
track: {
|
||||
background: "#E4E7EC",
|
||||
strokeWidth: "100%",
|
||||
margin: 5, // margin is in pixels
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
fontSize: "36px",
|
||||
fontWeight: "600",
|
||||
offsetY: 60,
|
||||
color: "#1D2939",
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: "solid",
|
||||
colors: ["#465FFF"],
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
labels: ["Progress"],
|
||||
};
|
||||
|
||||
const chartSelector = document.querySelectorAll("#chartTwo");
|
||||
|
||||
if (chartSelector.length) {
|
||||
const chartFour = new ApexCharts(
|
||||
document.querySelector("#chartTwo"),
|
||||
chartTwoOptions,
|
||||
);
|
||||
chartFour.render();
|
||||
}
|
||||
};
|
||||
|
||||
export default chart02;
|
||||
113
assets/js/components/charts/chart-03.js
Normal file
113
assets/js/components/charts/chart-03.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
// ===== chartThree
|
||||
const chart03 = () => {
|
||||
const chartThreeOptions = {
|
||||
series: [
|
||||
{
|
||||
name: "Sales",
|
||||
data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
|
||||
},
|
||||
{
|
||||
name: "Revenue",
|
||||
data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: false,
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
},
|
||||
colors: ["#465FFF", "#9CB9FF"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
height: 310,
|
||||
type: "area",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
gradient: {
|
||||
enabled: true,
|
||||
opacityFrom: 0.55,
|
||||
opacityTo: 0,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "straight",
|
||||
width: ["2", "2"],
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: "dd MMM yyyy",
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: "category",
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: false,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
style: {
|
||||
fontSize: "0px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chartSelector = document.querySelectorAll("#chartThree");
|
||||
|
||||
if (chartSelector.length) {
|
||||
const chartThree = new ApexCharts(
|
||||
document.querySelector("#chartThree"),
|
||||
chartThreeOptions,
|
||||
);
|
||||
chartThree.render();
|
||||
}
|
||||
};
|
||||
|
||||
export default chart03;
|
||||
302
assets/js/components/image-resize.js
Normal file
302
assets/js/components/image-resize.js
Normal file
@@ -0,0 +1,302 @@
|
||||
/*
|
||||
* @author https://twitter.com/blurspline / https://github.com/zz85
|
||||
* See post @ http://www.lab4games.net/zz85/blog/2014/11/15/resizing-moving-snapping-windows-with-js-css/
|
||||
*/
|
||||
|
||||
if (document.querySelectorAll("#pane").length) {
|
||||
("use strict");
|
||||
|
||||
// Minimum resizable area
|
||||
var minWidth = 60;
|
||||
var minHeight = 40;
|
||||
|
||||
// Thresholds
|
||||
var FULLSCREEN_MARGINS = -10;
|
||||
var MARGINS = 4;
|
||||
|
||||
// End of what's configurable.
|
||||
var clicked = null;
|
||||
var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
|
||||
|
||||
var rightScreenEdge, bottomScreenEdge;
|
||||
|
||||
var preSnapped;
|
||||
|
||||
var b, x, y;
|
||||
|
||||
var redraw = false;
|
||||
|
||||
var pane = document.getElementById("pane");
|
||||
var ghostpane = document.getElementById("ghostpane");
|
||||
|
||||
function setBounds(element, x, y, w, h) {
|
||||
element.style.left = x + "px";
|
||||
element.style.top = y + "px";
|
||||
element.style.width = w + "px";
|
||||
element.style.height = h + "px";
|
||||
}
|
||||
|
||||
function hintHide() {
|
||||
setBounds(ghostpane, b.left, b.top, b.width, b.height);
|
||||
ghostpane.style.opacity = 0;
|
||||
|
||||
// var b = ghostpane.getBoundingClientRect();
|
||||
// ghostpane.style.top = b.top + b.height / 2;
|
||||
// ghostpane.style.left = b.left + b.width / 2;
|
||||
// ghostpane.style.width = 0;
|
||||
// ghostpane.style.height = 0;
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
pane.addEventListener("mousedown", onMouseDown);
|
||||
document.addEventListener("mousemove", onMove);
|
||||
document.addEventListener("mouseup", onUp);
|
||||
|
||||
// Touch events
|
||||
pane.addEventListener("touchstart", onTouchDown);
|
||||
document.addEventListener("touchmove", onTouchMove);
|
||||
document.addEventListener("touchend", onTouchEnd);
|
||||
|
||||
function onTouchDown(e) {
|
||||
onDown(e.touches[0]);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function onTouchMove(e) {
|
||||
onMove(e.touches[0]);
|
||||
}
|
||||
|
||||
function onTouchEnd(e) {
|
||||
if (e.touches.length == 0) onUp(e.changedTouches[0]);
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
onDown(e);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function onDown(e) {
|
||||
calc(e);
|
||||
|
||||
var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
|
||||
|
||||
clicked = {
|
||||
x: x,
|
||||
y: y,
|
||||
cx: e.clientX,
|
||||
cy: e.clientY,
|
||||
w: b.width,
|
||||
h: b.height,
|
||||
isResizing: isResizing,
|
||||
isMoving: !isResizing && canMove(),
|
||||
onTopEdge: onTopEdge,
|
||||
onLeftEdge: onLeftEdge,
|
||||
onRightEdge: onRightEdge,
|
||||
onBottomEdge: onBottomEdge,
|
||||
};
|
||||
}
|
||||
|
||||
function canMove() {
|
||||
return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
|
||||
}
|
||||
|
||||
function calc(e) {
|
||||
b = pane.getBoundingClientRect();
|
||||
x = e.clientX - b.left;
|
||||
y = e.clientY - b.top;
|
||||
|
||||
onTopEdge = y < MARGINS;
|
||||
onLeftEdge = x < MARGINS;
|
||||
onRightEdge = x >= b.width - MARGINS;
|
||||
onBottomEdge = y >= b.height - MARGINS;
|
||||
|
||||
rightScreenEdge = window.innerWidth - MARGINS;
|
||||
bottomScreenEdge = window.innerHeight - MARGINS;
|
||||
}
|
||||
|
||||
var e;
|
||||
|
||||
function onMove(ee) {
|
||||
calc(ee);
|
||||
|
||||
e = ee;
|
||||
|
||||
redraw = true;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
if (!redraw) return;
|
||||
|
||||
redraw = false;
|
||||
|
||||
if (clicked && clicked.isResizing) {
|
||||
if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + "px";
|
||||
if (clicked.onBottomEdge)
|
||||
pane.style.height = Math.max(y, minHeight) + "px";
|
||||
|
||||
if (clicked.onLeftEdge) {
|
||||
var currentWidth = Math.max(
|
||||
clicked.cx - e.clientX + clicked.w,
|
||||
minWidth,
|
||||
);
|
||||
if (currentWidth > minWidth) {
|
||||
pane.style.width = currentWidth + "px";
|
||||
pane.style.left = e.clientX + "px";
|
||||
}
|
||||
}
|
||||
|
||||
if (clicked.onTopEdge) {
|
||||
var currentHeight = Math.max(
|
||||
clicked.cy - e.clientY + clicked.h,
|
||||
minHeight,
|
||||
);
|
||||
if (currentHeight > minHeight) {
|
||||
pane.style.height = currentHeight + "px";
|
||||
pane.style.top = e.clientY + "px";
|
||||
}
|
||||
}
|
||||
|
||||
hintHide();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (clicked && clicked.isMoving) {
|
||||
if (
|
||||
b.top < FULLSCREEN_MARGINS ||
|
||||
b.left < FULLSCREEN_MARGINS ||
|
||||
b.right > window.innerWidth - FULLSCREEN_MARGINS ||
|
||||
b.bottom > window.innerHeight - FULLSCREEN_MARGINS
|
||||
) {
|
||||
// hintFull();
|
||||
setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
|
||||
ghostpane.style.opacity = 0.2;
|
||||
} else if (b.top < MARGINS) {
|
||||
// hintTop();
|
||||
setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
|
||||
ghostpane.style.opacity = 0.2;
|
||||
} else if (b.left < MARGINS) {
|
||||
// hintLeft();
|
||||
setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
|
||||
ghostpane.style.opacity = 0.2;
|
||||
} else if (b.right > rightScreenEdge) {
|
||||
// hintRight();
|
||||
setBounds(
|
||||
ghostpane,
|
||||
window.innerWidth / 2,
|
||||
0,
|
||||
window.innerWidth / 2,
|
||||
window.innerHeight,
|
||||
);
|
||||
ghostpane.style.opacity = 0.2;
|
||||
} else if (b.bottom > bottomScreenEdge) {
|
||||
// hintBottom();
|
||||
setBounds(
|
||||
ghostpane,
|
||||
0,
|
||||
window.innerHeight / 2,
|
||||
window.innerWidth,
|
||||
window.innerWidth / 2,
|
||||
);
|
||||
ghostpane.style.opacity = 0.2;
|
||||
} else {
|
||||
hintHide();
|
||||
}
|
||||
|
||||
if (preSnapped) {
|
||||
setBounds(
|
||||
pane,
|
||||
e.clientX - preSnapped.width / 2,
|
||||
e.clientY - Math.min(clicked.y, preSnapped.height),
|
||||
preSnapped.width,
|
||||
preSnapped.height,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// moving
|
||||
pane.style.top = e.clientY - clicked.y + "px";
|
||||
pane.style.left = e.clientX - clicked.x + "px";
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// This code executes when mouse moves without clicking
|
||||
|
||||
// style cursor
|
||||
if ((onRightEdge && onBottomEdge) || (onLeftEdge && onTopEdge)) {
|
||||
pane.style.cursor = "nwse-resize";
|
||||
} else if ((onRightEdge && onTopEdge) || (onBottomEdge && onLeftEdge)) {
|
||||
pane.style.cursor = "nesw-resize";
|
||||
} else if (onRightEdge || onLeftEdge) {
|
||||
pane.style.cursor = "ew-resize";
|
||||
} else if (onBottomEdge || onTopEdge) {
|
||||
pane.style.cursor = "ns-resize";
|
||||
} else if (canMove()) {
|
||||
pane.style.cursor = "move";
|
||||
} else {
|
||||
pane.style.cursor = "default";
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
function onUp(e) {
|
||||
calc(e);
|
||||
|
||||
if (clicked && clicked.isMoving) {
|
||||
// Snap
|
||||
var snapped = {
|
||||
width: b.width,
|
||||
height: b.height,
|
||||
};
|
||||
|
||||
if (
|
||||
b.top < FULLSCREEN_MARGINS ||
|
||||
b.left < FULLSCREEN_MARGINS ||
|
||||
b.right > window.innerWidth - FULLSCREEN_MARGINS ||
|
||||
b.bottom > window.innerHeight - FULLSCREEN_MARGINS
|
||||
) {
|
||||
// hintFull();
|
||||
setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
|
||||
preSnapped = snapped;
|
||||
} else if (b.top < MARGINS) {
|
||||
// hintTop();
|
||||
setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
|
||||
preSnapped = snapped;
|
||||
} else if (b.left < MARGINS) {
|
||||
// hintLeft();
|
||||
setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
|
||||
preSnapped = snapped;
|
||||
} else if (b.right > rightScreenEdge) {
|
||||
// hintRight();
|
||||
setBounds(
|
||||
pane,
|
||||
window.innerWidth / 2,
|
||||
0,
|
||||
window.innerWidth / 2,
|
||||
window.innerHeight,
|
||||
);
|
||||
preSnapped = snapped;
|
||||
} else if (b.bottom > bottomScreenEdge) {
|
||||
// hintBottom();
|
||||
setBounds(
|
||||
pane,
|
||||
0,
|
||||
window.innerHeight / 2,
|
||||
window.innerWidth,
|
||||
window.innerWidth / 2,
|
||||
);
|
||||
preSnapped = snapped;
|
||||
} else {
|
||||
preSnapped = null;
|
||||
}
|
||||
|
||||
hintHide();
|
||||
}
|
||||
|
||||
clicked = null;
|
||||
}
|
||||
}
|
||||
63
assets/js/components/map-01.js
Normal file
63
assets/js/components/map-01.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import jsVectorMap from "jsvectormap";
|
||||
import "jsvectormap/dist/maps/world";
|
||||
|
||||
const map01 = () => {
|
||||
const mapSelectorOne = document.querySelectorAll("#mapOne");
|
||||
|
||||
if (mapSelectorOne.length) {
|
||||
const mapOne = new jsVectorMap({
|
||||
selector: "#mapOne",
|
||||
map: "world",
|
||||
zoomButtons: false,
|
||||
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fontFamily: "Outfit",
|
||||
fill: "#D9D9D9",
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
fill: "#465fff",
|
||||
},
|
||||
},
|
||||
markers: [
|
||||
{
|
||||
name: "Egypt",
|
||||
coords: [26.8206, 30.8025],
|
||||
},
|
||||
{
|
||||
name: "United Kingdom",
|
||||
coords: [55.3781, 3.436],
|
||||
},
|
||||
{
|
||||
name: "United States",
|
||||
coords: [37.0902, -95.7129],
|
||||
},
|
||||
],
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
strokeWidth: 1,
|
||||
fill: "#465fff",
|
||||
fillOpacity: 1,
|
||||
r: 4,
|
||||
},
|
||||
hover: {
|
||||
fill: "#465fff",
|
||||
fillOpacity: 1,
|
||||
},
|
||||
selected: {},
|
||||
selectedHover: {},
|
||||
},
|
||||
|
||||
onRegionTooltipShow: function (tooltip, code) {
|
||||
if (code === "EG") {
|
||||
tooltip.selector.innerHTML =
|
||||
tooltip.text() + " <b>(Hello Russia)</b>";
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default map01;
|
||||
Reference in New Issue
Block a user