StockPack – Stock photos and AI images from Unsplash, Adobe Stock, Freepik and more / 2.5.7

StockPack – Stock photos and AI images from Unsplash, Adobe Stock, Freepik and more v2.5.7

stockpack / assets / js / stockpack.js

stockpack.js in StockPack – Stock photos and AI images from Unsplash, Adobe Stock, Freepik and more 2.5.7, at assets/js/stockpack.js

160 lines 4.2 KB

Raw Download Zip

1	import StockpackBrowser from './stockpack-browser';
2	import StockpackImages from './models/stockpack-images-model';
3	import StockpackSelection from './models/stockpack-selection-model';
4	import './stockpack-helpers';
5
6	const oldMediaFrame = wp.media.view.MediaFrame.Post;
7	const oldMediaFrameSelect = wp.media.view.MediaFrame.Select;
8	window.StockpackQueue = new StockpackImages( [], { query: false } );
9	window.StockpackQueueErrors = new Backbone.Collection();
10
11	// Extending the current media library frame to add a new tab
12	wp.media.view.MediaFrame.Post = oldMediaFrame.extend( {
13
14	/**
15	* overwrite router to
16	*
17	* @param {wp.media.view.Router} routerView
18	*/
19	browseRouter( routerView ) {
20	oldMediaFrame.prototype.browseRouter.apply( this, arguments );
21	routerView.set( {
22	stockpack: {
23	text: wp.media.view.l10n.stockpack.title,
24	priority: 60,
25	},
26	} );
27	},
28
29	/**
30	* Bind region mode event callbacks.
31	*
32	* @see media.controller.Region.render
33	*/
34	bindHandlers() {
35	oldMediaFrame.prototype.bindHandlers.apply( this, arguments );
36	this.on( 'content:create:stockpack', this.stockpackContent, this );
37	},
38
39	/**
40	* Render callback for the content region in the `browse` mode.
41	*
42	* @param {wp.media.controller.Region} contentRegion
43	*/
44	stockpackContent( contentRegion ) {
45	const state = this.state();
46	if ( ! state.get( 'stockpack-images' ) ) {
47	state.set( 'stockpack-images', window.getStockpackQuery() );
48	// Watch for downloaded images.
49	state.get( 'library' ).observe( window.StockpackQueue );
50	}
51
52	if ( ! state.get( 'stockpack-selection' ) ) {
53	let props;
54	props = state.get( 'stockpack-images' ).props.toJSON();
55	props = _.omit( props, 'orderby', 'query' );
56
57	state.set( 'stockpack-selection', new StockpackSelection( null, {
58	multiple: false,
59	props,
60	} ) );
61	}
62
63	this.$el.removeClass( 'hide-toolbar' );
64
65	// Browse our library of attachments.
66	contentRegion.view = new StockpackBrowser( {
67	collection: state.get( 'stockpack-images' ),
68	selection: state.get( 'stockpack-selection' ),
69	controller: this,
70	model: state,
71	idealColumnWidth: state.get( 'idealColumnWidth' ),
72	suggestedWidth: state.get( 'suggestedWidth' ),
73	suggestedHeight: state.get( 'suggestedHeight' ),
74	} );
75	},
76
77	getFrame( id ) {
78	return this.states.findWhere( { id } );
79	},
80
81	} );
82
83	// Order is important, post is based on the old select
84	wp.media.view.MediaFrame.Select = oldMediaFrameSelect.extend( {
85
86	/**
87	* overwrite router to
88	*
89	* @param {wp.media.view.Router} routerView
90	*/
91	browseRouter( routerView ) {
92	oldMediaFrameSelect.prototype.browseRouter.apply( this, arguments );
93	routerView.set( {
94	stockpack: {
95	text: wp.media.view.l10n.stockpack.title,
96	priority: 60,
97	},
98	} );
99	},
100
101	/**
102	* Bind region mode event callbacks.
103	*
104	* @see media.controller.Region.render
105	*/
106	bindHandlers() {
107	oldMediaFrameSelect.prototype.bindHandlers.apply( this, arguments );
108	this.on( 'content:create:stockpack', this.stockpackContent, this );
109	},
110
111	/**
112	* Render callback for the content region in the `browse` mode.
113	*
114	* @param {wp.media.controller.Region} contentRegion
115	*/
116	stockpackContent( contentRegion ) {
117	const state = this.state();
118	if ( ! state.get( 'stockpack-images' ) ) {
119	state.set( 'stockpack-images', window.getStockpackQuery() );
120	// Watch for downloaded images.
121	state.get( 'library' ).observe( window.StockpackQueue );
122	}
123
124	if ( ! state.get( 'stockpack-selection' ) ) {
125	let props;
126	props = state.get( 'stockpack-images' ).props.toJSON();
127	props = _.omit( props, 'orderby', 'query' );
128
129	state.set( 'stockpack-selection', new StockpackSelection( null, {
130	multiple: false,
131	props,
132	} ) );
133	}
134
135	if ( ! state.get( 'provider' ) ) {
136	state.set( 'provider', '' );
137	}
138
139	this.$el.removeClass( 'hide-toolbar' );
140
141	// Browse our library of attachments.
142	contentRegion.view = new StockpackBrowser( {
143	collection: state.get( 'stockpack-images' ),
144	selection: state.get( 'stockpack-selection' ),
145	controller: this,
146	model: state,
147	idealColumnWidth: state.get( 'idealColumnWidth' ),
148	suggestedWidth: state.get( 'suggestedWidth' ),
149	suggestedHeight: state.get( 'suggestedHeight' ),
150	provider: state.get( 'provider' ),
151	} );
152	},
153
154	getFrame( id ) {
155	return this.states.findWhere( { id } );
156	},
157
158	} );
159
160