Slideshow section for GeoStory

[tdipisa]

Description

A new type of section for GeoStory will be available: the Slideshow section. The aim of this new section is to enhance the user experience in using geostories by adding a different kind of immersive capability. A slideshow section is a full screen section, like the immersive one currently available, that allows the user to add multiple media contents (maps, images, videos) as a slide with a minimal accompanying text on top for each slide.

Acceptance criteria

• [ ] In editing mode It will be possible to add the Slideshow section in the same way of other existing main sections: a new button will be added to the toolbar along with a dedicate icon to properly represent the slideshow section type (the icon to use will be defined by @allyoucanmap)

• [ ] When the slideshow section is added to the story (the user clicks on the related button in the above toolbar), the story will scroll to the new section that will cover the entire screen (as it is now for immersive sections)

• [ ] In edit mode the slideshow section will be composed by: a background with its editing toolbar, a descriptive (narrative) panel on top with its editing toolbar, a carousel just below the background to list/manage slides.

Slideshow background toolbar: it provides the same functionalities/buttons of the background toolbar available for immersive sections/contents (depending on the media type selected for the background)

Descriptive panel toolbar: it provides the same functionalities/buttons of the columns contents available in immersive sections/contents.

• [ ] The only addition here (Descriptive panel toolbar) is the Hide button. This will be a toggle button useful, if toggled, to hide the descriptive panel in view mode (other buttons like that, but with different purposes, are present also for other sections of geostory, eg. the Hide caption button here)

Descriptive panel: it is the same component available in immersive section but in this case it is only possible to provide a descriptive text: the plus button to add additional contents is not available

• [ ] In viewing mode the carousel and all editing controls (such as toolbars) disappear as usual and it is possible to browse the slides using the arrows on the left and right sides of the background

• [ ] In edit mode the Carousel will allow to manage the list of slides

  • [ ] Two buttons on the left side of the carousel will allow to:
    • [ ] Remove the Slideshow section
    • [ ] Add a new slide
  • [ ] For each slides a small button in the right-bottom corner of the slide in the carousel will allow to delete the related slide (a confirmation dialog will be prompted)
  • [ ] It is possible to drag&drop items in the carousel to change their order in the list
  • [ ] Selecting a card item in the carousel the main view of the Slideshow section change accordingly showing the slide content previously configured

• [ ] As usual also for all the other sections types, a plus button in the mid-bottom side of the slideshow section allows to add other sections

Other useful information

[allyoucanmap]

@tdipisa we could save some space for the slideshow cards moving the general toolbar in a different position. Here two proposals:

[tdipisa]

@allyoucanmap thank you so much for your feedback.

[allyoucanmap]

Slideshow Section Variant - Interactive Locations Map

The slideshow presented in the description shows the possibility to have an horizontal navigation of content as a different way to tell a story. We could take advantage of this structure to create an interactive map where points locations are related to the content visible in the descriptive panel so each slide can be localized. This kind of section variant should have following constraints and differences from the default slideshow section:

• the background should be the same map for all the slides (because we should create a single layer with all the location stored in the slide and having a single map should improve the responsiveness of the interactions)
• the descriptive panel should allow the user to draw a marker on the map
• zoom to point location after selecting a different slide
• the carousel list should be visible also in view mode to help the navigation of location (or allow the user to decide to keep it visible or not)
• there should be a way to add an image to the descriptive panel used also as thumbnail in the carousel
• extend the descriptive panel to contain image or video media (optional)
• introduce a basic styler to apply the style to markers (optional or global)
• introduce a way to add content for the tooltip (optional or extract text from descriptive panel)

This comparison with the default slideshow section need to be taken into account in the creation of the JSON structure for this section (eg: the location will be stored within the slide info instead of a layer).

Note: there are some relations with the issue https://github.com/geosolutions-it/MapStore2/issues/5779

[tdipisa]

What mentioned in the above comment has been reorganized in a new issue (#6993) to be developed as a dedicate section type for GeoStory. What described in this issue will be considered as a different section type for different purposes and it will use the same base component developed with #6993.