اسکیمای Element Interactions (Element Interactions Schema)

---

title: اسکیمای Element Interactions (Element Interactions Schema) description: طرح کامل برای تعاملات عناصر: محرک ها، اقدامات، اهداف، تنظیمات انیمیشن، و شرایط فرعی.

---

فعل و انفعالات عناصر رفتار مبتنی بر رویداد را تعریف می‌کنند: هنگامی‌که یک ماشه شلیک می‌شود، یک عمل روی یک هدف اجرا می‌شود. آنها در کلید _interactions در داخل شی settings هر عنصر ذخیره می‌شوند.

ساختار داده (Data structure)

فعل و انفعالات یک آرایه مسطح از آیتم های تعامل هستند. هر آیتم یک رویداد ماشه، اقدامی‌که باید انجام شود و یک عنصر یا انتخابگر هدف را مشخص می‌کند.

interactionItem core properties

ویژگی (Property)	نوع (Type)	توضیح (Description)
id	string \	عدد صحیح
trigger	string	رویدادی که این تعامل را فعال می‌کند (به محرک‌های زیر مراجعه کنید)
action	string	اقدام برای انجام (به اقدامات زیر مراجعه کنید)
target	string	مرجع هدف ("self"، شناسه عنصر، یا زمینه انتخابگر)
targetSelector	string	انتخابگر CSS برای المان هدف
delay	string	تاخیر قبل از اجرای عمل (ms)
runOnce	boolean	اگر درست باشد، تعامل فقط یک بار فعال می‌شود

خواص اضافی

این ویژگی ها بسته به اقدام انتخاب شده اعمال می‌شوند:

ویژگی (Property)	نوع (Type)	Used with
animationType	string	startAnimation (animation type)
animationId	string	startAnimation (predefined animation ID)
animationDelay	string	startAnimation (animation delay)
animationDuration	string	startAnimation (animation duration)
jsFunction	string	javascript (function name to call)
jsFunctionArgs	array	javascript (arguments array: [{ jsFunctionArg: "value" }])
scrollToDelay	string	scrollTo (delay before scrolling)
scrollToOffset	string	scrollTo (scroll offset in pixels)
scrollOffset	string	scroll trigger (scroll position threshold)
rootMargin	string	enterView/leaveView (IntersectionObserver root margin)
templateId	string	Template ID reference
formId	string	Form element ID
ajaxQueryId	string	AJAX query element ID
offCanvasSelector	string	toggleOffCanvas (offcanvas CSS selector)
toggleOffCanvasInfo	string	toggleOffCanvas (info field)
filterElementId	string	Query filter element ID
infoBoxId	string	Info box element ID
loadMoreQuery	string	loadMore (query element ID)
targetFormSelector	string	clearForm (form CSS selector)
actionAttributeKey	string	setAttribute/removeAttribute/toggleAttribute (attribute name)
actionAttributeValue	string	setAttribute/toggleAttribute (attribute value)
disablePreventDefault	boolean	Do not call preventDefault() on the trigger event
storageType	string	storageAdd/storageRemove/storageCount (storage type)
popupContextId	string	Popup context ID
popupContextType	string	Popup context type
conditionsSep	string	Visual separator for conditions UI

مثال (Example)

{
  "_interactions": [
    {
      "id": "abc123",
      "trigger": "click",
      "action": "startAnimation",
      "target": "self",
      "animationType": "fadeIn",
      "animationDuration": "500"
    },
    {
      "id": "def456",
      "trigger": "enterView",
      "action": "show",
      "target": "self",
      "rootMargin": "0px 0px -100px 0px",
      "runOnce": true
    }
  ]
}

تریگرها (Triggers)

عنصر - click - mouseover - focus - blur - mouseenter - mouseleave - enterView - leaveView - animationEnd - ajaxStart - ajaxEnd - formSubmit - formSuccess - formError

مرورگر/پنجره - scroll - contentLoaded - mouseleaveWindow

فیلترهای پرس و جو - filterOptionEmpty - filterOptionNotEmpty

ووکامرس - wooAddedToCart - wooAddingToCart - wooRemovedFromCart - wooUpdateCart - wooCouponApplied - wooCouponRemoved

الگوهای بازشو دارای دو محرک اضافی (showPopup، hidePopup) از طریق نوع templateInteractionItem در تنظیمات الگو هستند.

اکشن‌ها (Actions)

Action	توضیح (Description)
show	نمایش عنصر
hide	پنهان کردن عنصر
click	روی عنصر کلیک کنید
setAttribute	یک ویژگی HTML تنظیم کنید
removeAttribute	یک ویژگی HTML را حذف کنید
toggleAttribute	یک ویژگی HTML را تغییر دهید
toggleOffCanvas	یک پانل offcanvas را تغییر دهید
loadMore	بارگیری موارد بیشتر (حلقه پرس و جو)
startAnimation	یک انیمیشن CSS راه اندازی کنید
scrollTo	به یک عنصر بروید
javascript	یک تابع جاوا اسکریپت سفارشی را اجرا کنید
openAddress	آدرس نقشه را باز کنید
closeAddress	آدرس نقشه را ببندید
clearForm	یک فرم را پاک کنید
storageAdd	مورد را به حافظه مرورگر اضافه کنید
storageRemove	حذف مورد از حافظه مرورگر
storageCount	موارد موجود در حافظه مرورگر را بشمارید

شرایط فرعی تعامل

هر فعل و انفعال می‌تواند به صورت اختیاری شامل شرایط فرعی باشد که قبل از شروع عملیات باید برآورده شوند. اینها در آرایه interactionConditions ذخیره می‌شوند و interactionConditionsRelation کنترل می‌کند که آیا شرایط با منطق AND یا OR ترکیب می‌شوند.

ویژگی (Property)	نوع (Type)	توضیح (Description)
interactionConditions	array	آرایه ای از اشیاء interactionConditionItem
interactionConditionsRelation	string	طرحواره پالت های رنگی

interactionConditionItem properties

ویژگی (Property)	نوع (Type)	توضیح (Description)
conditionType	string	نوع بررسی وضعیت
storageCompare	string	عملگر مقایسه برای مقدار ذخیره‌سازی
storageCompareValue	any	ارزش برای مقایسه فضای ذخیره‌سازی
storageKey	any	کلید ذخیره‌سازی مرورگر برای بررسی

مثال با شرایط فرعی

{
  "id": "abc123",
  "trigger": "click",
  "action": "show",
  "target": "self",
  "interactionConditions": [
    {
      "conditionType": "storage",
      "storageKey": "user_preference",
      "storageCompare": "==",
      "storageCompareValue": "dark"
    }
  ],
  "interactionConditionsRelation": "and"
}