1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
/**
* @output wp-admin/js/custom-background.js
*/
/* global ajaxurl */
/**
* Registers all events for customizing the background.
*
* @since 3.0.0
*
* @requires jQuery
*/
(function($) {
$( function() {
var frame,
bgImage = $( '#custom-background-image' );
/**
* Instantiates the WordPress color picker and binds the change and clear events.
*
* @since 3.5.0
*
* @return {void}
*/
$('#background-color').wpColorPicker({
change: function( event, ui ) {
bgImage.css('background-color', ui.color.toString());
},
clear: function() {
bgImage.css('background-color', '');
}
});
/**
* Alters the background size CSS property whenever the background size input has changed.
*
* @since 4.7.0
*
* @return {void}
*/
$( 'select[name="background-size"]' ).on( 'change', function() {
bgImage.css( 'background-size', $( this ).val() );
});
/**
* Alters the background position CSS property whenever the background position input has changed.
*
* @since 4.7.0
*
* @return {void}
*/
$( 'input[name="background-position"]' ).on( 'change', function() {
bgImage.css( 'background-position', $( this ).val() );
});
/**
* Alters the background repeat CSS property whenever the background repeat input has changed.
*
* @since 3.0.0
*
* @return {void}
*/
$( 'input[name="background-repeat"]' ).on( 'change', function() {
bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
});
/**
* Alters the background attachment CSS property whenever the background attachment input has changed.
*
* @since 4.7.0
*
* @return {void}
*/
$( 'input[name="background-attachment"]' ).on( 'change', function() {
bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
});
/**
* Binds the event for opening the WP Media dialog.
*
* @since 3.5.0
*
* @return {void}
*/
$('#choose-from-library-link').on( 'click', function( event ) {
var $el = $(this);
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create the media frame.
frame = wp.media.frames.customBackground = wp.media({
// Set the title of the modal.
title: $el.data('choose'),
// Tell the modal to show only images.
library: {
type: 'image'
},
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('update'),
/*
* Tell the button not to close the modal, since we're
* going to refresh the page when the image is selected.
*/
close: false
}
});
/**
* When an image is selected, run a callback.
*
* @since 3.5.0
*
* @return {void}
*/
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first();
var nonceValue = $( '#_wpnonce' ).val() || '';
// Run an Ajax request to set the background image.
$.post( ajaxurl, {
action: 'set-background-image',
attachment_id: attachment.id,
_ajax_nonce: nonceValue,
size: 'full'
}).done( function() {
// When the request completes, reload the window.
window.location.reload();
});
});
// Finally, open the modal.
frame.open();
});
});
})(jQuery);
|
