v2-Slideshow / Markdown Slideshow

[VillageHubertChen]

Tasks G1 & G2

• [x] HC: Write Specs and Tasks
• [x] LC: review Specs and Task. Give feedback to HC if this is not most straight forward to you
• [x] LC: Implement G1
  1. [x] Implement simple version of Example UI Kit Slide Show in CodePen to proof you understand how to use it and to check UI Kit slideshow actually works
  2. [x] Implement hand coded page with HTML to proof the slide show has no conflict when used in the V²Site environment
  3. [x] Add to our Liquid \ the slide show feature. Any bugs now should be only related to Liquid coding. It must spit out identical HTML as in step 2.
  4. [x] Trigger HC for review. Review together.
• [x] LC: Implement G2
  • [x] Add Title & Description as per → below
  • [x] Trigger HC for review. Review together.

    Tasks G3

• [x] LC: Find angular slide show having the features we are looking for
• [x] LC, HC: Joint review of found slide show → We give up finding other slide shows. Lukas will now modify the slide show part of Angular UI Bootstrap. Lukas will now make a v2-Slideshow → see below.
• [x] HC: Write specs v2-Slideshow → Gen 3: v2-Slideshow
• [x] LC: Review above specs. Give feedback if needed.
• [x] LC: Study code of Angular UI Bootstrap Carousel → It is not as clean and well documented as I hoped.
• [x] LC: Find a better written, better documented slide show in angular: → http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/ → could not get modification to work
• [ ] LC: Find a simple slide show with the following criteria:
  • Angular
  • Proper directive
  • Source Code
  • Easy to read and understand
  • short
  • one dot per slide
  • forward and backward with proper animation
• [ ] LC: Study their code, see that you can understand 100%
• [ ] Implement in demo site
  • [ ] Add title & subtittle feature
  • [ ] Responsive styling
• [ ] LC: Porting their code to YML and add directives
  • [ ] LC: Create Angular directive syntax for slideshow
  • [ ] LC: Write HTML code with above directive syntax
  • [ ] LC: Adopt the onehungrymind slideshow code to directives
  • [ ] LC: Use above Angular Plugin fore the slideshow in Appetizing Articles
• [ ] Testing
  • [ ] LC: Demo and show how to use the v2-Slideshow plugin in → V² > Flow > Publishing > Appetizing Articles: Slide Show
  • [ ] HC: Review v2-Slideshow in → Advanced Formatting
  • [ ] LC: Implement changes. Test again.
• [ ] Add our features:
  • [ ] LC: Add our features, see description below:
  • [ ] HC: Review v2-Slideshow in → Advanced Formatting
  • [ ] LC: Implement changes. Test again.
  • [ ] LC: Push
  • [ ] HC: Final test on production site

    Tasks G4

• [ ] LC: Create its own repository: v2-Slideshow
  • [ ] LC: Same style as v2-Tooltip and v2-Accordion
• [ ] LC: Create Documentation for v2-SlideShow
• [ ] LC: Create Demo for v2-SlideShow
  • HTML Demo
  • Link to Demo of Markdown Version

    Specs Gen 1

    Implementation Target

Implement the Slideshow in YML / Markdown as straight forward as possible with no changes to the slide show in UI Kit.

Elements

1. Picture
2. Slidenav: Forward, backward button
3. Dotnav: Dots, centered on bottom.

   Languages & Libraries

   • YML: Contain data for each slide show
   • Markdown: Contains article in which the slide show is included
   • UI Kit: Javascript & CSS library, modern version of Bootstrap

     Behaviors

   • On Load: Show first picture of slide show
   • Hover over picture: Show UI Elements
   • Click next / prev slide button: Show next / prev picture
   • Click dot: Go to the picture number corresponding the dot number

     Layout

     Implementation

   • → UI Kit > Slideshow](http://getuikit.com/docs/slideshow.html)
   • Navigations: Exactly as in → "Slidenav and Dotnav"

     YML

slideshow:

• slide:
  • title: {text of picture title}
  • desc: {paragraph explaining more about the picture}
  • url: {path to picture in subfolder}
• slide:
  • title: {text of picture title}
  • desc: {paragraph explaining more about the picture}
  • url: {path to picture in subfolder}

Note: I propose you implement the full version in the yml already in the first Generation. But you are not using Title and Description in the generated slide show. That would be in Gen 2.

Implementation Steps

1. Implement simple version in Codepen to proof you understand how to use it and to check UI Kit slideshow actually works
2. Implement hand coded page with HTML to proof the slide show has no conflict when used in the V²Site environment
3. Add to our Liquid \ the slide show feature. Any bugs now should be only related to Liquid coding. It must spit out identical HTML as in step 2.

   Gen 2

   Added Elements

4. Title: Picture Title shown under Picture
5. Description: Text shown under Picture Title

   Added behavior

   • On Next Slide: Change Title and Description accordingly

     Layout

6. Picture
7. Title: Under Picture
8. Description: Under Title

   Reference

   • dpreview > Slideshow

[VillageHubertChen]

Gen 3: customSlideshow

• Location: /_javascript/directive/
• Template: No template → easy to customize
• Based: Angular UI Bootstrap Carousel
• Feature: described in G1 and G2 above
• Style: don't come with a style, user will use the available style of their own library
• For our demo we will use the UIkit style
• Documentation of Angular UI Bootstrap > Carousel

[LukasChen]

Gen 4: V2-Slideshow

• Create its own repository: v2-Slideshow
  • Same style as v2-Tooltip and v2-Accordion
• Create Documentation for v2-SlideShow
• Create Demo for v2-SlideShow