diff options
Diffstat (limited to 'plugins/jetpack/modules/widgets/gallery')
5 files changed, 332 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/widgets/gallery/css/admin.css b/plugins/jetpack/modules/widgets/gallery/css/admin.css new file mode 100644 index 00000000..c3d96d80 --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/css/admin.css @@ -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; +}
\ No newline at end of file diff --git a/plugins/jetpack/modules/widgets/gallery/css/rtl/admin-rtl.css b/plugins/jetpack/modules/widgets/gallery/css/rtl/admin-rtl.css new file mode 100644 index 00000000..e0e4b615 --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/css/rtl/admin-rtl.css @@ -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; +}
\ No newline at end of file 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..58afb347 --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/js/admin.js @@ -0,0 +1,207 @@ +(function($){ + var $ids; + var $thumbs; + + $(function(){ + $( '.widgets-holder-wrap, .editwidget' ).on( 'click', '.gallery-widget-choose-images', function( event ) { + event.preventDefault(); + + var widget_form = $( this ).closest( '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 ) { + var 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, + Attachment = media.model.Attachment, + Attachments = media.model.Attachments, + Query = media.model.Query, + 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; + + this.states.add([ + new media.controller.WidgetGalleryEdit({ + library: options.selection, + editing: options.editing, + menu: 'gallery' + }), + new media.controller.GalleryAdd({ + + }) + ]); + } + }); + + /** + * wp.media.controller.WidgetGalleryEdit + * + * Removes the gallery settings sidebar when editing widgets...settings are instead handled + * via the standard widget interface form + * + */ + media.controller.WidgetGalleryEdit = media.controller.GalleryEdit.extend({ + gallerySettings: function( browser ) { + return; + } + }); + + 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 = '<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 ); + + setupThumbs( selection, $thumbs ); + }, this ); + + workflow.setState( workflow.options.state ); + + return workflow; + } +})(jQuery); diff --git a/plugins/jetpack/modules/widgets/gallery/js/gallery.js b/plugins/jetpack/modules/widgets/gallery/js/gallery.js new file mode 100644 index 00000000..b5764f87 --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/js/gallery.js @@ -0,0 +1,12 @@ +(function($){ + $(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 + $( '.widget-gallery .no-carousel .tiled-gallery-item a' ).on( 'click', function( event ){ + // Have to trigger default, instead of carousel + event.stopPropagation(); + + return true; + }); + }); +})(jQuery);
\ No newline at end of file diff --git a/plugins/jetpack/modules/widgets/gallery/templates/form.php b/plugins/jetpack/modules/widgets/gallery/templates/form.php new file mode 100644 index 00000000..08833657 --- /dev/null +++ b/plugins/jetpack/modules/widgets/gallery/templates/form.php @@ -0,0 +1,89 @@ +<p> + <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e( 'Title:' , 'jetpack' ); ?> + <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $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 self::THUMB_SIZE; ?>" height="<?php echo self::THUMB_SIZE; ?>" class="thumb" /> + <?php } ?> + </div> + + <div style="clear: both;"></div> +</div> + +<p> + <a class="button gallery-widget-choose-images" title="Choose Images"><span class="wp-media-buttons-icon"></span> Choose Images</a> +</p> + +<p class="gallery-widget-link-wrapper"> + <label for="<?php echo $this->get_field_id( 'link' ); ?>"><?php esc_html_e( 'Link To:' , 'jetpack' ); ?></label> + <select name="<?php echo $this->get_field_name( 'link' ); ?>" id="<?php echo $this->get_field_id( 'link' ); ?>" class="widefat"> + <?php foreach ( $allowed_values['link'] as $key => $label ) { + $selected = ''; + + if ( $instance['link'] == $key ) { + $selected = "selected='selected' "; + } ?> + + <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php esc_html_e( $label , 'jetpack' ); ?></option> + <?php } ?> + </select> +</p> + +<p> + <label for="<?php echo $this->get_field_id( 'random' ); ?>"><?php esc_html_e( 'Random Order:' , 'jetpack' ); ?></label> + <?php $checked = ''; + + if ( isset( $instance['random'] ) && $instance['random'] ) + $checked = 'checked="checked"'; + + ?> + <input name="<?php echo $this->get_field_name( 'random' ); ?>" id="<?php echo $this->get_field_id( 'random' ); ?>" type="checkbox" <?php echo $checked; ?>> +</p> + +<p class="gallery-widget-style-wrapper"> + <label for="<?php echo $this->get_field_id( 'type' ); ?>"><?php esc_html_e( 'Style:' , 'jetpack' ); ?></label> + <select name="<?php echo $this->get_field_name( 'type' ); ?>" id="<?php echo $this->get_field_id( 'type' ); ?>" class="widefat gallery-widget-style"> + <?php foreach ( $allowed_values['type'] as $key => $label ) { + $selected = ''; + + if ( $instance['type'] == $key ) { + $selected = "selected='selected' "; + } ?> + + <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php esc_html_e( $label, 'jetpack' ); ?></option> + <?php } ?> + </select> +</p> + +<?php + + +?> + +<?php // Hidden input to hold the selected image ids as a csv list ?> +<input type="hidden" class="gallery-widget-ids" name="<?php echo $this->get_field_name( 'ids' ); ?>" id="<?php echo $this->get_field_id( 'ids' ); ?>" value="<?php echo esc_attr( $instance['ids'] ); ?>" /> |