| 1 |
import StockpackImages from './stockpack-images'; |
| 2 |
import StockpackToolbar from './stockpack-toolbar'; |
| 3 |
import StockpackSearch from './filters/stockpack-search'; |
| 4 |
import StockpackGenerate, { AI_PROVIDER } from './stockpack-generate'; |
| 5 |
import StockpackDetails from './stockpack-details'; |
| 6 |
import StockpackSidebar from './stockpack-sidebar'; |
| 7 |
import StockpackEmpty from './stockpack-empty'; |
| 8 |
// import StockpackDialog from './stockpack-dialog'; |
| 9 |
// import StockpackGenderFilter from './filters/stockpack-gender'; |
| 10 |
import StockpackDownloader from './stockpack-downloader'; |
| 11 |
// import StockpackAdvancedLink from './filters/stockpack-advanced-trigger'; |
| 12 |
// import StockpackAdvancedFilters from './filters/stockpack-advanced-filters'; |
| 13 |
// import StockpackAdvanced from './filters/stockpack-advanced'; |
| 14 |
// import StockpackFilterButton from './filters/stockpack-filter-button'; |
| 15 |
// import StockpackOrientationFilter from './filters/stockpack-orientations'; |
| 16 |
// import StockpackImageTypeFilter from './filters/stockpack-image-type'; |
| 17 |
// import StockpackCategoryFilters from './filters/stockpack-category'; |
| 18 |
// import StockpackSafeFilters from './filters/stockpack-safe'; |
| 19 |
// import StockpackColorFilter from './filters/stockpack-color'; |
| 20 |
// import StockpackFilterClose from './filters/stockpack-filter-close'; |
| 21 |
import StockpackAttribution from './stockpack-attribution'; |
| 22 |
import StockpackNoSearch from './stockpack-no-search'; |
| 23 |
import StockpackProviderFilters from "./filters/stockpack-provider"; |
| 24 |
|
| 25 |
const StockpackBrowser = wp.media.View.extend( /** @lends wp.media.view.AttachmentsBrowser.prototype */{ |
| 26 |
tagName: 'div', |
| 27 |
className: 'stockpack-browser attachments-browser', |
| 28 |
attribution: null, |
| 29 |
|
| 30 |
initialize() { |
| 31 |
_.defaults( this.options, { |
| 32 |
search: true, |
| 33 |
provider: false, |
| 34 |
} ); |
| 35 |
|
| 36 |
this.createToolbar(); |
| 37 |
this.createSidebar(); |
| 38 |
this.createStatus(); |
| 39 |
this.createNoSearch(); |
| 40 |
|
| 41 |
// Create the list of images. |
| 42 |
this.createImages(); |
| 43 |
|
| 44 |
this.updateContent(); |
| 45 |
|
| 46 |
this.collection.on( 'add remove reset', this.updateContent, this ); |
| 47 |
}, |
| 48 |
|
| 49 |
/** |
| 50 |
* @return {StockpackBrowser} Returns itself to allow chaining |
| 51 |
*/ |
| 52 |
dispose() { |
| 53 |
this.options.selection.off( null, null, this ); |
| 54 |
wp.media.View.prototype.dispose.apply( this, arguments ); |
| 55 |
return this; |
| 56 |
}, |
| 57 |
|
| 58 |
createImages() { |
| 59 |
this.images = new StockpackImages( { |
| 60 |
controller: this.controller, |
| 61 |
collection: this.collection, |
| 62 |
selection: this.options.selection, |
| 63 |
scrollElement: this.options.scrollElement, |
| 64 |
idealColumnWidth: this.options.idealColumnWidth, |
| 65 |
provider: this.options.provider, |
| 66 |
} ); |
| 67 |
|
| 68 |
this.views.add( this.images ); |
| 69 |
this.images.hide(); |
| 70 |
}, |
| 71 |
|
| 72 |
placeAttribution() { |
| 73 |
const attribution = this.toolbar ? this.toolbar.get( 'attribution' ) : null; |
| 74 |
|
| 75 |
if ( ! attribution || ! this.sidebar ) { |
| 76 |
return; |
| 77 |
} |
| 78 |
|
| 79 |
const generating = AI_PROVIDER === this.collection.props.get( 'provider' ); |
| 80 |
|
| 81 |
attribution.$el.addClass( 'in-sidebar' ); |
| 82 |
this.sidebar.$el.prepend( attribution.$el ); |
| 83 |
|
| 84 |
if ( generating ) { |
| 85 |
attribution.updateProvider( 'magnific' ); |
| 86 |
} |
| 87 |
}, |
| 88 |
|
| 89 |
createSidebar() { |
| 90 |
const options = this.options, |
| 91 |
selection = options.selection, |
| 92 |
sidebar = this.sidebar = new StockpackSidebar( { |
| 93 |
controller: this.controller, |
| 94 |
} ); |
| 95 |
|
| 96 |
this.views.add( sidebar ); |
| 97 |
|
| 98 |
selection.on( 'selection:single', this.createSingle, this ); |
| 99 |
selection.on( 'selection:unsingle', this.disposeSingle, this ); |
| 100 |
|
| 101 |
if ( selection.single() ) { |
| 102 |
this.createSingle(); |
| 103 |
} |
| 104 |
}, |
| 105 |
|
| 106 |
createSingle() { |
| 107 |
const sidebar = this.sidebar, |
| 108 |
single = this.options.selection.single(); |
| 109 |
|
| 110 |
sidebar.set( 'details', new StockpackDetails( { |
| 111 |
controller: this.controller, |
| 112 |
model: single, |
| 113 |
priority: 80, |
| 114 |
} ) ); |
| 115 |
|
| 116 |
sidebar.set( 'downloader', new StockpackDownloader( { |
| 117 |
controller: this.controller, |
| 118 |
model: single, |
| 119 |
state: this.model, |
| 120 |
search: this.collection.props.get( 'search' ), |
| 121 |
priority: 90, |
| 122 |
} ) ); |
| 123 |
|
| 124 |
// Show the sidebar on mobile |
| 125 |
if ( this.model.id === 'insert' ) { |
| 126 |
sidebar.$el.addClass( 'visible' ); |
| 127 |
} |
| 128 |
}, |
| 129 |
|
| 130 |
disposeSingle() { |
| 131 |
const sidebar = this.sidebar; |
| 132 |
sidebar.unset( 'details' ); |
| 133 |
sidebar.unset( 'downloader' ); |
| 134 |
// Hide the sidebar on mobile |
| 135 |
sidebar.$el.removeClass( 'visible' ); |
| 136 |
}, |
| 137 |
|
| 138 |
updateContent() { |
| 139 |
this.toolbar.get( 'attribution' ).show(); |
| 140 |
if ( ! this.collection.length ) { |
| 141 |
this.startLoading(); |
| 142 |
this.clearErrors(); |
| 143 |
this.dfd = this.collection.more().done( () => { |
| 144 |
if ( ! this.collection.length ) { |
| 145 |
this.displayEmpty(); |
| 146 |
} else { |
| 147 |
this.displayImages(); |
| 148 |
} |
| 149 |
this.stopLoading(); |
| 150 |
} ).fail( |
| 151 |
( message ) => { |
| 152 |
this.displayError( message ); |
| 153 |
|
| 154 |
this.stopLoading(); |
| 155 |
}, |
| 156 |
); |
| 157 |
} else { |
| 158 |
this.displayImages(); |
| 159 |
this.stopLoading(); |
| 160 |
} |
| 161 |
}, |
| 162 |
|
| 163 |
createToolbar() { |
| 164 |
const toolbarOptions = { |
| 165 |
controller: this.controller, |
| 166 |
}; |
| 167 |
|
| 168 |
if ( this.controller.isModeActive( 'grid' ) ) { |
| 169 |
toolbarOptions.className = 'media-toolbar wp-filter'; |
| 170 |
} |
| 171 |
|
| 172 |
/** |
| 173 |
* @member {StockpackToolbar} |
| 174 |
*/ |
| 175 |
this.toolbar = new StockpackToolbar( toolbarOptions ); |
| 176 |
|
| 177 |
this.views.add( this.toolbar ); |
| 178 |
|
| 179 |
// this.advancedFilters = new StockpackAdvanced({ |
| 180 |
// controller: this.controller, |
| 181 |
// priority: 50 |
| 182 |
// }); |
| 183 |
// this.toolbar.set('advanced-filters', this.advancedFilters); |
| 184 |
|
| 185 |
this.toolbar.set( 'spinner', new wp.media.view.Spinner( { |
| 186 |
priority: -60, |
| 187 |
} ) ); |
| 188 |
this.addToolbarFilters(); |
| 189 |
}, |
| 190 |
|
| 191 |
addToolbarFilters() { |
| 192 |
// attribution |
| 193 |
|
| 194 |
this.toolbar.set( 'attribution', new StockpackAttribution( { |
| 195 |
controller: this.controller, |
| 196 |
priority: -70, |
| 197 |
} ).render() ); |
| 198 |
|
| 199 |
this.collection.props.on( 'change:provider', this.placeAttribution, this ); |
| 200 |
_.defer( () => this.placeAttribution() ); |
| 201 |
|
| 202 |
// Search is an input, screen reader text needs to be rendered before |
| 203 |
this.toolbar.set( 'searchLabel', new wp.media.view.Label( { |
| 204 |
value: wp.media.view.l10n.stockpack.search, |
| 205 |
className: 'screen-reader-text', |
| 206 |
attributes: { |
| 207 |
for: 'media-search-input', |
| 208 |
}, |
| 209 |
priority: 60, |
| 210 |
} ).render() ); |
| 211 |
this.toolbar.set( 'search', new StockpackSearch( { |
| 212 |
controller: this.controller, |
| 213 |
model: this.collection.props, |
| 214 |
priority: 60, |
| 215 |
} ).render() ); |
| 216 |
this.toolbar.set( 'generate', new StockpackGenerate( { |
| 217 |
controller: this.controller, |
| 218 |
model: this.collection.props, |
| 219 |
collection: this.collection, |
| 220 |
selection: this.options.selection, |
| 221 |
priority: 65, |
| 222 |
} ).render() ); |
| 223 |
this.createProviderFilter(); |
| 224 |
|
| 225 |
// this.advancedFilters.set('advanced-link', new StockpackAdvancedLink({ |
| 226 |
// controller: this.controller, |
| 227 |
// model: this.collection.props, |
| 228 |
// text: wp.media.view.l10n.stockpack.advanced, |
| 229 |
// priority: -10 |
| 230 |
// }).render()); |
| 231 |
|
| 232 |
// this.filtersContainer = new StockpackAdvancedFilters({ |
| 233 |
// controller: this.controller, |
| 234 |
// model: this.collection.props, |
| 235 |
// priority: 10 |
| 236 |
// }); |
| 237 |
// this.advancedFilters.set('filters-container', this.filtersContainer).render(); |
| 238 |
// |
| 239 |
// var ImageTypeFilter = new StockpackImageTypeFilter({ |
| 240 |
// controller: this.controller, |
| 241 |
// model: this.collection.props, |
| 242 |
// priority: -100 |
| 243 |
// }); |
| 244 |
// this.filtersContainer.set('image-type-filter', ImageTypeFilter.render()); |
| 245 |
// |
| 246 |
// var CategoryFilter = new StockpackCategoryFilters({ |
| 247 |
// controller: this.controller, |
| 248 |
// model: this.collection.props, |
| 249 |
// priority: -95 |
| 250 |
// }); |
| 251 |
// this.filtersContainer.set('category-filter', CategoryFilter.render()); |
| 252 |
// |
| 253 |
// var GenderFilters = new StockpackGenderFilter({ |
| 254 |
// controller: this.controller, |
| 255 |
// model: this.collection.props, |
| 256 |
// priority: -90 |
| 257 |
// }); |
| 258 |
// this.filtersContainer.set('gender-filter', GenderFilters.render()); |
| 259 |
// |
| 260 |
// var SafeFilter = new StockpackSafeFilters({ |
| 261 |
// controller: this.controller, |
| 262 |
// model: this.collection.props, |
| 263 |
// priority: -85 |
| 264 |
// }); |
| 265 |
// this.filtersContainer.set('safe-filter', SafeFilter.render()); |
| 266 |
// |
| 267 |
// var OrientationFilter = new StockpackOrientationFilter({ |
| 268 |
// controller: this.controller, |
| 269 |
// model: this.collection.props, |
| 270 |
// priority: -80 |
| 271 |
// }); |
| 272 |
// this.filtersContainer.set('orientation-filter', OrientationFilter.render()); |
| 273 |
// |
| 274 |
// var ColorFilter = new StockpackColorFilter({ |
| 275 |
// controller: this.controller, |
| 276 |
// model: this.collection.props, |
| 277 |
// priority: -70 |
| 278 |
// }); |
| 279 |
// this.filtersContainer.set('color-filter', ColorFilter.render()); |
| 280 |
// |
| 281 |
// |
| 282 |
// this.filtersContainer.set('update-filter', new StockpackFilterButton({ |
| 283 |
// controller: this.controller, |
| 284 |
// model: this.collection.props, |
| 285 |
// priority: 20, |
| 286 |
// text: wp.media.view.l10n.stockpack.search, |
| 287 |
// })); |
| 288 |
// |
| 289 |
// this.filtersContainer.set('close-advanced-filter', new StockpackFilterClose({ |
| 290 |
// controller: this.controller, |
| 291 |
// model: this.collection.props, |
| 292 |
// priority: 10, |
| 293 |
// text: ' ', |
| 294 |
// })); |
| 295 |
}, |
| 296 |
|
| 297 |
createProviderFilter() { |
| 298 |
this.toolbar.set( 'provider', new StockpackProviderFilters( { |
| 299 |
controller: this.controller, |
| 300 |
model: this.collection.props, |
| 301 |
priority: 70, |
| 302 |
} ).render() ); |
| 303 |
|
| 304 |
if ( this.toolbar.get( 'provider' ).hidden ) { |
| 305 |
this.toolbar.$el.addClass( 'provider-hidden' ); |
| 306 |
} |
| 307 |
}, |
| 308 |
|
| 309 |
createStatus() { |
| 310 |
const statusOptions = { |
| 311 |
controller: this.controller, |
| 312 |
message: wp.media.view.l10n.stockpack.noMedia, |
| 313 |
retry: wp.media.view.l10n.stockpack.retry, |
| 314 |
browser: this, |
| 315 |
}; |
| 316 |
|
| 317 |
if ( this.controller.isModeActive( 'grid' ) ) { |
| 318 |
statusOptions.className = 'media-toolbar wp-filter'; |
| 319 |
} |
| 320 |
|
| 321 |
/** |
| 322 |
* @member {wp.media.view.Toolbar} |
| 323 |
*/ |
| 324 |
this.status = new StockpackEmpty( statusOptions ); |
| 325 |
|
| 326 |
this.status.hide(); |
| 327 |
|
| 328 |
this.views.add( this.status ); |
| 329 |
}, |
| 330 |
|
| 331 |
createNoSearch() { |
| 332 |
const statusOptions = { |
| 333 |
controller: this.controller, |
| 334 |
message: wp.media.view.l10n.stockpack.noSearch, |
| 335 |
inspiration: wp.media.view.l10n.stockpack.inspiration, |
| 336 |
|
| 337 |
}; |
| 338 |
|
| 339 |
/** |
| 340 |
* @member {wp.media.view.Toolbar} |
| 341 |
*/ |
| 342 |
this.noSearch = new StockpackNoSearch( statusOptions ); |
| 343 |
|
| 344 |
this.noSearch.hide(); |
| 345 |
|
| 346 |
this.views.add( this.noSearch ); |
| 347 |
}, |
| 348 |
|
| 349 |
displayEmpty( hasError ) { |
| 350 |
if ( hasError ) { |
| 351 |
this.noSearch.hide(); |
| 352 |
this.images.hide(); |
| 353 |
this.status.show(); |
| 354 |
} else { |
| 355 |
this.clearErrors(); |
| 356 |
this.images.hide(); |
| 357 |
if ( this.collection.props.get( 'search' ) ) { |
| 358 |
this.noSearch.hide(); |
| 359 |
this.status.show(); |
| 360 |
} else { |
| 361 |
this.noSearch.show(); |
| 362 |
this.toolbar.get( 'attribution' ).hide(); |
| 363 |
this.status.hide(); |
| 364 |
} |
| 365 |
} |
| 366 |
}, |
| 367 |
|
| 368 |
displayImages() { |
| 369 |
this.clearErrors(); |
| 370 |
this.status.hide(); |
| 371 |
this.noSearch.hide(); |
| 372 |
this.images.show(); |
| 373 |
}, |
| 374 |
|
| 375 |
displayError( error ) { |
| 376 |
this.displayEmpty( true ); |
| 377 |
this.controller.trigger( 'generation:failed', error ); |
| 378 |
if(wp.media.view.l10n.stockpack.error[error.code]){ |
| 379 |
this.status.model.set( 'message', wp.media.view.l10n.stockpack.error[error.code] ); |
| 380 |
}else{ |
| 381 |
this.status.model.set( 'message', wp.media.view.l10n.stockpack.error.default ); |
| 382 |
} |
| 383 |
this.status.model.set( 'error', error.message ); |
| 384 |
if ( error.link ) { |
| 385 |
this.status.model.set( 'link', { |
| 386 |
url: error.link, |
| 387 |
text: error.link_text || error.link, |
| 388 |
} ); |
| 389 |
} else if ( error.code === 2 ) { |
| 390 |
this.status.model.set( 'link', { |
| 391 |
url: wp.media.view.settings.stockpack.settings_url, |
| 392 |
text: wp.media.view.l10n.stockpack.link, |
| 393 |
} ); |
| 394 |
} else { |
| 395 |
this.status.model.set( 'link', false ); |
| 396 |
} |
| 397 |
}, |
| 398 |
|
| 399 |
clearErrors() { |
| 400 |
this.status.model.set( 'message', wp.media.view.l10n.stockpack.noMedia ); |
| 401 |
this.status.model.set( 'error', '' ); |
| 402 |
}, |
| 403 |
|
| 404 |
stopLoading() { |
| 405 |
this.toolbar.get( 'spinner' ).hide(); |
| 406 |
}, |
| 407 |
startLoading() { |
| 408 |
this.toolbar.get( 'spinner' ).show(); |
| 409 |
}, |
| 410 |
|
| 411 |
} ); |
| 412 |
|
| 413 |
export default StockpackBrowser; |
| 414 |
|
