← All changes | modules/widgets/gallery/js/admin.js +233 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,233 @@
	1	+/* global _wpMediaViewsL10n, _wpGalleryWidgetAdminSettings */
	2	+
	3	+( function ( $ ) {
	4	+ var $ids;
	5	+ var $thumbs;
	6	+
	7	+ $( function () {
	8	+ $( document.body ).on( 'click', '.gallery-widget-choose-images', function ( event ) {
	9	+ event.preventDefault();
	10	+
	11	+ var widget_form = $( this ).closest( 'form, .form' );
	12	+
	13	+ $ids = widget_form.find( '.gallery-widget-ids' );
	14	+ $thumbs = widget_form.find( '.gallery-widget-thumbs' );
	15	+
	16	+ var idsString = $ids.val();
	17	+
	18	+ var attachments = getAttachments( idsString );
	19	+
	20	+ var selection = null;
	21	+ var editing = false;
	22	+
	23	+ if ( attachments ) {
	24	+ selection = getSelection( attachments );
	25	+
	26	+ editing = true;
	27	+ }
	28	+
	29	+ var options = {
	30	+ state: 'gallery-edit',
	31	+ title: wp.media.view.l10n.addMedia,
	32	+ multiple: true,
	33	+ editing: editing,
	34	+ selection: selection,
	35	+ };
	36	+
	37	+ var workflow = getWorkflow( options );
	38	+
	39	+ workflow.open();
	40	+ } );
	41	+
	42	+ // Setup an onchange handler to toggle various options when changing style. The different style options
	43	+ // require different form inputs to be presented in the widget; this event will keep the UI in sync
	44	+ // with the selected style
	45	+ $( '.widget-inside' ).on( 'change', '.gallery-widget-style', setupStyleOptions );
	46	+
	47	+ // Setup the Link To options for all forms currently on the page. Does the same as the onChange handler, but
	48	+ // is called once to display the correct form inputs for each widget on the page
	49	+ setupStyleOptions();
	50	+ } );
	51	+
	52	+ var media = wp.media,
	53	+ l10n;
	54	+
	55	+ // Link any localized strings.
	56	+ l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
	57	+
	58	+ /**
	59	+ * wp.media.view.MediaFrame.GalleryWidget
	60	+ *
	61	+ * This behavior can be very nearly had by setting the workflow's state to 'gallery-edit', but
	62	+ * we cannot use the custom WidgetGalleryEdit controller with it (must overide createStates(),
	63	+ * which is necessary to disable the sidebar gallery settings in the media browser)
	64	+ */
	65	+ media.view.MediaFrame.GalleryWidget = media.view.MediaFrame.Post.extend( {
	66	+ createStates: function () {
	67	+ var options = this.options;
	68	+
	69	+ // `CollectionEdit` and `CollectionAdd` were only introduced in r27214-core,
	70	+ // so they may not be available yet.
	71	+ if ( 'CollectionEdit' in media.controller ) {
	72	+ this.states.add( [
	73	+ new media.controller.CollectionEdit( {
	74	+ type: 'image',
	75	+ collectionType: 'gallery',
	76	+ title: l10n.editGalleryTitle,
	77	+ SettingsView: media.view.Settings.Gallery,
	78	+ library: options.selection,
	79	+ editing: options.editing,
	80	+ menu: 'gallery',
	81	+ } ),
	82	+ new media.controller.CollectionAdd( {
	83	+ type: 'image',
	84	+ collectionType: 'gallery',
	85	+ title: l10n.addToGalleryTitle,
	86	+ } ),
	87	+ ] );
	88	+ } else {
	89	+ // If `CollectionEdit` is not available, then use the old approach.
	90	+
	91	+ if ( ! ( 'WidgetGalleryEdit' in media.controller ) ) {
	92	+ // Remove the gallery settings sidebar when editing widgets.
	93	+ media.controller.WidgetGalleryEdit = media.controller.GalleryEdit.extend( {
	94	+ gallerySettings: function ( /*browser*/ ) {},
	95	+ } );
	96	+ }
	97	+
	98	+ this.states.add( [
	99	+ new media.controller.WidgetGalleryEdit( {
	100	+ library: options.selection,
	101	+ editing: options.editing,
	102	+ menu: 'gallery',
	103	+ } ),
	104	+ new media.controller.GalleryAdd( {} ),
	105	+ ] );
	106	+ }
	107	+ },
	108	+ } );
	109	+
	110	+ function setupStyleOptions() {
	111	+ $( '.widget-inside .gallery-widget-style' ).each( function ( /*i*/ ) {
	112	+ var style = $( this ).val();
	113	+
	114	+ var form = $( this ).parents( 'form' );
	115	+
	116	+ switch ( style ) {
	117	+ case 'slideshow':
	118	+ form.find( '.gallery-widget-link-wrapper' ).hide();
	119	+ form.find( '.gallery-widget-columns-wrapper' ).hide();
	120	+
	121	+ break;
	122	+
	123	+ default:
	124	+ form.find( '.gallery-widget-link-wrapper' ).show();
	125	+ form.find( '.gallery-widget-columns-wrapper' ).show();
	126	+ }
	127	+ } );
	128	+ }
	129	+
	130	+ /**
	131	+ * Take a given Selection of attachments and a thumbs wrapper div (jQuery object)
	132	+ * and fill it with thumbnails
	133	+ */
	134	+ function setupThumbs( selection, wrapper ) {
	135	+ wrapper.empty();
	136	+
	137	+ var imageSize = _wpGalleryWidgetAdminSettings.thumbSize;
	138	+
	139	+ selection.each( function ( model ) {
	140	+ var sizedUrl = model.get( 'url' ) + '?w=' + imageSize + '&h=' + imageSize + '&crop=true';
	141	+
	142	+ var thumb = jQuery( '<img>', {
	143	+ src: sizedUrl,
	144	+ alt: model.get( 'title' ),
	145	+ title: model.get( 'title' ),
	146	+ width: imageSize,
	147	+ height: imageSize,
	148	+ class: 'thumb',
	149	+ } );
	150	+
	151	+ wrapper.append( thumb );
	152	+ } );
	153	+ }
	154	+
	155	+ /**
	156	+ * Take a csv string of ids (as stored in db) and fetch a full Attachments collection
	157	+ */
	158	+ function getAttachments( idsString ) {
	159	+ if ( ! idsString ) {
	160	+ return null;
	161	+ }
	162	+
	163	+ // Found in /wp-includes/js/media-editor.js
	164	+ var shortcode = wp.shortcode.next( 'gallery', '[gallery ids="' + idsString + '"]' );
	165	+
	166	+ // Ignore the rest of the match object, to give attachments() below what it expects
	167	+ shortcode = shortcode.shortcode;
	168	+
	169	+ var attachments = wp.media.gallery.attachments( shortcode );
	170	+
	171	+ return attachments;
	172	+ }
	173	+
	174	+ /**
	175	+ * Take an Attachments collection and return a corresponding Selection model that can be
	176	+ * passed to a MediaFrame to prepopulate the gallery picker
	177	+ */
	178	+ function getSelection( attachments ) {
	179	+ var selection = new wp.media.model.Selection( attachments.models, {
	180	+ props: attachments.props.toJSON(),
	181	+ multiple: true,
	182	+ } );
	183	+
	184	+ selection.gallery = attachments.gallery;
	185	+
	186	+ // Fetch the query's attachments, and then break ties from the
	187	+ // query to allow for sorting.
	188	+ selection.more().done( function () {
	189	+ // Break ties with the query.
	190	+ selection.props.set( { query: false } );
	191	+ selection.unmirror();
	192	+ selection.props.unset( 'orderby' );
	193	+ } );
	194	+
	195	+ return selection;
	196	+ }
	197	+
	198	+ /**
	199	+ * Create a media 'workflow' (MediaFrame). This is the main entry point for the media picker
	200	+ */
	201	+ function getWorkflow( options ) {
	202	+ var workflow = new wp.media.view.MediaFrame.GalleryWidget( options );
	203	+
	204	+ workflow.on(
	205	+ 'update',
	206	+ function ( selection ) {
	207	+ var state = workflow.state();
	208	+
	209	+ selection = selection || state.get( 'selection' );
	210	+
	211	+ if ( ! selection ) {
	212	+ return;
	213	+ }
	214	+
	215	+ // Map the Models down into a simple array of ids that can be easily imploded to a csv string
	216	+ var ids = selection.map( function ( model ) {
	217	+ return model.get( 'id' );
	218	+ } );
	219	+
	220	+ var id_string = ids.join( ',' );
	221	+
	222	+ $ids.val( id_string ).trigger( 'change' );
	223	+
	224	+ setupThumbs( selection, $thumbs );
	225	+ },
	226	+ this
	227	+ );
	228	+
	229	+ workflow.setState( workflow.options.state );
	230	+
	231	+ return workflow;
	232	+ }
	233	+} )( jQuery );