@@ -1340,6 +1415,8 @@
openImageUploader(targetInput, imageType);
});
}
+
+ initContactCharacterCounters(newCard);
}
function handleIconSourceChange(radio) {
@@ -1385,7 +1462,8 @@
`;
container.insertAdjacentHTML('beforeend', html);
+ initContactCharacterCounters(container.lastElementChild);
}
function removeFormField(button) {
@@ -1662,4 +1741,4 @@
}
});
}
-
\ No newline at end of file
+
diff --git a/views/admin/home/index.ejs b/views/admin/home/index.ejs
index 727d9c3..f42a535 100644
--- a/views/admin/home/index.ejs
+++ b/views/admin/home/index.ejs
@@ -189,6 +189,8 @@
// Khởi tạo các nút upload ảnh (dùng chung cho toàn bộ các section)
initImageUploads();
+ initHomeCharacterCounters(document);
+ initImagePreviewFallbacks(document);
});
// --- UTILITIES (Dùng chung) ---
@@ -223,6 +225,43 @@
);
}
+ function clearImagePreviewError(previewImg) {
+ if (!previewImg?.parentElement) {
+ return;
+ }
+
+ previewImg.parentElement.querySelectorAll(".image-preview-missing").forEach((node) => node.remove());
+ }
+
+ function bindImagePreviewFallback(previewImg) {
+ if (!previewImg || previewImg.dataset.previewFallbackBound === "true") {
+ return;
+ }
+
+ previewImg.dataset.previewFallbackBound = "true";
+ previewImg.addEventListener("error", () => {
+ previewImg.classList.add("d-none");
+ previewImg.removeAttribute("src");
+
+ if (!previewImg.parentElement?.querySelector(".image-preview-missing")) {
+ const note = document.createElement("small");
+ note.className = "text-warning d-block mt-2 image-preview-missing";
+ note.textContent = "Preview unavailable: current image path could not be loaded.";
+ previewImg.parentElement?.appendChild(note);
+ }
+ });
+ }
+
+ function initImagePreviewFallbacks(scope = document) {
+ scope.querySelectorAll("img.img-thumbnail").forEach((previewImg) => {
+ bindImagePreviewFallback(previewImg);
+
+ if (previewImg.complete && previewImg.getAttribute("src") && previewImg.naturalWidth === 0) {
+ previewImg.dispatchEvent(new Event("error"));
+ }
+ });
+ }
+
function revokePendingPreview(targetInput) {
const previewUrl = pendingPreviewUrls.get(targetInput);
if (previewUrl) {
@@ -307,6 +346,8 @@
const previewImg = findImagePreview(input);
if (previewImg) {
+ clearImagePreviewError(previewImg);
+ bindImagePreviewFallback(previewImg);
previewImg.src = new URL(result.path, window.location.origin).toString();
previewImg.classList.remove("d-none");
}
@@ -364,6 +405,8 @@
const previewImg = findImagePreview(input);
if (previewImg) {
+ clearImagePreviewError(previewImg);
+ bindImagePreviewFallback(previewImg);
previewImg.src = previewUrl;
previewImg.classList.remove("d-none");
}
@@ -402,4 +445,93 @@
new bootstrap.Toast(toast, { autohide: true, delay: 3000 }).show();
toast.addEventListener("hidden.bs.toast", () => toast.remove());
}
+
+ function ensureCharacterHint(input) {
+ if (!input || (!input.dataset.maxlength && !input.dataset.maxwords)) {
+ return null;
+ }
+
+ if (!input.id) {
+ input.id = `homeField_${Math.random().toString(36).slice(2, 10)}`;
+ }
+
+ const field = input.closest(".col-md-12, .col-md-9, .col-md-6, .col-md-4, .col-md-3, .col-lg-12, .col-lg-8, .col-lg-6, .col-lg-4, .col-12") || input.parentElement;
+ const anchor = input.closest(".input-group") || input;
+ const parent = anchor?.parentElement || field;
+ if (!field || !anchor || !parent) {
+ return null;
+ }
+
+ let hint = field.querySelector(`[data-counter-for="${input.id}"]`);
+ if (!hint) {
+ hint = document.createElement("small");
+ hint.className = "form-text home-limit-counter text-secondary";
+ hint.dataset.counterFor = input.id;
+ }
+
+ if (hint.previousElementSibling !== anchor) {
+ parent.insertBefore(hint, anchor.nextSibling);
+ }
+
+ return hint;
+ }
+
+ function updateCharacterHint(input) {
+ const hint = ensureCharacterHint(input);
+ if (!hint) {
+ return;
+ }
+
+ const hasWordLimit = Boolean(input.dataset.maxwords);
+ const hasCharLimit = Boolean(input.dataset.maxlength);
+
+ if (hasWordLimit) {
+ const maxWords = Number(input.dataset.maxwords);
+ const normalized = (input.value || "").replace(/\s+/g, " ").trim();
+ const words = normalized ? normalized.split(" ") : [];
+
+ if (Number.isFinite(maxWords) && maxWords > 0 && words.length > maxWords) {
+ input.value = words.slice(0, maxWords).join(" ");
+ } else if (normalized !== input.value) {
+ input.value = normalized;
+ }
+ }
+
+ if (hasCharLimit) {
+ const max = Number(input.dataset.maxlength);
+ if (Number.isFinite(max) && max > 0 && (input.value || "").length > max) {
+ input.value = (input.value || "").slice(0, max);
+ }
+ }
+
+ if (hasWordLimit) {
+ const maxWords = Number(input.dataset.maxwords);
+ const currentWords = input.value ? input.value.split(" ").filter(Boolean).length : 0;
+ const currentLength = (input.value || "").length;
+ const maxLength = Number(input.dataset.maxlength);
+ hint.textContent = hasCharLimit
+ ? `${currentWords}/${maxWords} words, ${currentLength}/${maxLength} characters`
+ : `${currentWords}/${maxWords} words`;
+ hint.classList.toggle("text-danger", currentWords >= maxWords || (hasCharLimit && currentLength >= maxLength));
+ return;
+ }
+
+ const max = Number(input.dataset.maxlength);
+ const length = (input.value || "").length;
+ hint.textContent = `${length}/${max} characters`;
+ hint.classList.toggle("text-danger", length >= max);
+ }
+
+ function initHomeCharacterCounters(scope = document) {
+ scope.querySelectorAll("input[data-maxlength], textarea[data-maxlength], input[data-maxwords], textarea[data-maxwords]").forEach((input) => {
+ updateCharacterHint(input);
+
+ if (input.dataset.counterBound === "true") {
+ return;
+ }
+
+ input.dataset.counterBound = "true";
+ input.addEventListener("input", () => updateCharacterHint(input));
+ });
+ }
diff --git a/views/admin/home/sections/achievements.ejs b/views/admin/home/sections/achievements.ejs
index 28f4bd5..cff2aaf 100644
--- a/views/admin/home/sections/achievements.ejs
+++ b/views/admin/home/sections/achievements.ejs
@@ -19,6 +19,8 @@
id="achievementsHeading"
value="<%= data.achievements?.heading || '' %>"
placeholder="e.g., Our Achievements in Numbers"
+ maxlength="56"
+ data-maxlength="56"
/>
@@ -29,6 +31,8 @@
id="achievementsSubheading"
value="<%= data.achievements?.subheading || '' %>"
placeholder="e.g., Did You Know"
+ maxlength="32"
+ data-maxlength="32"
/>
@@ -59,8 +63,11 @@
@@ -68,8 +75,11 @@
@@ -77,16 +87,22 @@
Description
diff --git a/views/admin/home/sections/blogPreview.ejs b/views/admin/home/sections/blogPreview.ejs
index 342fef7..ef9e352 100644
--- a/views/admin/home/sections/blogPreview.ejs
+++ b/views/admin/home/sections/blogPreview.ejs
@@ -16,12 +16,14 @@
Heading
Subheading
@@ -172,4 +176,4 @@
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
-
\ No newline at end of file
+
diff --git a/views/admin/home/sections/faq.ejs b/views/admin/home/sections/faq.ejs
index 7176faf..93ae27d 100644
--- a/views/admin/home/sections/faq.ejs
+++ b/views/admin/home/sections/faq.ejs
@@ -14,17 +14,17 @@
Heading
Subheading
Description
+ placeholder="Enter description" maxlength="220" data-maxlength="220"><%= data.faq?.description || '' %>
@@ -69,6 +69,8 @@
class="form-control"
id="faqQuestion_<%= index %>"
value="<%= item.question || '' %>"
+ maxlength="120"
+ data-maxlength="120"
placeholder="Enter question"
/>
@@ -78,6 +80,8 @@
class="form-control"
id="faqAnswer_<%= index %>"
rows="3"
+ maxlength="320"
+ data-maxlength="320"
placeholder="Enter answer"
><%= item.answer || '' %>
@@ -102,12 +106,12 @@
Label
Link
@@ -145,4 +149,4 @@
items
};
};
-
\ No newline at end of file
+
diff --git a/views/admin/home/sections/floatingContact.ejs b/views/admin/home/sections/floatingContact.ejs
index a471013..8da4ae4 100644
--- a/views/admin/home/sections/floatingContact.ejs
+++ b/views/admin/home/sections/floatingContact.ejs
@@ -48,7 +48,8 @@
Brand Image
@@ -63,7 +64,7 @@
style="height: 120px; width: 120px; object-fit: contain; background: #fff;"
alt="Brand preview" />
- Raster logo uploads are normalized to 104x104 WebP to match the homepage widget.
+ Hiển thị thực tế khoảng 35x35px. Raster uploads are normalized to 104x104 WebP to match the homepage widget.
Fallback Trigger Image
@@ -73,7 +74,8 @@
class="form-control"
id="floatingContactTriggerImage"
value="<%= data.floatingContact?.trigger?.imageSrc || '' %>"
- placeholder="/uploads/home/floating-contact/floating-trigger-icon.webp" />
+ placeholder="/uploads/home/floating-contact/floating-trigger-icon.webp"
+ maxlength="255" data-maxlength="255" />
Shown only when the trigger slideshow cannot use the brand image and action icons. Raster uploads are normalized to 96x96 WebP.
+ Hiển thị thực tế khoảng 26x26px. Shown only when the trigger slideshow cannot use the brand image and action icons. Raster uploads are normalized to 96x96 WebP.
@@ -322,12 +324,12 @@
Link
-
@@ -306,6 +315,9 @@
container.appendChild(clone);
updateLabels();
+ if (typeof initHomeCharacterCounters === "function") {
+ initHomeCharacterCounters(clone);
+ }
});
container.addEventListener("click", (e) => {
@@ -330,5 +342,8 @@
// Initial normalization (in case indices rendered from server are not 0..n)
updateLabels();
+ if (typeof initHomeCharacterCounters === "function") {
+ initHomeCharacterCounters(container);
+ }
});
diff --git a/views/admin/home/sections/partners.ejs b/views/admin/home/sections/partners.ejs
index 1536ade..271a5c6 100644
--- a/views/admin/home/sections/partners.ejs
+++ b/views/admin/home/sections/partners.ejs
@@ -10,6 +10,7 @@
+
Award icons trên homepage hiển thị khoảng 124x124px. Khuyến nghị upload ảnh vuông hoặc logo nền trong suốt tối thiểu 248x248px.
Main Image
-
Recommended size: 375x419px
+
Khung desktop hiện khoảng 318x347px. Khuyến nghị upload ít nhất 750x820px, tỉ lệ dọc khoảng 0.91:1.