Booking Calendar / 10.11.2

Booking Calendar v10.11.2

booking / includes / _media_upload / _src / wpbc_ui__media_upload.js

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

231 lines 9.3 KB

Raw Download Zip

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