← All changes | admin/assets/js/admin.js +142 -148 1.1.0 → 2.6.3 View file →

		@@ -5,10 +5,9 @@
5	5	* Display the media uploader.
6	6	*
7	7	* @since 1.0.0
8	8	*/
9		- function ayg_render_media_uploader( $elem ) {
10		-
	9	+ function ayg_render_media_uploader( $elem ) {
11	10	var file_frame, attachment;
12	11
13	12	// If an instance of file_frame already exists, then we can open it rather than creating a new instance
14	13	if ( file_frame ) {
		@@ -23,10 +22,9 @@
23	22	multiple: false
24	23	});
25	24
26	25	// Setup an event handler for what to do when a media has been selected
27		- file_frame.on( 'insert', function() {
28		-
	26	+ file_frame.on( 'insert', function() {
29	27	// Read the JSON data returned from the media uploader
30	28	attachment = file_frame.state().get( 'selection' ).first().toJSON();
31	29
32	30	// First, make sure that we have the URL of the media to display
		@@ -35,30 +33,16 @@
35	33	};
36	34
37	35	// Set the data
38	36	$elem.prev( '.ayg-settings-url' )
39		- .val( attachment.url );
40		-
	37	+ .val( attachment.url );
41	38	});
42	39
43	40	// Now display the actual file_frame
44		- file_frame.open();
45		-
	41	+ file_frame.open();
46	42	};
47	43
48	44	/**
49		- * Close the popup.
50		- *
51		- * @since 1.0.0
52		- */
53		- function ayg_close_modal() {
54		-
55		- $( '#ayg-shortcode-builder' ).find( '.ayg-modal' ).hide();
56		- $( 'html' ).removeClass( 'ayg-no-scroll' );
57		-
58		- }
59		-
60		- /**
61	45	* Get Youtube playlist ID from Youtube URL.
62	46	*
63	47	* @since 1.0.0
64	48	* @param {string} url - URL from which to extract the ID.
		@@ -64,12 +48,10 @@
64	48	* @param {string} url - URL from which to extract the ID.
65	49	* @return {string}
66	50	*/
67	51	function ayg_get_youtube_playlist_id( url ) {
68		-
69	52	var id = /[&|\?]list=([a-zA-Z0-9_-]+)/gi.exec( url );
70		- return ( id && id.length > 0 ) ? id[1] : url;
71		-
	53	+ return ( id && id.length > 0 ) ? id[1] : url;
72	54	}
73	55
74	56	/**
75	57	* Get Youtube channel ID from Youtube URL.
		@@ -78,9 +60,8 @@
78	60	* @param {string} url - URL from which to extract the ID.
79	61	* @return {object}
80	62	*/
81	63	function ayg_get_youtube_channel_id( url ) {
82		-
83	64	var type = 'channel';
84	65	var id = url;
85	66
86	67	url = url.replace( /(>|<)/gi, '' ).split( /(\/channel\/|\/user\/)/ );
		@@ -96,10 +77,9 @@
96	77
97	78	return {
98	79	type: type,
99	80	id: id
100		- };
101		-
	81	+ };
102	82	}
103	83
104	84	/**
105	85	* Get Youtube video ID from Youtube URL.
		@@ -108,9 +88,8 @@
108	88	* @param {string} url - URL from which to extract the ID.
109	89	* @return {string}
110	90	*/
111	91	function ayg_get_youtube_video_id( url ) {
112		-
113	92	var id = url;
114	93
115	94	url = url.replace( /(>|<)/gi, '' ).split( /(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/ );
116	95
		@@ -118,10 +97,9 @@
118	97	id = url[2].split( /[^0-9a-z_\-]/i );
119	98	id = id[0];
120	99	}
121	100
122		- return id;
123		-
	101	+ return id;
124	102	}
125	103
126	104	/**
127	105	* Widget: Initiate color picker
		@@ -145,126 +123,54 @@
145	123	*
146	124	* @since 1.0.0
147	125	*/
148	126	$(function() {
	127	+ // Common: Initialize the color picker
	128	+ $( '.ayg-color-picker' ).wpColorPicker();
149	129
150		- // Admin: Dismiss admin notice
151		- $( '#ayg-admin-notice' ).on( 'click', '.notice-dismiss', function( e ) {
152		-
	130	+ // Common: Init the popup.
	131	+ if ( $.fn.magnificPopup ) {
	132	+ $( '.ayg-modal-button' ).magnificPopup({
	133	+ type: 'inline',
	134	+ mainClass: 'mfp-fade'
	135	+ });
	136	+ }
	137	+
	138	+ // Dashboard: Save API Key
	139	+ $( '#ayg-button-save-api-key' ).on( 'click', function( e ) {
153	140	e.preventDefault();
154	141
	142	+ $( this ).prop( 'disabled', true );
	143	+ $( '.ayg-ajax-status', '#ayg-table-api-key' ).html( '<span class="spinner"></span>' );
	144	+
155	145	var data = {
156		- 'action': 'ayg_dismiss_admin_notice',
157		- 'security': $( '#ayg-admin-notice' ).data( 'security' )
	146	+ 'action': 'ayg_save_api_key',
	147	+ 'api_key': $( '#ayg-api-key' ).val(),
	148	+ 'security': ayg_admin.ajax_nonce
158	149	};
159		-
160		- $.post( ajaxurl, data );
161		-
162		- });
163	150
164		- // Settings: Initialize the color picker
165		- $( '.ayg-color-picker', '#ayg-settings' ).wpColorPicker();
166		-
167		- // Settings: Show/Hide fields based on the selected theme
168		- $( 'tr.theme', '#ayg-settings' ).find( 'select' ).on( 'change', function() {
	151	+ if ( ! data.api_key ) {
	152	+ $( this ).prop( 'disabled', false );
	153	+ $( '.ayg-ajax-status', '#ayg-table-api-key' ).html( '<span class="ayg-text-error">' + ayg_admin.i18n.invalid_api_key + '</span>' );
	154	+
	155	+ return false;
	156	+ }
169	157
170		- var theme = $( this ).val();
171		- var $elem = $( '#ayg-settings' );
172		-
173		- $elem.removeClass(function( index, classes ) {
174		-
175		- var matches = classes.match( /\ayg-settings-theme-\S+/ig );
176		- return ( matches ) ? matches.join(' ') : '';
177		-
178		- });
179		-
180		- $elem.addClass( 'ayg-settings-theme-' + theme );
181		-
	158	+ $.post( ajaxurl, data, function( response ) {
	159	+ window.location.reload(); // Reload document
	160	+ });
182	161	});
183	162
184		- // Settings: Browse button
185		- $( '.ayg-settings-browse' ).on( 'click', function( e ) {
186		-
	163	+ // Dashboard: Generate shortcode
	164	+ $( '#ayg-generate-shortcode' ).on( 'click', function( e ) {
187	165	e.preventDefault();
188		- ayg_render_media_uploader( $( this ) );
189		-
190		- });
191	166
192		- // Editor: Toggle between field sections
193		- $( document ).on( 'click', '.ayg-editor-section-header', function( e ) {
194		-
195		- var $elem = $( this ).parent();
196		-
197		- if ( ! $elem.hasClass( 'ayg-active' ) ) {
198		- $( this ).closest( '.ayg-editor' )
199		- .find( '.ayg-editor-section.ayg-active' )
200		- .toggleClass( 'ayg-active' )
201		- .find( '.ayg-editor-controls' )
202		- .slideToggle();
203		- }
204		-
205		- $elem.toggleClass( 'ayg-active' )
206		- .find( '.ayg-editor-controls' )
207		- .slideToggle();
208		-
209		- });
210		-
211		- // Editor: Show/Hide fields based on the selected source 'type'
212		- $( document ).on( 'change', '.ayg-editor-field-type', function( e ) {
213		-
214		- var type = $( this ).val();
215		- var $elem = $( this ).closest( '.ayg-editor' );
216		-
217		- $elem.removeClass(function( index, classes ) {
218		-
219		- var matches = classes.match( /\ayg-editor-field-type-\S+/ig );
220		- return ( matches ) ? matches.join(' ') : '';
221		-
222		- });
223		-
224		- $elem.addClass( 'ayg-editor-field-type-' + type );
225		-
226		- });
227		-
228		-
229		- // Editor: Show/Hide fields based on the selected theme
230		- $( document ).on( 'change', '.ayg-editor-field-theme', function( e ) {
231		-
232		- var theme = $( this ).val();
233		- var $elem = $( this ).closest( '.ayg-editor' );
234		-
235		- $elem.removeClass(function( index, classes ) {
236		-
237		- var matches = classes.match( /\ayg-editor-field-theme-\S+/ig );
238		- return ( matches ) ? matches.join(' ') : '';
239		-
240		- });
241		-
242		- $elem.addClass( 'ayg-editor-field-theme-' + theme );
243		-
244		- });
245		-
246		- // Shortcode Builder: Initialize the color picker
247		- $( '.ayg-color-picker', '#ayg-shortcode-builder' ).wpColorPicker();
248		-
249		- // Shortcode Builder: Initialize the popup
250		- $( '#ayg-media-button' ).on( 'click', function() {
251		-
252		- $( 'html' ).addClass( 'ayg-no-scroll' );
253		- $( '#ayg-shortcode-builder' ).find( '.ayg-modal' ).show();
254		-
255		- });
256		-
257		- // Shortcode Builder: Insert shortcode
258		- $( '#ayg-insert-shortcode' ).on( 'click', function( e ) {
259		-
260		- e.preventDefault();
261		-
262	167	// Attributes
263	168	var props = {};
	169	+ var popup = 0;
264	170
265		- $( '.ayg-editor-control', '#ayg-shortcode-builder' ).each(function() {
266		-
	171	+ // Loop through all editor fields
	172	+ $( '.ayg-editor-control', '#ayg-shortcode-builder' ).each(function() {
267	173	var $elem = $( this ).find( '.ayg-editor-field' );
268	174	var type = $elem.attr( 'type' );
269	175	var key = $elem.attr( 'name' );
270	176	var value = $elem.val();
		@@ -269,8 +175,14 @@
269	175	var key = $elem.attr( 'name' );
270	176	var value = $elem.val();
271	177	var def = $elem.data( 'default' );
272	178
	179	+ // Skip popup field
	180	+ if ( 'popup' == key ) {
	181	+ popup = $elem.is( ':checked' ) ? 1 : 0;
	182	+ return true; // continue
	183	+ }
	184	+
273	185	// field type = checkbox
274	186	if ( 'checkbox' == type ) {
275	187	value = $elem.is( ':checked' ) ? 1 : 0;
276	188	}
		@@ -311,13 +223,19 @@
311	223
312	224	// Add only if the user input differ from the global configuration
313	225	if ( value != def ) {
314	226	props[ key ] = value;
315		- }
316		-
	227	+ }
317	228	});
318	229
	230	+ // If popup is enabled and type is video, force theme to popup
	231	+ if ( popup && props.hasOwnProperty( 'type' ) && 'video' == props.type ) {
	232	+ props.theme = 'popup';
	233	+ }
	234	+
	235	+ // Build attributes string
319	236	var attrs = '';
	237	+
320	238	for ( var key in props ) {
321	239	if ( props.hasOwnProperty( key ) ) {
322	240	attrs += ( ' ' + key + '="' + props[ key ] + '"' );
323	241	}
		@@ -323,27 +241,104 @@
323	241	}
324	242	}
325	243
326	244	// Shortcode output
327		- window.send_to_editor( '[automatic_youtube_gallery' + attrs + ']' );
328		- ayg_close_modal();
	245	+ $( '#aiovg-shortcode').val( '[automatic_youtube_gallery' + attrs + ']' );
	246	+ });
329	247
	248	+ // Editor: Toggle between field sections
	249	+ $( document ).on( 'click', '.ayg-editor-section-header', function( e ) {
	250	+ var $elem = $( this ).parent();
	251	+
	252	+ if ( ! $elem.hasClass( 'ayg-active' ) ) {
	253	+ $( this ).closest( '.ayg-editor' )
	254	+ .find( '.ayg-editor-section.ayg-active' )
	255	+ .toggleClass( 'ayg-active' )
	256	+ .find( '.ayg-editor-controls' )
	257	+ .slideToggle();
	258	+ }
	259	+
	260	+ $elem.toggleClass( 'ayg-active' )
	261	+ .find( '.ayg-editor-controls' )
	262	+ .slideToggle();
330	263	});
331	264
332		- // Shortcode Builder: Close the popup
333		- $( '.ayg-modal-close', '#ayg-shortcode-builder' ).on( 'click', function( e ) {
	265	+ // Editor: Toggle fields based on the source type
	266	+ $( document ).on( 'change', '.ayg-editor-field-type', function() {
	267	+ var $container = $( this ).closest( '.ayg-editor' );
	268	+ var value = $( this ).val();
	269	+
	270	+ $container.removeClass(function( index, classes ) {
	271	+ var matches = classes.match( /\ayg-editor-field-type-\S+/ig );
	272	+ return ( matches ) ? matches.join( ' ' ) : '';
	273	+ });
	274	+
	275	+ $container.addClass( 'ayg-editor-field-type-' + value );
	276	+ });
	277	+
	278	+ // Editor: Toggle fields based on the theme
	279	+ $( document ).on( 'change', '.ayg-editor-field-theme', function() {
	280	+ var $container = $( this ).closest( '.ayg-editor' );
	281	+ var value = $( this ).val();
	282	+
	283	+ $container.removeClass(function( index, classes ) {
	284	+ var matches = classes.match( /\ayg-editor-field-theme-\S+/ig );
	285	+ return ( matches ) ? matches.join( ' ' ) : '';
	286	+ });
	287	+
	288	+ $container.addClass( 'ayg-editor-field-theme-' + value );
	289	+ });
	290	+
	291	+ // Settings: Toggle fields based on the theme
	292	+ $( 'tr.theme select', '#ayg-settings' ).on( 'change', function() {
	293	+ var $container = $( '#ayg-settings' );
	294	+ var value = $( this ).val();
	295	+
	296	+ $container.removeClass(function( index, classes ) {
	297	+ var matches = classes.match( /theme-\S+/ig );
	298	+ return ( matches ) ? matches.join( ' ' ) : '';
	299	+ });
	300	+
	301	+ $container.addClass( 'theme-' + value );
	302	+ });
	303	+
	304	+ // Settings: Toggle fields based on the player type
	305	+ $( 'tr.player_type input[type="radio"]', '#ayg-settings' ).on( 'change', function() {
	306	+ var $container = $( '#ayg-settings' );
	307	+ var value = $container.find( 'tr.player_type input[type="radio"]:checked' ).val();
	308	+
	309	+ $container.removeClass(function( index, classes ) {
	310	+ var matches = classes.match( /player_type-\S+/ig );
	311	+ return ( matches ) ? matches.join( ' ' ) : '';
	312	+ });
	313	+
	314	+ $container.addClass( 'player_type-' + value );
	315	+ });
	316	+
	317	+ // Settings: Browse button
	318	+ $( '.ayg-settings-browse' ).on( 'click', function( e ) {
	319	+ e.preventDefault();
	320	+ ayg_render_media_uploader( $( this ) );
	321	+ });
334	322
	323	+ // Settings: Delete cache
	324	+ $( '#ayg-button-delete-cache' ).on( 'click', function( e ) {
335	325	e.preventDefault();
336		- ayg_close_modal();
337	326
338		- });
339		-
340		- $( '.ayg-modal-content', '#ayg-shortcode-builder' ).on( 'click', function( e ) {
341		- if ( $( e.target ).hasClass( 'ayg-modal-content' ) ) {
342		- ayg_close_modal();
343		- };
344		- });
	327	+ $( this ).prop( 'disabled', true );
	328	+ $( '.ayg-ajax-status', '#ayg-table-delete-cache' ).html( '<span class="spinner"></span>' );
345	329
	330	+ var data = {
	331	+ 'action': 'ayg_delete_cache',
	332	+ 'security': ayg_admin.ajax_nonce
	333	+ };
	334	+
	335	+ $.post( ajaxurl, data, function( response ) {
	336	+ $( this ).prop( 'disabled', false );
	337	+ $( '.ayg-ajax-status', '#ayg-table-delete-cache' ).html( '<span class="ayg-text-success">' + ayg_admin.i18n.cleared + '</span>' );
	338	+ });
	339	+ });
	340	+
346	341	// Widget: Initiate color picker
347	342	$( '#widgets-right .widget:has(.ayg-color-picker)' ).each(function() {
348	343	ayg_widget_color_picker( $( this ) );
349	344	});
		@@ -348,8 +343,7 @@
348	343	ayg_widget_color_picker( $( this ) );
349	344	});
350	345
351	346	$( document ).on( 'widget-added widget-updated', on_ayg_widget_update );
352		-
353	347	});
354	348
355	349	})( jQuery );