# You must use a tab-size of 4 spaces to edit this file.
---
plugin_settings:
    module_class_name: zenario_slideshow
    tabs:
        first_tab:
            #label: Settings
            fields:
                show_heading:
                    plugin_setting:
                        name: show_heading
                    label: 'Show a heading'
                    type: checkbox
                    redraw_onchange: true
                heading_text:
                    plugin_setting:
                        name: heading_text
                    indent: 1
                    visible_if: zenarioAB.value('show_heading')
                    label: 'Heading:'
                    type: text
                    placeholder: 'Type your heading here'
                heading_tag: 
                    plugin_setting: 
                        name: heading_tag
                    label: "Heading tag:"
                    indent: 1
                    visible_if: zenarioAB.value('show_heading')
                    type: select
                    same_row: true
                    values: 
                        h1: Heading 1
                        h2: Heading 2
                        h3: Heading 3
                        h4: Heading 4
                        h5: Heading 5
                        h6: Heading 6
                        p: Paragraph
                    value: h1
                    side_note: Choose which HTML tag the heading will be displayed in.
                
                animation_library:
                    plugin_setting:
                        name: animation_library
                    label:  'Animation library for slide transitions:'
                    type: radios
                    value: cycle2
                    values:
                        cycle2:
                            label: 'jQuery Cycle (recommended)'
                        swiper:
                            visible_if: |
                                tuix.key.moduleClassName == 'zenario_slideshow_simple'
                            label: 'Swiper'
                    redraw_onchange: true
                
                cycle2_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        cycle2: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        html: |
                            The
                            <a href="https://jquery.malsup.com/cycle2/" target="_blank">
                                jQuery Cycle library</a>
                            will be used for transitions.
                            Unless the height of the slideshow is set in CSS, the height
                            of the first image will be applied automatically to all.
                swiper_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        swiper: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        html: |
                            The
                            <a href="https://swiperjs.com/" target="_blank">
                                Swiper mobile touch slider library</a>
                            will be used to power the transitions.
                            This will create a series of slides that works on both desktop and mobile.
                
                nest_type:
                    plugin_setting:
                        name: nest_type
                    type: radios
                    label:  'Animation library controls:'
                    value: indicator_and_buttons
                    values:
                        buttons:
                            label: Show Next and Previous
                        indicator:
                            label: Show sequence indicator
                        indicator_and_buttons:
                            label: Show sequence indicator, Next and Previous
                        tabs:
                            visible_if: |
                                zenarioAB.value('animation_library', 'first_tab') == 'cycle2'
                            label: Show tabs with labels
                        tabs_and_buttons:
                            visible_if: |
                                zenarioAB.value('animation_library', 'first_tab') == 'cycle2'
                            label: Show tabs with labels, Next and Previous
                        permission:
                            label: Don't show any controls
                    redraw_onchange: true
                    validation:
                        required: Please select an option.
                
                buttons_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        buttons: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        label: |
                            Next and Previous buttons will be shown, which can be used to navigate between slides.
                indicator_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        indicator: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        label: |
                            Every slide in the slideshow will have an indicator.
                            Clicking on the indicator will switch to that slide.
                indicator_and_buttons_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        indicator_and_buttons: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        label: |
                            Every slide in the slideshow will have an indicator.
                            Clicking on the indicator will switch to that slide.
                            Next and Previous buttons will also be shown, which can be used to navigate between slides.
                tabs_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        tabs: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        label: |
                            Every slide in the slideshow will have a tab with a label.
                            Clicking on a tab will switch to that slide.
                tabs_and_buttons_desc:
                    indent: 1
                    hide_if_previous_outdented_value_isnt:
                        tabs_and_buttons: true
                    row_class: zenario_fbInfo zenario_fbInfo_small
                    snippet:
                        label: |
                            Every slide in the slideshow will have a tab with a label.
                            Clicking on a tab will switch to that slide.
                            Next and Previous buttons will also be shown, which can be used to navigate between slides.
        
        size:
            label: Images
            fields:
                desc:
                    full_width: true
                    snippet:
                        html: |
                            The following settings let you set default values to apply to Banner plugins that have an image.
                            The values you choose here will apply to every Banner, unless overridden by settings of individual Banners.
                banner_canvas:
                    plugin_setting:
                        name: banner_canvas
                    label: 'Size constraint:'
                    type: select
                    value: crop_and_zoom
                    values:
                        unlimited:
                            label: Unlimited size
                        crop_and_zoom:
                            label: Crop and zoom
                        fixed_width:
                            label: Constrain by width
                        fixed_height:
                            label: Constrain by height
                        fixed_width_and_height:
                            label: Constrain by width and height
                    format_onchange: true
                    note_below: |
                        Use the <em style="font-style: italic;">Unlimited size</em> option if you will set the size on each image separately.
                banner_width:
                    plugin_setting:
                        name: banner_width
                    indent: 1
                    label: 'Width:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter a width.
                        numeric: The width must be a number.
                    value: 600
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
                banner_height:
                    plugin_setting:
                        name: banner_height
                    indent: 1
                    label: 'Height:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter a height.
                        numeric: The height must be a number.
                    value: 400
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
                
                advanced_behaviour:
                    plugin_setting:
                        name: advanced_behaviour
                    label: 'Additional behaviour:'
                    type: select
                    format_onchange: true
                    value: none
                    values:
                        none:
                            label: None
                        background_image:
                            label: 'Show as a background image'
                        lazy_load:
                            label: 'Lazy load image'
                    note_below: |
                        Use the <em style="font-style: italic;">None</em> option if you will set the behaviour on each image separately.

                mobile_behaviour:
                    plugin_setting:
                        name: mobile_behaviour
                    label: 'Image settings for mobile browsers:'
                    type: select
                    format_onchange: true
                    values:
                        mobile_same_image:
                            label: Same image
                        mobile_same_image_different_size:
                            label: 'Same image, different size'
                        mobile_hide_image:
                            label: 'Hide image on mobile browsers'
                    value: mobile_same_image              
                    note_below: |
                        Use the <em style="font-style: italic;">Same image</em> option if you will set the setting on each image separately.
                mobile_canvas:
                    indent: 1
                    plugin_setting:
                        name: mobile_canvas
                    label: 'Size constraint:'
                    type: select
                    format_onchange: true
                    value: crop_and_zoom
                    values:
                        crop_and_zoom:
                            label: Crop and zoom
                        fixed_width:
                            label: Constrain by width
                        fixed_height:
                            label: Constrain by height
                        fixed_width_and_height:
                            label: Constrain by width and height
                mobile_width:
                    plugin_setting:
                        name: mobile_width
                    label: 'Width:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter a width.
                        numeric: The width must be a number.
                    value: 360
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
                    indent: 2
                mobile_height:
                    plugin_setting:
                        name: mobile_height
                    label: 'Height:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter a height.
                        numeric: The height must be a number.
                    value: 240
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
                    indent: 2  
                
                
                
                link_type:
                    plugin_setting:
                        name: link_type
                    label: 'Link destination:'
                    type: select
                    value: _NO_LINK
                    values:
                        _NO_LINK:
                            label: Don't link
                        _ENLARGE_IMAGE:
                            label: Enlarge image in floating box
                    format_onchange: true
                    note_below: |
                        Use the <em style="font-style: italic;">Don't link</em> option if you will set the destination on each image separately.
                enlarge_canvas:
                    plugin_setting:
                        name: enlarge_canvas
                    indent: 1
                    label: 'Enlarged image size constraint:'
                    type: select
                    value: unlimited
                    values:
                        unlimited:
                            ord: 1
                            label: Unlimited size
                        fixed_width:
                            ord: 2
                            label: Constrain by width
                        fixed_height:
                            ord: 3
                            label: Constrain by height
                        fixed_width_and_height:
                            ord: 4
                            label: Constrain by width and height
                    format_onchange: true
                    note_below: |
                        Use the <em style="font-style: italic;">Unlimited size</em> option if you will set the size on each image separately.
                enlarge_width:
                    plugin_setting:
                        name: enlarge_width
                    indent: 2
                    label: 'Width:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter an enlarged width.
                        numeric: The enlarged width must be a number.
                    value: ""
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
                enlarge_height:
                    plugin_setting:
                        name: enlarge_height
                    indent: 2
                    label: 'Height:'
                    type: text
                    validation:
                        required_if_not_hidden: Please enter an enlarged height.
                        numeric: The enlarged height must be a number.
                    value: ""
                    maxlength: 5
                    style: 'width: 5em;'
                    post_field_html: '&nbsp;pixels'
