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

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

stockpack / assets / js / stockpack.js

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

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