tohokuaikiのチラシの裏

技術的ネタとか。

色を選択するカラーピッカーJavaScriptを探してcpick.jsを改造した

JavaScriptのカラーピッカーってありますよね。
単体で使えて、他のライブラリとも干渉しないのないかなーって探してこれ。

カラーピッカー.js - JavaScript ライブラリー - HTML5.JP

すごくいいんだけど、色を選択したときのコールバック関数が実行できないので、なんとももったいない。

とりあえず、1行加えて素のFunctionならいけるようにしてみた。

<div><input type="text" class="html5jp-cpick [coloring:true;callback:hogehoge]" /></div>
こんな感じで、classをcpickの指定方法にして

加えた1行は

proto._ok_clicked = function(e) {
	prevent_default(e);
	stop_propagation(e);
	this.nodes.target.value = this.nodes.tbox.value;
	if(this.p.coloring == true) {
		this._coloring_trigger();
	}
	this.hide();
	this._focus_to_target();
+    if (typeof(eval(this.p.callback)) == "function") eval(this.p.callback)(this);
};

グローバル関数hogehoge()を用意しておけば、OKボタンを押されたとき、function hogehoge()が実行されるということ。

引数には、cpickオブジェクト自体が渡されるから、

function hogehoge(obj){
    console.log(obj.nodes.cbox, obj.nodes.tbox, obj.nodes.target, obj.p); 
}

とかで十分何とかなるはず。