← All changes | assets/js/admin.js +78 -157 1.4.3 → trunk View file →

		@@ -1,171 +1,92 @@
1		-jQuery(function($){
	1	+window.imagify = window.imagify || {};
2	2
3		- var concat = ajaxurl.indexOf("?") > 0 ? "&" : "?";
	3	+jQuery.extend( window.imagify, {
	4	+ concat: ajaxurl.indexOf( '?' ) > 0 ? '&' : '?',
	5	+ log: function( content ) {
	6	+ if ( undefined !== console ) {
	7	+ console.log( content ); // eslint-disable-line no-console
	8	+ }
	9	+ },
	10	+ info: function( content ) {
	11	+ if ( undefined !== console ) {
	12	+ console.info( content ); // eslint-disable-line no-console
	13	+ }
	14	+ },
	15	+ openModal: function( $link ) {
	16	+ var target = $link.data( 'target' ) || $link.attr( 'href' ),
	17	+ $target = jQuery( target );
4	18
5		- /*
6		- * Create a new Imagify account
7		- */
8		- $('#imagify-signup').click( function(e){
9		- e.preventDefault();
	19	+ $target.css( 'display', 'flex' ).hide().fadeIn( 400 ).attr( {
	20	+ 'aria-hidden': 'false',
	21	+ 'tabindex': '0'
	22	+ } ).trigger('focus').removeAttr( 'tabindex' ).addClass( 'modal-is-open' );
10	23
11		- // Display the sign up form
12		- swal({
13		- title: imagify.signupTitle,
14		- text: imagify.signupText,
15		- confirmButtonText: imagify.signupConfirmButtonText,
16		- type: "input",
17		- closeOnConfirm: false,
18		- allowOutsideClick: true,
19		- showLoaderOnConfirm: true,
20		- customClass: "imagify-sweet-alert imagify-sweet-alert-signup"
21		- },
22		- function(inputValue){
23		- if ($.trim(inputValue) == "" || ! inputValue) {
24		- swal.showInputError(imagify.signupErrorEmptyEmail);
25		- return false;
26		- }
27		-
28		- $.get(ajaxurl + concat + "action=imagify_signup&email=" +inputValue + "&imagifysignupnonce="+ $('#imagifysignupnonce').val())
29		- .done(function(response){
30		- if( !response.success ) {
31		- swal.showInputError(response.data);
32		- } else {
33		- swal({
34		- title:imagify.signupSuccessTitle,
35		- text: imagify.signupSuccessText,
36		- type: "success",
37		- customClass: "imagify-sweet-alert"
38		- });
39		- }
40		- });
41		- });
42		- });
43		-
44		- /*
45		- * Check and save the Imagify API Key
46		- */
47		- $('#imagify-save-api-key').click( function(e){
48		- e.preventDefault();
	24	+ jQuery( 'body' ).addClass( 'imagify-modal-is-open' );
	25	+ },
	26	+ template: function( id ) {
	27	+ if ( undefined === _ ) {
	28	+ // No need to load underscore everywhere if we don't use it.
	29	+ return '';
	30	+ }
49	31
50		- // Display the sign up form
51		- swal({
52		- title: imagify.saveApiKeyTitle,
53		- text: imagify.saveApiKeyText,
54		- confirmButtonText: imagify.saveApiKeyConfirmButtonText,
55		- type: "input",
56		- closeOnConfirm: false,
57		- allowOutsideClick: true,
58		- showLoaderOnConfirm: true,
59		- customClass: "imagify-sweet-alert imagify-sweet-alert-signup"
60		- },
61		- function(inputValue){
62		- if ($.trim(inputValue) == "" || ! inputValue) {
63		- swal.showInputError(imagify.signupErrorEmptyEmail);
64		- return false;
65		- }
66		-
67		- $.get(ajaxurl + concat + "action=imagify_check_api_key_validity&api_key=" +inputValue + "&imagifycheckapikeynonce="+ $('#imagifycheckapikeynonce').val())
68		- .done(function(response){
69		- if( !response.success ) {
70		- swal.showInputError(response.data);
71		- } else {
72		- swal({
73		- title:imagify.ApiKeyCheckSuccessTitle,
74		- text: imagify.ApiKeyCheckSuccessText,
75		- type: "success",
76		- customClass: "imagify-sweet-alert"
77		- });
78		- }
79		- });
80		- });
81		- });
82		-
83		- /*
84		- * Toggle an Imagify notice
85		- */
86		- $('.imagify-notice-dismiss').click( function( e ) {
87		- e.preventDefault();
88		-
89		- var obj = $(this),
90		- parent = obj.parents('.imagify-welcome, .imagify-notice'),
91		- href = obj.attr('href');
92		-
93		- // Hide the notice
94		- parent.fadeTo( 100 , 0, function() {
95		- $(this).slideUp( 100, function() {
96		- $(this).remove();
97		- });
98		- });
99		-
100		- // Save the dismiss notice
101		- $.get( href.replace( 'admin-post.php', 'admin-ajax.php' ) );
102		- });
	32	+ return _.memoize( function( data ) {
	33	+ var compiled,
	34	+ options = {
	35	+ evaluate: /<#([\s\S]+?)#>/g,
	36	+ interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
	37	+ escape: /\{\{([^}]+?)\}\}(?!\})/g,
	38	+ variable: 'data'
	39	+ };
103	40
	41	+ return function() {
	42	+ compiled = compiled || _.template( jQuery( '#tmpl-' + id ).html(), null, options );
	43	+ data = data || {};
	44	+ return compiled( data );
	45	+ };
	46	+ } );
	47	+ }
	48	+} );
