Bootbox أصبح قديمًا

مطور
1

اعتبارًا من هذا الالتزام:

تم إيقاف مكتبة bootbox للحوارات.

أيها المطورون، يرجى استخدام خدمة dialog في النواة بدلاً من bootbox في السمات والإضافات المخصصة الخاصة بكم. سيتم إزالة مكتبة bootbox من نواة Discourse بالكامل في وقت ما في عام 2023.

فيما يلي بعض طلبات السحب (PRs) من الإضافات والسمات التي توضح كيفية الانتقال إلى خدمة dialog:

3 إعجابات
2

في السمة المخصصة الخاصة بي، لدي شيء كهذا:

    bootbox.alert('alert text');

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

3

الخيار الأسهل هو تحميل الخدمة باستخدام البحث. إليك مثال على الكود (هذا لم يتم اختباره، لكننا نستخدم شيئًا كهذا في النواة، خارج مكونات/وحدات تحكم/مسارات Ember):

<script type="text/discourse-plugin" version="0.8">
  import { getOwner } from "discourse-common/lib/get-owner";
  const dialog = getOwner(this).lookup("service:dialog");
  dialog.alert('alert text');
</script>
إعجاب واحد (1)
4

شكرا. لقد جربت هذا ولكنني أحصل على خطأ:
SyntaxError: /discourse/theme-11/initializers/theme-field-36-common-html-script-2: 'import' and 'export' may only appear at the top level. (13:4)

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

آه، صحيح، نحتاج إلى استخدام require في علامات النص البرمجي هذه. إذا كان من الممكن مشاركته، فما هو الكود الكامل لما تفعله هنا؟ أود أن أقترح بديلاً لعلامة <script> هذه، لقد نقلنا معظم كود السمة إلى ملفات JS مستقلة في مكونات السمة التي نحافظ عليها بأنفسنا وقد يكون من الأسهل إجراء إعادة هيكلة عامة هنا لك.

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

شكراً على العرض! إليك النص البرمجي الكامل (مع تعديل بعض النصوص بشكل طفيف)، والذي كان يعمل بشكل جيد حتى لاحظنا أن نافذة Bootbox المنبثقة لم تعد تعرض علامات HTML بشكل صحيح.

<script type="text/discourse-plugin" version="0.8">
    if (typeof bootbox === 'undefined') {
        console.log('Cannot trigger undefined "bootbox"');

        return;
    }

    let currentUser = api.getCurrentUser();

    if (currentUser) {
        api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
            let userGroups = user.groups.map(group => group.name);

            let bodyClasses = userGroups.map(group => `user-group--${group}`);

            document.querySelector('body').classList.add(...bodyClasses)

            let showPopup;

            switch(true) {
                case userGroups.includes('restricted_member'):
                    showPopup = true;
                    break;
                case userGroups.includes('users_all'):
                case userGroups.includes('officers'):
                    showPopup = false;
                    break;
                default:
                    showPopup = true;
                    break;
            }

            if (!showPopup) {
                return;
            }

            let alertHeading = '<h2>Oh no!</h2>';

            let alertBody = '<p>Your account is currently restricted and you no longer have access to valuable resources. <a href="https://meta.discourse.org">Click here</a> for more information.</p>';

            bootbox.alert(alertHeading + alertBody);
        });
    }
</script>
إعجاب واحد (1)
7

مرحباً تيم،
إليك البديل، لاحظ أن المحتويات هنا تحتاج إلى الذهاب في ملف JS تهيئة في مكون. يمكنك رؤية مثال بسيط لهيكل مكون كامل هنا.

import { withPluginApi } from "discourse/lib/plugin-api";
import { getOwner } from "discourse-common/lib/get-owner";
import { schedule } from "@ember/runloop";
import { htmlSafe } from "@ember/template";

export default {
  name: "tester-initializer",

  initialize() {
    withPluginApi("0.8", (api) => {
      const currentUser = api.getCurrentUser();

      if (currentUser) {
        const userGroups = currentUser.groups.map((group) => group.name);
        let showPopup = false;

        switch (true) {
          case userGroups.includes("admins"):
            showPopup = true;
            break;
        }

        if (!showPopup) {
          return;
        }

        const alertHeading = "يا إلهي!";
        const alertBody =
          'حسابك مقيد حاليًا ولم يعد لديك حق الوصول إلى الموارد القيمة. \u003ca href="https://meta.discourse.org"\u003e انقر هنا \u003c/a\u003e لمزيد من المعلومات.';

        schedule("afterRender", () => {
          // تأخير مطلوب حتى يتم تحميل خدمة الحوار
          const dialog = getOwner(this).lookup("service:dialog");
          dialog.alert({
            message: htmlSafe(alertBody),
            title: alertHeading,
          });
        });
      }
    });
  },
};

آمل أن يساعد هذا.

3 إعجابات
8

هذا مثالي. شكراً جزيلاً!

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

تم حل إيقاف استخدام bootbox بالكامل اعتبارًا من هذا الـ PR: DEV: remove bootbox dependency by tyb-talks · Pull Request #27443 · discourse/discourse · GitHub. وفقًا للمنشئ الأصلي، يرجى استخدام خدمة dialog بدلاً من ذلك.

3 إعجابات
10

تم إغلاق هذا الموضوع تلقائيًا بعد 11 يومًا. لم يعد يُسمح بالردود الجديدة.