search

fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
814 stars 98 forks source link

Modular UMD #132

Closed Pixelous closed 1 year ago

Pixelous commented 3 years ago

Hi,

Sorry for spamming)

Can you please make fancybox.umd.js less heavy by making it modular?

Removing panzoom, hash, thumbs, toolbar, etc. to a separate js files.

By the way maybe it is a good idea to add tags (lightbox, gallery, slider, etc.) to github main page https://github.com/fancyapps/ui below About title?

fancyapps commented 3 years ago

Hi,

I don't think there is a perfect solution for everyone. Some might prefer to combine everything into one file, another would not. You can always grab the source and build your own ESM/UMD bundle. Also, the modern web does not have this issue, because bundling all assets is preferred way (using Webpack or other bundlers).

Anyway, thanks for your suggestions.

Pixelous commented 3 years ago

@fancyapps ok, got it.

Take a look how it is done in Swiper slider https://github.com/nolimits4web/swiper

Custom build

https://swiperjs.com/swiper-api#custom-build

Using JS Modules https://swiperjs.com/swiper-api#using-js-modules

Using Build Script https://swiperjs.com/swiper-api#using-build-script

What do you think?

fancyapps commented 3 years ago

Removing panzoom, hash, thumbs, toolbar, etc. to a separate js files.

1) Actually, they are already split into separate files. 2) Panzoom is used used by Carousel and Fancybox for gestures and animations, therefore you can not remove it to decrease file size. 3) Components load plugins that are defined inside /plugins/index.js file (for example, https://github.com/fancyapps/ui/blob/main/src/Fancybox/plugins/index.js) and at the time of creating this codebase, it was not possible to import ES6 modules conditionally.

EMDM45 commented 3 years ago

Why should i load file, including Panzoom and Carousel, if i don't use them on my page? Maybe, Fancybox depends on Panzoom and Carousel? and can't work without?

fancyapps commented 3 years ago

Fancybox is built on top of Carousel and Carousel is built on top of Panzoom. Also, Fancybox uses Panzoom for touch guestures for images. Therefore all 3 components are available from fancybox UMD file and you do not need to include the rest.

EMDM45 commented 3 years ago

Fancybox is built on top of Carousel and Carousel is built on top of Panzoom. Also, Fancybox uses Panzoom for touch guestures for images. Therefore all 3 components are available from fancybox UMD file and you do not need to include the rest.

Ok. Thanks for explaining.

bangank36 commented 1 year ago

You can always grab the source and build your own ESM/UMD bundle

Hi @fancyapps, I bought v4 of the plugin and can create a customized build for my own, but I realize on v5 everything is pre-built, so this option no longer works right? Also, can I access the old Samples page for v4?

fancyapps commented 1 year ago

Hi, Here you can find links to past releases - https://fancyapps.com/resources/releases/

Sorry, but there are no plans to make it more modular, it would be a maintenance nightmare and would only increase complexity and file size.

bangank36 commented 1 year ago

@fancyapps Thanks for responding, I think it would be helpful to support v5 in order to allow custom user-made plugins to be integrated into the bundle via API. This way it can help us to migrate from v4 to v5. Great plugin, as always though