285 lines
9.7 KiB
JavaScript
285 lines
9.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
||
// Create custom alert elements
|
||
const alertOverlay = document.createElement("div");
|
||
alertOverlay.className = "custom-alert-overlay";
|
||
alertOverlay.style.display = "none";
|
||
|
||
const alertBox = document.createElement("div");
|
||
alertBox.className = "custom-alert-box";
|
||
|
||
const alertContent = document.createElement("div");
|
||
alertContent.className = "custom-alert-content";
|
||
|
||
const alertButtons = document.createElement("div");
|
||
alertButtons.className = "custom-alert-buttons";
|
||
|
||
const okButton = document.createElement("button");
|
||
okButton.className = "custom-alert-button";
|
||
okButton.textContent = "OK";
|
||
|
||
alertButtons.appendChild(okButton);
|
||
alertBox.appendChild(alertContent);
|
||
alertBox.appendChild(alertButtons);
|
||
alertOverlay.appendChild(alertBox);
|
||
document.body.appendChild(alertOverlay);
|
||
|
||
// Custom alert styles
|
||
const styles = document.createElement("style");
|
||
styles.textContent = `
|
||
.custom-alert-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.custom-alert-box {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||
max-width: 400px;
|
||
width: 90%;
|
||
}
|
||
|
||
.custom-alert-content {
|
||
margin-bottom: 20px;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.custom-alert-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.custom-alert-button {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.custom-alert-button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
|
||
.custom-confirm-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.custom-confirm-cancel {
|
||
background-color: #f44336;
|
||
}
|
||
|
||
.custom-confirm-cancel:hover {
|
||
background-color: #d32f2f;
|
||
}
|
||
`;
|
||
document.head.appendChild(styles);
|
||
|
||
// Custom alert function
|
||
window.customAlert = function(message) {
|
||
return new Promise((resolve) => {
|
||
alertContent.textContent = message;
|
||
alertOverlay.style.display = "flex";
|
||
|
||
okButton.onclick = function() {
|
||
alertOverlay.style.display = "none";
|
||
resolve(true);
|
||
};
|
||
});
|
||
};
|
||
|
||
// Custom confirm function
|
||
window.customConfirm = function(message) {
|
||
return new Promise((resolve) => {
|
||
alertContent.textContent = message;
|
||
|
||
// Clear previous buttons
|
||
alertButtons.innerHTML = "";
|
||
|
||
// Create new buttons
|
||
const cancelButton = document.createElement("button");
|
||
cancelButton.className = "custom-alert-button custom-confirm-cancel";
|
||
cancelButton.textContent = "Batal";
|
||
|
||
const confirmButton = document.createElement("button");
|
||
confirmButton.className = "custom-alert-button";
|
||
confirmButton.textContent = "Ya";
|
||
|
||
alertButtons.className = "custom-confirm-buttons";
|
||
alertButtons.appendChild(cancelButton);
|
||
alertButtons.appendChild(confirmButton);
|
||
|
||
alertOverlay.style.display = "flex";
|
||
|
||
cancelButton.onclick = function() {
|
||
alertOverlay.style.display = "none";
|
||
// Reset to default alert buttons
|
||
alertButtons.innerHTML = "";
|
||
alertButtons.appendChild(okButton);
|
||
alertButtons.className = "custom-alert-buttons";
|
||
resolve(false);
|
||
};
|
||
|
||
confirmButton.onclick = function() {
|
||
alertOverlay.style.display = "none";
|
||
// Reset to default alert buttons
|
||
alertButtons.innerHTML = "";
|
||
alertButtons.appendChild(okButton);
|
||
alertButtons.className = "custom-alert-buttons";
|
||
resolve(true);
|
||
};
|
||
});
|
||
};
|
||
|
||
// File upload handling
|
||
const uploadBox = document.querySelector("#upload-box");
|
||
const fileInput = document.getElementById("file");
|
||
const form = document.getElementById("sk-form");
|
||
|
||
// Store the initial HTML content of the upload box for resetting
|
||
const initialUploadBoxContent = `<p>Seret file anda ke sini atau <span id="browse-btn" style="color: blue; cursor: pointer;">Jelajahi</span></p>
|
||
<p>Ukuran file yang diizinkan maksimal 10 MB dengan format .jpeg, .jpg, dan .png</p>`;
|
||
|
||
// Function to reset upload box to initial state
|
||
function resetUploadBox() {
|
||
uploadBox.innerHTML = initialUploadBoxContent;
|
||
// Reattach click event to the browse button
|
||
const browseBtn = document.getElementById("browse-btn");
|
||
if (browseBtn) {
|
||
browseBtn.addEventListener("click", function() {
|
||
fileInput.click();
|
||
});
|
||
}
|
||
}
|
||
|
||
// Initialize upload box
|
||
resetUploadBox();
|
||
|
||
uploadBox.addEventListener("click", function (e) {
|
||
// Check if the user clicked on the upload box but not on a list item
|
||
if (e.target === uploadBox || e.target.tagName !== "LI") {
|
||
fileInput.click();
|
||
}
|
||
});
|
||
|
||
fileInput.addEventListener("change", function () {
|
||
handleFiles(fileInput.files);
|
||
});
|
||
|
||
uploadBox.addEventListener("dragover", function (event) {
|
||
event.preventDefault();
|
||
uploadBox.classList.add("dragover");
|
||
});
|
||
|
||
uploadBox.addEventListener("dragleave", function () {
|
||
uploadBox.classList.remove("dragover");
|
||
});
|
||
|
||
uploadBox.addEventListener("drop", function (event) {
|
||
event.preventDefault();
|
||
uploadBox.classList.remove("dragover");
|
||
handleFiles(event.dataTransfer.files);
|
||
});
|
||
|
||
async function handleFiles(files) {
|
||
if (!files.length) return;
|
||
|
||
const fileList = document.createElement("ul");
|
||
fileList.id = "file-list";
|
||
let validFileFound = false;
|
||
|
||
// Create a new DataTransfer object to manage the FileList
|
||
const dataTransfer = new DataTransfer();
|
||
|
||
for (const file of Array.from(files)) {
|
||
const validExtensions = ["jpeg", "jpg", "png"];
|
||
const fileExtension = file.name.split(".").pop().toLowerCase();
|
||
|
||
if (!validExtensions.includes(fileExtension)) {
|
||
await customAlert("File " + file.name + " tidak diperbolehkan. Hanya format JPEG, JPG, dan PNG.");
|
||
continue;
|
||
}
|
||
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
await customAlert("File " + file.name + " terlalu besar. Maksimal 10MB.");
|
||
continue;
|
||
}
|
||
|
||
validFileFound = true;
|
||
dataTransfer.items.add(file);
|
||
|
||
const listItem = document.createElement("li");
|
||
listItem.textContent = file.name;
|
||
|
||
// Add a remove button for each file
|
||
const removeBtn = document.createElement("span");
|
||
removeBtn.textContent = "×";
|
||
removeBtn.style.marginLeft = "10px";
|
||
removeBtn.style.cursor = "pointer";
|
||
removeBtn.style.fontWeight = "bold";
|
||
removeBtn.style.color = "red";
|
||
|
||
removeBtn.addEventListener("click", function(e) {
|
||
e.stopPropagation(); // Prevent triggering uploadBox click
|
||
|
||
// Create new DataTransfer without this file
|
||
const newDataTransfer = new DataTransfer();
|
||
for (let i = 0; i < fileInput.files.length; i++) {
|
||
if (fileInput.files[i].name !== file.name) {
|
||
newDataTransfer.items.add(fileInput.files[i]);
|
||
}
|
||
}
|
||
|
||
// Update the file input with the new file list
|
||
fileInput.files = newDataTransfer.files;
|
||
|
||
// If no files left, reset the upload box
|
||
if (fileInput.files.length === 0) {
|
||
resetUploadBox();
|
||
} else {
|
||
// Just remove this item from the list
|
||
listItem.remove();
|
||
}
|
||
});
|
||
|
||
listItem.appendChild(removeBtn);
|
||
fileList.appendChild(listItem);
|
||
}
|
||
|
||
if (validFileFound) {
|
||
// Clear the upload box and add the file list
|
||
uploadBox.innerHTML = "";
|
||
uploadBox.appendChild(fileList);
|
||
|
||
// Update the file input with the valid files
|
||
fileInput.files = dataTransfer.files;
|
||
} else {
|
||
// If no valid files were found, reset the file input and upload box
|
||
fileInput.value = ""; // This is crucial for allowing the same file to be selected again
|
||
resetUploadBox();
|
||
}
|
||
}
|
||
|
||
form.addEventListener("submit", async function (event) {
|
||
event.preventDefault(); // Prevent form submission initially
|
||
|
||
const confirmResult = await customConfirm("Apakah Anda yakin ingin menngupload Berita ini?");
|
||
if (confirmResult) {
|
||
form.submit(); // Submit the form if confirmed
|
||
}
|
||
});
|
||
}); |