wp-admin/js/custom-header.js

   1 /* global isRtl */
   2 (function($) {
   3         var frame;
   4
   5         $( function() {
   6                 // Fetch available headers and apply jQuery.masonry
   7                 // once the images have loaded.
   8                 var $headers = $('.available-headers');
   9
  10                 $headers.imagesLoaded( function() {
  11                         $headers.masonry({
  12                                 itemSelector: '.default-header',
  13                                 isRTL: !! ( 'undefined' != typeof isRtl && isRtl )
  14                         });
  15                 });
  16
  17                 // Build the choose from library frame.
  18                 $('#choose-from-library-link').click( function( event ) {
  19                         var $el = $(this);
  20                         event.preventDefault();
  21
  22                         // If the media frame already exists, reopen it.
  23                         if ( frame ) {
  24                                 frame.open();
  25                                 return;
  26                         }
  27
  28                         // Create the media frame.
  29                         frame = wp.media.frames.customHeader = wp.media({
  30                                 // Set the title of the modal.
  31                                 title: $el.data('choose'),
  32
  33                                 // Tell the modal to show only images.
  34                                 library: {
  35                                         type: 'image'
  36                                 },
  37
  38                                 // Customize the submit button.
  39                                 button: {
  40                                         // Set the text of the button.
  41                                         text: $el.data('update'),
  42                                         // Tell the button not to close the modal, since we're
  43                                         // going to refresh the page when the image is selected.
  44                                         close: false
  45                                 }
  46                         });
  47
  48                         // When an image is selected, run a callback.
  49                         frame.on( 'select', function() {
  50                                 // Grab the selected attachment.
  51                                 var attachment = frame.state().get('selection').first(),
  52                                         link = $el.data('updateLink');
  53
  54                                 // Tell the browser to navigate to the crop step.
  55                                 window.location = link + '&file=' + attachment.id;
  56                         });
  57
  58                         frame.open();
  59                 });
  60         });
  61 }(jQuery));