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