Changeset 20120
- Timestamp:
- 03/06/2012 02:03:50 AM (13 years ago)
- Location:
- trunk/wp-includes
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-includes/class-wp-customize-setting.php
r20028 r20120 341 341 case 'color': 342 342 ?> 343 <label><?php echo esc_html( $this->label ); ?><br/> 344 <span class="hex-prepend">#</span> 345 <input type="text" class="hex-input" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> /> 346 <a href="#" class="pickcolor hex-color-example"></a> 343 <label> 344 <span><?php echo esc_html( $this->label ); ?></span> 345 <div class="color-picker"> 346 <input class="color-picker-value" type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> /> 347 <a href="#"></a> 348 <div class="color-picker-controls"> 349 <div class="farbtastic-placeholder"></div> 350 <span>#</span> 351 <input type="text" /> 352 </div> 353 </div> 347 354 </label> 348 355 <?php -
trunk/wp-includes/css/customize-controls.dev.css
r20110 r20120 227 227 } 228 228 229 .customize-section .hex-prepend { 229 /* 230 * Color Picker 231 */ 232 233 .customize-section .color-picker { 234 margin-top: 4px; 235 } 236 237 .customize-section .color-picker a { 238 display: block; 239 height: 20px; 240 width: 40px; 241 border: solid 3px rgba( 0, 0, 0, 0.1 ); 242 background-color: #fff; 243 244 -webkit-border-radius: 3px; 245 border-radius: 3px; 246 } 247 248 .customize-section .color-picker .color-picker-controls { 249 display: none; 250 } 251 .customize-section .color-picker span { 230 252 float: left; 231 253 display: block; … … 241 263 } 242 264 243 .customize-section input[type="text"].hex-input{265 .customize-section .color-picker input[type="text"] { 244 266 -webkit-border-radius: 0 3px 3px 0; 245 267 border-radius: 0 3px 3px 0; 246 268 width: 150px; 247 269 } 248 249 .customize-section .hex-color-example {250 border: 1px solid #dfdfdf;251 -webkit-border-radius: 3px;252 border-radius: 3px;253 padding: 3px 14px;254 background-color: #ef45da255 } -
trunk/wp-includes/js/customize-controls.dev.js
r20106 r20120 127 127 return; 128 128 129 var previewer,130 controls = $('[name^="' + api.settings.prefix + '"]');129 var controls = $('[name^="' + api.settings.prefix + '"]'), 130 previewer, pickers, validateColor; 131 131 132 132 // Initialize Previewer … … 161 161 }); 162 162 163 // Set up color pickers 164 pickers = $('.color-picker'); 165 validateColor = function( to ) { 166 return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null; 167 }; 168 169 $( '.farbtastic-placeholder', pickers ).each( function() { 170 var picker = $(this), 171 text = new api.Element( picker.siblings('input') ), 172 parent = picker.parent(), 173 toggle = parent.siblings('a'), 174 value = api( parent.siblings('input').prop('name').replace( api.settings.prefix, '' ) ), 175 farb; 176 177 value.validate = validateColor; 178 text.link( value ); 179 value.link( text ); 180 181 farb = $.farbtastic( this, function( color ) { 182 value.set( color.replace( '#', '' ) ); 183 }); 184 185 value.bind( function( color ) { 186 color = '#' + color; 187 toggle.css( 'background', color ); 188 farb.setColor( color ); 189 }); 190 }); 191 192 $('.color-picker a').click( function(e) { 193 $(this).siblings('div').toggle(); 194 }); 195 163 196 // Fetch prefixed settings. 164 197 $('[name^="' + api.settings.prefix + '"]').each( function() {
Note: See TracChangeset
for help on using the changeset viewer.