Contrib.social

Allow custom renderBullet function

Open on Drupal.org →
Created on 10 January 2025, 8 days ago

Problem/Motivation

I would like to use a custom JS function to render bullets for Swiper.

Steps to reproduce

N/A

Proposed resolution

1. Add an eval() to swiper_formatter.js
2. Implement a custom hook_swiper_formatter_settings_alter() in a separate module.
3. Add anonymous JS function as a string like:

$settings['pagination']['renderBullet'] = '(index, className) => { return `<span class="${className}">${index}</span>`; }';

extra example:

function mymodule_swiper_formatter_settings_alter(string $id, array &$settings, array $output): void {
  $settings['pagination']['renderBullet'] = '(index, className) => { const el = document.querySelector(`#' . $id . ' [data-swiper-slide-index="${index}"] .usa-card__heading`); return `<span class="${className}">${el.innerText}</span>`; }';
}

Remaining tasks

Test this patch.

User interface changes

?

API changes

N/A

Data model changes

?

If there is a better way to do this I am open to suggestions. I tried something like this without the eval but JS could not execute the string by itself. If there is another way, I would love to see an example.

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States liberatr Portland, OR

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024