8.0.0 Features/Roadmap - MAJOR RELEASE

Ks89 commented 5 years ago

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

Changes in 8.0.0

[x] Migrate to angular/cdk to fix all issues with angular/material (Breaking Change) (fixes #137, #111, #95)
[x] Split plain-gallery and modal-gallery decoupling those components. Instead, define new APIs to open modal-gallery as a service (Breaking Change)
[x] upgrade to Angular 12 and angular-cli 12
[x] remove support to both Angular 6, 7, 8, 9, 10 and 11(Breaking Change)
[x] remove Module.forRoot() (Breaking Change)
[x] move keyboard configuration into libconfig (permits different configuration for every instance of the library). (Breaking Change)
[x] upgrade all examples to Angular 12 (cli, material and universal)
[x] remove systemjs example
[x] create new stackblitz example
[x] upgrade doc website
[x] experiment with Angular IVY and use as recommended by Angular team ('partial' in tsconfig)
[x] remove npm's codeclimate coverage reporter to use the new version
[x] Add ability to set fallback image #194 (Breaking Change)
[x] Find a way to disable titles if requested by the user (optional with low priority) #179 (Breaking Change)
[x] remove size from plainGallery Image interface #206 (Breaking Change) - reported by @ studiocuboweb
[x] Add new param to previewConfig to display previews on small screens #213 (pull request #214 by vlafranca)
[x] Change the background color of modal gallery #225 (requested by @danurasenan here #225)

Upgrade tests (challenging and it will require many weeks)

[x] all directives
[x] all utils
[x] all services
[x] carousel component
[x] carousel previews component
[x] current-image component
[x] dots component
[x] plain-gallery component
[x] previews component
[x] upper-buttons component
[x] modal-image component

Rescheduled for next releases

[ ] add performance optimization sideEffect:false as described in APF9 temporarily removed
[ ] requestFullscreen and exitFullscreen return a promise. So I should use then+catch and decide when emitButtonAfterHook will be invoked. (Breaking Change)
[ ] try to understand if there is a better way to change live updates of images array triggering change detection. Probably a dedicated method to alter the images array is better #209

I'll release alphas, betas and so on as always. Feel free to report feedbacks and ideas.

Ks89 commented 5 years ago

I'll work on 8.0.0 this summer because I'm really busy.

Ks89 commented 5 years ago

Pushed changes with angular 8 final and initial changes to migrate to angular/cdk. It's already working, but still experimental.

chdanielmueller commented 4 years ago

Hi @Ks89, Are you progressing? Are there any points where I could help? Cheers, Daniel

Ks89 commented 4 years ago

Hi @chdanielmueller thank you for the comment about this topic.

At the moment I'm very busy without enough spare time and I can't work on any Github repos. However, this December I'll try to work on the next release, or at least I'll try do add many commits to speed up the development.

This Spring I implemented the logic to fix issues about angular material with angular cdk and it was working very well. Then, I improved again the code and I made tons of experiments to improve apis, during this Summer. One of the thing that I really I hate is that plain-gallery and modal-gallery are coupled. This is not good. I'm trying to split everything and give apis to add only plain-gallery or modal-gallery. So, plain-gallery will be added as usual with a component, however modal-gallery will be managed with a service.

In this way you'll be able to open modal-gallery everywhere without adding difficult customizations to the plain-gallery (question asked many times here and also privately). Also, if a user want to use plain-gallery should get automatically modal-gallery features (if I'll find a way to implement it easely).

The difficult thing is to define the right APIs. So this is the main reason why I didn't release 8.0.0 and I'm losing most of the time doing experiments on demo projects, because I don't want to do the same error made years ago about plain-gallery with modal-gallery inside. I want to think for more time than before to do the right choice.

This Winter I want to try to release the first alpha version with all apis implemented to understand if it could be ok. So basically all scenarios covered by the example on stackblitz should behave correctly. Right now, the code of 800 branch can't receive custom configurations to the library, because I'm still defining the APIs. However, it already have angular/cdk inside.

PS: I updated the first post. Most of those points are very easy to do and they are not important right now.

If you want to help me, at the moment, the best thing to do is to try npm i --save @ks89/angular-modal-gallery version@7.3.0-rc.1 on all possible projects to understand if it's working correctly. Because, I'm using the code in 7.3.0-rc.1 to handle input parameters in version 8.0.0. So any feedbacks are really appreciated.

thanks.

Ks89 commented 4 years ago

To not disappear again for months, I decided to comment this issues with the important changes made on the 800 branch.

I pushed some new code that I wrote since this Autumn. Finally I found a way to split plain-gallery and modal-gallery and I updated plain-gallery examples with the new apis. Everything is still experimental with tons of bugs. Modal-gallery examples are still work in progress.

Ks89 commented 4 years ago

Finally, I separated modal and plain gallery. Also I defined experimental APIs trying to change only the required things to try to simplify the migration.

