You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.2 KiB
5.2 KiB
MultiLanguageJSONWidget – توضیحات توصیفی (بدون کد)
هدف
- ساخت یک ویجت سفارشی سازگار با Django Unfold برای مدیریت فیلدهای JSON چندزبانه در ادمین.
- مدل داده: لیستی از آبجکتها با کلیدهای
language_codeوtitle. - تجربه کاربری روان، هماهنگ با پالت رنگی و تمهای Unfold (لایت/دارک)، و قابل استفاده در تمام اپها.
خلاصهی کارهایی که انجام شد
- ایجاد ویجت چندزبانهای که:
- کدهای زبان فعال را از مدل
dj_language.models.Language(فقطstatus=True) میخواند و در صورت نبود، ازsettings.LANGUAGESاستفاده میکند. - کدهای زبان را بهصورت افقی نمایش میدهد؛ با اسکرول افقی که فقط روی hover ظاهر میشود (مانند سایدبار Unfold).
- برای زبانهای دارای مقدار، دکمهی زبان را «پررنگتر» نشان میدهد و این زبانها را در ابتدای نوار قرار میدهد.
- حالت فعال (Active) را با رنگهای primary مطابق پالت UNFOLD نمایش میدهد تا فعال بودن زبان واضح باشد.
- برای هر زبان یک ورودی رندر میکند که «نوع ورودی» آن قابل تنظیم است:
TextInput/Textarea/Wysiwyg(همگی نسخههای Unfold). - مقادیر موجود را شناسایی و در ورودیهای مربوطه پیشنمایش میدهد.
- کدهای زبان فعال را از مدل
ذخیرهسازی و سازگاری با JSONField
- برای سازگاری کامل با
JSONField، مقدار نهایی در یک input پنهان بهصورت «رشتهی JSON» نگهداری و ارسال میشود. value_from_datadictرشتهی JSON معتبر تولید میکند تا خطای «نوع لیست» در پردازش فرم رخ ندهد.- ورودی اولیه میتواند یکی از حالتهای زیر باشد و نرمالسازی میشود:
list[dict]مانند:[{'language_code': 'fa', 'title': '...'}]dictتکی یا نگاشت کدزبان→مقدارstrشامل JSON که ابتدا parse میشود.
هماهنگی کامل با Unfold
- استفاده از کلاسهای استایل Unfold برای ورودیها و وضعیتها.
- احترام به متغیرهای رنگی UNFOLD (base/primary/secondary/font) و تغییر خودکار استایل در لایت/دارک.
- اسکرولبار با استایل هماهنگ و نمایش فقط هنگام hover.
قابل استفاده در تمام اپها (ماژولار)
- کلاس ویجت به ماژول
utilsمنتقل شد تا در هر اپی فقط با import قابل استفاده باشد. - تمپلیت ویجت به مسیر سراسری
templates/منتقل شد تا وابستگی به اپ خاصی نداشته باشد. - اسکریپتهای موردنیاز در همان تمپلیت اینلاین شدهاند؛ نیازی به فایل JS جدا نیست.
نحوهی استفاده (مفهومی – بدون کد)
- کلاس ویجت را از ماژول ابزارها ایمپورت کنید.
- در فرم ادمین (Meta.widgets)، برای هر فیلد JSON موردنظر، ویجت را تنظیم کنید و «نوع ورودی» دلخواه را مشخص کنید (TextInput/Textarea/Wysiwyg نسخه Unfold).
- پس از ذخیره، مقدار فیلد JSON بهصورت
list[{'language_code', 'title'}]تولید/بهروزرسانی میشود.
نکات UX و رفتار
- نمایش افقی کدهای زبان با اسکرول افقی روی hover.
- حالت فعال با بوردر/پسزمینهی primary مطابق پالت رنگی پروژه.
- وقتی زبانِ خاصی مقدار دارد، دکمهی آن پررنگتر نمایش داده و به ابتدای لیست منتقل میشود.
- فوکوس خودکار ورودی پس از فعالسازی زبان برای سرعت در ویرایش.
سناریوهای پشتیبانیشده
- تعداد زیاد زبانها (اسکرول افقی و بدون شکستن چیدمان).
- مقداردهی اولیه از انواع مختلف (list/dict/string JSON).
- تم تیره/روشن و تغییر خودکار رنگها.
محدودیتها و ملاحظات
- فرض بر این است که ساختار دادهی هدف، لیست آبجکتهای
{'language_code', 'title'}است. - برای ورودیهای WYSIWYG، سیاست پاکسازی/اعتبارسنجی محتوای HTML به لایههای دیگر سپرده شده است.
نتیجه
- یک ویجت چندبارمصرف، سازگار با Unfold، با UX دوستانه برای مدیریت محتوای چندزبانه در ادمین.
- پیادهسازی بهگونهای است که بدون وابستگی به اپ خاص، در کل پروژه قابل استفاده باشد.