| Dir : /home/trave494/tiktechtok.org/wp-content/plugins/jetpack/modules/widgets/gallery/js/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : /home/trave494/tiktechtok.org/wp-content/plugins/jetpack/modules/widgets/gallery/js/admin.js |
/* 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 );