← Back to branch summary

~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

Viewing changes to wp-admin/js/custom-background.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/custom-background.js
 
1
/* global ajaxurl */
 
2
(function($) {
 
3
        $(document).ready(function() {
 
4
                var frame,
 
5
                        bgImage = $( '#custom-background-image' );
 
6
 
 
7
                $('#background-color').wpColorPicker({
 
8
                        change: function( event, ui ) {
 
9
                                bgImage.css('background-color', ui.color.toString());
 
10
                        },
 
11
                        clear: function() {
 
12
                                bgImage.css('background-color', '');
 
13
                        }
 
14
                });
 
15
 
 
16
                $('input[name="background-position-x"]').change(function() {
 
17
                        bgImage.css('background-position', $(this).val() + ' top');
 
18
                });
 
19
 
 
20
                $('input[name="background-repeat"]').change(function() {
 
21
                        bgImage.css('background-repeat', $(this).val());
 
22
                });
 
23
 
 
24
                $('#choose-from-library-link').click( function( event ) {
 
25
                        var $el = $(this);
 
26
 
 
27
                        event.preventDefault();
 
28
 
 
29
                        // If the media frame already exists, reopen it.
 
30
                        if ( frame ) {
 
31
                                frame.open();
 
32
                                return;
 
33
                        }
 
34
 
 
35
                        // Create the media frame.
 
36
                        frame = wp.media.frames.customBackground = wp.media({
 
37
                                // Set the title of the modal.
 
38
                                title: $el.data('choose'),
 
39
 
 
40
                                // Tell the modal to show only images.
 
41
                                library: {
 
42
                                        type: 'image'
 
43
                                },
 
44
 
 
45
                                // Customize the submit button.
 
46
                                button: {
 
47
                                        // Set the text of the button.
 
48
                                        text: $el.data('update'),
 
49
                                        // Tell the button not to close the modal, since we're
 
50
                                        // going to refresh the page when the image is selected.
 
51
                                        close: false
 
52
                                }
 
53
                        });
 
54
 
 
55
                        // When an image is selected, run a callback.
 
56
                        frame.on( 'select', function() {
 
57
                                // Grab the selected attachment.
 
58
                                var attachment = frame.state().get('selection').first();
 
59
 
 
60
                                // Run an AJAX request to set the background image.
 
61
                                $.post( ajaxurl, {
 
62
                                        action: 'set-background-image',
 
63
                                        attachment_id: attachment.id,
 
64
                                        size: 'full'
 
65
                                }).done( function() {
 
66
                                        // When the request completes, reload the window.
 
67
                                        window.location.reload();
 
68
                                });
 
69
                        });
 
70
 
 
71
                        // Finally, open the modal.
 
72
                        frame.open();
 
73
                });
 
74
        });
 
75
})(jQuery);