Changeset 20598
- Timestamp:
- 04/25/2012 09:03:29 PM (13 years ago)
- Location:
- trunk/wp-includes
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-includes/class-wp-customize-control.php
r20545 r20598 65 65 * @since 3.4.0 66 66 */ 67 public function enqueue() { 68 switch( $this->type ) { 69 case 'color': 70 wp_enqueue_script( 'farbtastic' ); 71 wp_enqueue_style( 'farbtastic' ); 72 break; 73 } 74 } 67 public function enqueue() {} 75 68 76 69 … … 177 170 <?php 178 171 break; 179 case 'color':180 ?>181 <label>182 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>183 <div class="dropdown color-picker-toggle">184 <div class="dropdown-content color-picker-spot"></div>185 <div class="dropdown-arrow"></div>186 </div>187 <div class="color-picker-control color-picker-hex">188 <span>#</span>189 <input type="text" <?php $this->link(); ?> />190 </div>191 <div class="color-picker-control farbtastic-placeholder"></div>192 </label>193 <?php194 break;195 172 case 'checkbox': 196 173 ?> 197 174 <label> 198 175 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 199 <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> class="customize-control-content"/>176 <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> /> 200 177 </label> 201 178 <?php … … 226 203 <label> 227 204 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 228 <select <?php $this->link(); ?> class="customize-control-content">205 <select <?php $this->link(); ?>> 229 206 <?php 230 207 foreach ( $this->choices as $value => $label ) … … 259 236 } 260 237 238 class WP_Customize_Color_Control extends WP_Customize_Control { 239 public $type = 'color'; 240 public $statuses; 241 242 public function __construct( $manager, $id, $args = array() ) { 243 $this->statuses = array( '' => __('Default') ); 244 parent::__construct( $manager, $id, $args ); 245 } 246 247 public function enqueue() { 248 wp_enqueue_script( 'farbtastic' ); 249 wp_enqueue_style( 'farbtastic' ); 250 } 251 252 public function to_json() { 253 parent::to_json(); 254 $this->json['statuses'] = $this->statuses; 255 } 256 257 public function render_content() { 258 ?> 259 <label> 260 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 261 <div class="customize-control-content"> 262 <div class="dropdown"> 263 <div class="dropdown-content"> 264 <div class="dropdown-status"></div> 265 </div> 266 <div class="dropdown-arrow"></div> 267 </div> 268 <div class="color-picker-hex"> 269 <span>#</span> 270 <input type="text" <?php $this->link(); ?> /> 271 </div> 272 </div> 273 <div class="farbtastic-placeholder"></div> 274 </label> 275 <?php 276 } 277 } 278 261 279 class WP_Customize_Upload_Control extends WP_Customize_Control { 262 280 public $type = 'upload'; … … 293 311 public $type = 'image'; 294 312 public $get_url; 313 public $statuses; 295 314 296 315 protected $tabs = array(); 297 316 298 317 public function __construct( $manager, $id, $args ) { 318 $this->statuses = array( '' => __('No Image') ); 319 299 320 parent::__construct( $manager, $id, $args ); 300 321 301 322 $this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) ); 302 323 $this->add_tab( 'uploaded', __('Uploaded'), array( $this, 'tab_uploaded' ) ); 324 } 325 326 public function to_json() { 327 parent::to_json(); 328 $this->json['statuses'] = $this->statuses; 303 329 } 304 330 … … 312 338 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 313 339 314 315 <div class="dropdown preview-thumbnail"> 316 <div class="dropdown-content"> 317 <?php if ( empty( $src ) ): ?> 318 <img style="display:none;" /> 319 <?php else: ?> 320 <img src="<?php echo esc_url( $src ); ?>" /> 321 <?php endif; ?> 340 <div class="customize-control-content"> 341 <div class="dropdown preview-thumbnail"> 342 <div class="dropdown-content"> 343 <?php if ( empty( $src ) ): ?> 344 <img style="display:none;" /> 345 <?php else: ?> 346 <img src="<?php echo esc_url( $src ); ?>" /> 347 <?php endif; ?> 348 <div class="dropdown-status"></div> 349 </div> 350 <div class="dropdown-arrow"></div> 322 351 </div> 323 <div class="dropdown-arrow"></div>324 352 </div> 325 353 … … 375 403 public function __construct( $manager ) { 376 404 parent::__construct( $manager, 'header_image', array( 377 'label' => __( 'Header Image' ), 378 'section' => 'header', 379 'context' => 'custom-header', 380 'removed' => 'remove-header', 381 'get_url' => 'get_header_image', 405 'label' => __( 'Header Image' ), 406 'section' => 'header', 407 'context' => 'custom-header', 408 'removed' => 'remove-header', 409 'get_url' => 'get_header_image', 410 'statuses' => array( 411 '' => __('Default'), 412 'remove-header' => __('No Image'), 413 'random-default-image' => __('Random Default Image'), 414 'random-uploaded-image' => __('Random Uploaded Image'), 415 ) 382 416 ) ); 383 417 -
trunk/wp-includes/class-wp-customize.php
r20585 r20598 540 540 // @todo: replace with a new accept() setting method 541 541 // 'sanitize_callback' => 'sanitize_hexcolor', 542 'control' => 'color',543 542 'theme_supports' => array( 'custom-header', 'header-text' ), 544 543 'default' => get_theme_support( 'custom-header', 'default-text-color' ), … … 552 551 ) ); 553 552 554 $this->add_control( 'header_textcolor', array(553 $this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array( 555 554 'label' => __( 'Text Color' ), 556 555 'section' => 'header', 557 'type' => 'color', 558 ) ); 556 ) ) ); 559 557 560 558 // Input type: checkbox … … 584 582 ) ); 585 583 586 $this->add_control( 'background_color', array(584 $this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array( 587 585 'label' => __( 'Background Color' ), 588 586 'section' => 'background', 589 'type' => 'color', 590 ) ); 587 ) ) ); 591 588 592 589 $this->add_setting( 'background_image', array( … … 595 592 ) ); 596 593 597 $this->add_control( new WP_Customize_ Upload_Control( $this, 'background_image', array(594 $this->add_control( new WP_Customize_Image_Control( $this, 'background_image', array( 598 595 'label' => __( 'Background Image' ), 599 596 'section' => 'background', 600 'type' => 'upload',601 597 'context' => 'custom-background', 602 598 ) ) ); -
trunk/wp-includes/css/customize-controls.dev.css
r20547 r20598 142 142 line-height: 28px; 143 143 } 144 .customize-control-content { 145 float: right; 146 width: 140px; 147 } 144 148 145 149 .customize-control-text input, … … 218 222 float: left; 219 223 min-width: 30px; 220 height: 24px;221 line-height: 24px;224 height: 16px; 225 line-height: 16px; 222 226 margin-right: 16px; 223 padding: 05px;227 padding: 4px 5px; 224 228 background-color: #eee; 225 229 border: 1px solid #ccc; 226 230 -webkit-border-radius: 3px 0 0 3px; 227 231 border-radius: 3px 0 0 3px; 232 233 -webkit-user-select: none; 234 -moz-user-select: none; 235 user-select: none; 228 236 } 229 237 … … 270 278 } 271 279 280 .customize-control .dropdown-status { 281 display: none; 282 max-width: 112px; 283 color: #999; 284 } 285 272 286 /* 273 287 * Color Picker 274 288 */ 275 .customize-control .color-picker-control { 289 .customize-control-color .color-picker-hex, 290 .customize-control-color .farbtastic-placeholder { 276 291 display: none; 277 292 } 278 .customize-control.open .color-picker-control { 279 display: block; 280 } 281 282 .customize-control .dropdown .color-picker-spot { 293 .customize-control-color.open .color-picker-hex, 294 .customize-control-color.open .farbtastic-placeholder { 295 display: block; 296 } 297 298 .customize-control-color .dropdown { 299 margin-right: 5px; 300 margin-bottom: 5px; 301 } 302 303 .customize-control-color .dropdown .dropdown-content { 283 304 background-color: #fff; 284 305 border: 1px solid rgba( 0, 0, 0, 0.15 ); 285 306 } 286 307 287 .customize- section .dropdown:hover .color-picker-spot {308 .customize-control-color .dropdown:hover .dropdown-content { 288 309 border-color: rgba( 0, 0, 0, 0.25 ); 289 310 } … … 292 313 float: left; 293 314 width: 70px; 294 margin-left: 5px;295 315 font-family: monospace; 296 316 background-color: #fff; … … 323 343 } 324 344 325 .customize- section .color-picker-control.farbtastic-placeholder {345 .customize-control-color .farbtastic-placeholder { 326 346 width: 235px; 327 347 margin: 5px 0 10px 25px; … … 329 349 } 330 350 331 .customize- section .color-picker-control.farbtastic {351 .customize-control-color .farbtastic { 332 352 margin: 0 auto; 333 353 } … … 340 360 .customize-control-image .actions { 341 361 display: none; 362 float: left; 342 363 } 343 364 .customize-control-image.open .library, … … 353 374 } 354 375 376 .customize-section .customize-control-image .dropdown-status { 377 padding: 4px 5px; 378 } 379 355 380 .customize-section .customize-control-image .preview-thumbnail img { 356 381 display: block; … … 398 423 .customize-section .customize-control-image .library-content { 399 424 display: none; 400 width: 260px;425 width: 100%; 401 426 float: left; 402 427 padding: 10px 0; -
trunk/wp-includes/js/customize-controls.dev.js
r20585 r20598 91 91 }); 92 92 }); 93 }, 94 95 ready: function() {}, 96 97 dropdownInit: function() { 98 var control = this, 99 statuses = this.container.find('.dropdown-status'), 100 params = this.params, 101 update = function( to ) { 102 if ( typeof to === 'string' && params.statuses && params.statuses[ to ] ) 103 statuses.html( params.statuses[ to ] ).show(); 104 else 105 statuses.hide(); 106 }; 93 107 94 108 // Support the .dropdown class to open/close complex elements … … 97 111 control.container.toggleClass('open'); 98 112 }); 99 }, 100 ready: function() {} 113 114 this.setting.bind( update ); 115 update( this.setting() ); 116 } 101 117 }); 102 118 … … 106 122 spot, text, update; 107 123 108 spot = this.container.find('. color-picker-spot');124 spot = this.container.find('.dropdown-content'); 109 125 update = function( color ) { 110 color = '#' + color;126 color = color ? '#' + color : ''; 111 127 spot.css( 'background', color ); 112 128 control.farbtastic.setColor( color ); … … 119 135 this.setting.bind( update ); 120 136 update( this.setting() ); 137 138 this.dropdownInit(); 121 139 } 122 140 }); … … 219 237 this.tabs.uploaded.both.addClass('hidden'); 220 238 } 239 240 this.dropdownInit(); 221 241 }, 222 242 success: function( attachment ) { -
trunk/wp-includes/js/customize-preview.dev.js
r20476 r20598 51 51 api( 'background_color', function( value ) { 52 52 value.bind( function( to ) { 53 body.css( 'background-color', '#' + to);53 body.css( 'background-color', to ? '#' + to : '' ); 54 54 }); 55 55 });
Note: See TracChangeset
for help on using the changeset viewer.