| @@ -5,9 +5,9 @@ | ||
| 5 | 5 | * Display the media uploader. |
| 6 | 6 | * |
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | - function ayg_render_media_uploader( $elem ) { | |
| 9 | + function ayg_render_media_uploader( $elem ) { | |
| 10 | 10 | var file_frame, attachment; |
| 11 | 11 | |
| 12 | 12 | // If an instance of file_frame already exists, then we can open it rather than creating a new instance |
| 13 | 13 | if ( file_frame ) { |
| @@ -41,18 +41,8 @@ | ||
| 41 | 41 | file_frame.open(); |
| 42 | 42 | }; |
| 43 | 43 | |
| 44 | 44 | /** |
| 45 | - * Close the popup. | |
| 46 | - * | |
| 47 | - * @since 1.0.0 | |
| 48 | - */ | |
| 49 | - function ayg_modal_hide() { | |
| 50 | - $( '.ayg-modal' ).hide(); | |
| 51 | - $( 'html' ).removeClass( 'ayg-no-scroll' ); | |
| 52 | - } | |
| 53 | - | |
| 54 | - /** | |
| 55 | 45 | * Get Youtube playlist ID from Youtube URL. |
| 56 | 46 | * |
| 57 | 47 | * @since 1.0.0 |
| 58 | 48 | * @param {string} url - URL from which to extract the ID. |
| @@ -136,8 +126,16 @@ | ||
| 136 | 126 | $(function() { |
| 137 | 127 | // Common: Initialize the color picker |
| 138 | 128 | $( '.ayg-color-picker' ).wpColorPicker(); |
| 139 | 129 | |
| 130 | + // Common: Init the popup. | |
| 131 | + if ( $.fn.magnificPopup ) { | |
| 132 | + $( '.ayg-modal-button' ).magnificPopup({ | |
| 133 | + type: 'inline', | |
| 134 | + mainClass: 'mfp-fade' | |
| 135 | + }); | |
| 136 | + } | |
| 137 | + | |
| 140 | 138 | // Dashboard: Save API Key |
| 141 | 139 | $( '#ayg-button-save-api-key' ).on( 'click', function( e ) { |
| 142 | 140 | e.preventDefault(); |
| 143 | 141 | |
| @@ -167,9 +165,11 @@ | ||
| 167 | 165 | e.preventDefault(); |
| 168 | 166 | |
| 169 | 167 | // Attributes |
| 170 | 168 | var props = {}; |
| 169 | + var popup = 0; | |
| 171 | 170 | |
| 171 | + // Loop through all editor fields | |
| 172 | 172 | $( '.ayg-editor-control', '#ayg-shortcode-builder' ).each(function() { |
| 173 | 173 | var $elem = $( this ).find( '.ayg-editor-field' ); |
| 174 | 174 | var type = $elem.attr( 'type' ); |
| 175 | 175 | var key = $elem.attr( 'name' ); |
| @@ -175,8 +175,14 @@ | ||
| 175 | 175 | var key = $elem.attr( 'name' ); |
| 176 | 176 | var value = $elem.val(); |
| 177 | 177 | var def = $elem.data( 'default' ); |
| 178 | 178 | |
| 179 | + // Skip popup field | |
| 180 | + if ( 'popup' == key ) { | |
| 181 | + popup = $elem.is( ':checked' ) ? 1 : 0; | |
| 182 | + return true; // continue | |
| 183 | + } | |
| 184 | + | |
| 179 | 185 | // field type = checkbox |
| 180 | 186 | if ( 'checkbox' == type ) { |
| 181 | 187 | value = $elem.is( ':checked' ) ? 1 : 0; |
| 182 | 188 | } |
| @@ -220,9 +226,16 @@ | ||
| 220 | 226 | props[ key ] = value; |
| 221 | 227 | } |
| 222 | 228 | }); |
| 223 | 229 | |
| 230 | + // If popup is enabled and type is video, force theme to popup | |
| 231 | + if ( popup && props.hasOwnProperty( 'type' ) && 'video' == props.type ) { | |
| 232 | + props.theme = 'popup'; | |
| 233 | + } | |
| 234 | + | |
| 235 | + // Build attributes string | |
| 224 | 236 | var attrs = ''; |
| 237 | + | |
| 225 | 238 | for ( var key in props ) { |
| 226 | 239 | if ( props.hasOwnProperty( key ) ) { |
| 227 | 240 | attrs += ( ' ' + key + '="' + props[ key ] + '"' ); |
| 228 | 241 | } |
| @@ -229,26 +242,10 @@ | ||
| 229 | 242 | } |
| 230 | 243 | |
| 231 | 244 | // Shortcode output |
| 232 | 245 | $( '#aiovg-shortcode').val( '[automatic_youtube_gallery' + attrs + ']' ); |
| 233 | - | |
| 234 | - // Initialize the popup | |
| 235 | - $( 'html' ).addClass( 'ayg-no-scroll' ); | |
| 236 | - $( '#ayg-shortcode-modal' ).show(); | |
| 237 | 246 | }); |
| 238 | 247 | |
| 239 | - // Dashboard: Close the shortcode builder popup | |
| 240 | - $( '.ayg-modal-close' ).on( 'click', function( e ) { | |
| 241 | - e.preventDefault(); | |
| 242 | - ayg_modal_hide(); | |
| 243 | - }); | |
| 244 | - | |
| 245 | - $( '.ayg-modal-content' ).on( 'click', function( e ) { | |
| 246 | - if ( $( e.target ).hasClass( 'ayg-modal-content' ) ) { | |
| 247 | - ayg_modal_hide(); | |
| 248 | - }; | |
| 249 | - }); | |
| 250 | - | |
| 251 | 248 | // Editor: Toggle between field sections |
| 252 | 249 | $( document ).on( 'click', '.ayg-editor-section-header', function( e ) { |
| 253 | 250 | var $elem = $( this ).parent(); |
| 254 | 251 | |
| @@ -264,71 +261,58 @@ | ||
| 264 | 261 | .find( '.ayg-editor-controls' ) |
| 265 | 262 | .slideToggle(); |
| 266 | 263 | }); |
| 267 | 264 | |
| 268 | - // Editor: Show/Hide fields based on the selected source 'type' | |
| 269 | - $( document ).on( 'change', '.ayg-editor-field-type', function( e ) { | |
| 270 | - var type = $( this ).val(); | |
| 271 | - var $elem = $( this ).closest( '.ayg-editor' ); | |
| 265 | + // Editor: Toggle fields based on the source type | |
| 266 | + $( document ).on( 'change', '.ayg-editor-field-type', function() { | |
| 267 | + var $container = $( this ).closest( '.ayg-editor' ); | |
| 268 | + var value = $( this ).val(); | |
| 272 | 269 | |
| 273 | - $elem.removeClass(function( index, classes ) { | |
| 270 | + $container.removeClass(function( index, classes ) { | |
| 274 | 271 | var matches = classes.match( /\ayg-editor-field-type-\S+/ig ); |
| 275 | - return ( matches ) ? matches.join(' ') : ''; | |
| 272 | + return ( matches ) ? matches.join( ' ' ) : ''; | |
| 276 | 273 | }); |
| 277 | 274 | |
| 278 | - $elem.addClass( 'ayg-editor-field-type-' + type ); | |
| 275 | + $container.addClass( 'ayg-editor-field-type-' + value ); | |
| 279 | 276 | }); |
| 280 | 277 | |
| 281 | - // Editor: Show/Hide fields based on the selected theme | |
| 282 | - $( document ).on( 'change', '.ayg-editor-field-theme', function( e ) { | |
| 283 | - var theme = $( this ).val(); | |
| 284 | - var $elem = $( this ).closest( '.ayg-editor' ); | |
| 278 | + // Editor: Toggle fields based on the theme | |
| 279 | + $( document ).on( 'change', '.ayg-editor-field-theme', function() { | |
| 280 | + var $container = $( this ).closest( '.ayg-editor' ); | |
| 281 | + var value = $( this ).val(); | |
| 285 | 282 | |
| 286 | - $elem.removeClass(function( index, classes ) { | |
| 283 | + $container.removeClass(function( index, classes ) { | |
| 287 | 284 | var matches = classes.match( /\ayg-editor-field-theme-\S+/ig ); |
| 288 | - return ( matches ) ? matches.join(' ') : ''; | |
| 285 | + return ( matches ) ? matches.join( ' ' ) : ''; | |
| 289 | 286 | }); |
| 290 | 287 | |
| 291 | - $elem.addClass( 'ayg-editor-field-theme-' + theme ); | |
| 288 | + $container.addClass( 'ayg-editor-field-theme-' + value ); | |
| 292 | 289 | }); |
| 293 | 290 | |
| 294 | - // Editor: Show/Hide fields based on the selected pagination type | |
| 295 | - $( document ).on( 'change', '.ayg-editor-field-pagination_type', function( e ) { | |
| 296 | - var pagination_type = $( this ).val(); | |
| 297 | - var $elem = $( this ).closest( '.ayg-editor' ); | |
| 291 | + // Settings: Toggle fields based on the theme | |
| 292 | + $( 'tr.theme select', '#ayg-settings' ).on( 'change', function() { | |
| 293 | + var $container = $( '#ayg-settings' ); | |
| 294 | + var value = $( this ).val(); | |
| 298 | 295 | |
| 299 | - $elem.removeClass(function( index, classes ) { | |
| 300 | - var matches = classes.match( /\ayg-editor-field-pagination_type-\S+/ig ); | |
| 301 | - return ( matches ) ? matches.join(' ') : ''; | |
| 296 | + $container.removeClass(function( index, classes ) { | |
| 297 | + var matches = classes.match( /theme-\S+/ig ); | |
| 298 | + return ( matches ) ? matches.join( ' ' ) : ''; | |
| 302 | 299 | }); |
| 303 | 300 | |
| 304 | - $elem.addClass( 'ayg-editor-field-pagination_type-' + pagination_type ); | |
| 305 | - }); | |
| 306 | - | |
| 307 | - // Settings: Show/Hide fields based on the selected theme | |
| 308 | - $( 'tr.theme', '#ayg-settings' ).find( 'select' ).on( 'change', function() { | |
| 309 | - var theme = $( this ).val(); | |
| 310 | - var $elem = $( '#ayg-settings' ); | |
| 311 | - | |
| 312 | - $elem.removeClass(function( index, classes ) { | |
| 313 | - var matches = classes.match( /\ayg-settings-theme-\S+/ig ); | |
| 314 | - return ( matches ) ? matches.join(' ') : ''; | |
| 315 | - }); | |
| 316 | - | |
| 317 | - $elem.addClass( 'ayg-settings-theme-' + theme ); | |
| 301 | + $container.addClass( 'theme-' + value ); | |
| 318 | 302 | }); |
| 319 | 303 | |
| 320 | - // Settings: Show/Hide fields based on the selected pagination type | |
| 321 | - $( 'tr.pagination_type', '#ayg-settings' ).find( 'select' ).on( 'change', function() { | |
| 322 | - var pagination_type = $( this ).val(); | |
| 323 | - var $elem = $( '#ayg-settings' ); | |
| 304 | + // Settings: Toggle fields based on the player type | |
| 305 | + $( 'tr.player_type input[type="radio"]', '#ayg-settings' ).on( 'change', function() { | |
| 306 | + var $container = $( '#ayg-settings' ); | |
| 307 | + var value = $container.find( 'tr.player_type input[type="radio"]:checked' ).val(); | |
| 324 | 308 | |
| 325 | - $elem.removeClass(function( index, classes ) { | |
| 326 | - var matches = classes.match( /\ayg-settings-pagination_type-\S+/ig ); | |
| 327 | - return ( matches ) ? matches.join(' ') : ''; | |
| 309 | + $container.removeClass(function( index, classes ) { | |
| 310 | + var matches = classes.match( /player_type-\S+/ig ); | |
| 311 | + return ( matches ) ? matches.join( ' ' ) : ''; | |
| 328 | 312 | }); |
| 329 | 313 | |
| 330 | - $elem.addClass( 'ayg-settings-pagination_type-' + pagination_type ); | |
| 314 | + $container.addClass( 'player_type-' + value ); | |
| 331 | 315 | }); |
| 332 | 316 | |
| 333 | 317 | // Settings: Browse button |
| 334 | 318 | $( '.ayg-settings-browse' ).on( 'click', function( e ) { |
