CaffGeek/MBACNationals

View on GitHub
Web.Admin/2014/wordpress/wp-admin/js/custom-background.js

Summary

Maintainability
A
3 hrs
Test Coverage
/* global ajaxurl */
(function($) {
    $(document).ready(function() {
        var frame,
            bgImage = $( '#custom-background-image' );

        $('#background-color').wpColorPicker({
            change: function( event, ui ) {
                bgImage.css('background-color', ui.color.toString());
            },
            clear: function() {
                bgImage.css('background-color', '');
            }
        });

        $('input[name="background-position-x"]').change(function() {
            bgImage.css('background-position', $(this).val() + ' top');
        });

        $('input[name="background-repeat"]').change(function() {
            bgImage.css('background-repeat', $(this).val());
        });

        $('#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.
            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);