Problem/Motivation

There is a new major release of splide v4 that could be incorporated into this module. Currently it only works with version 3.

Headups:
splide:2.x requires a minimum D9.3. For D8.8, please stick to splide:1.x.

Breaking changes

  1. [fixed] > Splide v4 merges all options in breakpoints that matches the current width into base options.
    As per 2023/09/25:
    This means if you set Destroy on the smallest device says 320px, it will bubble up to the base options, and the desktop slider is just destroyed, as well. If you see your slider destroyed as a plain list, this is it.
  2. [fixed, the fix retains v3] At v4, .splide__slider is deprecated and more of a trouble than helpful. Thus if you want to support nested sliders like what this module did as seen at Splide Paragraphs/ Views, direct descendant selector (>) become more complicated, see next line. If your CSS makes use of .splide__slider, be sure update it.
  3. [fixed, the fix retains v3, below] HTML structural changes. The most obvious are the new placement of arrows and pagination:
    Default pagination placements between versions.
    v4: 
    .splide > .splide__slider
       > .splide__track > UL.splide__list
       > UL.splide__pagination

    v3:

    .splide
      > .splide__slider > .splide__track > UL.splide__list
      > UL.splide__pagination
  4. [fixed] perPage > 2 have empty clones on LHS, seen at asNavFor, carousel.

Remaining tasks

  • [x] Downgrade splide:2.x minimum requirement to blazy:2.17 like splide:1.x since blazy:3.x has no stable release, yet.
  • [x] Update splide.optionset.default.yml file to the new default values along with their form item descriptions.
  • [x] Update few sample optionsets if any new default changes. This is one good reason to clone samples. Defaults/ factory samples might be updated at some point like this v4 upgrade.
  • [x] Update the entire user optionsets to the new relevant default values if any difference.
  • [x] Rename module extensions: Media, Zoom, Fullscreen into xMedia, xZoom, xFullscreen, since v4 reserves Media, and likely the rest:
    Media in v4: https://github.com/Splidejs/splide/blob/v4.1.3/dist/js/splide.js#L2836
    No Media in v3: https://github.com/Splidejs/splide/blob/v3.6.12/dist/js/splide.js#L2729
  • [x] Remove splide__autoplay with double buttons to a single toggle.
  • [x] Fix breaking changes with bubbling-up Destroy.
  • [x] Update copied skins to reflect v4 changes.
  • [x] Update for HTML structural changes.

User interface changes

  • Added a new option Show progress bar for Autoplay option.
  • Updated few optionset descriptions to reflect v4.

API changes

See https://splidejs.com/guides/version4/.

Data model changes

A hook_post_update must be provided to update for all the new changes.

CommentFileSizeAuthor
#20 3384337-v4-19.patch10.32 KBgausarts
#11 3384337-v4-11.patch74.63 KBgausarts
#10 3384337-v4-10.patch74.57 KBgausarts
#9 3384337-v4-9.patch74.38 KBgausarts
#9 splide-autoplay-Screenshot from 2023-09-25 15-46-45.png28.26 KBgausarts

Comments

devkinetic created an issue. See original summary.

gausarts’s picture

gausarts commented

You are correct.

I haven't been able to do the migrations, yet.

Patches are very much welcome.
Or if anyone would like to sponsor 2-3 hours, please get in touch.

Thank you.

devkinetic’s picture

devkinetic commented

That is totally fine. It just had not been mentioned yet, and I assumed there were a few things needed to accomplish the migration that might warrant a ticket.

If I find some time I might take a crack at the simple stuff like documentation, updating the relevant files from the library, etc. I just started yesterday so I am not super familiar with this module or Splide itself.

With that said, rather than commit this to 1.0.x, it might be good to cut a new dev branch, and update this ticket so MRs will go against that instead.

gausarts’s picture

gausarts commented
Version: 1.0.x-dev » 2.0.x-dev
Category: Feature request » Task

