diff options
Diffstat (limited to 'plugins/jetpack/modules/widgets/gallery/js/admin.js')
| -rw-r--r-- | plugins/jetpack/modules/widgets/gallery/js/admin.js | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/widgets/gallery/js/admin.js b/plugins/jetpack/modules/widgets/gallery/js/admin.js new file mode 100644 index 00000000..71025a9b --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/js/admin.js @@ -0,0 +1,236 @@ +/* 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 ); |