Booking Calendar / 11.4.3

Booking Calendar v11.4.3

booking / includes / _media_upload / _src / wpbc_ui__media_upload.js

wpbc_ui__media_upload.js in Booking Calendar 11.4.3, at includes/_media_upload/_src/wpbc_ui__media_upload.js

246 lines 9.7 KB

Raw Download Zip

1	/**
2	* @file: ../includes/_media_upload/_src/wpbc_ui__media_upload.js
3	*
4	* == How to Use ? ==
5	*
6	* 1. Load JS:
7	*
8	* function wpbc_register_js__media_upload( $hook ) {
9	* if ( wpbc_can_i_load_on_this_page__media_upload() ) {
10	* wpbc_load_js__required_for_media_upload();
11	* }
12	* }
13	* add_action( 'admin_enqueue_scripts', 'wpbc_register_js__media_upload' );
14	*
15	*
16	* 2. Inside the page use html element with this class: "wpbc_media_upload_button"
17	*
18	* <a href="javascript:void(0)"
19	* class="wpbc_media_upload_button"
20	* data-modal_title="<?php echo esc_attr( __( 'Select Image', 'booking' ) ); ?>"
21	* data-btn_title="<?php echo esc_attr( __( 'Select Image', 'booking' ) ); ?>"
22	* data-url_field="MY_URL_FIELD"
23	* ><i class="menu_icon icon-1x wpbc_icn_tune"></i></a>
24	*
25	* 3. 'data-url_field' attribute define TEXT field, where will be inserted URL of selected image
26	* 'data-modal_title' - Header title in popup
27	* 'data-btn_title' - Button title in popup
28	*
29	* 4. If you need to update URL somewhere else at the page, use this j JavaScript hook:
30	*
31	* <script type="text/javascript">
32	* jQuery(document).ready(function(){
33	* jQuery( '#MY_URL_FIELD').on( 'wpbc_media_upload_url_set', function(){
34	* jQuery( '#MY_URL_FIELD').parents( '.wpbc_extra__excerpt_img' ).find( '.ui_group__thumbnail
35	* .wpbc_media_upload_button' ).html( '<img src="' + jQuery( '#MY_URL_FIELD').val() + '" class="search_thumbnail_img"
36	* />' );
37	* });
38	* });
39	* </script>
40	*
41	*/
42
43	var wpbc_media_file_frame;
44
45	jQuery( function ( $ ) {
46
47	// Delegated binding (works for dynamically rendered BFB controls).
48	$( document ).on( 'click', '.wpbc_media_upload_button', function ( event ) {
49	wpbc_media_upload_button_clicked( this, event );
50	} );
51	} );
52
53	function wpbc_media_upload_button_clicked( _this, event ){
54
55	var j_btn = jQuery( _this );
56	var is_multi_selection = false;
57	// var insert_field_separator = ',';
58
59	// Stop the anchor's default behavior
60	event.preventDefault();
61
62	// If frame exist close it
63	if ( wpbc_media_file_frame ) {
64	wpbc_media_file_frame.close();
65	}
66
67	// -----------------------------------------------------------------------------------------------------
68	// Create Media Frame
69	// -----------------------------------------------------------------------------------------------------
70	wpbc_media_file_frame = wp.media.frames.wpbc_media_upload_file_frame = wp.media( { // Check here ../wp-includes/js/media-views.js
71	// Set the title of the modal.
72	title: j_btn.data( 'modal_title' ),
73	library: {
74	// type: ''
75	// type: [ 'video', 'image' ]
76	type: [ 'image' ]
77	},
78	button: {
79	text: j_btn.data( 'btn_title' ),
80	},
81	multiple: is_multi_selection,
82	// states: [
83	// new wp.media.controller.Library( {
84	// /*
85	// Add to this libaray custom post parameter: $_POST['query'][ $media_uploader_params['key'] ] = $media_uploader_params['value']
86	// We are checking in functon wpbc_media_filter_posts_where media files that only relative to this medi Frame opening
87	// And filtering posts (in WHERE) relative custom path to our files.
88	// echo '{' . $media_uploader_params['key'] . ": '" . $media_uploader_params['value'] . "' }";
89	// */
90	// library: wp.media.query(),
91	// multiple: is_multi_selection,
92	// title: j_btn.data( 'modal_title' ),
93	// priority: 15,
94	// filterable: 'uploaded',
95	// type: ['image']
96	// // idealColumnWidth: 125
97	// } )
98	// ]
99	} );
100
101	/*
102	///////////////////////////////////////////////////////////////////////
103	// Set custom parameters for uploader -> $_POST['wpbc_media_type'] - checking in "upload_dir", when filter_upload_dir
104	///////////////////////////////////////////////////////////////////////
105	wpbc_media_file_frame.on( 'ready', function () {
106	wpbc_media_file_frame.uploader.options.uploader.params = {
107	type: 'wpbc_media_download',
108	<?php
109	echo $media_uploader_params['key'] . ": '" . $media_uploader_params['value'] . "'";
110	?>
111	};
112	} );
113	*/
114
115	///////////////////////////////////////////////////////////////////////
116	// When File have selected, do this
117	///////////////////////////////////////////////////////////////////////
118	wpbc_media_file_frame.on( 'select', function () {
119
120	if ( ! is_multi_selection ) { // Single file
121
122	var attachment = wpbc_media_file_frame.state().get( 'selection' ).first().toJSON();
123
124	// Put URL of file to text field.
125	var $f = jQuery( '#' + j_btn.data( 'url_field' ) );
126	$f.val( attachment.url );
127	$f.trigger( 'input' );
128	$f.trigger( 'change' );
129	$f.trigger( 'wpbc_media_upload_url_set' );
130
131	//j_btn.parents( '.wpbc_extra__excerpt_img' ).find( '.ui_group__thumbnail .wpbc_media_upload_button' ).html( '<img src="' + attachment.url + '" class="search_thumbnail_img" />' );
132
133	} else { // Multiple files.
134
135	var file_paths = '';
136	// var csv_data_line = '';
137	wpbc_media_file_frame.state().get( 'selection' ).map( function ( attachment ){
138
139	/*
140	// Request new data
141	attachment.fetch().then(function (data) {
142	console.log(data);
143	// preloading finished after this you can use your attachment normally
144	// wp.media.attachment( attachment.id ).get('url');
145	});
146	*/
147
148	attachment = attachment.toJSON();
149
150	/*
151	if ( attachment.url ) {
152	// Insert info from selected files
153	csv_data_line = attachment.id + insert_field_separator + attachment.title + insert_field_separator + attachment.wpbc_media_version_num + insert_field_separator + attachment.description + insert_field_separator + attachment.url
154	file_paths = file_paths ? file_paths + "\n" + csv_data_line : csv_data_line;
155	}
156	*/
157	file_paths = file_paths ? file_paths + "\n" + attachment.url : attachment.url;
158	});
159
160	var $f = jQuery( '#' + j_btn.data( 'url_field' ) );
161	$f.val( file_paths );
162	$f.trigger( 'input' );
163	$f.trigger( 'change' );
164	$f.trigger( 'wpbc_media_upload_url_set' );
165	}
166
167	} );
168
169	/*
170	// Fires when a state activates.
171	wpbc_media_file_frame.on( 'activate', function() { alert('activate'); } );
172
173	// Fires after the frame markup has been built, but not appended to the DOM.
174	// @see wp.media.view.Modal.attach()
175	wpbc_media_file_frame.on( 'ready', function() { alert('ready'); } );
176
177	// Fires when the frame's $el is appended to its DOM container.
178	// @see media.view.Modal.attach()
179	wpbc_media_file_frame.on( 'attach', function() { alert('attach'); } );
180
181	// Fires when the modal opens (becomes visible).
182	// @see media.view.Modal.open()
183	wpbc_media_file_frame.on( 'open', function() { alert('open'); } );
184
185	// Fires when the modal closes via the escape key.
186	// @see media.view.Modal.close()
187	wpbc_media_file_frame.on( 'escape', function() { alert('escape'); } );
188
189	// Fires when the modal closes.
190	// @see media.view.Modal.close()
191	wpbc_media_file_frame.on( 'close', function() { alert('close'); } );
192
193	// Fires when a user has selected attachment(s) and clicked the select button.
194	// @see media.view.MediaFrame.Post.mainInsertToolbar()
195	wpbc_media_file_frame.on( 'select', function() {
196	var selectionCollection = wpbc_media_file_frame.state().get('select');
197	} );
198
199	// Fires when a mode is deactivated on a region { 'menu' \| title \| content \| toolbar \| router }
200	wpbc_media_file_frame.on( 'content:deactivate', function() { alert('{region}:deactivate'); } );
201	// and a more specific event including the mode.
202	wpbc_media_file_frame.on( 'content:deactivate:{mode}', function() { alert('{region}:deactivate{mode}'); } );
203
204	// Fires when a region is ready for its view to be created.
205	wpbc_media_file_frame.on( 'content:create', function() { alert('{region}:create'); } );
206	// and a more specific event including the mode.
207	wpbc_media_file_frame.on( 'content:create:{mode}', function() { alert('{region}:create{mode}'); } );
208
209	// Fires when a region is ready for its view to be rendered.
210	wpbc_media_file_frame.on( 'content:render', function() { alert('{region}:render'); } );
211	// and a more specific event including the mode.
212	wpbc_media_file_frame.on( 'content:render:{mode}', function() { alert('{region}:render{mode}'); } );
213
214	// Fires when a new mode is activated (after it has been rendered) on a region.
215	wpbc_media_file_frame.on( 'content:activate', function() { alert('{region}:activate'); } );
216	// and a more specific event including the mode.
217	wpbc_media_file_frame.on( 'content:activate:{mode}', function() { alert('{region}:activate{mode}'); } );
218
219	// Get an object representing the current state.
220	//wpbc_media_file_frame.state();
221
222	// Get an object representing the previous state.
223	//wpbc_media_file_frame.lastState();
224	*/
225	/*
226	// Debuge all events from media Frame!
227	wpbc_media_file_frame.on( "all", function ( eventName ){
228	console.log( 'Frame Event: ' + eventName );
229	} );
230
231	// Debuge all events from media Frame!
232	wp.media.model.Attachment.get( "collection" ).collection.on( "all", function ( eventName ){
233	console.log( '[Collection] Event: ' + eventName );
234	} );
235	wp.media.model.Attachment.get( "models" ).collection.on( "all", function ( eventName ){
236	console.log( '[models] Event: ' + eventName );
237	} );
238	wp.media.model.Attachment.get( "views" ).collection.on( "all", function ( eventName ){
239	console.log( '[views] Event: ' + eventName );
240	} );
241	*/
242
243	// Open the modal.
244	wpbc_media_file_frame.open();
245
246	}