104	49
105		- /*
106		- * Imagify Light modal
107		- */
108		-
109		- if ( $('.imagify-modal-trigger').length > 0 ) {
110		-
111		- // accessibility
112		- $('.imagify-modal').attr('aria-hidden', 'true');
113	50
114		- // on click on modal trigger
115		- $('.imagify-modal-trigger').on('click', function(){
116		- var the_target = $(this).data('target') || $(this).attr('href');
	51	+// Imagify light modal =============================================================================
	52	+(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names
117	53
118		- $( the_target ).css('display', 'flex').hide().fadeIn(400).attr('aria-hidden', 'false').attr('tabindex', '0').focus().removeAttr('tabindex').addClass('modal-is-open');
119		- $('body').addClass('imagify-modal-is-open');
	54	+ // Accessibility.
	55	+ $( '.imagify-modal' ).attr( 'aria-hidden', 'true' );
120	56
121		- return false;
122		- });
	57	+ $( d )
	58	+ // On click on modal trigger, open modal.
	59	+ .on( 'click.imagify', '.imagify-modal-trigger', function( e ) {
	60	+ e.preventDefault();
	61	+ w.imagify.openModal( $( this ) );
	62	+ } )
	63	+ // On click on close button, close modal.
	64	+ .on( 'click.imagify', '.imagify-modal .close-btn', function() {
	65	+ var $modal = $( this ).closest( '.imagify-modal' );
123	66
124		- // on click on close button
125		- $('.imagify-modal').find('.close-btn').on('click', function(){
126		- $(this).closest('.imagify-modal').fadeOut(400).attr('aria-hidden', 'true').removeClass('modal-is-open');
127		- $('body').removeClass('imagify-modal-is-open');
128		- })
129		- .on('blur', function(){
130		- var $modal = $(this).closest('.imagify-modal');
131		- if ( $modal.attr('aria-hidden') === 'false' ) {
132		- $modal.attr('tabindex', '0').focus().removeAttr('tabindex');
133		- }
134		- });
	67	+ $modal.fadeOut( 400 ).attr( 'aria-hidden', 'true' ).removeClass( 'modal-is-open' ).trigger( 'modalClosed.imagify' );
135	68
136		- // `Esc` key binding
137		- $(window).on('keydown', function(e){
138		- if ( e.keyCode == 27 && $('.imagify-modal.modal-is-open').length > 0 ) {
	69	+ $( 'body' ).removeClass( 'imagify-modal-is-open' );
	70	+ } )
	71	+ // On close button blur, improve accessibility.
	72	+ .on( 'blur.imagify', '.imagify-modal .close-btn', function() {
	73	+ var $modal = $( this ).closest( '.imagify-modal' );
139	74
	75	+ if ( $modal.attr( 'aria-hidden' ) === 'false' ) {
	76	+ $modal.attr( 'tabindex', '0' ).trigger('focus').removeAttr( 'tabindex' );
	77	+ }
	78	+ } )
	79	+ // On click on dropped layer of modal, close modal.
	80	+ .on( 'click.imagify', '.imagify-modal', function( e ) {
	81	+ $( e.target ).filter( '.modal-is-open' ).find( '.close-btn' ).trigger( 'click.imagify' );
	82	+ } )
	83	+ // `Esc` key binding, close modal.
	84	+ .on( 'keydown.imagify', function( e ) {
	85	+ if ( 27 === e.keyCode && $( '.imagify-modal.modal-is-open' ).length > 0 ) {
140	86	e.preventDefault();
141		-
142		- // trigger the event
143		- $('.imagify-modal.modal-is-open').find('.close-btn').trigger('click');
	87	+ // Trigger the event.
	88	+ $( '.imagify-modal.modal-is-open' ).find( '.close-btn' ).trigger( 'click.imagify' );
	89	+ }
	90	+ } );
144	91
145		- return false;
146		- }
147		- });
148		- }
149		-
150		- var busy = false,
151		- xhr = false;
152		-
153		- $('#wp-admin-bar-imagify').hover( function() {
154		- if ( true === busy ) {
155		- xhr.abort();
156		- }
157		-
158		- busy = true;
159		-
160		- var $adminBarProfile = $('#wp-admin-bar-imagify-profile-content');
161		-
162		- if( $adminBarProfile.is(':empty') ) {
163		- xhr = $.get(ajaxurl + concat + "action=imagify_get_admin_bar_profile&imagifygetadminbarprofilenonce="+ $('#imagifygetadminbarprofilenonce').val())
164		- .done(function(response){
165		- $adminBarProfile.html(response.data);
166		- $('#wp-admin-bar-imagify-profile-loading').remove();
167		- busy = false;
168		- });
169		- }
170		- });
171		-});
	92	+} )(jQuery, document, window);