5.0.0 Features/Roadmap (READY TO RELEASE TODAY) - HUGE MAJOR RELEASE

[Ks89]

I want to start to think about angular-modal-gallery 5.0.0. In particular I want to create a list with some possibile features.

I'll leave this list here for one month or more, before to start the implementation. I'll also update readme to encourage users to read this issue. I really need some feedbacks.

• Rewrite SCSS/CSS layout with FLEXBOX fixing some well known bugs Rewrite both html and css to use flexbox #98 Microsoft Edge - css description not well aligned (only on Edge :( ) #37 (BREAKING CHANGE)
• Performance improvements with trackById and OnPush (BREAKING CHANGE) (Commit 3cb5643 and Performance improvements with trackById and OnPush #103)
• Improve accessibility with ARIA Improve accessibility with ARIA #99 (BREAKING CHANGE)
• Remove Angular 2 support (for instance replace Renderer with Renderer2) remove Angular2 compatibility #70 (BREAKING CHANGE)
• Update to Angular 5 Update to Angular 5 when officially released #83
• Partial support to Server-Side-Rendering (SSR) with Angular Universal Initial support for SSR with angular universal #81 (BREAKING CHANGE)
• Try to add support for IE11 using navigator.mssaveblob Improve support for IE (not edge) to download images directly with navigator.mssaveblob #39
• General refactoring reorganizing the structure of this project and splitting some components ng-overlay should be a sub-component #42 (BREAKING CHANGE)
• new class Image API (with modal and plain inner objects) (BREAKNIG CHANGE)
• Try to add this big and important feature: "Improve modal layout with small previews and eventually also animations" Improve modal layout with small previews, animations and so on #48 (BREAKING CHANGE)
• Thumbnail size/more options Thumbnail size/more options [Feature request] #91 (BREAKNIG CHANGE)
• Completely rewrite "imagepointer feature" Improve imagepointer feature #49 (BREAKING CHANGE)
• Try to support this feature: "Square thumbnails" Square thumbnails #76 (BREAKING CHANGE)
• Fix bug on Microsoft Edge Desktop 5.0.0-alpha not working on Edge (desktop), why?? #108
• Support configurable buttons with custom actions Add custom buttons with custom actions #79 and Support configurable buttons [Feature request] #92 (BREAKING CHANGE)
• Support "https://github.com/mgechev/angular-seed" Rollup failure #56 (it's also working with angular-modal-gallery >= 4.0.0)
• Infinite sliding will be disabled by default Infinite sliding will be disabled by default #84 (BREAKING CHANGE)
• Click Outside will be enabled by default Click Outside will be enabled by default #85 (BREAKING CHANGE)
• Which is the best place for image description? Think about it. [I decided to use html's tag figurecaption ] [DONE - This feature will be released with Rewrite both html and css to use flexbox #98]
• remove Observable<Image[]> as input. I decided to switch to Image[] to simplify the sourcecode remove Observable<Image[]> as input. I decided to switch to Image[] to simplify the sourcecode #105 (BREAKING CHANGE)
• Update systemjs example to 5.0.0
• Update webpack example to 5.0.0
• Update angular-cli example to 5.0.0
• Add new universal example to use SSR
• Add new angular-cli-material example with Angular Material (still some issues to build it with circleci, jenkins and appveyor. However, travis and my local pc are working very well...so why???)
• Remove all deprecated APIs (both showDownloadButton and showExtUrlButton)
• Update unit testing to 5.0.0
• Update public documentation website to 5.0.0
• Add a MINIMAL migration guide from 4.x.x to 5.0.0
• Publish public documentation website on a private VPS
• Update library documentation with typedocs to 5.0.0
• choose which are the right entry points in package.json as described by angular package format 5 specifications
• add credits and licenses to all images, icons and so on
• add onpush strategy also to modal-gallery.component
• prevent browser scrolling when modal gallery is opened
• add sonarcloud.io
• switch from plnkr.co to stackblitz.com
• release the umd bundle on a CDN like unpkg.com (update: available HERE )
• test everything on IE11, Edge, iOS, Android...and what about iPhone X?

This issue will be updated every time I'll implement something on a dedicated branch 'develop'

I will be really happy if you want to create pull requests or you want to talk with me about features, before the official release. So I'll be able to change my roadmap accordingly.

[Ks89]

Branch for v4 https://github.com/Ks89/angular-modal-gallery/tree/v4

[Ks89]

New experimental branch created from v4 here: https://github.com/Ks89/angular-modal-gallery/tree/v4-experimenting-packagr

[Ks89]

Branch https://github.com/Ks89/angular-modal-gallery/tree/v4-experimenting-packagr merged into https://github.com/Ks89/angular-modal-gallery/tree/v4

[Ks89]

Renamed as version 5.0.0 because I have to release a new major version to add Angular 5 support to version 3.x.
To match semver specifications, I have to release it as 4.0.0, due to a breaking change for systemjs users.

[Ks89]

Angular 5 support re-scheduled for angular-modal-gallery 4.0.0

[Ks89]

Configurable buttons implemented in a private branch locally. Please, be patient.

[Ks89]

Server-Side-Rendering (SSR) partially implemented. I still have a non blocking issue about Mousetrap.
Also I added an official example with angular-universal.

[Ks89]

angular-seed is now officially supported (it was working also with >= 4.0.0)

[Ks89]

I'm not dead :)
At the beginning of December I will release the first alpha version of angular-modal-gallery 5.0.0.

Also, I'll push the source code on github. At the moment, I'm working privately, because It is really experimental and I need privacy :)

[Ks89]

Implemented: "remove Observable<Image[]> as input. I decided to switch to Image[] to simplify the sourcecode (BREAKING CHANGE)"

[Enngage]

Hi, you know when you are gonna release it?

[Ks89]

@Enngage
The first alpha will be released at the beginning of December.
I'll also create a plunker to test all available features.

PS: do you want to be a beta tester?
Because, apis will be different and I really need some suggestions. In this way I can change apis during alphas.
I want to define apis before the end of December.

PS: at the beginning of december, all "modal features" will be available as alpha-1. However all "plain features" (or "inline features) won't be available, because I din't implement anything, at the moment. Everything "checked" right now in the TODO list will be released as alpha-1. All others, will be available during december.

[Ks89]

Update to Angular package format v 5.0 specifications #106

https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs

Scheduled for 5.0.0 alpha-1

[Enngage]

I'm not sure what you mean by beta testing, but I will update your library as soon as its out and will let you know any issues I encounter. My project is already on Angular 5 so there should be no problems there.

[Ks89]

Ok perfect. Thank u.

PS in all alphas I'll add all missing features (not. Production ready) and finally in betas I'll write tests and fix bugs.

[vugar005]

@Ks89 Please update to font-awesome v5.

[Ks89]

Hi @vugar005 font-awesome is not mandatory in Angular modal gallery 5. You can use custom css classes for upper buttons if you want. Default icons are inside the library without requiring any external dependency.
PS: fortawesome is working to add angular support (with angular's components). At the moment is not officially available.

[vugar005]

@Ks89 the problem is when using font awesome v5 with the plugin. The icons not showing. the
exclamation is shown instead.

[Ks89]

Mmm, no wait, I didn't understand what you are saying. Could you explain?

[Ks89]

Beta 2 in finally available:

To install:

npm install angular-modal-gallery@beta

or

npm install angular-modal-gallery@5.0.0-beta.2

I replaced plnkr with stackblitz, so:
Official live demo: https://stackblitz.com/edit/angular-modal-gallery-v5

Changelog here: https://github.com/Ks89/angular-modal-gallery/releases/tag/v5.0.0-beta.2

[Ks89]

RC 1 in finally available:

To install:

npm install angular-modal-gallery@beta

or

npm install angular-modal-gallery@5.0.0-rc.1

Official live demo: https://stackblitz.com/edit/angular-modal-gallery-v5

Changelog here: https://github.com/Ks89/angular-modal-gallery/releases/tag/v5.0.0-rc.1

PS: I'm working on the official documentation for 5.0.0. This weekend (probably tomorrow) I'll release the first draft on github pages (different URL of the existing version, because I don't want to overwrite the documentation of 4.x.x).

The final version is still scheduled for the end of February. No unexpected delay, at the moment :).

[Ks89]

Website for versions >= 5.x.x created with an initial documentation (still not complete and with lot of missing things, so please be careful. I need at least an entire week to add all important stuff, so please be patient).

At the moment, I built this website with angular-modal-gallery 4 :) and all demos are disabled. I updated "getting started", "features" and "migration guide" (all these pages are still drafts).

URL: https://ks89.github.io/angular-modal-gallery-2018.github.io/

[Ks89]

RC 2 with a very small changelog (I temporary removed refresh button because it wasn't working as expected)

To install:

npm install angular-modal-gallery@beta

or

npm install angular-modal-gallery@5.0.0-rc.2

Official live demo: https://stackblitz.com/edit/angular-modal-gallery-v5

Changelog here: https://github.com/Ks89/angular-modal-gallery/releases/tag/v5.0.0-rc.2

The final version is still scheduled for the end of February. No unexpected delay, at the moment :).

This weekend I'll post the first complete draft of the documentation website.

PS: I updated the official github's readme with better descriptions and other stuff HERE

[Ks89]

I'm sorry guys for this unscheduled release, but I found a bug and I had to fix it very quickly.

RC 3 with a very small changelog (fix full description)

To install:

npm install angular-modal-gallery@beta

or

npm install angular-modal-gallery@5.0.0-rc.3

Official live demo: https://stackblitz.com/edit/angular-modal-gallery-v5

Changelog here: https://github.com/Ks89/angular-modal-gallery/releases/tag/v5.0.0-rc.3

[Ks89]

First full draft of the doc website with demos and other fixes.

https://ks89.github.io/angular-modal-gallery-2018.github.io/

Next week I'll release the final version as expected.

[ckelkar]

Hello @Ks89 ,
Is there any way I can add html and css for styling description mentioned in the image? Actually I am getting some data regarding each image from API and I want to show it using bullet points.

Also I am using <ks-modal-gallery>. Is this previous version? Do I need to upgrade myself to stable one?

Thanks.

[Ks89]

Hi @ckelkar.
At the moment you can change css as you want (because it's simply css :)), however html is not supported, but it could be a good feature for future releases (5.x.x because I don't expect breaking changes to do that). I opened an issue with this feature.

The version that you are using is correct and it's a beta/rc. Today I'll release the stable version.

[Ks89]

5.0.x is out after months of work

[ckelkar]

Hi @Ks89 ,
Thank you. Also I am struggling with adding { length: 10, wrap: true } to Custom gallery layout. I have seen class structure. Only LineLayout, GridLayout has that feature. How should I add it to the AdvancedLAyout?

[Ks89]

if you want a custom layout you have to build everything by yourself. Check my official example (on stackblitz or also inside my repo in examples folder) or also in the doc.

So limit is like a ngFor to only some of the input images.
wrap is simply the flex-wrap property https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

So you have to build a flexbox container with inside a ngFor to iterate over your images.

If you see my examples I made a demo adding also descriptions over plain images.

[Ks89]

Hi @ckelkar I implemented HTML description support as you asked previously in 5.1.0-beta.1
https://github.com/Ks89/angular-modal-gallery/releases/tag/v5.1.0-beta.1

If you are interested, please add a comment or activate notification to this issue #123, so I can ignore this one (#80) forever, because there are many people here and I don't want to spam their.

[andrei8788]

Hello. At me at loading component slowly are loaded pictures!

Their location is set by:
plainGalleryGrid: PlainGalleryConfig = {
strategy: PlainGalleryStrategy.GRID,
layout: new GridLayout({ width: '319px', height: '210px' }, { length: 4, wrap: true })
};
in the template:
<ks-modal-gallery [id]="0" [modalImages]="images"
[plainGalleryConfig]="plainGalleryGrid"
>
Can this be fixed with the help of this library?

[Ks89]

Hi @andrei8788 the browser requests images automatically to display they, so it will be loaded asynchronously on demand.

Also i suggest to decrease the size of images if possible, using smaller thumbs and bigger modal images.

However, are you searching a way to preload images?

[andrei8788]

I would use any method to avoid this. Can I add some animation? I'll try to reduce the size of the pictures, but I would like the pictures to be in good quality. I have been trying to solve the problem more than one day and nothing happens. For any of your advice I will be very grateful!

[Ks89]

Ok, first use thumbs with a small images (not highly simply compressed, to prevent quality loss) using lower resolutions. From your screen it seems that there are many images on the same screen, so it could be useless to have images with 4k resolution and so on.

For the modal image use another one, with higher resolution.

I didn't think about animations in plain gallery, but it could be a good idea for next releases.

PS: which network are you using? Did you measure the speed in kb/s? Because the problem it's the library itself, but either slow network or giant images.

I cannot promise anything but I'm thinking to rewrite plain gallery with more features. However, this summer I'm really busy and probably I won't be able to release as 7.0.0, but as 8.0.0.

[andrei8788]

Images of good quality. 300 - 500 KB 1366 x 768.
Rather, this is the problem.
Thank you for your help! It will be nice to see the updated version, but I like the current one too!

[andrei8788]

Network:

[andrei8788]

Once again many thanks! The problem is solved.