Swik 1278 create thumbnail preview of themes

components/AddDeck/AddDeck.js

@@ -20,6 +20,7 @@ import ImportModal from '../Import/ImportModal';
 import LanguageDropdown from '../common/LanguageDropdown';
 import {FormattedMessage, defineMessages} from 'react-intl';
 import classNames from 'classnames';
+import ThemePreviewCarousel from './ThemePreviewCarousel';
 
 //TODO: update link to terms of use;
 
@@ -76,7 +77,7 @@ class AddDeck extends React.Component {
         const title = this.refs.input_title.value;
         const language = this.refs.div_languages.getSelected();
         const description = this.refs.textarea_description.value;
-        const theme = this.refs.select_themes.value;
+        const theme = this.theme;
         // const license = this.refs.select_licenses.value;
         const license = 'CC BY-SA';//default license
         //const tags = this.refs.input_tags.value.split(', ');
@@ -406,6 +407,10 @@ class AddDeck extends React.Component {
         }
     }
 
+    onThemeModalChanged(themeValue) {
+        this.theme = themeValue;
+    }
+
     render() {
         //redirect to new deck if created
         if (this.props.AddDeckStore.redirectID !== 0) {
@@ -464,36 +469,6 @@ class AddDeck extends React.Component {
         if (filename.length > 40)
             filename = filename.substr(0, 40) + ' ...';
 
-        /*    let themeOptions = <select className="ui search dropdown" aria-labelledby="theme" id="themes" ref="select_themes">
-            <option value="default">Default - Reveal.js White</option>
-            <option value="beige">Reveal.js Beige</option>
-            <option value="black">Reveal.js Black</option>
-            <option value="blood">Reveal.js Blood</option>
-            <option value="league">Reveal.js League</option>
-            <option value="moon">Reveal.js Moon</option>
-            <option value="night">Reveal.js Night</option>
-            <option value="serif">Reveal.js Serif</option>
-            <option value="simple">Reveal.js Simple</option>
-            <option value="sky">Reveal.js Sky</option>
-            <option value="solarized">Reveal.js Solarized</option>
-        </select>;
-        */
-        let themeOptions = <select className="ui search dropdown" id="themes" aria-labelledby="theme"  ref="select_themes">
-                <option value="default">White - Default</option>
-                <option value="beige">Cream</option>
-                <option value="black">Black</option>
-                <option value="league">Dark Grey</option>
-                <option value="sky">Pale Blue</option>
-                <option value="solarized">Beige</option>
-                <option value="moon">Dark Slate Blue</option>
-                <option value="night">High Contrast 1</option>
-                <option value="blood">High Contrast 2</option>
-                <option value="serif">Serif</option>
-                <option value="simple">Simple</option>
-                <option value="openuniversity">Open University</option>
-                <option value="odimadrid">ODI Madrid</option>
-                <option value="oeg">OEG</option>
-            </select>;
         // let licenseOptions = <select className="ui search dropdown" aria-labelledby="license" id="license" ref="select_licenses">
         //   <option value="CC BY-SA" >Creative Commons Attribution-ShareAlike</option>
         //   <option value="CC BY" >Creative Commons Attribution</option>
@@ -578,9 +553,23 @@ class AddDeck extends React.Component {
                                         id='AddDeck.form.label_themes'
                                         defaultMessage='Choose deck theme' />
                                 </label>
-                                {themeOptions}
+                                <ThemePreviewCarousel callback={this.onThemeModalChanged.bind(this)} slides={[
+                                    {img: '/assets/images/themes/beige.png', value: 'solarized'},
+                                    {img: '/assets/images/themes/black.png', value: 'black'},
+                                    {img: '/assets/images/themes/cream.png', value: 'beige'},
+                                    {img: '/assets/images/themes/dark_grey.png', value: 'league'},
+                                    {img: '/assets/images/themes/dark_slate_blue.png', value: 'moon'},
+                                    {img: '/assets/images/themes/default.png', value: 'default'},
+                                    {img: '/assets/images/themes/high_contrast1.png', value: 'night'},
+                                    {img: '/assets/images/themes/high_contrast2.png', value: 'blood'},
+                                    {img: '/assets/images/themes/odi_madrid.png', value: 'odimadrid'},
+                                    {img: '/assets/images/themes/oeg.png', value: 'oeg'},
+                                    {img: '/assets/images/themes/open_university.png', value: 'openuniversity'},
+                                    {img: '/assets/images/themes/pale_blue.png', value: 'sky'},
+                                    {img: '/assets/images/themes/simple.png', value: 'simple'},
+                                    {img: '/assets/images/themes/simple.png', value: 'serif'}  // # TODO: use real thumbnail for serif once SWAQ-973 is solved
+                                ]}/>
                             </div>
-
                         </div>
 
                         <div className="ui message" id="uploadDesc">

components/AddDeck/ThemePreviewCarousel.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+class ThemePreviewCarousel 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.findThemeIndex(self.props.initialTheme, self.props.slides),
+            autoplay: false,
+            centered: true,
+            keyboard: true,
+            autoheight: true,
+            afterTransition: function(data) {
+                let themeIndex = (data.index !== 0) ? data.index - 1 : self.props.slides.length - 1;
+                self.onSelectTheme(self.props.slides[themeIndex].value, null);
+                $('.gslide-header').removeClass('active');
+                $('.gh' + data.index).addClass('active');
+            }
+        });
+    }
+
+    componentWillReceiveProps(newProps) {
+        console.log('parent: ' + newProps.initialTheme);
+        if (!this.props.initialTheme && newProps.initialTheme) {
+            console.log('setting initialTheme');
+            this.setStart(newProps.initialTheme);
+            this.initialTheme = newProps.initialTheme;
+        }
+    }
+
+    setStart(theme) {
+        let themeIndex = this.findThemeIndex(theme, this.props.slides);
+        this.slider.data('glide_api').go('=' + themeIndex);
+    }
+
+    findThemeIndex(theme, slides) {
+        for (let i = 0; i < slides.length; i++) {
+            console.log(slides[i].value, theme);
+            if (theme === slides[i].value) return i + 1;
+        }
+    }
+
+    onSelectTheme(themeValue, e) {
+        console.log(themeValue);
+        this.props.callback(themeValue);
+    }
+
+    createSlides() {
+        let slides = [];
+
+        for (let i=0; i<this.props.slides.length; i++) {
+            slides.push(
+                <li className="glide__slide" key={i}>
+                    <img src={this.props.slides[i].img}/>
+                </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 ThemePreviewCarousel;

components/AddDeck/ThemePreviewModal.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ThemePreviewCarousel from './ThemePreviewCarousel';
+import {Modal} from 'semantic-ui-react';
+import classNames from 'classnames';
+
+class ThemePreviewModal extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Modal trigger={<div className={classNames({'ui': true, 'primary': true, 'button': true})} aria-label='Theme Preview' role="button" tabIndex="0" >Theme Preview</div>}>
+                <Modal.Header>Choose a theme</Modal.Header>
+                <Modal.Content>
+                    <ThemePreviewCarousel callback={this.props.callback} slides={this.props.slides}/>
+                </Modal.Content>
+            </Modal>
+        );
+    }
+}
+
+export default ThemePreviewModal;

components/Deck/ContentPanel/DeckModes/DeckEditPanel/DeckPropertiesEditor.js

@@ -20,6 +20,7 @@ import PermissionsStore from '../../../../../stores/PermissionsStore';
 import updateTheme from '../../../../../actions/updateTheme';
 import LanguageDropdown from '../../../../common/LanguageDropdown';
 import {showGroupDetailsModal} from '../../../../../actions/deckedit/functionsForGroupDetailsModal';
+import ThemePreviewCarousel from '../../../../AddDeck/ThemePreviewCarousel';
 
 class DeckPropertiesEditor extends React.Component {
     constructor(props) {
@@ -537,9 +538,26 @@ class DeckPropertiesEditor extends React.Component {
         </div>;
 
         let themeAndLicence = <div className="two fields">
-            <div className="field">
-                <label htmlFor="theme" id="theme">Choose deck theme</label>
-                {themeOptions}
+            <div className="field" ref="div_themes_preview">
+                <label htmlFor="themes" id="theme-preview">Select theme</label>
+                <ThemePreviewCarousel callback={this.onThemeModalChanged.bind(this)}
+                                      initialTheme={this.state.theme}
+                                      slides={[
+                    {img: '/assets/images/themes/beige.png', value: 'solarized'},
+                    {img: '/assets/images/themes/black.png', value: 'black'},
+                    {img: '/assets/images/themes/cream.png', value: 'beige'},
+                    {img: '/assets/images/themes/dark_grey.png', value: 'league'},
+                    {img: '/assets/images/themes/dark_slate_blue.png', value: 'moon'},
+                    {img: '/assets/images/themes/default.png', value: 'default'},
+                    {img: '/assets/images/themes/high_contrast1.png', value: 'night'},
+                    {img: '/assets/images/themes/high_contrast2.png', value: 'blood'},
+                    {img: '/assets/images/themes/odi_madrid.png', value: 'odimadrid'},
+                    {img: '/assets/images/themes/oeg.png', value: 'oeg'},
+                    {img: '/assets/images/themes/open_university.png', value: 'openuniversity'},
+                    {img: '/assets/images/themes/pale_blue.png', value: 'sky'},
+                    {img: '/assets/images/themes/simple.png', value: 'simple'},
+                    {img: '/assets/images/themes/simple.png', value: 'serif'}  // # TODO: use real thumbnail for serif once SWAQ-973 is solved
+                                      ]}/>
             </div>
             <div className="field">
                 <label htmlFor="license" id="license_label">License</label>
@@ -596,6 +614,11 @@ class DeckPropertiesEditor extends React.Component {
         );
 
     }
+
+    onThemeModalChanged(themeValue) {
+        this.handleChange('theme', {target: {value: themeValue}});
+        // this.setState({ theme: themeValue });
+    }
 }
 
 DeckPropertiesEditor.contextTypes = {