admin-folders.js
5 years ago
admin-galleries.js
5 years ago
admin-gallery.js
5 years ago
admin-media.js
5 years ago
admin-plugins.js
5 years ago
admin-widgets.js
5 years ago
admin.js
5 years ago
front-basicmasonry.js
5 years ago
front-basicslider.js
5 years ago
front.js
5 years ago
gutenberg.min.js
5 years ago
admin-gallery.js
333 lines
| 1 | ( function( $ ) { |
| 2 | |
| 3 | ResponsiveLightboxGallery = { |
| 4 | modal: null, |
| 5 | lastGalleryID: 0, |
| 6 | lastGalleryImage: '', |
| 7 | selectGalleryEventInitialized: false, |
| 8 | resetFilters: false, |
| 9 | galleries: {}, |
| 10 | gutenberg: false, |
| 11 | primaryButtonClass: '', |
| 12 | secondaryButtonClass: '', |
| 13 | init: function() { |
| 14 | this.gutenberg = typeof rlBlockEditor !== 'undefined'; |
| 15 | this.searchGalleries = _.debounce( this.getGalleries, 500 ), |
| 16 | this.bindEvents(); |
| 17 | this.setButtons(); |
| 18 | }, |
| 19 | searchGalleries: function() {}, |
| 20 | setButtons: function() { |
| 21 | if ( this.gutenberg ) { |
| 22 | this.primaryButtonClass = '.rl-media-button-select-gallery'; |
| 23 | this.secondaryButtonClass = '.rl-media-button-insert-gallery'; |
| 24 | } else { |
| 25 | this.primaryButtonClass = '.rl-media-button-insert-gallery'; |
| 26 | this.secondaryButtonClass = '.rl-media-button-select-gallery'; |
| 27 | } |
| 28 | }, |
| 29 | getModal: function() { |
| 30 | return this.modal[0]; |
| 31 | }, |
| 32 | getModalButton: function() { |
| 33 | return this.modal[0].getElementsByClassName( 'rl-media-button-select-gallery' )[0]; |
| 34 | }, |
| 35 | open: function( galleryID ) { |
| 36 | if ( typeof galleryID === 'undefined' ) |
| 37 | var galleryID = 0; |
| 38 | |
| 39 | var phrase = ''; |
| 40 | |
| 41 | $( this.primaryButtonClass ).show(); |
| 42 | $( this.secondaryButtonClass ).hide(); |
| 43 | |
| 44 | // resetFilters |
| 45 | if ( this.resetFilters ) { |
| 46 | phrase = ''; |
| 47 | |
| 48 | // clear searh input |
| 49 | $( '#rl-media-search-input' ).val( '' ); |
| 50 | |
| 51 | // reset categories |
| 52 | this.modal.find( '#rl-media-attachment-categories' ).val( 0 ); |
| 53 | } else |
| 54 | phrase = $( '#rl-media-search-input' ).val(); |
| 55 | |
| 56 | // display modal |
| 57 | this.modal.show(); |
| 58 | |
| 59 | // fix columns |
| 60 | this.setColumns(); |
| 61 | |
| 62 | // get galleries |
| 63 | this.getGalleries( phrase, galleryID ); |
| 64 | }, |
| 65 | close: function( event ) { |
| 66 | event.preventDefault(); |
| 67 | |
| 68 | this.modal.hide(); |
| 69 | }, |
| 70 | setColumns: function() { |
| 71 | var list = this.modal.find( '.rl-galleries-list' ), |
| 72 | list_width = list.width(), |
| 73 | content = this.modal.find( '.media-frame-content' ), |
| 74 | columns = parseInt( content.attr( 'data-columns' ) ), |
| 75 | old_columns = new_columns = columns; |
| 76 | |
| 77 | if ( list_width ) { |
| 78 | var width = this.modal.find( '.media-sidebar' ).outerWidth() + 'px'; |
| 79 | |
| 80 | list.css( 'right', width ); |
| 81 | this.modal.find( '.attachments-browser .media-toolbar' ).css( 'right', width ); |
| 82 | new_columns = Math.min( Math.round( list_width / 170 ), 12 ) || 1; |
| 83 | |
| 84 | if ( ! old_columns || old_columns !== new_columns ) |
| 85 | content.attr( 'data-columns', new_columns ); |
| 86 | } |
| 87 | }, |
| 88 | handleClickGallery: function( event ) { |
| 89 | event.preventDefault(); |
| 90 | |
| 91 | var gallery = $( event.target ).closest( 'li' ), |
| 92 | currentGalleryID = parseInt( gallery.data( 'id' ) ); |
| 93 | |
| 94 | if ( this.lastGalleryID !== currentGalleryID ) { |
| 95 | gallery.parent().find( 'li' ).removeClass( 'selected details' ); |
| 96 | |
| 97 | this.lastGalleryID = currentGalleryID; |
| 98 | |
| 99 | // get full source image |
| 100 | var fullSource = gallery.find( '.centered' ).data( 'full-src' ); |
| 101 | |
| 102 | // invalid full source image? |
| 103 | if ( fullSource === '' ) |
| 104 | this.lastGalleryImage = gallery.find( 'img' ).first().attr( 'src' ); |
| 105 | else |
| 106 | this.lastGalleryImage = fullSource; |
| 107 | |
| 108 | gallery.addClass( 'selected details' ); |
| 109 | |
| 110 | this.clickGallery( currentGalleryID, false ); |
| 111 | } else { |
| 112 | if ( gallery.hasClass( 'selected details' ) ) { |
| 113 | gallery.removeClass( 'selected details' ); |
| 114 | |
| 115 | this.clickGallery( currentGalleryID, true ); |
| 116 | } else { |
| 117 | gallery.addClass( 'selected details' ); |
| 118 | |
| 119 | this.clickGallery( currentGalleryID, false ); |
| 120 | } |
| 121 | } |
| 122 | }, |
| 123 | clickGallery: function( gallery_id, toggle ) { |
| 124 | var _this = this; |
| 125 | |
| 126 | _this.modal.find( '.media-selection' ).toggleClass( 'empty', toggle ); |
| 127 | _this.modal.find( this.primaryButtonClass ).prop( 'disabled', toggle ); |
| 128 | |
| 129 | // load gallery preview images? |
| 130 | if ( ! toggle ) { |
| 131 | // clear images |
| 132 | _this.modal.find( '.rl-attachments-list' ).empty(); |
| 133 | |
| 134 | // load cached images |
| 135 | if ( typeof _this.galleries[gallery_id] !== 'undefined' ) { |
| 136 | // update images |
| 137 | this.updateGalleryPreview( _this.galleries[gallery_id], false ); |
| 138 | // get images for the first time |
| 139 | } else { |
| 140 | var spinner = _this.modal.find( '.rl-gallery-images-spinner' ), |
| 141 | info = _this.modal.find( '.selection-info' ); |
| 142 | |
| 143 | // display spinner |
| 144 | spinner.fadeIn( 'fast' ).css( 'visibility', 'visible' ); |
| 145 | |
| 146 | // turn off info |
| 147 | info.addClass( 'rl-loading-content' ); |
| 148 | |
| 149 | $.post( ajaxurl, { |
| 150 | action: 'rl-post-gallery-preview', |
| 151 | post_id: rlArgsGallery.post_id, |
| 152 | gallery_id: gallery_id, |
| 153 | nonce: rlArgsGallery.nonce |
| 154 | } ).done( function( response ) { |
| 155 | try { |
| 156 | if ( response.success ) { |
| 157 | // store gallery data |
| 158 | _this.galleries[gallery_id] = response.data; |
| 159 | |
| 160 | // update gallery data |
| 161 | _this.updateGalleryPreview( _this.galleries[gallery_id], true ); |
| 162 | } else { |
| 163 | //@TODO |
| 164 | } |
| 165 | } catch( e ) { |
| 166 | //@TODO |
| 167 | } |
| 168 | } ).always( function() { |
| 169 | // hide spinner |
| 170 | spinner.fadeOut( 'fast' ); |
| 171 | |
| 172 | // turn on info |
| 173 | info.removeClass( 'rl-loading-content' ); |
| 174 | } ); |
| 175 | } |
| 176 | } |
| 177 | }, |
| 178 | selectGallery: function( event ) { |
| 179 | event.preventDefault(); |
| 180 | |
| 181 | if ( $( this ).attr( 'disabled' ) ) |
| 182 | return; |
| 183 | |
| 184 | this.modal.hide(); |
| 185 | }, |
| 186 | insertGallery: function( event ) { |
| 187 | event.preventDefault(); |
| 188 | |
| 189 | if ( $( this ).attr( 'disabled' ) ) |
| 190 | return; |
| 191 | |
| 192 | var shortcode = '[rl_gallery id="' + this.lastGalleryID + '"]'; |
| 193 | editor = tinyMCE.get( 'content' ); |
| 194 | |
| 195 | if ( editor ) |
| 196 | editor.execCommand( 'mceInsertContent', false, shortcode ); |
| 197 | else |
| 198 | wp.media.editor.insert( shortcode ); |
| 199 | |
| 200 | this.modal.hide(); |
| 201 | }, |
| 202 | getGalleries: function( search, galleryID ) { |
| 203 | var modal = this.modal, |
| 204 | spinner = $( '.rl-gallery-reload-spinner' ), |
| 205 | galleries = modal.find( '.rl-galleries-list' ), |
| 206 | _this = this; |
| 207 | |
| 208 | // clear galleries |
| 209 | galleries.empty(); |
| 210 | |
| 211 | // hide gallery info |
| 212 | modal.find( '.media-selection' ).addClass( 'empty' ); |
| 213 | |
| 214 | // clear images |
| 215 | modal.find( '.rl-attachments-list' ).empty(); |
| 216 | |
| 217 | // display spinner |
| 218 | spinner.fadeIn( 'fast' ); |
| 219 | |
| 220 | // get galleries |
| 221 | $.post( ajaxurl, { |
| 222 | action: 'rl-post-get-galleries', |
| 223 | post_id: rlArgsGallery.post_id, |
| 224 | search: search, |
| 225 | nonce: rlArgsGallery.nonce, |
| 226 | category: _this.resetFilters ? 0 : modal.find( '#rl-media-attachment-categories' ).val() |
| 227 | } ).done( function( response ) { |
| 228 | try { |
| 229 | if ( response.success ) { |
| 230 | if ( response.data !== '' ) { |
| 231 | modal.find( '.rl-no-galleries' ).hide(); |
| 232 | modal.find( '.rl-galleries-list' ).empty().append( response.data ); |
| 233 | |
| 234 | // select gallery |
| 235 | if ( galleryID !== 0 ) |
| 236 | galleries.find( 'li[data-id="' + galleryID + '"] .js--select-attachment' ).trigger( 'click' ); |
| 237 | } else |
| 238 | modal.find( '.rl-no-galleries' ).show(); |
| 239 | } else { |
| 240 | // |
| 241 | } |
| 242 | } catch( e ) { |
| 243 | // |
| 244 | } |
| 245 | } ).always( function() { |
| 246 | // hide spinner |
| 247 | spinner.fadeOut( 'fast' ); |
| 248 | } ); |
| 249 | }, |
| 250 | updateGalleryPreview: function( gallery, animate ) { |
| 251 | // update gallery attachments |
| 252 | this.modal.find( '.rl-attachments-list' ).append( gallery.attachments ).fadeOut( 0 ).delay( animate? 'fast' : 0 ).fadeIn( 0 ); |
| 253 | |
| 254 | // update number of images in gallery |
| 255 | this.modal.find( '.rl-gallery-count' ).text( gallery.count ); |
| 256 | |
| 257 | // update gallery edit link |
| 258 | if ( gallery.edit_url !== '' ) |
| 259 | this.modal.find( '.rl-edit-gallery-link' ).removeClass( 'hidden' ).attr( 'href', gallery.edit_url ); |
| 260 | else |
| 261 | this.modal.find( '.rl-edit-gallery-link' ).addClass( 'hidden' ).attr( 'href', '' ); |
| 262 | }, |
| 263 | reloadGalleries: function( event ) { |
| 264 | event.preventDefault(); |
| 265 | |
| 266 | // hide "no galleries" box |
| 267 | this.modal.find( '.rl-no-galleries' ).hide(); |
| 268 | |
| 269 | // reset galleries |
| 270 | this.galleries = {}; |
| 271 | |
| 272 | // reset filters |
| 273 | this.resetFilters = false; |
| 274 | |
| 275 | // load galleries |
| 276 | this.getGalleries( $( '#rl-media-search-input' ).val(), 0 ); |
| 277 | }, |
| 278 | bindEvents: function() { |
| 279 | var _this = this; |
| 280 | |
| 281 | // add gallery |
| 282 | $( document ).on( 'click', '#rl-insert-modal-gallery-button', function( e ) { _this.open( 0 ); } ); |
| 283 | |
| 284 | // ready event |
| 285 | $( function() { |
| 286 | _this.modal = $( '#rl-modal-gallery' ); |
| 287 | |
| 288 | // search galleries |
| 289 | _this.modal.on( 'keyup', '#rl-media-search-input', function() { |
| 290 | _this.searchGalleries( $( this ).val() ); |
| 291 | } ); |
| 292 | |
| 293 | // reload galleries |
| 294 | _this.modal.on( 'click', '.rl-reload-galleries', function( e ) { |
| 295 | _this.reloadGalleries( e ); |
| 296 | } ); |
| 297 | |
| 298 | // change category |
| 299 | _this.modal.on( 'change', '#rl-media-attachment-categories', function( e ) { |
| 300 | _this.reloadGalleries( e ); |
| 301 | } ); |
| 302 | |
| 303 | // close gallery |
| 304 | _this.modal.on( 'click', '.media-modal-close, .media-modal-backdrop, .rl-media-button-cancel-gallery', function( e ) { |
| 305 | _this.close( e ); |
| 306 | } ); |
| 307 | |
| 308 | // click gallery |
| 309 | _this.modal.on( 'click', '.rl-galleries-list li .js--select-attachment, .rl-galleries-list li button', function( e ) { |
| 310 | _this.handleClickGallery( e ); |
| 311 | } ); |
| 312 | |
| 313 | // insert gallery (classic editor) |
| 314 | _this.modal.on( 'click', '.rl-media-button-insert-gallery', function( e ) { |
| 315 | _this.insertGallery( e ); |
| 316 | } ); |
| 317 | |
| 318 | // select gallery (block editor) |
| 319 | _this.modal.on( 'click', '.rl-media-button-select-gallery', function( e ) { |
| 320 | _this.selectGallery( e ); |
| 321 | } ); |
| 322 | |
| 323 | // resize window |
| 324 | $( window ).on( 'resize', function() { |
| 325 | _this.setColumns(); |
| 326 | } ); |
| 327 | } ); |
| 328 | } |
| 329 | } |
| 330 | |
| 331 | ResponsiveLightboxGallery.init(); |
| 332 | |
| 333 | } )( jQuery ); |