Permalink
Browse files

Added colour assist/picker function

  • Loading branch information...
1 parent 1bc4995 commit 8b7b1e2b83597af712d117345abb63a0932ed269 @WPsites committed Jun 2, 2012
Showing with 300 additions and 10 deletions.
  1. +30 −6 WPide.php
  2. BIN images/color-wheel.png
  3. +209 −0 js/ImageColorPicker.js
  4. +14 −2 js/load-editor.js
  5. +47 −2 wpide.css
View
@@ -134,7 +134,9 @@ public static function add_admin_js(){
// load jquery ui
wp_enqueue_script('jquery-ui', plugins_url("js/jquery-ui-1.8.20.custom.min.js", __FILE__ ), array('jquery'), '1.8.20');
-
+ // load color picker
+ wp_enqueue_script('ImageColorPicker', plugins_url("js/ImageColorPicker.js", __FILE__ ), array('jquery'), '1.8.20');
+
}
@@ -385,7 +387,7 @@ public static function wpide_save_image() {
public static function wpide_startup_check() {
global $wp_filesystem, $wp_version;
- echo "\n\n\n\nWPIDE STARUP CHECKS \n";
+ echo "\n\n\n\nWPIDE STARTUP CHECKS \n";
echo "___________________ \n\n";
//WordPress version
@@ -584,9 +586,20 @@ function the_filetree() {
// Handler for .ready() called.
the_filetree() ;
-
-
-
+ //inialise the color assist
+ $("#wpide_color_assist img").ImageColorPicker({
+ afterColorSelected: function(event, color){
+ jQuery("#wpide_color_assist_input").val(color);
+ }
+ });
+ $("#wpide_color_assist").hide(); //hide it until it's needed
+
+ $("#wpide_color_assist_send").click(function(e){
+ e.preventDefault();
+ editor.insert( jQuery("#wpide_color_assist_input").val().replace('#', '') );
+
+ $("#wpide_color_assist").hide(); //hide it until it's needed again
+ });
});
@@ -604,7 +617,18 @@ function the_filetree() {
<div id="side-info-column" class="inner-sidebar">
- <div id="wpide_info"><div id="wpide_info_content"></div> </div>
+ <div id="wpide_info">
+ <div id="wpide_info_content"></div>
+ </div>
+ <br style="clear:both;" />
+ <div id="wpide_color_assist">
+ <h3>Colour Assist</h3>
+ <img src='<?php echo plugins_url("images/color-wheel.png", __FILE__ ); ?>' />
+ <input type="button" id="wpide_color_assist_send" value="&lt; Sent to editor" />
+ <input type="text" id="wpide_color_assist_input" name="wpide_color_assist_input" value="" />
+ </div>
+
+
<div id="submitdiv" class="postbox ">
<h3 class="hndle"><span>Files</span></h3>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,209 @@
+/*!
+* jQuery ImageColorPicker Plugin v0.2
+* http://github.com/Skarabaeus/ImageColorPicker
+*
+* Copyright 2010, Stefan Siebel
+* Licensed under the MIT license.
+* http://github.com/Skarabaeus/ImageColorPicker/MIT-LICENSE.txt
+*
+* Released under the MIT
+*
+* Date: Tue May 17 11:20:16 2011 -0700
+*/
+(function(){
+var uiImageColorPicker = function(){
+
+ var _d2h = function(d) {
+ var result;
+ if (! isNaN( parseInt(d) ) ) {
+ result = parseInt(d).toString(16);
+ } else {
+ result = d;
+ }
+
+ if (result.length === 1) {
+ result = "0" + result;
+ }
+ return result;
+ };
+
+ var _h2d = function(h) {
+ return parseInt(h,16);
+ };
+
+ var _createImageColorPicker = function(widget) {
+ // store 2D context in widget for later access
+ widget.ctx = null;
+
+ // rgb
+ widget.color = [0, 0, 0];
+
+ // create additional DOM elements.
+ widget.$canvas = jQuery('<canvas class="ImageColorPickerCanvas"></canvas>');
+
+ // add them to the DOM
+ widget.element.wrap('<div class="ImageColorPickerWrapper"></div>');
+ widget.$wrapper = widget.element.parent();
+ widget.$wrapper.append(widget.$canvas);
+
+ if (typeof(widget.$canvas.get(0).getContext) === 'function') { // FF, Chrome, ...
+ widget.ctx = widget.$canvas.get(0).getContext('2d');
+
+ // this does not work yet!
+ } else {
+ widget.destroy();
+ if (console) {
+ console.log("ImageColor Picker: Can't get canvas context. Use "
+ + "Firefox, Chrome or include excanvas to your project.");
+ }
+
+ }
+
+ // draw the image in the canvas
+ var img = new Image();
+ img.src = widget.element.attr("src");
+ widget.$canvas.attr("width", img.width);
+ widget.$canvas.attr("height", img.height);
+ widget.ctx.drawImage(img, 0, 0);
+
+ // get the image data.
+ try {
+ try {
+ widget.imageData = widget.ctx.getImageData(0, 0, img.width, img.height);
+ } catch (e1) {
+ netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
+ widget.imageData = widget.ctx.getImageData(0, 0, img.width, img.height);
+ }
+ } catch (e2) {
+ widget.destroy();
+ if (console) {
+ console.log("ImageColor Picker: Unable to access image data. "
+ + "This could be either due "
+ + "to the browser you are using (IE doesn't work) or image and script "
+ + "are saved on different servers or you run the script locally. ");
+ }
+ }
+
+ // hide the original image
+ widget.element.hide();
+
+ // for usage in events
+ var that = widget;
+
+ widget.$canvas.bind("mousemove", function(e){
+ var point = imageCoordinates( that, e.pageX, e.pageY );
+ var color = lookupColor( that.imageData, point );
+
+ updateCurrentColor( that, color.red, color.green, color.blue );
+ });
+
+ widget.$canvas.bind("click", function(e){
+ var point = imageCoordinates( that, e.pageX, e.pageY );
+ var color = lookupColor( that.imageData, point );
+
+ updateSelectedColor( that, color.red, color.green, color.blue );
+ that._trigger("afterColorSelected", 0, that.selectedColor());
+ });
+
+ widget.$canvas.bind("mouseleave", function(e){
+ updateCurrentColor(that, 255, 255, 255);
+ });
+
+ // hope that helps to prevent memory leaks
+ jQuery(window).unload(function(e){
+ that.destroy();
+ });
+ };
+
+ // for pageX and pageY, determine image coordinates using offset
+ var imageCoordinates = function( widget, pageX, pageY ) {
+ var offset = widget.$canvas.offset();
+
+ return { x: Math.round( pageX - offset.left ),
+ y: Math.round( pageY - offset.top ) };
+ }
+
+ // lookup color values for point [x,y] location in image
+ var lookupColor = function( imageData, point) {
+ var pixel = ((point.y * imageData.width) + point.x) * 4;
+
+ return { red: imageData.data[pixel],
+ green: imageData.data[(pixel + 1)],
+ blue: imageData.data[(pixel + 2)] }
+
+ }
+
+ var updateCurrentColor = function(widget, red, green, blue) {
+ var c = widget.ctx;
+ var canvasWidth = widget.$canvas.attr("width");
+ var canvasHeight = widget.$canvas.attr("height");
+
+ // draw current Color
+ c.fillStyle = "rgb(" + red + "," + green + "," + blue + ")";
+ c.fillRect (canvasWidth - 62, canvasHeight - 32, 30, 30);
+
+ // draw border
+ c.lineWidth = "3"
+ c.lineJoin = "round";
+ c.strokeRect (canvasWidth - 62, canvasHeight - 32, 30, 30);
+ }
+
+ var updateSelectedColor = function(widget, red, green, blue) {
+ var c = widget.ctx;
+ var canvasWidth = widget.$canvas.attr("width");
+ var canvasHeight = widget.$canvas.attr("height");
+
+ // draw current Color
+ c.fillStyle = "rgb(" + red + "," + green + "," + blue + ")";
+ c.fillRect (canvasWidth - 32, canvasHeight - 32, 30, 30);
+
+ // draw border
+ c.lineWidth = "3"
+ c.lineJoin = "round";
+ c.strokeRect (canvasWidth - 32, canvasHeight - 32, 30, 30);
+
+ // set new selected color
+ var newColor = [red, green, blue];
+ widget.color = newColor;
+ }
+
+ return {
+ // default options
+ options: {
+
+ },
+
+ _create: function() {
+ if (this.element.get(0).tagName.toLowerCase() === 'img') {
+ if (this.element.get(0).complete) {
+ _createImageColorPicker(this);
+ } else {
+ this.element.bind('load', { that: this }, function(e){
+ var that = e.data.that;
+ _createImageColorPicker(that);
+ });
+ }
+ }
+ },
+
+ destroy: function() {
+ // default destroy
+ jQuery.Widget.prototype.destroy.apply(this, arguments);
+
+ // remove possible large array with pixel data
+ this.imageData = null;
+
+ // remove additional elements
+ this.$canvas.remove();
+ this.element.unwrap();
+ this.element.show();
+ },
+
+ selectedColor: function() {
+ return "#" + _d2h(this.color[0]) + _d2h(this.color[1]) + _d2h(this.color[2]);
+ }
+
+ };
+}();
+ jQuery.widget("ui.ImageColorPicker", uiImageColorPicker);
+})();
View
@@ -312,6 +312,16 @@ function wpide_close_autocomplete(){
//jQuery("#wpide_info_content").html("");
}
+function selectionChanged(e) {
+ var selected_text = editor.getSession().doc.getTextRange(editor.getSelectionRange());
+
+ //check for hex colour match
+ if ( selected_text.match('^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$') != null ){
+
+ jQuery("#wpide_color_assist").show();
+ }
+}
+
function wpide_function_help() {
//mouse over
@@ -471,6 +481,8 @@ function wpide_set_file_contents(file, callback_func){
editor.getSession().on('change', onSessionChange);
+ editor.getSession().selection.on('changeSelection', selectionChanged);
+
editor.resize();
editor.focus();
//make a note of current editor
@@ -636,7 +648,7 @@ jQuery(document).ready(function($) {
//show command help panel for this command
wpide_function_help();
- console.log("handler is visible");
+ //console.log("handler is visible");
}else if( document.getElementById('ac').style.display === 'block' ) {
var select=document.getElementById('ac');
@@ -645,7 +657,7 @@ jQuery(document).ready(function($) {
} else {
select.selectedIndex = select.selectedIndex-1;
}
- console.log("ac is visible");
+ //console.log("ac is visible");
} else {
var range = editor.getSelectionRange();
editor.clearSelection();
View
@@ -224,7 +224,52 @@
#submitdiv.postbox{
min-width:220px;
}
-
-
+
+/* color assist */
+
+#wpide_color_assist{
+ width:100%;
+ background-color: whiteSmoke;
+ margin:auto;
+ border:1px solid #ccc;
+ overflow: hidden;
+ padding-right:2px;
+ margin-left:-2px;
+}
+#wpide_color_assist img, #wpide_color_assist canvas{
+ margin:auto;
+ display:block;
+}
+#wpide_color_assist input{
+ float:left;
+ width:100px;
+ margin:5px;
+}
+
+#wpide_color_assist h3{
+ background-color: #F1F1F1;
+ background-image: -ms-linear-gradient(top,#F9F9F9,#ECECEC);
+ background-image: -moz-linear-gradient(top,#F9F9F9,#ECECEC);
+ background-image: -o-linear-gradient(top,#F9F9F9,#ECECEC);
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#ECECEC));
+ background-image: -webkit-linear-gradient(top,#F9F9F9,#ECECEC);
+ background-image: linear-gradient(top,#F9F9F9,#ECECEC);
+
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.currentColor, .selectedColor {
+ border: 1px solid #000;
+ background-color: #fff;
+ width:30px;
+ height:30px;
+}
+
+.ImageColorPickerCanvas {
+ cursor:crosshair;
+}

0 comments on commit 8b7b1e2

Please sign in to comment.