Agreed, Splide v4 has a breaking change not easily synced with v3, better in 2.x :)

Elevating it to Task, since we got a sponsor for this feature, thanks to Karl. We'll put their username at project home on their permission later.
I am still reading the changes for now, and change a few little things accordingly.

gausarts’s picture

gausarts commented
Issue summary: View changes
gausarts’s picture

gausarts commented
Issue summary: View changes
gausarts’s picture

gausarts commented
Issue summary: View changes
gausarts’s picture

gausarts commented
Issue summary: View changes
gausarts’s picture

gausarts commented
Status: Active » Needs review
StatusFileSize
new 3384337-v4-9.patch74.38 KB
new splide-autoplay-Screenshot from 2023-09-25 15-46-45.png28.26 KB

Initial attempt, expect a few misses.

The autoplay and progress bar can be placed anywhere as per design requirements.
However the current implementation considers the most complex layering and positioning like seen in the screenshot, not the best UX, just minor considerations were taken when placing the autoplay button against other slide controls.

gausarts’s picture

gausarts commented
Issue summary: View changes
StatusFileSize
new 3384337-v4-10.patch74.57 KB

Minor refinements with camelCase for the plugins.

gausarts’s picture

gausarts commented
StatusFileSize
new 3384337-v4-11.patch74.63 KB

Fixed for CS, and pagination height regressions.

  • gausarts committed c6a9aaa9 on 2.0.x 
    Issue #3384337 by gausarts, devkinetic: Splide v4
gausarts’s picture

gausarts commented

Temporary commit so to spot potential regressions and misses better.

gausarts’s picture

gausarts commented
Issue summary: View changes

Added Breaking changes section.

gausarts’s picture

gausarts commented
Status: Needs review » Needs work

Marking this a NW for a temporary workaround or solution since the Breaking changes do break existing installs.

gausarts’s picture

gausarts commented
Issue summary: View changes

Added few more breaking changes, and remaining tasks.

  • gausarts committed 3a4fa39f on 2.0.x 
    Issue #3384337 by gausarts, devkinetic: Splide v4
gausarts’s picture

gausarts commented
Issue summary: View changes

Fixed for few breaking changes.

I intentionally kept old v3 Html structure to avoid too much work, and minimize breaking changes on my or your own personal projects.
We'll consider updating it perhaps at splide.module:3.x, but not during this v4 migration.

gausarts’s picture

gausarts commented
Issue summary: View changes
Status: Needs work » Needs review
  • Fixed for stylelint auto fix bad moves.
  • Fixed for perPage > 2 having empty clones on LHS, seen at asNavFor, carousel, etc.
gausarts’s picture

gausarts commented
StatusFileSize
new 3384337-v4-19.patch10.32 KB

Somebody likely me just forgot to upload the patch.

  • gausarts committed a9141ae4 on 2.0.x 
    Issue #3384337 by gausarts, devkinetic: Splide v4
gausarts’s picture

gausarts commented

Leaving it to NR before closing this, in case I missed the obvious.

If anyone are willing to test out the latest DEV, which may work with blazy:2.18, your reports are also very much appreciated.
We'll have an initial alpha or beta this week after another check.

Thank you.

gausarts’s picture

gausarts commented
Issue summary: View changes
karlshea’s picture

karlshea
he/him
Primary language English
Location Minneapolis 🇺🇸
commented

Initial test looks good! I have one complicated slider on this build I'm half finished with that mostly worked the same, and then some others I haven't really worked on yet but they all seem to work the same as they did before with defaults.

karlshea’s picture

karlshea
he/him
Primary language English
Location Minneapolis 🇺🇸
commented

Adding a new breakpoint to an existing optionset seems buggy, it's overriding an existing one. I'm not sure if that's a new issue with 2.x however.

gausarts’s picture

gausarts commented

Thank you.

Mind pasting your exported splide.optionset for further checks? I need the exact buggy optionset to be on the same page.

