シンプルなカラーピッカーを作ってみた。

シンプルなカラーピッカーを作ってみました。
→サンプルはこちら。

四角をクリックすると色選択UIがポップアップします。
色にカーソルをあわせて、クリックで選択。

ソースは以下。

/**
 * カラーピッカー
 * @param elementId ピッカーを表示する要素のID
 * @param color ピッカーの初期値 例) #FFFFFF
 */
ColorPicker = function(elementId, color) {
  this.elementId = elementId;
  this.color = color;
  this.init();
}
ColorPicker.prototype = {
  init: function() {
    var self = this;
    var top = "<table id='picker_table_" + this.elementId +  "' class='picker' cellpading=0 cellspacing=0><tr>";
    var bottom = "";
    var current = top;
    var list = ["00","22","44","66","88","AA","CC","EE"];
    for ( var g=0;g<list.length;g++  ) {
      for ( var r=0;r<list.length;r++  ) {
        for ( var b=0;b<list.length;b++  ) {
          var c = list[r] + list[g] +list[b];
          str = '<td><div class="block" style="background-color:#' + c + ';border:1px solid #' + c + ';"></div></td>'
          if ( r <= 3 ) {
            top += str;
          } else {
            bottom+=str;
          }
        }
        if (r ==3) { top += "</tr><tr>";  }
      }
      bottom += "</tr><tr>";
    }
    var body = top + bottom + "</tr></table>";
    var el = document.getElementById( this.elementId );
    el.innerHTML = '<div class="picker">' +
      ' <div class="picker_thumb" id="picker_thumb_' + this.elementId + '"></div>'+
      ' <div class="picker_picker" id="picker_picker_' + this.elementId + '">' + body + '</div>'+
      '</div>';

    var thumb = document.getElementById( "picker_thumb_" + this.elementId );
    thumb.style.backgroundColor = this.color;
    thumb.onclick = function( ev ) {
      self.show();
      return false;
    }

    var blocks = document.getElementById("picker_table_" + this.elementId ).getElementsByTagName( "div" );
    var enter = function() {
      thumb.style.backgroundColor = this.style.backgroundColor;
      this.style.border = "1px solid #FFFFFF ";
    };
    var out = function() {
      thumb.style.backgroundColor = self.color;
      this.style.border = "1px solid " + this.style.backgroundColor;
    };
    var click = function() {
      thumb.style.backgroundColor = this.style.backgroundColor;
      self.color =  this.style.backgroundColor;
    }
    for ( var i=0,n=blocks.length;i<n;i++ ) {
      if ( blocks[i] == el  ) { continue; }
      YAHOO.util.Event.addListener(blocks[i], "mouseover", enter);
      YAHOO.util.Event.addListener(blocks[i], "mouseout", out);
      YAHOO.util.Event.addListener(blocks[i], "click", click);
    }
    YAHOO.util.Event.addListener(document.body, "click", function( ev ) {
      if ( self.visible &&  YAHOO.util.Event.getTarget( ev ) != thumb ) {
        self.hide();
      }
    } );
  },
  /** 色選択パネルを表示*/
  show: function() {
    document.getElementById("picker_picker_" + this.elementId).style.visibility = "visible";
    this.visible = true;
  },
  /** 色選択パネルを非表示*/
  hide: function() {
    document.getElementById("picker_picker_" + this.elementId).style.visibility = "hidden";
    this.visible = false;
  },
  /** 選択された色を「#FFFFFF」形式で取得する。*/
  get : function() {
    return this.convert(this.color);
  },
  convert: function(str) {
    if ( str.match(/^\#[0-9A-Fa-f]{6}$/) ) {
      return str;
    } else if ( str.match(/^\#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/) ) {
      return "#" + RegExp.$1+RegExp.$1+RegExp.$2+RegExp.$2+RegExp.$3+RegExp.$3;
    } else if (str.match(/^rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)$/)) {
      return "#" + this.toHex(RegExp.$1)+this.toHex(RegExp.$2)+this.toHex(RegExp.$3);
    } else {
      throw "illegal color format. color=" + str;
    }
  },
  toHex: function( str ) {
    var h = Number(str).toString(16);
    return h.length == 1 ? "0"+h : h;
  }
}

CSS。

div.picker {
  border:1px solid #BBBBBB;
}
/**サムネイル*/
div.picker_thumb {
  font-size: 1px;
  width:12px;
  height:12px;
  border:1px solid #FFFFFF;
}
/**色選択パネル*/
div.picker_picker {
  border: 1px solid #BBBBBB;
  background-color: #E2E2E2;
  padding:10px;
  visibility: hidden;
  position: absolute;
  z-index: 100;
}
table.picker {
  font-size: 1px;
  border: 1px solid #FFFFFF;
}
table.picker div.block {
  width: 8px;
  height: 8px;
}

使い方

1.Yahoo User Interface Libraryに依存しているのでそれを追加して、

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js" ></script>

2.↑のソースとCSSを追加。
3.ピッカーを表示するDIV要素を用意して、

<div id="foo"></div>

4.「new ColorPicker()」でOK。

new ColorPicker( "foo", "#444488" ); // 第2引数は初期選択色。

Yahoo User Interface Libraryにもカラーピッカーはあるのですが、クリックしたらUIを出すのがうまいこといかず、かっとなって作ってみました。とりあえずはそんなにリッチな機能必要ないしね。