SWIK-2316 horizontal thumbnail gallery

components/Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js

@@ -20,6 +20,7 @@ import ContentStore from '../../../../../stores/ContentStore';
 import loadLikes from '../../../../../actions/activityfeed/loadLikes';
 import Util from '../../../../common/Util';
 import MobileDetect from 'mobile-detect/mobile-detect';
+import ImageCarousel from '../../../../common/ImageCarousel';
 
 class DeckViewPanel extends React.Component {
     constructor(props) {
@@ -41,6 +42,10 @@ class DeckViewPanel extends React.Component {
         this.setState({isMobile: (mobile.phone() !== null) ? true : false});
     }
 
+    onImageCarouselClicked() {
+        return;
+    }
+
     render() {
         const heightStyle = {
             //height: this.props.DeckViewStore.deckViewPanelHeight + 'px',
@@ -236,6 +241,17 @@ class DeckViewPanel extends React.Component {
                                 }
                             })}
                         </div>
+                        <div className="ui container">
+                            <ImageCarousel callback={this.onImageCarouselClicked.bind(this)}
+                                                  initialImage={slidesArr[0].id}
+                                                  slides={
+                                                      slidesArr.map((slide, _) => {
+                                                          let thumbnailURL = `${Microservices.file.uri}/thumbnail/slide/${slide.id}`;
+                                                          let thumbnailAlt = slide.title === undefined ? slide.id : slide.title + ' | ' + slide.id;
+                                                          return {img: thumbnailURL, alt: thumbnailAlt, value: slide.id};
+                                                      })
+                                                  }/>
+                        </div>
                     </div>
                 </main>
             </div>

components/Deck/Deck.js

@@ -258,7 +258,7 @@ class Deck extends React.Component {
         return (
             <div className="ui fluid container" ref="deck">
                 <div className="ui padded stackable grid ">
-                {/*}<div className="row">
+                {/*<div className="row">
                     <div className={navigationPanelClass}>
                       <NavigationPanel />
                     </div>

components/common/ImageCarousel.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+class ImageCarousel extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.slider = null;
+    }
+
+    componentDidMount() {
+        let self = this;
+        $('.gslide-header').removeClass('active');
+        $('.gh1').addClass('active');
+        //display carousel
+        $('.hide-element').removeClass('hide-element');
+        this.slider = $('.glide').glide({
+            type: 'slideshow',
+            startAt: self.findImageIndex(self.props.initialImage, self.props.slides),
+            autoplay: false,
+            centered: true,
+            keyboard: true,
+            autoheight: true,
+            afterTransition: function(data) {
+                let imageIndex = (data.index !== 0) ? data.index - 1 : self.props.slides.length - 1;
+                self.onSelectImage(self.props.slides[imageIndex].value, null);
+                $('.gslide-header').removeClass('active');
+                $('.gh' + data.index).addClass('active');
+            }
+        });
+    }
+
+    componentWillReceiveProps(newProps) {
+        // console.log('parent: ' + newProps.initialImage);
+        if (!this.props.initialImage && newProps.initialImage) {
+            // console.log('setting initialImage');
+            this.setStart(newProps.initialImage);
+            this.initialImage = newProps.initialImage;
+        }
+    }
+
+    setStart(theme) {
+        let imageIndex = this.findImageIndex(theme, this.props.slides);
+        this.slider.data('glide_api').go('=' + imageIndex);
+    }
+
+    findImageIndex(image, slides) {
+        for (let i = 0; i < slides.length; i++) {
+            // console.log(slides[i].value, image);
+            if (image === slides[i].value) return i + 1;
+        }
+    }
+
+    onSelectImage(imageValue, e) {
+        // console.log(imageValue);
+        this.props.callback(imageValue);
+    }
+
+    createSlides() {
+        let slides = [];
+        // console.log(this.props.slides);
+        for (let i=0; i<this.props.slides.length; i++) {
+            // console.log(this.props.slides[i].img);
+            slides.push(
+                <li className="glide__slide" key={i}>
+                    <img src={this.props.slides[i].img} alt={this.props.slides[i].alt}/>
+                </li>
+            );
+        }
+        return (
+            <ul className="glide__track" data-glide-el="track" style={{minHeight: '300px'}}>
+                {slides}
+            </ul>
+        );
+    }
+
+    render() {
+        return (
+            <div ref="theme-preview-carousel">
+                <div className="ui grid">
+                    <div className="column center aligned">
+                        <div className="ui segment">
+                            <div className="glide" tabIndex="-1">
+                                <div className="glide__arrows hide-element">
+                                    <button className="glide__arrow prev ui basic icon button" data-glide-dir="<" tabIndex="-1"><i className="ui big icon chevron left"></i></button>
+                                    <button className="glide__arrow next ui basic icon button" data-glide-dir=">" tabIndex="-1"><i className="ui big icon chevron right"></i></button>
+                                </div>
+                                { this.createSlides() }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ImageCarousel;