مكون سمة Tabbis

مطور
1

مرحباً! أحاول إنشاء مكون سمة لاستخدام البرنامج النصي الخارجي tabbis.js حتى أتمكن من إنشاء علامات تبويب في المشاركات. لقد اتبعت الدليل هنا: Embed widget within text in a topic - #2 by Johani

إليك ما يبدو عليه مكون السمة الخاص بي حتى الآن.

عام > رأس

<script type="text/discourse-plugin" version="0.8">
// options
const TABBIS_SCRIPT_SRC = "https://cdn.jsdelivr.net/gh/jenstornell/tabbis.js/assets/js/src/tabbis.es6.js";

// نستخدم مكتبة Discourse Load script لضمان تحميل البرامج النصية
// بشكل صحيح. لا تقلق، هذا ذكي بما يكفي لعدم تكرار البرنامج النصي
// إذا تم تحميله بالفعل
const loadScript = require("discourse/lib/load-script").default;

// إنشاء مزخرف للمشاركة
api.decorateCookedElement(
  post => {
    // هل تحتوي هذه المشاركة على علامات تبويب tabbis؟
    const tabbisTabs = post.querySelectorAll('[data-wrap="tabbis"]');

    // نعم، لذا دعنا نقوم ببعض العمل.
    if (tabbisTabs.length) {
      // لكل عنصر واجهة مستخدم tabbis
      tabbisTabs.forEach(tabbisTab => {

        // تحميل برنامج نصي tabbis.
        loadScript(TABBIS_SCRIPT_SRC).then(() => {

          // كل شيء جاهز، دعنا نستدعي برنامج نصي tabbis
          tabbis();
        });
      });
    }
  },
  // إضافة معرف إلى المزخرف لتجنب تسرب الذاكرة
  { id: "render-tabbis-tabs" }
);

</script>

عام > CSS (منسوخ مباشرة من مستودع tabbis.js)

[data-panes] {
  --color: #000; }

[data-tabs] {
  background: var(--color);
  border: 2px solid var(--color);
  border-bottom: none;
  overflow-x: auto;
  display: flex; }
  [data-tabs] > [role="tab"] {
    all: unset;
    padding: .75rem 1.5rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    outline: none; }
    [data-tabs] > [role="tab"]:hover {
      background: rgba(255, 255, 255, 0.2); }
    [data-tabs] > [role="tab"]:active {
      background: rgba(255, 255, 255, 0.3); }
    [data-tabs] > [role="tab"]:focus {
      border: 1px dotted rgba(255, 255, 255, 0.5); }
    [data-tabs] > [role="tab"][aria-selected="true"] {
      background: #fff;
      color: #000; }
      [data-tabs] > [role="tab"][aria-selected="true"]:focus {
        border: 1px dotted rgba(0, 0, 0, 0.5); }

[data-panes] {
  border: 2px solid var(--color);
  border-top: none; }
  [data-panes] > * {
    background: #fff;
    padding: 2rem;
    font-weight: 600;
    outline: none;
    border: 1px solid transparent; }
    [data-panes] > *:focus {
      border: 1px dotted rgba(0, 0, 0, 0.5); }
    @media screen and (max-width: 460px) {
      [data-panes] > * {
        padding: 1rem; } }

سياسة أمان المحتوى مصدر البرنامج النصي: تمت إضافة https://cdn.jsdelivr.net

ترميز المشاركة

[wrap="tabbis"]<div data-tabs>
<button>Tab1</button>
<button>Tab2</button>
<button>Tab3</button>
</div>

<div data-panes>
<div>Pane1</div>
<div>Pane2</div>
<div>Pane3</div>
</div>[/wrap]

يبدو أن البرنامج النصي يتم تحميله للحظة وجيزة بعد تحرير المشاركة، ولكن بمجرد تحميله بالكامل يصبح غير قابل للاستخدام.

يظهر هذا في وحدة التحكم ولكن ليس لدي أي فكرة عن كيفية إصلاحه. هل هناك تعارض مع علامات التبويب الأخرى في Discourse؟

tabbis uncaught type error
tabbis uncaught type error345×286 14.4 KB

كيف يمكنني جعل هذا يعمل؟ لقد نفدت أفكاري!

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

أعتقد أنك ستحتاج إلى إضافة للقيام بذلك، ولكن قد أكون مخطئًا.

قد تبحث في إضافة math أو أدلة الإضافات.

3

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

4

يرجى مشاركة كود المصدر الكامل لمكون السمة الخاص بك (يفضل أن يكون كمستودع GitHub) حتى نتمكن من مساعدتك فيه بسهولة.

بالمناسبة، يبدو هذا مكون سمة مفيدًا جدًا!

6 إعجابات
5

شكراً لك! لقد فوجئت لرؤية أنه لا يوجد بالفعل نوع من المكونات أو الإضافات الخاصة بعلامات التبويب هنا؛ إنه شيء أريده حقًا لمجتمعي لذا سأجرب ذلك. أنا جديد جدًا في أي شيء باستثناء جافاسكريبت الأساسي جدًا ولكني أحاول التعلم.

إعجابَين (2)
6

تغيير ترميز المنشور إلى

[wrap="tabbis"]
  <div>
    <span>Tab1</span>
    <span>Tab2</span>
    <span>Tab3</span>
  </div>

  <div>
    <div>Pane1</div>
    <div>Pane2</div>
    <div>Pane3</div>
  </div>
[/wrap]

يجعله يعمل :tada:

هناك بعض الملاحظات التي يمكنك استخدامها لتحسينه أكثر:

  1. لا تستدعِ loadScript عدة مرات. تحقق مما إذا كان قد تم تحميله بالفعل قبل استدعائه، وإلا فسيتم استدعاؤه عدة مرات.

  2. قم بتمرير محدد أكثر تحديدًا إلى استدعاء tabbis()، بحيث تقوم بتهيئة المحدد الذي اخترته تحديدًا.

6 إعجابات