init
This commit is contained in:
emmymayo
@@ -0,0 +1,11 @@
|
||||
.gallery-widget-thumbs-wrapper {
|
||||
margin: -5px 0 0.3em 0;
|
||||
}
|
||||
|
||||
.gallery-widget-thumbs img {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
background-color: #fff;
|
||||
margin: 0 0 5px 5px;
|
||||
float: right;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.gallery-widget-thumbs-wrapper{margin:-5px 0 .3em}.gallery-widget-thumbs img{background-color:#fff;border:1px solid #ccc;float:right;margin:0 0 5px 5px;padding:2px}
|
||||
@@ -0,0 +1,11 @@
|
||||
.gallery-widget-thumbs-wrapper {
|
||||
margin: -5px 0 0.3em 0;
|
||||
}
|
||||
|
||||
.gallery-widget-thumbs img {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
background-color: #fff;
|
||||
margin: 0 5px 5px 0;
|
||||
float: left;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.gallery-widget-thumbs-wrapper{margin:-5px 0 .3em}.gallery-widget-thumbs img{background-color:#fff;border:1px solid #ccc;float:left;margin:0 5px 5px 0;padding:2px}
|
||||
@@ -0,0 +1,13 @@
|
||||
/* This file was automatically generated on Mar 22 2013 21:33:14 */
|
||||
|
||||
.gallery-widget-thumbs-wrapper {
|
||||
margin: -5px 0 0.3em 0;
|
||||
}
|
||||
|
||||
.gallery-widget-thumbs img {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
background-color: #fff;
|
||||
margin: 0 0 5px 5px;
|
||||
float: right;
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/* 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*/ ) {},
|
||||
} );
|
||||
}
|
||||
|
||||
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 );
|
||||
@@ -0,0 +1,14 @@
|
||||
( function ( $ ) {
|
||||
// Fixes a bug with carousels being triggered even when a widget's Link To option is not set to carousel.
|
||||
// Happens when another gallery is loaded on the page, either in a post or separate widget
|
||||
$( 'body' ).on(
|
||||
'click',
|
||||
'.widget-gallery .no-carousel .tiled-gallery-item a',
|
||||
function ( event ) {
|
||||
// Have to trigger default, instead of carousel
|
||||
event.stopPropagation();
|
||||
|
||||
return true;
|
||||
}
|
||||
);
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,81 @@
|
||||
<?php
|
||||
/**
|
||||
* Jetpack_Gallery_Widget backend settings form output.
|
||||
*
|
||||
* @html-template Jetpack_Gallery_Widget::form
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- HTML template, let Phan handle it.
|
||||
|
||||
?>
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'jetpack' ); ?>
|
||||
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
|
||||
type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" />
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>
|
||||
<?php esc_html_e( 'Images:', 'jetpack' ); ?>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<div class="gallery-widget-thumbs-wrapper">
|
||||
<div class="gallery-widget-thumbs">
|
||||
<?php
|
||||
|
||||
// Add the thumbnails to the widget box.
|
||||
$attachments = $this->get_attachments( $instance );
|
||||
|
||||
foreach ( $attachments as $attachment ) {
|
||||
$url = add_query_arg(
|
||||
array(
|
||||
'w' => self::THUMB_SIZE,
|
||||
'h' => self::THUMB_SIZE,
|
||||
'crop' => 'true',
|
||||
),
|
||||
wp_get_attachment_url( $attachment->ID )
|
||||
);
|
||||
|
||||
?>
|
||||
|
||||
<img src="<?php echo esc_url( $url ); ?>" title="<?php echo esc_attr( $attachment->post_title ); ?>" alt="<?php echo esc_attr( $attachment->post_title ); ?>"
|
||||
width="<?php echo (int) self::THUMB_SIZE; // @phan-suppress-current-line PhanRedundantCondition -- phpcs wants an explicit cast, phan complains it's redundant. 🤷 ?>" height="<?php echo (int) self::THUMB_SIZE; ?>" class="thumb" />
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a class="button gallery-widget-choose-images"><span class="wp-media-buttons-icon"></span> <?php esc_html_e( 'Choose Images', 'jetpack' ); ?></a>
|
||||
</p>
|
||||
|
||||
<p class="gallery-widget-link-wrapper">
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'link' ) ); ?>"><?php esc_html_e( 'Link To:', 'jetpack' ); ?></label>
|
||||
<select name="<?php echo esc_attr( $this->get_field_name( 'link' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'link' ) ); ?>" class="widefat">
|
||||
<?php foreach ( $allowed_values['link'] as $key => $label ) : ?>
|
||||
<option value="<?php echo esc_attr( $key ); ?>"<?php selected( $instance['link'], $key ); ?>><?php echo esc_html( $label ); ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'random' ) ); ?>"><?php esc_html_e( 'Random Order:', 'jetpack' ); ?></label>
|
||||
<input name="<?php echo esc_attr( $this->get_field_name( 'random' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'random' ) ); ?>" type="checkbox"<?php checked( ! empty( $instance['random'] ) ); ?>>
|
||||
</p>
|
||||
|
||||
<p class="gallery-widget-style-wrapper">
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'type' ) ); ?>"><?php esc_html_e( 'Style:', 'jetpack' ); ?></label>
|
||||
<select name="<?php echo esc_attr( $this->get_field_name( 'type' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'type' ) ); ?>" class="widefat gallery-widget-style">
|
||||
<?php foreach ( $allowed_values['type'] as $key => $label ) : ?>
|
||||
<option value="<?php echo esc_attr( $key ); ?>"<?php selected( $instance['type'], $key ); ?>><?php echo esc_html( $label ); ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
|
||||
<?php // Hidden input to hold the selected image ids as a csv list. ?>
|
||||
<input type="hidden" class="gallery-widget-ids" name="<?php echo esc_attr( $this->get_field_name( 'ids' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'ids' ) ); ?>" value="<?php echo esc_attr( $instance['ids'] ); ?>" />
|
||||
Reference in New Issue
Block a user