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:
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
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)
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
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.
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
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:
Design:
Database
DAL
Service Layer
UI
JS
Test Plan:
Implementation Notes: