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

StockPack – Stock photos and AI images from Unsplash, Adobe Stock, Freepik and more v3.7.2

stockpack / assets / js / stockpack.js

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

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