Unique Frame IDs and Check Media Enqueue

Since we could have multiple frames on a given page, this gives each media "frame" or "view" its own unique ID. Also adds a check to make sure `wp_enqueue_media` has only been called once. See: http://core.trac.wordpress.org/ticket/22843 This is fixed in WP 3.5.1 beta at the time of writing, but since this library should play nice with the current major version we'll keep in the check.

Author: chrisguitarguy

inc/Fields/FieldBase.php

@@ -281,7 +281,12 @@ protected function attachment($value, $key, $cls, $args)
 
  echo '</div>';
 
- wp_enqueue_media();
+ // this is a hack that was fix in WP 3.5.1, but we'll keep this
+ // here to make things play nice with WP 3.5
+ if (!did_action('wp_enqueue_media')) {
+ wp_enqueue_media();
+ }
+
  wp_enqueue_script('pmgcore-media');
  }
 

inc/Functionality/Enqueue.php

@@ -45,6 +45,8 @@ public function register()
  self::VER
  );
 
+ // this depends on the `media-views` and `media-editor` scripts as
+ // well, but those should be added with `wp_enqueue_media`
  wp_register_script(
  'pmgcore-media',
  PMGCORE_URL . 'js/media.js',

js/media.js

@@ -1,21 +1,26 @@
 // props: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
 jQuery(document).ready(function($) {
- var file_frame;
+ var frames = {};
+
+ if (typeof wp.media.frames.pmgcore == 'undefined') {
+ wp.media.frames.pmgcore = {};
+ }
 
  $('#wpbody').on('click', '.pmgcore-cue-media', function(e) {
 
  e.preventDefault();
 
  var parent = $(this).parents('.pmgcore-media-wrap'),
  target = $(parent).find('input[type="hidden"]'),
+ target_id = $(target).attr('id');
  media_id = $(target).val();
 
- if (file_frame) {
- file_frame.open();
+ if (frames[target_id]) {
+ frames[target_id].open();
  return;
  }
 
- file_frame = wp.media.frames.file_frame = wp.media({
+ frames[target_id] = wp.media.frames.pmgcore[target_id] = wp.media({
  title: $(this).data('title'),
  button: {
  text: $(this).data('title')
@@ -24,8 +29,8 @@ jQuery(document).ready(function($) {
  selection: [media_id]
  });
 
- file_frame.on('select', function() {
- var att = file_frame.state().get('selection').first(),
+ frames[target_id].on('select', function() {
+ var att = frames[target_id].state().get('selection').first(),
  type = att.get('type'),
  sizes,
  size,
@@ -49,10 +54,10 @@ jQuery(document).ready(function($) {
 
  $(parent).find('.pmgcore-attachment-container').html('').append(e);
 
- file_frame.close();
+ frames[target_id].close();
  });
 
- file_frame.open();
+ frames[target_id].open();
  }).on('click', '.pmgcore-remove-media', function(e) {
  var $p = $(this).parents('.pmgcore-media-wrap');