> Adding a new breakpoint to an existing optionset seems buggy, it's overriding an existing one....
Yes, I am still figuring out the reasons behing this change. v4 does bubble up the settings as mentioned in their docs and quoted in issue summary, causing Breaking changes #1. I had solved the most obvious Destroy issue as otherwise desktop slider is destroyed as well. Must re-check other bubbling issues.

There is an option Media query, not sure if it solves this issue if changed from min to max. Worth looking, though.

gausarts’s picture

gausarts commented

Aside from destroy, the obvious breaking Splide X: Carousel sample. It used to show 5 perPage as designed, but now only 3 until Media query is changed to max.

I am thinking the default Media query should be max to avoid preserve v3 with anything else like perPage, destroy, etc.

Could you confirm, that is the case so we can update min to max for optionsets once?

gausarts’s picture

gausarts commented

I just noticed it happened since v3 specific for perPage. It got away from v2 update likely.
Only v4 is more expansive even to destroy.

perPage is 7 on desktop, 5 for 769px and 3 for 481 as seen in the sample:
/admin/config/media/splide/x_splide_nav
https://git.drupalcode.org/project/splide/-/blob/1.0.x/modules/splide_x/...

They were fine in v2 if you downgrade it. It starts breaking in v3.

gausarts’s picture

gausarts commented

Based on https://splidejs.com/v3/guides/version3/

I think this feature line got away from attention during migration from v2 to v3:
> Support the min-width media query for breakpoints

Not checked yet, but I guessed that if I add Media query min to each breakpoint should fix this perPage, destroy, etc issues. Better than making all min to max.

That exact line should explain the breaking samples with v3 which were fine in v2.

gausarts’s picture

gausarts commented

On second thought, adding Media query option to each breakpoints sound like chaos, min max would be jumbled if any values were mixed up. I don't know how to sentence such chaotic situation better in English :)

The old v2 with a single base Media query to dictate the entire breakpoints sound more reasonable.

  • gausarts committed e42d78ee on 2.0.x 
    Issue #3384337 by gausarts, devkinetic, KarlShea: Splide v4
gausarts’s picture

gausarts commented
Status: Needs review » Needs work

Changed default mediaQuery to max.

An oversight during v2 to v3 migration:
https://splidejs.com/guides/options/#breakpoints
> A collection of responsive options for specific breakpoints. By default, Splide uses max-width(desktop-first) to check the device width, but you are able to change it to min-width (mobile-first) by mediaQuery.

It was likely tricked by Slick default with Mobile first (min-width), which is not the case for Splide.

We'll need to back-port this to splide:1.x with v3 later, but splide:2.x should be fine now.

gausarts’s picture

gausarts commented

FYI:
#32 didn't update user defined optionsets, except for default, to avoid things I am not aware of with your own definitions.

Should be no issues if you always check Optimized option like all the samples so to automatically fetch defaults, otherwise you may want to tick that Optimized option to correct it automatically.

gausarts’s picture

gausarts commented
Status: Needs work » Fixed

I think I am fairly happy with the most fundamental issue oversight just found from v2 to v3 upgrade, and so inherited in v4.

Initial 2.x was just out. Any other issues can be reported as regular project issues.

Again head-ups:
Should be fine with Blazy:2.19+ since Blazy:3.x is not out, just yet.

Thank you all, and @KarlShea for sponsoring this, without which, I might be a bit of lacking of motivations :)

karlshea’s picture

karlshea
he/him
Primary language English
Location Minneapolis 🇺🇸
commented

> Yes, I am still figuring out the reasons behing this change. v4 does bubble up the settings as mentioned in their docs and quoted in issue summary, causing Breaking changes #1. I had solved the most obvious Destroy issue as otherwise desktop slider is destroyed as well. Must re-check other bubbling issues.

Oh sorry, I wasn't super clear, I meant in the Drupal UI. But I think it was a false alarm, I tried to reproduce the issue where saving wouldn't update the number of breakpoints and I think I had just messed up the options myself!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.