رویدادهای JavaScript سفارشی

Bricks مجموعه‌ای از رویداد JavaScript سفارشی دارد تا تعامل و functionality سایت را گسترش دهید. این رویدادها به actionها یا تغییرات مشخص در سایت Bricks واکنش نشان می‌دهند.

رویدادهای المان Form

• bricks/form/submit — قبل از AJAX ارسال فرم
• bricks/form/success — پس از موفقیت AJAX
• bricks/form/error — پس از خطای AJAX

رویدادهای Tabs / Tabs (Nestable)

• bricks/tabs/changed: پس از کلیک روی عنوان tab (@since 1.9.8)

// Listen for the 'bricks/tabs/changed' event
document.addEventListener('bricks/tabs/changed', (event) => {
  // Extract information from the event detail
  const { elementId, activeIndex, activeTitle, activePane } = event.detail;

  // Only target elementID lwxvfh
  if( elementId !== 'lwxvfh' ) {
    return;
  }

  // Example: Log the details to the console
  console.log(`Tabs Changed - Element ID: ${elementId}, Active Index: ${activeIndex}, Active Title: ${activeTitle}, Active Pane: ${activePane}`);

  // Your custom logic here
  // For example, update the UI based on the tab change
});

رویدادهای Accordion / Accordion (Nestable)

• bricks/accordion/open: پس از باز شدن آیتم (@since 1.9.8)
• bricks/accordion/close: پس از بسته شدن آیتم (@since 1.9.8)

// Listen for the 'bricks/accordion/open' event
document.addEventListener('bricks/accordion/open', (event) => {
  // Extract information from the event detail
  const { elementId, openItem } = event.detail;

  // Only target elementID qwe3th
  if( elementId !== 'qwe3th' ) {
    return;
  }

  // Example: Log the details to the console
  console.log(`Accordion Opened - Element ID: ${elementId}, Open Item ID: ${openItem}`);

  // Your custom logic here
  // For example, update the UI based on the accordion item being opened
});

// Listen for the 'bricks/accordion/close' event
document.addEventListener('bricks/accordion/close', (event) => {
  // Extract information from the event detail
  const { elementId, closeItem } = event.detail;

  // Only target elementID qwe3th
  if( elementId !== 'qwe3th' ) {
    return;
  }

  // Example: Log the details to the console
  console.log(`Accordion Closed - Element ID: ${elementId}, Closed Item ID: ${closeItem}`);

  // Your custom logic here
  // For example, update the UI based on the accordion item being closed
});

رویدادهای Animation

• bricks/animation/end/{animationId}: پس از اتمام animation مشخص

رویدادهای Popup

• bricks/popup/open — پس از باز شدن popup
• bricks/popup/close — پس از بسته شدن
• bricks/ajax/popup/start — قبل از AJAX popup
• bricks/ajax/popup/end — پس از AJAX popup
• bricks/ajax/popup/loaded — پس از افزودن محتوای AJAX به DOM

ترتیب رویداد باز شدن AJAX popup

1. bricks/ajax/popup/start
2. bricks/ajax/popup/end
3. bricks/ajax/popup/loaded
4. bricks/popup/open

رویدادهای Bricks AJAX

توجه

Bricks AJAX = Infinite Scroll، Load More، AJAX Pagination یا Query Filter.

• bricks/ajax/start: قبل از AJAX
• bricks/ajax/end: پس از AJAX
• bricks/ajax/pagination/completed: پس از pagination AJAX
• bricks/ajax/load_page/completed: پس از Infinite scroll
• bricks/ajax/query_result/completed: پس از Query filter
• bricks/ajax/query_result/displayed: پس از افزودن نتایج filter به DOM

ترتیب Infinite scroll

1. bricks/ajax/start
2. bricks/ajax/end
3. bricks/ajax/load_page/completed

ترتیب AJAX pagination

1. bricks/ajax/start
2. bricks/ajax/end
3. bricks/ajax/pagination/completed

توجه

bricks/ajax/pagination/completed فقط برای pagination مستقل است. اگر Pagination به query با Query Filters اشاره کند، این رویداد emit نمی‌شود — رویدادهای Query Filter را گوش دهید.

ترتیب AJAX query filter

1. bricks/ajax/start
2. bricks/ajax/end
3. bricks/ajax/query_result/completed
4. bricks/ajax/query_result/displayed

document.addEventListener('bricks/ajax/start', (event) => {
  // Get the queryId from the event
  const queryId = event.detail.queryId || false;

  if (!queryId) {
    return;
  }

  // Your custom logic here
  // For example, initiate a loader or update UI to indicate AJAX request start
});

document.addEventListener('bricks/ajax/end', (event) => {
  // Get the queryId from the event
  const queryId = event.detail.queryId || false;

  if (!queryId) {
    return;
  }

  // Your custom logic here
  // For example, initiate a loader or update UI to indicate AJAX request end
});

document.addEventListener('bricks/ajax/pagination/completed', (event) => {
  // Extract queryId from the event detail
  const queryId = event.detail.queryId;

  // Your custom logic here
  // For example, handle the completed pagination for the specific queryId
});

document.addEventListener('bricks/ajax/load_page/completed', (event) => {
  // Extract information from the event detail
  const { queryTrailElement, queryId } = event.detail;

  // Your custom logic here
  // For example, handle the completed AJAX page load for the specific queryId and queryTrailElement
});

document.addEventListener('bricks/ajax/query_result/completed', (event) => {
  // Extract information from the event detail
  const queryId = event.detail.queryId;

  // Your custom logic here
});

document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
  // Extract information from the event detail
  const queryId = event.detail.queryId;

  // Your custom logic here
});