wordpress-develop/src/js/_enqueues/admin/custom-background.js
Gary Pendergast ef37f002ee Once upon a midnight dreary, while I coded, weak and weary,
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
            Only this and nothing more.”

Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
            Guten-ready for evermore.

Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
            Let’s move on, we’re all aboard.”

Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
            Quoth Omar, “In WordPress Core.”

Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes #43055.



git-svn-id: https://develop.svn.wordpress.org/trunk@43309 602fd350-edb4-49c9-b593-d223f7449a82
2018-05-23 10:04:22 +00:00

142 lines
3.2 KiB
JavaScript

/* global ajaxurl */
/**
* Registers all events for customizing the background.
*
* @since 3.0.0
*
* @requires jQuery
*/
(function($) {
$(document).ready(function() {
var frame,
bgImage = $( '#custom-background-image' );
/**
* Instantiates the WordPress color picker and binds the change and clear events.
*
* @since 3.5.0
*
* @returns {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
*
* @returns {void}
*/
$( 'select[name="background-size"]' ).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
*
* @returns {void}
*/
$( 'input[name="background-position"]' ).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
*
* @returns {void}
*/
$( 'input[name="background-repeat"]' ).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
*
* @returns {void}
*/
$( 'input[name="background-attachment"]' ).change( function() {
bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
});
/**
* Binds the event for opening the WP Media dialog.
*
* @since 3.5.0
*
* @returns {void}
*/
$('#choose-from-library-link').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
*
* @returns {void}
*/
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first();
// Run an AJAX request to set the background image.
$.post( ajaxurl, {
action: 'set-background-image',
attachment_id: attachment.id,
size: 'full'
}).done( function() {
// When the request completes, reload the window.
window.location.reload();
});
});
// Finally, open the modal.
frame.open();
});
});
})(jQuery);