However, I'm still updating the main example to test all scenario.

Also, there are some issues that I'll try to fix this months.

I'm trying to speed up the development.

Ks89 commented 4 years ago

Enabled and re-implemented most of the examples in modal-gallery. There are some examples to re-implement and other are still broken (with red title).

Ks89 commented 4 years ago

I'm still restoring all examples, also changing a little bit APIs to cover all possible scenarios. I pushed some changes to fix other examples in src/ forder.

Ks89 commented 4 years ago

Finally, I uncommented all examples. Now I have to check every example with red title to fix bugs or implement missing features.

Ks89 commented 4 years ago

Upgraded to angular 9 and angular-cli 9 final

Ks89 commented 4 years ago

enableCloseOutside fully implemented in a very cleaner way. I hope this solution will be ok, because It caused me many headaches.

chdanielmueller commented 4 years ago

Nice to see this is moving forward! Thank you for working on this.

Ks89 commented 4 years ago

Huge refactoring based on a clean library project with angular-cli 9 to align the structure and apply all new best practices.

Ks89 commented 4 years ago

Some other big commits with:

remove GalleryModule.forRoot() to pass custom keyboard config to save image. 'forRoot' is officially removed.
keyboard configuration is now part of libconfig. This is a big improvement because you can add a different keyboard configuration for every instance of the library. Before, this specific configuration was not possibile.
update all examples in modal-gallery with new IDs
add new example with custom keybord config to save the current image pressing either 'shift+s' or 'alt+s' instead of the default 'ctrl+s'

Ks89 commented 4 years ago

Just some other commits to fix the other broken examples and I think I can release the first public beta. I'm happy about these new APIs so I could skip alpha releases.

Then I'll fix issues, write tests and docs. There are many things to do, but the most difficult part is finally completed...or at least I hope :)

Ks89 commented 4 years ago

