(jQuery) addInputAreaとcpick.jsを併用する

jquery.addInputAreaと、futomiさんが公開しているcpick.jsを併用できるように、cpick.jsを少し改変しました。


【参考】
カラーピッカー.js - JavaScript ライブラリー - HTML5.JP
http://www.html5.jp/library/cpick.html



(cpick.js --追加部分のみ)
(function ($) {
//**************************************************
//任意のタイミングでプラグインを適用できるように
//**************************************************
$.fn.futomiColorPicker = function() {
//return jQuery object to continue method chain.
return this.each(function() {
add_futomiColorPicker(this);
});
};
//**************************************************
//引数の要素に対してのみ、カラーピッカーを設定する
//**************************************************
function add_futomiColorPicker(elements) {
elm = $(elements).get(0);

// parse parameters in the class attribute
var p = {};
var m = elm.className.match(/\[([^\]]+)\]/);
if(m && m[1]) {
var parts = m[1].split(";");
for( var j=0; j<parts.length; j++ ) {
var pair = parts[j];
if(pair == "") { continue; }
var m2 = pair.match(/^([a-zA-Z0-9\-\_]+)\:([a-zA-Z0-9\-\_\#\(\)\,\.]+)$/);
if( ! m2 ) { continue; }
var k = m2[1];
var v = m2[2];
p[k] = v;
}
}
// determin the target element
var target = elm;
if( typeof(p.target) != "undefined" ) {
var el = document.getElementById(p.target);
if( ! el ) { return; }
target = el;
}
// prepare a color cpicker
_prepare_cpick(p, elm, target);

if( document.uniqueID ) {
if (!document.namespaces["v"]) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var style_sheet = document.createStyleSheet();
style_sheet.cssText = "v\\:rect, v\\:fill { behavior: url(#default#VML); display:inline-block; }";
}
}
}

...(省略)...

})(jQuery);



(HTML)
<ol id="list1">
<li class="list1_var">
<input type="text" id="list1_color_0" name="list1_color_0" class="html5jp-cpick">
<input type="text" size="40" name="list1_0" id="sss_0">
<button class="list1_del">Delete</button>
</li>
</ol>

(jQuery)
//addInputAreaを適用する通常の設定
$('#list1').addInputArea();

//追加ボタンが押された際、新たにカラーピッカーを適用する
$('.list1_add').click(function() {
var copied = $('.list1_var:last').find('.html5jp-cpick');
$(copied).futomiColorPicker();
});