1 /* global ajaxurl */ |
1 /* global ajaxurl */ |
|
2 |
|
3 /** |
|
4 * @summary Registers all events for customizing the background. |
|
5 * |
|
6 * @since 3.0.0 |
|
7 * |
|
8 * @requires jQuery |
|
9 */ |
2 (function($) { |
10 (function($) { |
3 $(document).ready(function() { |
11 $(document).ready(function() { |
4 var frame, |
12 var frame, |
5 bgImage = $( '#custom-background-image' ); |
13 bgImage = $( '#custom-background-image' ); |
6 |
14 |
|
15 /** |
|
16 * @summary Instantiates the WordPress color picker and binds the change and clear events. |
|
17 * |
|
18 * @since 3.5.0 |
|
19 * |
|
20 * @returns {void} |
|
21 */ |
7 $('#background-color').wpColorPicker({ |
22 $('#background-color').wpColorPicker({ |
8 change: function( event, ui ) { |
23 change: function( event, ui ) { |
9 bgImage.css('background-color', ui.color.toString()); |
24 bgImage.css('background-color', ui.color.toString()); |
10 }, |
25 }, |
11 clear: function() { |
26 clear: function() { |
12 bgImage.css('background-color', ''); |
27 bgImage.css('background-color', ''); |
13 } |
28 } |
14 }); |
29 }); |
15 |
30 |
16 $('input[name="background-position-x"]').change(function() { |
31 /** |
17 bgImage.css('background-position', $(this).val() + ' top'); |
32 * @summary Alters the background size CSS property whenever the background size input has changed. |
|
33 * |
|
34 * @since 4.7.0 |
|
35 * |
|
36 * @returns {void} |
|
37 */ |
|
38 $( 'select[name="background-size"]' ).change( function() { |
|
39 bgImage.css( 'background-size', $( this ).val() ); |
18 }); |
40 }); |
19 |
41 |
20 $('input[name="background-repeat"]').change(function() { |
42 /** |
21 bgImage.css('background-repeat', $(this).val()); |
43 * @summary Alters the background position CSS property whenever the background position input has changed. |
|
44 * |
|
45 * @since 4.7.0 |
|
46 * |
|
47 * @returns {void} |
|
48 */ |
|
49 $( 'input[name="background-position"]' ).change( function() { |
|
50 bgImage.css( 'background-position', $( this ).val() ); |
22 }); |
51 }); |
23 |
52 |
|
53 /** |
|
54 * @summary Alters the background repeat CSS property whenever the background repeat input has changed. |
|
55 * |
|
56 * @since 3.0.0 |
|
57 * |
|
58 * @returns {void} |
|
59 */ |
|
60 $( 'input[name="background-repeat"]' ).change( function() { |
|
61 bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' ); |
|
62 }); |
|
63 |
|
64 /** |
|
65 * @summary Alters the background attachment CSS property whenever the background attachment input has changed. |
|
66 * |
|
67 * @since 4.7.0 |
|
68 * |
|
69 * @returns {void} |
|
70 */ |
|
71 $( 'input[name="background-attachment"]' ).change( function() { |
|
72 bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' ); |
|
73 }); |
|
74 |
|
75 /** |
|
76 * @summary Binds the event for opening the WP Media dialog. |
|
77 * |
|
78 * @since 3.5.0 |
|
79 * |
|
80 * @returns {void} |
|
81 */ |
24 $('#choose-from-library-link').click( function( event ) { |
82 $('#choose-from-library-link').click( function( event ) { |
25 var $el = $(this); |
83 var $el = $(this); |
26 |
84 |
27 event.preventDefault(); |
85 event.preventDefault(); |
28 |
86 |
44 |
102 |
45 // Customize the submit button. |
103 // Customize the submit button. |
46 button: { |
104 button: { |
47 // Set the text of the button. |
105 // Set the text of the button. |
48 text: $el.data('update'), |
106 text: $el.data('update'), |
49 // Tell the button not to close the modal, since we're |
107 /* |
50 // going to refresh the page when the image is selected. |
108 * Tell the button not to close the modal, since we're |
|
109 * going to refresh the page when the image is selected. |
|
110 */ |
51 close: false |
111 close: false |
52 } |
112 } |
53 }); |
113 }); |
54 |
114 |
55 // When an image is selected, run a callback. |
115 /** |
|
116 * @summary When an image is selected, run a callback. |
|
117 * |
|
118 * @since 3.5.0 |
|
119 * |
|
120 * @returns {void} |
|
121 */ |
56 frame.on( 'select', function() { |
122 frame.on( 'select', function() { |
57 // Grab the selected attachment. |
123 // Grab the selected attachment. |
58 var attachment = frame.state().get('selection').first(); |
124 var attachment = frame.state().get('selection').first(); |
59 |
125 |
60 // Run an AJAX request to set the background image. |
126 // Run an AJAX request to set the background image. |