Good news! Fixed other two examples (fixing a bug into the library code). There in only a known bug in plain gallery example (I really don't know how to fix it) and some fixes for example E3. Then I can release beta 1.

As a plus I should restore also experimental examples F1 and F2, temporarily commented.

Ks89 commented 4 years ago

Example E3 fixed and I removed a useless service called GalleryService.

Next I'll try to understand why example P3 (plain gallery) is not working.

quedicesebas commented 4 years ago

¿Angular 9.1 support?

Ks89 commented 4 years ago

¿Angular 9.1 support?

sure, I'm already using the latest Angular package format 9.0 and it will be the same for all angular 9 releases, so It should work also right now, with current version on branch 800. I'll update all dependencies to build the library, before every release.

However, also version 7.x.x of the library should be ok with Angular 9.x. Did you find issues?

Ks89 commented 4 years ago

Fixed issue about keyboard navigation and example P3 restored!

Now I'm ready to release BETA 1. Just some days to re-check everything and I'll publish the first beta release.

PS: experimental examples in modal-gallery will be restored next. At the moment I commented everything.

Ks89 commented 4 years ago

DONE:

upgraded experimental examples F1 and F2
small refactoring of main example
upgraded angular-cli 8, 9 and material examples

TODO:

systemjs example (find a way to use systemjs with angular 9)
universal example (find a way to use universal -> problems with mousetrap)

If someone want to contribute I need to find a starter of systemjs with angular9

Ks89 commented 4 years ago

Add performance optimization sideEffect:false as suggested in APF9

Ks89 commented 4 years ago

New feature

Implemented fallback image feature as requested in issue #194 I supported every scenario in all components: carousel, modal-gallery and plain-gallery + also with aTags in plain-gallery and ie11legacymode support. Hope you like it!

In the next commit I'll implement the last optional feature (issue #179 ), because it will require api changes, so It's better to implement right now, before to release beta.1. For the same reason I implemented issue #194.

Ks89 commented 4 years ago

New feature

Implemented a way to hide titles via title attribute on images. For more info check this issue #179

Ks89 commented 4 years ago

I'm trying to upgrade angular universal example, but I'm having unexpected problems. I'm trying to understand why it throws all those errors.

Ks89 commented 4 years ago

I published 8.0.0-beta.1 without SSR support, at the moment. I'm still trying to fix SSR issues.

To install 8.0.0-beta.1

npm install --save @ks89/angular-modal-gallery@beta

Check this example to see how I changed APIs: https://github.com/Ks89/angular-modal-gallery/tree/develop/examples/angular-cli-9

If you need help, feel free to ask, because at the moment documentation is still not available.

Ks89 commented 4 years ago

I published 8.0.0-beta.2 finally with SSR support

To install 8.0.0-beta.2

npm install --save @ks89/angular-modal-gallery@beta

Check this example to see how I changed APIs: https://github.com/Ks89/angular-modal-gallery/tree/develop/examples/angular-cli-9

I also changed SystemJS example passing disableSsrWorkaround everywhere, because required since 8.0.0-beta.2 only if you want to use SystemJS.

If you need help, feel free to ask, because at the moment documentation is still not available.

Ks89 commented 4 years ago

Stackblitz example v8 is ready: https://stackblitz.com/edit/angular-modal-gallery-v8

Things to do:

new doc website for v8 (high priority to help you to try the new betas)
implement all tests

Ks89 commented 4 years ago

Pushed angular-cli-10 example, but still not working. It throws a weird error about ModalGalleryService Injection. I'll investigate.

Ks89 commented 4 years ago

I tested the current stable version of the library with Angular 10 and it seems to be ok. 🎉

The issue above happens on 8.0.0 beta. I don't know why.

chdanielmueller commented 4 years ago

First I would like to say thanks for this awesome library! Now the things I noticed and a question for you.

Tested on 8.0.0-beta.2

CSS I noticed that adding the following to the CSS is required. Don't know if that is something you did by design.

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.dark-backdrop {
  background: #000;
  opacity: 0.85 !important;
}

Next button The next button still appears clickable (cursor + selection) when you have reached the last element which is a minor styling flaw.

Navigation on image I would prefer if there were two clickable zones on the image. Right going to the next and Left going to the previous image.

Question Is it possible to declare that the download button downloads the "extUrl" or another property than "img". The reason behind this is that we show a resized image on the Webapp and allow the download of the full sized image.

Ks89 commented 4 years ago

@chdanielmueller Hi,

CSS yes, at the moment It's required, but I'll try to remove this requirement in the final version

Next button mmmm, totally missed this thing

Navigation on image No, I don't want to implement this thing. It's a "non standard" thing.

Question At the moment this is not possible. However, this is a very interesting proposal. Can you open a dedicated issue about this topic? In this way I can schedule it for next releases.

PS: did you try the library with angular 9 or 10? Because I still have an issue on angular 10 and I didn't find a solution.

Ks89 commented 4 years ago

I published 8.0.0-beta.3 with official Angular 10 support

To install 8.0.0-beta.3

npm install --save @ks89/angular-modal-gallery@beta

Check this example to see how I changed APIs: https://github.com/Ks89/angular-modal-gallery/tree/develop/examples/angular-cli-10

Full changelog here https://github.com/Ks89/angular-modal-gallery/releases/tag/v.8.0.0-beta.3

Ks89 commented 4 years ago

I published 8.0.0-beta.4 with new modal backdrop classes.

To upgrade from beta.3 to beta.4 change your global styles.scss from:

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.dark-backdrop {
  background: #000;
  opacity: 0.85 !important;
}

.cdk-overlay-container {
  z-index: 90000 !important;
}

to :

.ks-modal-gallery-backdrop {
  background: #000 !important;;
  opacity: 0.85 !important;;
}

.ks-modal-gallery-panel {
  z-index: 90000 !important;
}

To install 8.0.0-beta.4

npm install --save @ks89/angular-modal-gallery@beta

Check this example to see how I changed APIs: https://github.com/Ks89/angular-modal-gallery/tree/develop/examples/angular-cli-10

Full changelog here https://github.com/Ks89/angular-modal-gallery/releases/tag/v.8.0.0-beta.4

Ks89 commented 4 years ago

All directives, utils and services covered with tests. Now I'll work on components.

Ks89 commented 3 years ago

Version 8.0.0-beta.5 released with Angular 11 and #213 .

npm install --save @ks89/angular-modal-gallery@beta

To upgrade from all previous 8.0.0 beta releases, change all .open(...) methods passing an object without the nested 'config' object

Ks89 commented 3 years ago

News:

Project upgraded to angular 11
test dots.component added
test carousel-previews.component added
test upper-buttons.component added
test previews.component added
test plain-gallery.component added
test carousel.component added

I'll try to add some other tests before to release the next beta version.

Ks89 commented 3 years ago

I'm upgrading official live demos on doc website to 8.0.0. When doc website will be completed I'll publish the link here.

Ks89 commented 3 years ago

Documentation website is up and running here https://ks89.github.io/angular-modal-gallery-2020-v8.github.io

angular-modal-gallery 8.0.0-rc.1 will be release this weekend 👍 Spoiler: I decided to force angular 12 as minimum supported version.

Ks89 commented 3 years ago

8.0.0 RC 1 released

npm i --save @ks89/angular-modal-gallery@beta

Ks89 commented 3 years ago

I'm preparing everything for the final release. I hope to release 8.0.0 final in some days ;)

Ks89 commented 3 years ago

8.0.0 final version is out:

npm i --save @ks89/angular-modal-gallery@latest

It requires Angular 12 with Ivy enabled.

Attention: for some reasons stackblitz fails with ivy enabled, so at the moment the live example is not perfectly working. Fell free to use this demo.

Finally, after 2 years, It's time to close this issue ;)

Ks89 / angular-modal-gallery

8.0.0 Features/Roadmap - MAJOR RELEASE #183

New feature

New feature