هل Lightbox لم يعد يعمل؟

خلل
1

لست متأكدًا مما تغير، لكنني لاحظت اليوم فقط أن النقر على الصور في المنشورات يفتح الصورة ببساطة كصفحة جديدة (رابط مباشر للصورة) بدلاً من فتحها داخل إطار Lightbox. وهذا يشمل الصور الكبيرة في المنشورات التي أعرف أنها كانت تعمل سابقًا.

لا أرى أي إعدادات جديدة في واجهة المسؤول لتمكين/تعطيل هذه الميزة. لست متأكدًا متى توقفت هذه الوظيفة عن العمل. Discourse محدث بالكامل وفقًا لصفحة /admin/upgrade.

هل هناك أي طريقة لتصحيح سبب عدم عرض الصور في Lightbox؟ يمكنني رؤية في كود HTML أن فئة “Lightbox” يتم تطبيقها على الصور بشكل صحيح (وهناك أيضًا فئة “Lightbox” على وسم a الذي يلتف حول الصورة):

image
image602×107 13 KB

موقعي يستخدم Cloudflare. لست متأكدًا مما إذا كان ذلك قد يتداخل بأي شكل من الأشكال؟

شكرًا!

3 إعجابات
2

لقد اختبرت هذا للتو باستخدام إصدار Discourse 2.9.0.beta3 ولم أتمكن من إعادة إنتاج المشكلة.

يؤدي النقر على صورة في موضوع إلى ظهور Lightbox تحتوي على الصورة، ويُظهر HTML أنه يتم تطبيق فئة lightbox على الصورة أيضًا.

أنا أصل إلى Discourse عبر Google Chrome الإصدار 99.0.4844.82، والموقع الذي اختبرته والذي يعمل بنظام Discourse مستضاف عبر Digital Ocean.

نأمل أن يساعد هذا في تقديم المزيد من البصيرة حول ما قد يسبب هذه المشكلة في موقعك.

4 إعجابات
3

هل تستخدم أيضًا rocket loader أو أي تحسين آخر لـ JavaScript من Cloudflare على discourse؟

إذا كان الأمر كذلك، فإن أول شيء يجب تجربته هو تعطيل التحسينات المذكورة والمحاولة مرة أخرى.

4 إعجابات
4

لا يبدو أن المشكلة تعتمد على المتصفح أو نظام التشغيل. أراها في Firefox و Chrome و Safari على macOS و Safari على iOS و Firefox/Chrome/Edge على Windows. لا يمكنني تحديد أي تركيبة متصفح/نظام تشغيل تعمل فيها Lightbox بالفعل، لذلك أعتقد أنها مشكلة من نوع ما في الموقع نفسه، ربما إعداد أو إضافة أخرى تكسرها؟

لست متأكدًا من كيفية أو مكان البدء في محاولة معرفة ذلك حيث لا أرى أي شيء في وحدة التحكم أو سجلات الموقع يشير إلى وجود مشكلة.

لا، لا أستخدم أي خيارات تحسين أو تصغير في Cloudflare. تم تعطيل كل هذه الخيارات. الشيء الوحيد المُمكّن حاليًا هو التخزين المؤقت لمدة 4 ساعات.

إعجاب واحد (1)
5

تمكنت من تكرار موقع الإنتاج الخاص بي محليًا وتكرار المشكلة. اتضح أنها خطأ يظهر بسبب بعض التعليمات البرمجية في مكون سمة مخصص كتبته. لا أزال لا أستطيع تفسير سبب كسر هذا لـ Lightbox أو سبب كون هذه المشكلة حديثة فقط. قد يكون خطأ لم يتم اكتشافه بعد في النواة؟

تعليمات المكون الخاصة بي بسيطة جدًا:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

كل ما يحاول القيام به هو استبدال سلسلة نصية بسيطة في محتوى المنشور المعروض. بطريقة ما، هذا يكسر جميع مربعات الضوء في جميع المنشورات (حتى تلك التي لا تحتوي على السلسلة). التعليق على سطر elem.innerHTML = ... يتسبب في عمل مربعات الضوء مرة أخرى.

لاحظ أن المثال أعلاه مبسط (المكون الفعلي الخاص بي يستبدل روابط معروضة محددة في المنشورات ويقوم بعمليات أخرى على المحتوى المطبوخ)، ولكن حتى التعليمات البرمجية البسيطة جدًا أعلاه تكرر المشكلة التي أراها.

هل هذه هي الطريقة الصحيحة لتعديل المحتوى المطبوخ في وقت العرض في المنشورات، وهل هذا خطأ جديد في النواة متعلق بمربعات الضوء؟ أم أنني كنت أفعل هذا بشكل خاطئ طوال الوقت ولم يكن ينبغي أن يعمل هذا في المقام الأول؟

6

لقد أنشأت مكون سمة بسيطًا يكشف عن مشكلة Lightbox هذه. يجب أن يتمكن أي شخص من تكرار المشكلة في أي تثبيت Discourse عن طريق تنشيط مكون السمة هذا:
https://github.com/hayatae/lightbox-theme-component-bug

إذا كان لدى أي شخص أي حلول بديلة أو اقتراحات ممكنة، فيرجى إخباري! ما زلت لست متأكدًا تمامًا لماذا يكسر هذا Lightbox.

7

بالنسبة لأي شخص آخر قد يواجه هذه المشكلة، تمكنت من إيجاد حل مؤقت في الوقت الحالي.

طالما أنك لا تجري أي استبدالات لـ innerHtml على أي عناصر تحتوي على صور سيتم عرضها في نافذة منبثقة، فلن تحدث المشكلة. تمكنت من إعادة صياغة بعض التعليمات البرمجية الخاصة بي لمطابقة العناصر بشكل أكثر تحديدًا واستهداف تلك التي ليست روابط href حول الصور فقط.

4 إعجابات