admin.js
236 lines
| 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 | return; |
| 96 | }, |
| 97 | } ); |
| 98 | } |
| 99 | |
| 100 | this.states.add( [ |
| 101 | new media.controller.WidgetGalleryEdit( { |
| 102 | library: options.selection, |
| 103 | editing: options.editing, |
| 104 | menu: 'gallery', |
| 105 | } ), |
| 106 | new media.controller.GalleryAdd( {} ), |
| 107 | ] ); |
| 108 | } |
| 109 | }, |
| 110 | } ); |
| 111 | |
| 112 | function setupStyleOptions() { |
| 113 | $( '.widget-inside .gallery-widget-style' ).each( function (/*i*/) { |
| 114 | var style = $( this ).val(); |
| 115 | |
| 116 | var form = $( this ).parents( 'form' ); |
| 117 | |
| 118 | switch ( style ) { |
| 119 | case 'slideshow': |
| 120 | form.find( '.gallery-widget-link-wrapper' ).hide(); |
| 121 | form.find( '.gallery-widget-columns-wrapper' ).hide(); |
| 122 | |
| 123 | break; |
| 124 | |
| 125 | default: |
| 126 | form.find( '.gallery-widget-link-wrapper' ).show(); |
| 127 | form.find( '.gallery-widget-columns-wrapper' ).show(); |
| 128 | } |
| 129 | } ); |
| 130 | } |
| 131 | |
| 132 | /** |
| 133 | * Take a given Selection of attachments and a thumbs wrapper div (jQuery object) |
| 134 | * and fill it with thumbnails |
| 135 | */ |
| 136 | function setupThumbs( selection, wrapper ) { |
| 137 | wrapper.empty(); |
| 138 | |
| 139 | var imageSize = _wpGalleryWidgetAdminSettings.thumbSize; |
| 140 | |
| 141 | selection.each( function ( model ) { |
| 142 | var sizedUrl = model.get( 'url' ) + '?w=' + imageSize + '&h=' + imageSize + '&crop=true'; |
| 143 | |
| 144 | var thumb = jQuery( '<img>', { |
| 145 | src: sizedUrl, |
| 146 | alt: model.get( 'title' ), |
| 147 | title: model.get( 'title' ), |
| 148 | width: imageSize, |
| 149 | height: imageSize, |
| 150 | class: 'thumb', |
| 151 | } ); |
| 152 | |
| 153 | wrapper.append( thumb ); |
| 154 | } ); |
| 155 | } |
| 156 | |
| 157 | /** |
| 158 | * Take a csv string of ids (as stored in db) and fetch a full Attachments collection |
| 159 | */ |
| 160 | function getAttachments( idsString ) { |
| 161 | if ( ! idsString ) { |
| 162 | return null; |
| 163 | } |
| 164 | |
| 165 | // Found in /wp-includes/js/media-editor.js |
| 166 | var shortcode = wp.shortcode.next( 'gallery', '[gallery ids="' + idsString + '"]' ); |
| 167 | |
| 168 | // Ignore the rest of the match object, to give attachments() below what it expects |
| 169 | shortcode = shortcode.shortcode; |
| 170 | |
| 171 | var attachments = wp.media.gallery.attachments( shortcode ); |
| 172 | |
| 173 | return attachments; |
| 174 | } |
| 175 | |
| 176 | /** |
| 177 | * Take an Attachments collection and return a corresponding Selection model that can be |
| 178 | * passed to a MediaFrame to prepopulate the gallery picker |
| 179 | */ |
| 180 | function getSelection( attachments ) { |
| 181 | var selection = new wp.media.model.Selection( attachments.models, { |
| 182 | props: attachments.props.toJSON(), |
| 183 | multiple: true, |
| 184 | } ); |
| 185 | |
| 186 | selection.gallery = attachments.gallery; |
| 187 | |
| 188 | // Fetch the query's attachments, and then break ties from the |
| 189 | // query to allow for sorting. |
| 190 | selection.more().done( function () { |
| 191 | // Break ties with the query. |
| 192 | selection.props.set( { query: false } ); |
| 193 | selection.unmirror(); |
| 194 | selection.props.unset( 'orderby' ); |
| 195 | } ); |
| 196 | |
| 197 | return selection; |
| 198 | } |
| 199 | |
| 200 | /** |
| 201 | * Create a media 'workflow' (MediaFrame). This is the main entry point for the media picker |
| 202 | */ |
| 203 | function getWorkflow( options ) { |
| 204 | var workflow = new wp.media.view.MediaFrame.GalleryWidget( options ); |
| 205 | |
| 206 | workflow.on( |
| 207 | 'update', |
| 208 | function ( selection ) { |
| 209 | var state = workflow.state(); |
| 210 | |
| 211 | selection = selection || state.get( 'selection' ); |
| 212 | |
| 213 | if ( ! selection ) { |
| 214 | return; |
| 215 | } |
| 216 | |
| 217 | // Map the Models down into a simple array of ids that can be easily imploded to a csv string |
| 218 | var ids = selection.map( function ( model ) { |
| 219 | return model.get( 'id' ); |
| 220 | } ); |
| 221 | |
| 222 | var id_string = ids.join( ',' ); |
| 223 | |
| 224 | $ids.val( id_string ).trigger( 'change' ); |
| 225 | |
| 226 | setupThumbs( selection, $thumbs ); |
| 227 | }, |
| 228 | this |
| 229 | ); |
| 230 | |
| 231 | workflow.setState( workflow.options.state ); |
| 232 | |
| 233 | return workflow; |
| 234 | } |
| 235 | } )( jQuery ); |
| 236 |