شريط مقارنة الصور

مكون السمة
1

|||
|-|-|-|
| :information_source: | ملخص | إضافة زر إلى المحرر لإنشاء شريط تمرير تفاعلي لمقارنة الصور قابل للسحب.
| :hammer_and_wrench:|المستودع| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| :question:|دليل التثبيت|كيفية تثبيت سمة أو مكون سمة|
| :open_book:|جديد في سمات Discourse؟| دليل المبتدئين لاستخدام سمات Discourse|

<!- - املأ “repoName” و “repoURL” لزر التثبيت التلقائي – >

تثبيت مكون السمة هذا

<!- - صف هذه السمة/المكون في جملة أو جملتين – >

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

<!- - أضف لقطات شاشة (إن وجدت) – >

IMG_2908
IMG_2908526×616 123 KB

<!- - أضف المزيد من التفاصيل واشرح الإعدادات (إن وجدت) – >

هذه هي محاولتي الأولى في تطوير Discourse، لذا أعتذر إذا ارتكبت أي أخطاء.

27 إعجابًا
2

ما هو قيد التنفيذ؟ (هل هناك 20 حرفًا الآن؟)

إعجابَين (2)
3
4 إعجابات
4

WIP هو العمل قيد التقدم.

3 إعجابات
5

هذا رائع! شكراً على هذه المساهمة :+1:

ما نوع التحديثات التي تفكر بها؟

4 إعجابات
6

بشكل أساسي، أحتاج إلى تنظيف الكود وجعله أكثر توافقًا مع Discourse. إنه فوضوي بعض الشيء في الوقت الحالي، حيث كنت أتعلم بنشاط كيفية إنشاء مكون سمة هنا :slight_smile:

أخطط أيضًا لإضافة طريقة لتغيير اتجاه شريط التمرير من المنشئ - في الوقت الحالي، الاتجاه هو ما تم تعيينه في إعدادات المسؤول، وأود أن أجعل هذا قابلاً للتحكم من قبل المستخدم. ( تعديل: تمت إضافة هذا! )

أود أيضًا إضافة المزيد من التحكم في أنماط مقبض/فاصل شريط التمرير، ولكن للأسف هذا غير ممكن حقًا. يقوم JavaScript الذي يتعامل مع شريط التمرير ببناء شريط التمرير قبل أي تغييرات في CSS ولا يعيد بناء شريط التمرير عند تغيير CSS.

9 إعجابات
7

أشياء رائعة! :heart:
شكراً للمساهمة :raised_hands:

4 إعجابات
8

لقد أضفت القدرة للمستخدم على اختيار شريط تمرير عمودي أو أفقي، باستخدام سمة data-direction-horizontal أو data-direction-vertical. سيتم استخدام الإعداد الافتراضي المختار في إعدادات المسؤول إذا لم يحدد المستخدم اتجاهًا


هذا التحديث متاح الآن على GitHub أو من لوحة تحكم المسؤول في Discourse، إذا قمت بتثبيت مكون السمة

5 إعجابات
9

رائع جدًا، شكرًا جوزيف! يعمل بشكل جيد، لكنني أرى هذا الخطأ على موقعي:

image
image1582×146 61.6 KB

يختفي إذا قمت بتحديث الصفحة، وهذا كل ما أراه في وحدة التحكم:

image
image1866×132 59.6 KB

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

هذا رائع. عمل جيد. :+1:

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

من الصعب تحديد سبب هذا، لا يمكنني تكراره من جهتي :confused: من بين تلك الأخطاء، قد يكون الخطأ الأول فقط من هذا المكون، حيث أنني لا أستخدم حاوية تلميح أو حلقة ResizeObserver، ولكن مرة أخرى، لست متأكدًا حقًا. هل قمت بالتحديث إلى أحدث إصدار؟ لقد أجريت بعض التغييرات بالأمس قد تصلح هذا

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

شكراً جوزيف، أنا على أحدث إصدار. الأمر غريب، لا يمكنني جعل هذه الرسالة تظهر مرة أخرى ولا أرى أي مشاكل، لذا ربما كانت مجرد نزوة؟

شيء آخر، الأيقونة لا تريد التغيير. لقد أضفتها بالطبع إلى مجموعة الأيقونات الفرعية لـ SVG. لقد جربت أيضًا أيقونات مختلفة تعمل بالفعل على موقعي وهي لا تتغير من البرق. أحاول تغييرها إلى arrows-alt-h

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

