Static Slideshows

[tOOlmaRR]

Description: As an alternative to tag-based dynamic slideshows, I would like to have more traditional static slideshows that always contains the same slides in a predetermined order.

Requirements:

• This will still be a part of the database-driven slideshow page
• I want a radio button in the Slideshow Options panel to display two options: Static Slideshows and Tag-Based Slideshow
  • This radio button will show/hide the appropriate sections
• I want a new section for me to choose a static slideshow to display
  • I want the names of the slideshows to be dynamically populated within this new section in a drop-down box
  • I only want to be able to select one at a time
  • I would prefer if selecting the slideshow will automatically begin the slideshow, but I am ok if I need to click a button to start it
• I want the Slideshow Speed section to be visible for both options
• I want the Slideshow Speed selection to apply to the new static slideshows as well as the tag-based slideshow
• I want the slides to be displayed in the same manner as the tag-driven slideshow, except that they need to be displayed in a predefined order
  • If two slides have the same order value, default to whatever order is determined naturally
• (OMIT?) I want Slideshow Mode options currently within the "Tags to Include" section to always be displayed
• (OMIT?) I want the Slideshow mode selection to apply to the static slideshow as well
• For now, I do not need a UI to pick and choose the slides to include and which order they will be displayed in; I will do that manually for now via the database.

Design:

1. Database

   • New table called "StaticSlideshows" with columns "ID" (autoincrement), "Name", and "Secure"
   • New table called "StaticSlideshowSlides" that provides the many-to-many relationship between the "StaticSlideshows" table and the existing "Images table" with columns "ID" (autoincrement), "StaticSlideshowID" and ImageID as FKs to the two tables (this will allow an image to appear in a slideshow more than once), and "DisplayOrder"
   • New SPROC called "StaticSlideshow.Select" which, given a slideshow's name, retrieves all images in the slideshow ordered by the display order column
   • New SPROC called "StaticSlideshows.Select" which, given a "secure" flag, retrieves the names of all available slideshows in alphabetical order

2. DAL

   • New class called "StaticSlideshowEntity" to represent data being retrieved from the database, along with a "get" method in "StaticSlideshowEntity" to retrieve the data via an SPROC
   • New class called "StaticSlideshowsEntity to represent a list if slideshows that are available, along with a "get" method to retrieve a list of slideshows (at this point, just names)

3. Service Layer

   • New service called "loadStaticSlideshows" that will call the "getStaticSlideshows" method in "DbWebSlideshow" class
   • New service called "loadStaticSlideshowSlides that will call the "getStaticSlideshowSlides" method in "DbWebSlideshow" class
   • New service called "renderStaticSlideshowNames" that will produce the HTML required to render the drop-down containing the names of all available slideshows retrieved by the "loadStaticSlideshows" service as well as the wrapping fieldset container and the "Start Slideshow" button
   • New service called "renderStaticSlideshowSlide" which will produce the HTML required to render a single slide in the current static slideshow

4. UI

   • Add a new radio button at the top of the Slideshow Options panel (inside the "show_collapsible_div") with two options: "Tag-Based Slideshows" (selected by default) and "Static Slideshows"
   • Add a new "staticSlideshowOptions" DIV containing a "staticSlideshowOptionsContainer" DIV after the radio button
   • Add a new "tagSlideshowOptions" DIV and include the existing "slideshowTagSelection" and "randomizeToggle" DIVs in it, but not the "slideshowSpeed" DIV.

5. JS

   • Add new methods in slideshowFunctions (toggleSlideshowType) to hide or show the existing "slideshowOptions" or the new "staticSlideshowOptions" DIV based on the selected value
   • When "Static Slideshows" is selected, consider hiding the "Slide Info" panel completely, unless it's fairly easy to populate and render this info once all is said and done (The call to the "ShowSlides" so do that automagically)
   • Within the DOMContentLoaded event handler, add a call to a method that calls the new "loadStaticSlideshows" service to retrieve the static slideshows
   • After this, call another method that call the new "renderStaticSlideshowNames" service to render the fieldset, drop-down box, and button
   • After this, add another event listener for this new button, similar to the "Generate Slideshow" button
   • Within the event listener, call a new method that calls the "loadStaticSlideshowSlides" service to retrieve the slides for the current slideshow.
     • Refer to "loadSlideshowFromDb" method for a similar setup
     • Slideshow name is the input instead of the chosen tags
     • Mode can be normal for now
     • consider using the same method with a different signature, if that is possible in JS
     • integrate security stuff

Test Plan:

• Ensure that the new Static Slideshow options are hidden be default
• Keep the Tag-Based Slideshow option selected, choose the favorites tag, keep normal mode selected, set the slideshow speed to a smaller number and Generate Slideshow
  • Ensure that the slides load, the interval between slides is correct, and the slides render correctly
• Halt the slideshow
  • Confirm that it halts
• Continue the slideshow by unchecking the box
  • Confirm that is starts up again after the full interval
• Choose tagging mode and Generate Slideshow again
  • Confirm that the Options pane shrinks and the Tags pane gets wider
• Change the interval period to a slightly longer value
  • Confirm, after the next slide appears, that the new interval is in effect
• Choose maximize mode, Generate Slideshow again, and confirm that the Options and Tags pane shrink
• Confirm that the Randomize feature still randomizes the slides, and it returns to sequential once it is unselected
• Halt the slideshow and add a tag to a slide
  • Confirm via the database that the tag has been added
• Remove that same tag from the sale slide
  • Confirm via the database that the tag has been removed
• Choose the Static Slideshows option
  • Confirm that the Tag-Based Slideshow panel(s) are now hidden and the new Static Slideshows panel is visible
  • Confirm that the list of slideshows has been populated
  • Confirm that hidden/secured slideshows are not visible
• Select a slideshow and click the button
  • Confirm that the images are displayed and that they are displayed in the order specified in the database
• Adjust the slideshow interval to be shorter
  • Confirm, after the next slide appears, that the new interval is in effect
• Halt the slideshow
  • Confirm that it halts
• Continue the slideshow by unchecking the box
  • Confirm that is starts up again after the full interval
• Confirm that the slideshow info is populated in the middle pane
  • If it does not, ensure that it is being hidden as desired

Implementation Notes:

• There is no slideshow mode selection for Static Slideshows for now
• Created a bug to hide images in a public static slideshow if the image is secure
• There was no extra work needed to have populate the slide info

[tOOlmaRR]

Static Slideshows

[tOOlmaRR]

Description may be a bit out of sync with my internal notes - a few things/steps were not needed