Ticket #5591: farbtastic.2.diff
File farbtastic.2.diff, 20.4 KB (added by , 16 years ago) |
---|
-
wp-admin/css/farbtastic.css
1 .farbtastic { 2 position: relative; 3 } 4 .farbtastic * { 5 position: absolute; 6 cursor: crosshair; 7 } 8 .farbtastic, .farbtastic .wheel { 9 width: 195px; 10 height: 195px; 11 } 12 .farbtastic .color, .farbtastic .overlay { 13 top: 47px; 14 left: 47px; 15 width: 101px; 16 height: 101px; 17 } 18 .farbtastic .wheel { 19 background: url(../images/wheel.png) no-repeat; 20 width: 195px; 21 height: 195px; 22 } 23 .farbtastic .overlay { 24 background: url(../images/mask.png) no-repeat; 25 } 26 .farbtastic .marker { 27 width: 17px; 28 height: 17px; 29 margin: -8px 0 0 -8px; 30 overflow: hidden; 31 background: url(../images/marker.png) no-repeat; 32 } 33 No newline at end of file -
wp-admin/custom-header.php
44 44 $page = add_theme_page(__('Custom Image Header'), __('Custom Image Header'), 'edit_themes', 'custom-header', array(&$this, 'admin_page')); 45 45 46 46 add_action("admin_print_scripts-$page", array(&$this, 'js_includes')); 47 add_action("admin_print_styles-$page", array(&$this, 'css_includes')); 47 48 add_action("admin_head-$page", array(&$this, 'take_action'), 50); 48 49 add_action("admin_head-$page", array(&$this, 'js'), 50); 49 50 add_action("admin_head-$page", $this->admin_header_callback, 51); … … 76 77 $step = $this->step(); 77 78 78 79 if ( 1 == $step ) 79 wp_enqueue_script(' colorpicker');80 wp_enqueue_script('farbtastic'); 80 81 elseif ( 2 == $step ) 81 82 wp_enqueue_script('cropper'); 82 83 } 83 84 84 85 /** 86 * Setup the enqueue for the CSS files 87 * 88 * @since 2.7 89 */ 90 function css_includes() { 91 $step = $this->step(); 92 93 if ( 1 == $step ) { 94 wp_enqueue_style('farbtastic'); 95 } 96 } 97 98 /** 85 99 * Execute custom header modification. 86 100 * 87 101 * @since unknown … … 123 137 */ 124 138 function js_1() { ?> 125 139 <script type="text/javascript"> 126 var cp = new ColorPicker(); 140 var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor']; 141 var farbtastic; 127 142 128 143 function pickColor(color) { 129 $('name').style.color = color;130 $('desc').style.color = color;131 $('textcolor').value = color;144 jQuery('#name').css('color', color); 145 jQuery('#desc').css('color', color); 146 farbtastic.setColor(color); 132 147 } 133 function PopupWindow_hidePopup(magicword) { 134 if ( magicword != 'prettyplease' ) 135 return false; 136 if (this.divName != null) { 137 if (this.use_gebi) { 138 document.getElementById(this.divName).style.visibility = "hidden"; 148 149 jQuery(document).ready(function() { 150 jQuery('#pickcolor').click(function() { 151 jQuery('#colorPickerDiv').show(); 152 }); 153 154 jQuery('#hidetext').click(function() { 155 toggle_text(); 156 }); 157 158 farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); }); 159 pickColor('#<?php echo HEADER_TEXTCOLOR; ?>'); 160 161 <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?> 162 toggle_text(); 163 <?php } ?> 164 }); 165 166 jQuery(document).mousedown(function(){ 167 // Make the picker disappear, since we're using it in an independant div 168 hide_picker(); 169 }); 170 171 function hide_picker(what) { 172 var update = false; 173 jQuery('#colorPickerDiv').each(function(){ 174 var id = jQuery(this).attr('id'); 175 if (id == what) { 176 return; 139 177 } 140 else if (this.use_css) { 141 document.all[this.divName].style.visibility = "hidden"; 178 var display = jQuery(this).css('display'); 179 if (display == 'block') { 180 jQuery(this).fadeOut(2); 142 181 } 143 else if (this.use_layers) { 144 document.layers[this.divName].visibility = "hidden"; 145 } 182 }); 183 } 184 185 function toggle_text(force) { 186 if(jQuery('#textcolor').val() == 'blank') { 187 //Show text 188 jQuery( buttons.toString() ).show(); 189 jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>'); 190 jQuery('#hidetext').val('<?php _e('Hide Text'); ?>'); 146 191 } 147 192 else { 148 if (this.popupWindow && !this.popupWindow.closed) {149 this.popupWindow.close();150 this.popupWindow = null;151 }193 //Hide text 194 jQuery( buttons.toString() ).hide(); 195 jQuery('#textcolor').val('blank'); 196 jQuery('#hidetext').val('<?php _e('Show Text'); ?>'); 152 197 } 153 return false;154 198 } 155 function colorSelect(t,p) {156 if ( cp.p == p && document.getElementById(cp.divName).style.visibility != "hidden" ) {157 cp.hidePopup('prettyplease');158 } else {159 cp.p = p;160 cp.select(t,p);161 }162 }163 function colorDefault() {164 pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');165 }166 199 167 function hide_text() {168 $('name').style.display = 'none';169 $('desc').style.display = 'none';170 $('pickcolor').style.display = 'none';171 $('defaultcolor').style.display = 'none';172 $('textcolor').value = 'blank';173 $('hidetext').value = '<?php _e('Show Text'); ?>';174 // $('hidetext').onclick = 'show_text()';175 Event.observe( $('hidetext'), 'click', show_text );176 }177 200 178 function show_text() {179 $('name').style.display = 'block';180 $('desc').style.display = 'block';181 $('pickcolor').style.display = 'inline';182 $('defaultcolor').style.display = 'inline';183 $('textcolor').value = '<?php echo HEADER_TEXTCOLOR; ?>';184 $('hidetext').value = '<?php _e('Hide Text'); ?>';185 Event.stopObserving( $('hidetext'), 'click', show_text );186 Event.observe( $('hidetext'), 'click', hide_text );187 }188 201 189 <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>190 Event.observe( window, 'load', hide_text );191 <?php } ?>192 193 202 </script> 194 203 <?php 195 204 } … … 202 211 function js_2() { ?> 203 212 <script type="text/javascript"> 204 213 function onEndCrop( coords, dimensions ) { 205 $( 'x1' ).value = coords.x1;206 $( 'y1' ).value = coords.y1;207 $( 'x2' ).value = coords.x2;208 $( 'y2' ).value = coords.y2;209 $( 'width' ).value = dimensions.width;210 $( 'height' ).value = dimensions.height;214 jQuery( '#x1' ).val(coords.x1); 215 jQuery( '#y1' ).val(coords.y1); 216 jQuery( '#x2' ).val(coords.x2); 217 jQuery( '#y2' ).val(coords.y2); 218 jQuery( '#width' ).val(dimensions.width); 219 jQuery( '#height' ).val(dimensions.height); 211 220 } 212 221 213 222 // with a supplied ratio 214 Event.observe( 215 window, 216 'load', 217 function() { 218 var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>; 219 var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>; 220 var ratio = xinit / yinit; 221 var ximg = $('upload').width; 222 var yimg = $('upload').height; 223 if ( yimg < yinit || ximg < xinit ) { 224 if ( ximg / yimg > ratio ) { 225 yinit = yimg; 226 xinit = yinit * ratio; 227 } else { 228 xinit = ximg; 229 yinit = xinit / ratio; 230 } 223 jQuery(document).ready(function() { 224 var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>; 225 var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>; 226 var ratio = xinit / yinit; 227 var ximg = $('upload').width; 228 var yimg = $('upload').height; 229 if ( yimg < yinit || ximg < xinit ) { 230 if ( ximg / yimg > ratio ) { 231 yinit = yimg; 232 xinit = yinit * ratio; 233 } else { 234 xinit = ximg; 235 yinit = xinit / ratio; 231 236 } 232 new Cropper.Img(233 'upload',234 {235 ratioDim: { x: xinit, y: yinit },236 displayOnInit: true,237 onEndCrop: onEndCrop238 }239 )240 237 } 241 ); 238 new Cropper.Img( 239 'upload', 240 { 241 ratioDim: { x: xinit, y: yinit }, 242 displayOnInit: true, 243 onEndCrop: onEndCrop 244 } 245 ) 246 }); 242 247 </script> 243 248 <?php 244 249 } … … 266 271 <?php if ( !defined( 'NO_HEADER_TEXT' ) ) { ?> 267 272 <form method="post" action="<?php echo admin_url('themes.php?page=custom-header&updated=true') ?>"> 268 273 <input type="button" value="<?php _e('Hide Text'); ?>" onclick="hide_text()" id="hidetext" /> 269 <input type="button" value="<?php _e('Select a Text Color'); ?>" onclick="colorSelect($('textcolor'), 'pickcolor')"id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" />274 <input type="button" value="<?php _e('Select a Text Color'); ?>" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" /> 270 275 <?php wp_nonce_field('custom-header') ?> 271 276 <input type="hidden" name="textcolor" id="textcolor" value="#<?php attribute_escape(header_textcolor()) ?>" /><input name="submit" type="submit" value="<?php _e('Save Changes'); ?>" /></form> 272 277 <?php } ?> 273 278 274 <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute; visibility:hidden;"> </div>279 <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div> 275 280 </div> 276 281 <div class="wrap"> 277 282 <h2><?php _e('Upload New Header Image'); ?></h2><p><?php _e('Here you can upload a custom header image to be shown at the top of your blog instead of the default one. On the next screen you will be able to crop the image.'); ?></p> -
wp-admin/js/farbtastic.js
Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: wp-admin\images\marker.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: wp-admin\images\mask.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: wp-admin\images\wheel.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream
1 // $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $ 2 // Farbtastic 1.2 3 4 var farbtastic_click = false; 5 6 jQuery.fn.farbtastic = function (callback) { 7 jQuery.farbtastic(this, callback); 8 return this; 9 }; 10 11 jQuery.farbtastic = function (container, callback) { 12 var container = jQuery(container).get(0); 13 return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback)); 14 } 15 16 jQuery._farbtastic = function (container, callback) { 17 // Store farbtastic object 18 var fb = this; 19 20 // Insert markup 21 jQuery(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>'); 22 var e = jQuery('.farbtastic', container); 23 fb.wheel = jQuery('.wheel', container).get(0); 24 // Dimensions 25 fb.radius = 84; 26 fb.square = 100; 27 fb.width = 194; 28 29 // Fix background PNGs in IE6 30 if (navigator.appVersion.match(/MSIE [0-6]\./)) { 31 jQuery('*', e).each(function () { 32 if (this.currentStyle.backgroundImage != 'none') { 33 var image = this.currentStyle.backgroundImage; 34 image = this.currentStyle.backgroundImage.substring(5, image.length - 2); 35 jQuery(this).css({ 36 'backgroundImage': 'none', 37 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" 38 }); 39 } 40 }); 41 } 42 43 /** 44 * Link to the given element(s) or callback. 45 */ 46 fb.linkTo = function (callback) { 47 // Unbind previous nodes 48 if (typeof fb.callback == 'object') { 49 jQuery(fb.callback).unbind('keyup', fb.updateValue); 50 } 51 52 // Reset color 53 fb.color = null; 54 55 // Bind callback or elements 56 if (typeof callback == 'function') { 57 fb.callback = callback; 58 } 59 else if (typeof callback == 'object' || typeof callback == 'string') { 60 fb.callback = jQuery(callback); 61 fb.callback.bind('keyup', fb.updateValue); 62 if (fb.callback.get(0).value) { 63 fb.setColor(fb.callback.get(0).value); 64 } 65 } 66 return this; 67 } 68 fb.updateValue = function (event) { 69 if (this.value && this.value != fb.color) { 70 fb.setColor(this.value); 71 } 72 } 73 74 /** 75 * Change color with HTML syntax #123456 76 */ 77 fb.setColor = function (color) { 78 var unpack = fb.unpack(color); 79 if (fb.color != color && unpack) { 80 fb.color = color; 81 fb.rgb = unpack; 82 fb.hsl = fb.RGBToHSL(fb.rgb); 83 fb.updateDisplay(); 84 } 85 return this; 86 } 87 88 /** 89 * Change color with HSL triplet [0..1, 0..1, 0..1] 90 */ 91 fb.setHSL = function (hsl) { 92 fb.hsl = hsl; 93 fb.rgb = fb.HSLToRGB(hsl); 94 fb.color = fb.pack(fb.rgb); 95 fb.updateDisplay(); 96 return this; 97 } 98 99 ///////////////////////////////////////////////////// 100 101 /** 102 * Retrieve the coordinates of the given event relative to the center 103 * of the widget. 104 */ 105 fb.widgetCoords = function (event) { 106 var x, y; 107 var el = event.target || event.srcElement; 108 var reference = fb.wheel; 109 110 if (typeof event.offsetX != 'undefined') { 111 // Use offset coordinates and find common offsetParent 112 var pos = { x: event.offsetX, y: event.offsetY }; 113 114 // Send the coordinates upwards through the offsetParent chain. 115 var e = el; 116 while (e) { 117 e.mouseX = pos.x; 118 e.mouseY = pos.y; 119 pos.x += e.offsetLeft; 120 pos.y += e.offsetTop; 121 e = e.offsetParent; 122 } 123 124 // Look for the coordinates starting from the wheel widget. 125 var e = reference; 126 var offset = { x: 0, y: 0 } 127 while (e) { 128 if (typeof e.mouseX != 'undefined') { 129 x = e.mouseX - offset.x; 130 y = e.mouseY - offset.y; 131 break; 132 } 133 offset.x += e.offsetLeft; 134 offset.y += e.offsetTop; 135 e = e.offsetParent; 136 } 137 138 // Reset stored coordinates 139 e = el; 140 while (e) { 141 e.mouseX = undefined; 142 e.mouseY = undefined; 143 e = e.offsetParent; 144 } 145 } 146 else { 147 // Use absolute coordinates 148 var pos = fb.absolutePosition(reference); 149 x = (event.pageX || 0*(event.clientX + jQuery('html').get(0).scrollLeft)) - pos.x; 150 y = (event.pageY || 0*(event.clientY + jQuery('html').get(0).scrollTop)) - pos.y; 151 } 152 // Subtract distance to middle 153 return { x: x - fb.width / 2, y: y - fb.width / 2 }; 154 } 155 156 /** 157 * Mousedown handler 158 */ 159 fb.mousedown = function (event) { 160 farbtastic_click = true; 161 // Capture mouse 162 if (!document.dragging) { 163 jQuery(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); 164 document.dragging = true; 165 } 166 167 // Check which area is being dragged 168 var pos = fb.widgetCoords(event); 169 fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; 170 171 // Process 172 fb.mousemove(event); 173 return false; 174 } 175 176 /** 177 * Mousemove handler 178 */ 179 fb.mousemove = function (event) { 180 // Get coordinates relative to color picker center 181 var pos = fb.widgetCoords(event); 182 183 // Set new HSL parameters 184 if (fb.circleDrag) { 185 var hue = Math.atan2(pos.x, -pos.y) / 6.28; 186 if (hue < 0) hue += 1; 187 fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]); 188 } 189 else { 190 var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); 191 var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); 192 fb.setHSL([fb.hsl[0], sat, lum]); 193 } 194 return false; 195 } 196 197 /** 198 * Mouseup handler 199 */ 200 fb.mouseup = function () { 201 // Uncapture mouse 202 farbtastic_click = false; 203 jQuery(document).unbind('mousemove', fb.mousemove); 204 jQuery(document).unbind('mouseup', fb.mouseup); 205 document.dragging = false; 206 } 207 208 /** 209 * Update the markers and styles 210 */ 211 fb.updateDisplay = function () { 212 // Markers 213 var angle = fb.hsl[0] * 6.28; 214 jQuery('.h-marker', e).css({ 215 left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', 216 top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' 217 }); 218 219 jQuery('.sl-marker', e).css({ 220 left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', 221 top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' 222 }); 223 224 // Saturation/Luminance gradient 225 jQuery('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); 226 227 // Linked elements or callback 228 if (typeof fb.callback == 'object') { 229 // Set background/foreground color 230 jQuery(fb.callback).css({ 231 backgroundColor: fb.color, 232 color: fb.hsl[2] > 0.5 ? '#000' : '#fff' 233 }); 234 235 // Change linked value 236 jQuery(fb.callback).each(function() { 237 if (this.value && this.value != fb.color) { 238 this.value = fb.color; 239 } 240 }); 241 } 242 else if (typeof fb.callback == 'function') { 243 fb.callback.call(fb, fb.color); 244 } 245 } 246 247 /** 248 * Get absolute position of element 249 */ 250 fb.absolutePosition = function (el) { 251 var r = { x: el.offsetLeft, y: el.offsetTop }; 252 // Resolve relative to offsetParent 253 if (el.offsetParent) { 254 var tmp = fb.absolutePosition(el.offsetParent); 255 r.x += tmp.x; 256 r.y += tmp.y; 257 } 258 return r; 259 }; 260 261 /* Various color utility functions */ 262 fb.pack = function (rgb) { 263 var r = Math.round(rgb[0] * 255); 264 var g = Math.round(rgb[1] * 255); 265 var b = Math.round(rgb[2] * 255); 266 return '#' + (r < 16 ? '0' : '') + r.toString(16) + 267 (g < 16 ? '0' : '') + g.toString(16) + 268 (b < 16 ? '0' : '') + b.toString(16); 269 } 270 271 fb.unpack = function (color) { 272 if (color.length == 7) { 273 return [parseInt('0x' + color.substring(1, 3)) / 255, 274 parseInt('0x' + color.substring(3, 5)) / 255, 275 parseInt('0x' + color.substring(5, 7)) / 255]; 276 } 277 else if (color.length == 4) { 278 return [parseInt('0x' + color.substring(1, 2)) / 15, 279 parseInt('0x' + color.substring(2, 3)) / 15, 280 parseInt('0x' + color.substring(3, 4)) / 15]; 281 } 282 } 283 284 fb.HSLToRGB = function (hsl) { 285 var m1, m2, r, g, b; 286 var h = hsl[0], s = hsl[1], l = hsl[2]; 287 m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; 288 m1 = l * 2 - m2; 289 return [this.hueToRGB(m1, m2, h+0.33333), 290 this.hueToRGB(m1, m2, h), 291 this.hueToRGB(m1, m2, h-0.33333)]; 292 } 293 294 fb.hueToRGB = function (m1, m2, h) { 295 h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); 296 if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; 297 if (h * 2 < 1) return m2; 298 if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; 299 return m1; 300 } 301 302 fb.RGBToHSL = function (rgb) { 303 var min, max, delta, h, s, l; 304 var r = rgb[0], g = rgb[1], b = rgb[2]; 305 min = Math.min(r, Math.min(g, b)); 306 max = Math.max(r, Math.max(g, b)); 307 delta = max - min; 308 l = (min + max) / 2; 309 s = 0; 310 if (l > 0 && l < 1) { 311 s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); 312 } 313 h = 0; 314 if (delta > 0) { 315 if (max == r && max != g) h += (g - b) / delta; 316 if (max == g && max != b) h += (2 + (b - r) / delta); 317 if (max == b && max != r) h += (4 + (r - g) / delta); 318 h /= 6; 319 } 320 return [h, s, l]; 321 } 322 323 // Install mousedown handler (the others are set on the document on-demand) 324 jQuery('*', e).mousedown(fb.mousedown); 325 326 // Init color 327 fb.setColor('#000000'); 328 329 // Set linked elements/callback 330 if (callback) { 331 fb.linkTo(callback); 332 } 333 } 334 No newline at end of file -
wp-includes/script-loader.php
211 211 'plugin_information' => __('Plugin Information:') 212 212 ) ); 213 213 214 $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' ); 214 215 } 215 216 } 216 217 … … 245 246 $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css', array(), '20080613' ); 246 247 $styles->add( 'login', '/wp-admin/css/login.css' ); 247 248 $styles->add( 'plugin-install', '/wp-admin/css/plugin-install.css' ); 249 $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' ); 248 250 249 251 foreach ( $rtl_styles as $rtl_style ) 250 252 $styles->add_data( $rtl_style, 'rtl', true );