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