| @@ -9,8 +9,16 @@ | ||
| 9 | 9 | * @package Automatic_YouTube_Gallery |
| 10 | 10 | */ |
| 11 | 11 | |
| 12 | 12 | $fields = ayg_get_editor_fields(); |
| 13 | + | |
| 14 | +$pagination_type = 'more'; | |
| 15 | +foreach ( $fields['gallery']['fields'] as $field ) { | |
| 16 | + if ( 'pagination_type' == $field['name'] ) { | |
| 17 | + $pagination_type = $field['value']; | |
| 18 | + break; | |
| 19 | + } | |
| 20 | +} | |
| 13 | 21 | ?> |
| 14 | 22 | |
| 15 | 23 | <div id="ayg-shortcode-builder"> |
| 16 | 24 | <!-- Shortcode Builder --> |
| @@ -15,9 +23,9 @@ | ||
| 15 | 23 | <div id="ayg-shortcode-builder"> |
| 16 | 24 | <!-- Shortcode Builder --> |
| 17 | 25 | <div class="ayg-left-col"> |
| 18 | 26 | <div class="ayg-col-content"> |
| 19 | - <div class="ayg-editor ayg-editor-field-type-playlist ayg-editor-field-theme-classic"> | |
| 27 | + <div class="ayg-editor ayg-editor-field-type-playlist ayg-editor-field-theme-classic ayg-editor-field-pagination_type-<?php echo esc_attr( $pagination_type ); ?>"> | |
| 20 | 28 | <?php |
| 21 | 29 | foreach ( $fields as $key => $value ) : |
| 22 | 30 | ?> |
| 23 | 31 | <div class="ayg-editor-section ayg-editor-section-<?php echo esc_attr( $key ); ?> <?php if ( 'source' == $key ) echo 'ayg-active'; ?>"> |
| @@ -35,15 +43,15 @@ | ||
| 35 | 43 | } |
| 36 | 44 | ?> |
| 37 | 45 | <div class="ayg-editor-control ayg-editor-control-<?php echo esc_attr( $field['name'] ); ?>"> |
| 38 | 46 | <?php if ( 'text' == $field['type'] || 'url' == $field['type'] || 'number' == $field['type'] ) : ?> |
| 39 | - <label><strong><?php echo esc_html( $field['label'] ); ?></strong></label> | |
| 47 | + <label><?php echo esc_html( $field['label'] ); ?></label> | |
| 40 | 48 | <input type="text" name="<?php echo esc_attr( $field['name'] ); ?>" class="ayg-editor-field ayg-editor-field-<?php echo esc_attr( $field['name'] ); ?> widefat" placeholder="<?php echo esc_attr( $field['placeholder'] ); ?>" value="<?php echo esc_attr( $field['value'] ); ?>" data-default="<?php echo esc_attr( $field['value'] ); ?>" /> |
| 41 | 49 | <?php elseif ( 'textarea' == $field['type'] ) : ?> |
| 42 | - <label><strong><?php echo esc_html( $field['label'] ); ?></strong></label> | |
| 50 | + <label><?php echo esc_html( $field['label'] ); ?></label> | |
| 43 | 51 | <textarea name="<?php echo esc_attr( $field['name'] ); ?>" rows="8" class="ayg-editor-field ayg-editor-field-<?php echo esc_attr( $field['name'] ); ?> widefat" placeholder="<?php echo esc_attr( $field['placeholder'] ); ?>" data-default="<?php echo esc_attr( $field['value'] ); ?>"><?php echo esc_textarea( $field['value'] ); ?></textarea> |
| 44 | 52 | <?php elseif ( 'select' == $field['type'] || 'radio' == $field['type'] ) : ?> |
| 45 | - <label><strong><?php echo esc_html( $field['label'] ); ?></strong></label> | |
| 53 | + <label><?php echo esc_html( $field['label'] ); ?></label> | |
| 46 | 54 | <select name="<?php echo esc_attr( $field['name'] ); ?>" class="ayg-editor-field ayg-editor-field-<?php echo esc_attr( $field['name'] ); ?> widefat" data-default="<?php echo esc_attr( $field['value'] ); ?>"> |
| 47 | 55 | <?php |
| 48 | 56 | foreach ( $field['options'] as $value => $label ) { |
| 49 | 57 | printf( '<option value="%s"%s>%s</option>', esc_attr( $value ), selected( $value, $field['value'], false ), esc_html( $label ) ); |
| @@ -52,17 +60,17 @@ | ||
| 52 | 60 | </select> |
| 53 | 61 | <?php elseif ( 'checkbox' == $field['type'] ) : ?> |
| 54 | 62 | <label> |
| 55 | 63 | <input type="checkbox" name="<?php echo esc_attr( $field['name'] ); ?>" class="ayg-editor-field ayg-editor-field-<?php echo esc_attr( $field['name'] ); ?>" value="1" data-default="<?php echo esc_attr( $field['value'] ); ?>" <?php checked( $field['value'] ); ?> /> |
| 56 | - <strong><?php echo esc_html( $field['label'] ); ?></strong> | |
| 64 | + <?php echo esc_html( $field['label'] ); ?> | |
| 57 | 65 | </label> |
| 58 | 66 | <?php elseif ( 'color' == $field['type'] ) : ?> |
| 59 | - <label><strong><?php echo esc_html( $field['label'] ); ?></strong></label> | |
| 67 | + <label><?php echo esc_html( $field['label'] ); ?></label> | |
| 60 | 68 | <input type="text" name="<?php echo esc_attr( $field['name'] ); ?>" class="ayg-editor-field ayg-editor-field-<?php echo esc_attr( $field['name'] ); ?> ayg-color-picker widefat" value="<?php echo esc_attr( $field['value'] ); ?>" data-default="<?php echo esc_attr( $field['value'] ); ?>" /> |
| 61 | 69 | <?php endif; ?> |
| 62 | 70 | |
| 63 | 71 | <!-- Hint --> |
| 64 | - <?php if ( isset( $field['description'] ) ) : ?> | |
| 72 | + <?php if ( isset( $field['description'] ) && ! empty( $field['description'] ) ) : ?> | |
| 65 | 73 | <p class="description"><?php echo wp_kses_post( $field['description'] ); ?></p> |
| 66 | 74 | <?php endif; ?> |
| 67 | 75 | </div> |
| 68 | 76 | <?php |
| @@ -76,9 +84,11 @@ | ||
| 76 | 84 | endforeach; |
| 77 | 85 | ?> |
| 78 | 86 | |
| 79 | 87 | <p> |
| 80 | - <input type="button" id="ayg-generate-shortcode" class="button-primary" value="<?php esc_attr_e( 'Generate Shortcode', 'automatic-youtube-gallery' ); ?>" /> | |
| 88 | + <a href="#ayg-shortcode-modal" id="ayg-generate-shortcode" class="ayg-modal-button button button-primary button-hero"> | |
| 89 | + <?php esc_attr_e( 'Generate Shortcode', 'automatic-youtube-gallery' ); ?> | |
| 90 | + </a> | |
| 81 | 91 | </p> |
| 82 | 92 | </div> |
| 83 | 93 | </div> |
| 84 | 94 | </div> |
| @@ -87,22 +97,17 @@ | ||
| 87 | 97 | <div class="ayg-right-col"> |
| 88 | 98 | <div class="ayg-col-content"> |
| 89 | 99 | <p class="about-description"><?php esc_html_e( '"Automatic YouTube Gallery" provides several methods to build your gallery. Choose one of the following methods best suited for you,', 'automatic-youtube-gallery' ); ?></p> |
| 90 | 100 | <p><span class="dashicons dashicons-arrow-left-alt"></span> <?php esc_html_e( 'Use the shortcode builder in this page to build your gallery shortcode, then add it in your POST/PAGE.', 'automatic-youtube-gallery' ); ?></p> |
| 91 | - <p>2. <?php printf( __( 'Use our "Automatic YouTube Gallery" <a href="%s" target="_blank">Gutenberg block</a> to build the gallery directly in your POST/PAGE.', 'automatic-youtube-gallery' ), 'https://plugins360.com/automatic-youtube-gallery/building-youtube-gallery-using-gutenberg/' ); ?></p> | |
| 92 | - <p>3. <?php esc_html_e( 'Use our "Automatic YouTube Gallery" widget to add the gallery in your website sidebars. This is a PRO feature.', 'automatic-youtube-gallery' ); ?></p> | |
| 101 | + <p>2. <?php printf( __( 'Use our "Automatic YouTube Gallery" <a href="%s" target="_blank" rel="noopener noreferrer">Gutenberg block</a> to build the gallery directly in your POST/PAGE.', 'automatic-youtube-gallery' ), 'https://plugins360.com/automatic-youtube-gallery/building-youtube-gallery-using-gutenberg/' ); ?></p> | |
| 102 | + <p>3. <?php esc_html_e( 'Use our "Automatic YouTube Gallery" widget to add the gallery in your website sidebars.', 'automatic-youtube-gallery' ); ?></p> | |
| 93 | 103 | </div> |
| 94 | 104 | </div> |
| 95 | 105 | </div> |
| 96 | 106 | |
| 97 | 107 | <!-- Shortcode Modal --> |
| 98 | -<div id="ayg-shortcode-modal" class="ayg-modal" style="display: none;"> | |
| 99 | - <div class="ayg-modal-bg"></div> | |
| 100 | - <div class="ayg-modal-content"> | |
| 101 | - <div class="ayg-modal-body"> | |
| 102 | - <span class="ayg-modal-close">×</span> | |
| 103 | - | |
| 104 | - <p class="ayg-modal-title"><?php esc_html_e( 'Congrats! copy the shortcode below and paste it in your POST/PAGE where you need the gallery,', 'automatic-youtube-gallery' ); ?></p> | |
| 105 | - <textarea id="aiovg-shortcode" class="widefat code" autofocus="autofocus" onfocus="this.select()"></textarea> | |
| 106 | - </div> | |
| 108 | +<div id="ayg-shortcode-modal" class="ayg-modal mfp-hide"> | |
| 109 | + <div class="ayg-modal-body"> | |
| 110 | + <p><?php esc_html_e( 'Congrats! copy the shortcode below and paste it in your POST/PAGE where you need the gallery,', 'automatic-youtube-gallery' ); ?></p> | |
| 111 | + <textarea id="aiovg-shortcode" class="widefat code" rows="3" autofocus="autofocus" onfocus="this.select()"></textarea> | |
| 107 | 112 | </div> |
| 108 | 113 | </div> |
