Omphaloskepsis/plugins/jetpack/modules/widgets/gallery/js/admin.js

/* jshint onevar: false, multistr: true */
/* global _wpMediaViewsL10n, _wpGalleryWidgetAdminSettings */

(function($){
	var $ids;
	var $thumbs;

	$(function(){
		$( document.body ) .on( 'click', '.gallery-widget-choose-images', function( event ) {
			event.preventDefault();

			var widget_form = $( this ).closest( 'form, .form' );

			$ids    = widget_form.find( '.gallery-widget-ids' );
			$thumbs	= widget_form.find( '.gallery-widget-thumbs' );

			var idsString = $ids.val();

			var attachments = getAttachments( idsString );

			var selection   = null;
			var editing     = false;

			if ( attachments ) {
				selection = getSelection( attachments );

				editing = true;
			}

			var options = {
				state: 'gallery-edit',
				title: wp.media.view.l10n.addMedia,
				multiple: true,
				editing: editing,
				selection: selection
			};

			var workflow = getWorkflow( options );

			workflow.open();
		});

		// Setup an onchange handler to toggle various options when changing style. The different style options
		// require different form inputs to be presented in the widget; this event will keep the UI in sync
		// with the selected style
		$( '.widget-inside' ).on( 'change', '.gallery-widget-style', setupStyleOptions);

		// Setup the Link To options for all forms currently on the page. Does the same as the onChange handler, but
		// is called once to display the correct form inputs for each widget on the page
		setupStyleOptions();
	});

	var media       = wp.media,
		l10n;

	// Link any localized strings.
	l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;

	/**
	 * wp.media.view.MediaFrame.GalleryWidget
	 *
	 * This behavior can be very nearly had by setting the workflow's state to 'gallery-edit', but
	 * we cannot use the custom WidgetGalleryEdit controller with it (must overide createStates(),
	 * which is necessary to disable the sidebar gallery settings in the media browser)
	 */
	media.view.MediaFrame.GalleryWidget = media.view.MediaFrame.Post.extend({
		createStates: function() {
			var options = this.options;

			// `CollectionEdit` and `CollectionAdd` were only introduced in r27214-core,
			// so they may not be available yet.
			if ( 'CollectionEdit' in media.controller ) {
				this.states.add([
					new media.controller.CollectionEdit({
						type:           'image',
						collectionType: 'gallery',
						title:           l10n.editGalleryTitle,
						SettingsView:    media.view.Settings.Gallery,
						library:         options.selection,
						editing:         options.editing,
						menu:           'gallery'
					}),
					new media.controller.CollectionAdd({
						type:           'image',
						collectionType: 'gallery',
						title:          l10n.addToGalleryTitle
					})
				]);
			} else {
				// If `CollectionEdit` is not available, then use the old approach.

				if ( ! ( 'WidgetGalleryEdit' in media.controller ) ) {
					// Remove the gallery settings sidebar when editing widgets.
					media.controller.WidgetGalleryEdit = media.controller.GalleryEdit.extend({
						gallerySettings: function( /*browser*/ ) {
							return;
						}
					});
				}

				this.states.add([
					new media.controller.WidgetGalleryEdit({
						library: options.selection,
						editing: options.editing,
						menu:    'gallery'
					}),
					new media.controller.GalleryAdd({ })
				]);
			}
		}
	});

	function setupStyleOptions(){
		$( '.widget-inside .gallery-widget-style' ).each( function( /*i*/ ){
			var style = $( this ).val();

			var form = $( this ).parents( 'form' );

			switch ( style ) {
				case 'slideshow':
					form.find( '.gallery-widget-link-wrapper' ).hide();
					form.find( '.gallery-widget-columns-wrapper' ).hide();

					break;

				default:
					form.find( '.gallery-widget-link-wrapper' ).show();
					form.find( '.gallery-widget-columns-wrapper' ).show();
			}
		});
	}

	/**
	 * Take a given Selection of attachments and a thumbs wrapper div (jQuery object)
	 * and fill it with thumbnails
	 */
	function setupThumbs( selection, wrapper ){
		wrapper.empty();

		var imageSize = _wpGalleryWidgetAdminSettings.thumbSize;

		selection.each( function( model ){
			var sizedUrl = model.get('url') + '?w=' + imageSize + '&h=' + imageSize + '&crop=true';

			var thumb = jQuery('<img>', { 'src' : sizedUrl, 'alt': model.get('title'), 'title': model.get('title'), 'width': imageSize, 'height': imageSize, 'class': 'thumb' });

			wrapper.append( thumb );
		});
	}

	/**
	 * Take a csv string of ids (as stored in db) and fetch a full Attachments collection
	 */
	function getAttachments( idsString ) {
		if ( ! idsString ) {
			return null;
		}

		// Found in /wp-includes/js/media-editor.js
		var shortcode = wp.shortcode.next( 'gallery', '[gallery ids="' + idsString + '"]' );

		// Ignore the rest of the match object, to give attachments() below what it expects
		shortcode     = shortcode.shortcode;

		var attachments = wp.media.gallery.attachments( shortcode );

		return attachments;
	}

	/**
	 * Take an Attachments collection and return a corresponding Selection model that can be
	 * passed to a MediaFrame to prepopulate the gallery picker
	 */
	function getSelection( attachments ) {
		var selection = new wp.media.model.Selection( attachments.models, {
			props:    attachments.props.toJSON(),
			multiple: true
		});

		selection.gallery = attachments.gallery;

		// Fetch the query's attachments, and then break ties from the
		// query to allow for sorting.
		selection.more().done( function() {
			// Break ties with the query.
			selection.props.set( { query: false } );
			selection.unmirror();
			selection.props.unset( 'orderby' );
		});

		return selection;
	}

	/**
	 * Create a media 'workflow' (MediaFrame). This is the main entry point for the media picker
	 */
	function getWorkflow( options ) {
		var workflow = new wp.media.view.MediaFrame.GalleryWidget( options );

		workflow.on( 'update', function( selection ) {
			var state = workflow.state();

			selection = selection || state.get( 'selection' );

			if ( ! selection ) {
				return;
			}

			// Map the Models down into a simple array of ids that can be easily imploded to a csv string
			var ids = selection.map( function( model ){
				return model.get( 'id' );
			} );

			var id_string = ids.join( ',' );

			$ids.val( id_string ).trigger( 'change' );

			setupThumbs( selection, $thumbs );
		}, this );

		workflow.setState( workflow.options.state );

		return workflow;
	}
})(jQuery);