هذا خطئي، لقد قمت للتو بتنفيذ تغيير سيصلح ذلك. شكراً لك على اكتشاف ذلك!

3 إعجابات
15

رائع جدًا، لدي بعض المشاكل:

التوطين

في منتدانا، انتقلنا إلى إعدادات اللغة en_GB، لذلك عندما أمرر الماوس فوق النص، أحصل على:

صورة
صورة311×119 2.23 KB

بدلاً من النص البديل/النكهة من إعدادات المكون:
صورة
صورة606×262 5.85 KB

لا يمكن تحديد النص

يبدو أن المكون الإضافي يسرق جميع أحداث النقر بالماوس ويمنعني من تحديد أي نص على الصفحة للنسخ/اللصق/الاقتباس، وما إلى ذلك. هذه ليست مشكلة على meta.discourse… يسعدني تقديم المزيد من التفاصيل حول تكويني/الموضوع الخاص بي (معظمها موضوع Sam البسيط مع بعض المكونات الإضافية مثل المعرض وصور GIF) لقد اختفى… أنا أحب التكنولوجيا.

3.1.0.beta4

(f0bdb2ee9a)

لا يعمل في فايرفوكس على الإطلاق (وبعض مستخدمي كروم على الهاتف المحمول)

صورة
صورة574×471 64.9 KB

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

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

هممم… هذا غريب، لقد اختبرته على فايرفوكس بدون مشاكل. سأرى ما إذا كان بإمكاني تكرار هذا. أحب الأخطاء العشوائية :melting_face: المكتبة التي أستخدمها ليس لديها أي مشاكل في مستودع GitHub لـ Firefox، مفتوحًا أو مغلقًا، مما يجعل إصلاح الأخطاء أكثر صعوبة.

المواقع المحلية - لست متأكدًا من العملية الخاصة بتوفير ملفات المواقع المحلية، يمكنني إضافة en.GB لأنني أتحدث تلك اللغة ولكن هذا هو مدى خبرتي. هل يعرف مؤلفو مكونات السمات الآخرون كيف تعمل ترجمات ملفات المواقع المحلية؟ هل يجب عليّ فقط تشغيل النص عبر ترجمة جوجل؟ :sweat_smile:

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

الاختلاف الوحيد الذي يمكنني رؤيته بين المكون الخاص بك والمكون المعروف أنه يعمل (giphy) هو المسافة البادئة…

ربما يكون كل شيء جيد في ملف yml على نفس مستوى المسافة البادئة شيء ما شيء ما محلل شيء ما.

بشكل أساسي… أنا هاوٍ وليس لدي أي فكرة عما أفعله.

3 إعجابات
18

أعرف ما تشعر به :slight_smile: سألقي نظرة، أنا أستخدم محلل YML الخاص بـ VS Studio ولكنه قد لا يكون مطابقًا للمعايير بنسبة 100٪. سأجرب بعض المسافات البادئة اليدوية التقليدية في Notepad

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

@Frully لقد قمت بإصلاح مشكلة فايرفوكس - يجب أن يعمل هذا الآن على كل متصفح (لقد اختبرت كروم وفايرفوكس وسفاري والإصدارات المتنقلة دون مشاكل). إذا قمت بتحديث هذا، فسيعمل لمستخدمي فايرفوكس لديك

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

مرحباً

هذا المكون الخاص بالمظهر رائع جداً، شكراً لكم وقد قمت بتثبيته للتو :slight_smile:

مشكلة في نص الزر والنص النائب

لدي أيضاً المكون الخاص بالمظهر

بعد التثبيت لدي:

  • نص الزر “منزلق مقارنة الصور” أيضاً على الزر “معرض صور متراص”
  • النص النائب لـ “منزلق مقارنة الصور” بدلاً من النص النائب لـ “معرض صور متراص”

image
image932×647 31.9 KB

غريب، أليس كذلك؟

ستيفان

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

لم أفكر في تلك المشكلة. شكرًا على لفت انتباهي إليها @Stephane_Roy!

المشكلة هي أن كلا مكوني السمة يستخدمان نفس متغيرات الترجمة. قد تواجه مكونات سمة أخرى نفس المشكلة.. الحل هو تحديث/تغيير اسم button_text و add_images_prompt في الأماكن أدناه. سأقوم بتحديث Masonry Image Gallery أيضًا.

translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;

api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“<0xC2><0xA0>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});

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