في الوقت الحالي، صناديق العرض للأحداث ليست جيدة جدًا. في الأساس، لا تختلف عن صناديق العرض العادية للمواضيع، ولا تتضمن التاريخ أو الوقت أو الوصف وما إلى ذلك (إلا إذا تم وضعها في عنوان الموضوع كحل بديل).
إليك مثال لحدث من موقعنا:
هل سيكون من الممكن ربطه بالبطاقات الجديدة (والممتازة) التي تظهر عند النقر في التقويم للأحداث، وتقديمها كصناديق عرض؟ على سبيل المثال:
قد لا يكون ذلك ممكنًا على الإطلاق، ولكني أتساءل عما إذا كان يمكن تعديل البيانات الوصفية لمنشورات الأحداث بحيث يتم عرضها كصناديق عرض بطريقة تسلط الضوء على معلومات الحدث الهامة (خاصة داخليًا).
أثناء العبث بقائمة السياق تلك، أتساءل عما إذا كان “إضافة إلى التقويم” سيكون في مكان أفضل مباشرة على البطاقة. كل الأشياء الأخرى إدارية إلى حد ما، ولكن هذا الشيء مخصص لجميع المستخدمين وسيظهر بشكل جيد في واجهة المستخدم.
في منشورات الأحداث، أضع خيار “إضافة إلى التقويم” في مكان واضح؛ يمكنك إضافة هذا إلى رأس جافاسكريبت السمة الذي يمكن الوصول إليه من قائمة المظهر في لوحة الإدارة:
<script>
(() => {
const eventInfoSelector = ".event-header .event-info";
const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
const menuContentSelector = ".fk-d-menu__inner-content";
const addToCalendarSelector = "li.add-to-calendar > button";
// Add inline CSS to keep text and icon black on hover
const style = document.createElement("style");
style.innerHTML = `
.btn.btn-icon-text.custom-add-to-calendar-btn,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover {
color: black !important;
}
.btn.btn-icon-text.custom-add-to-calendar-btn svg,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
fill: black !important;
}
`;
document.head.appendChild(style);
// Helper to wait for an element in the DOM
const waitForElement = (selector, timeout = 3000) => {
return new Promise((resolve, reject) => {
const el = document.querySelector(selector);
if (el) return resolve(el);
const observer = new MutationObserver(() => {
const found = document.querySelector(selector);
if (found) {
observer.disconnect();
resolve(found);
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
};
const createAddToCalendarButton = async () => {
const eventInfo = document.querySelector(eventInfoSelector);
if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;
const button = document.createElement("button");
button.className = "btn btn-icon-text custom-add-to-calendar-btn";
button.title = "Add to calendar";
button.innerHTML = `
<svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="#file">
</use>
</svg>
<span class="d-button-label">Add to calendar</span>
`;
// Inline styles for left alignment
button.style.display = "inline-flex";
button.style.justifyContent = "flex-start";
button.style.marginLeft = "0";
button.style.marginBottom = "4px";
button.style.backgroundColor = "#f0f0f0";
button.style.borderRadius = "6px";
button.style.transition = "transform 0.2s";
button.style.cursor = "pointer";
// Click logic: open menu and trigger original Add to Calendar
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // open menu
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// Insert into event-info
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// Observe DOM changes (Ember-safe)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Initial attempt
createAddToCalendarButton();
})();
</script>
، هذا سيجعل الترويج للحدث يتألق أكثر بالفعل.
