【TypeScript/JavaScript】ColorPickerを実装する

 参考URLにあるColorPickerの実装を試してみました。

--------------------------------------------------------------

Microsoft Office 2010のような色選択コントロールを実装します。

【実装コード】
１、jQuery (v1.7 or greater), jQuery UI (v1.8 or greater)をダウンロードして、実装する
HTMLにコード追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

２、使うCSSを記述HTMLにコード追加

 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" />
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />


３、inputタブに、colorpickerの実装
HTMLにコード追加
<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

<script type="text/javascript">
   $(document).ready(function() {
       $("#mycolor").colorpicker();
   });
</script>


４、オプション設定
(1) 初期色設定
$("#mycolor").colorpicker({
    color: "#ffffff"
});
(2) ColorPickerのパレットデフォルト表示
$("#mycolor").colorpicker({
    defaultPalette: 'web'
});



(3) プレート内で色クリック及びマウスオーバー時の情報を下段に表示しない
$("#mycolor").colorpicker({
    displayIndicator: false
});

(4) ボタン非表示
$("#mycolor").colorpicker({
    hideButton: true
});

(5) パレットはボタンのみで表示
このオプションをしないと、inputのfocusを受けた時にパレット表示される。
デフォルトは、inputフォーカス時とボタンクリック時に表示されます。
$('#mycolor').colorpicker({showOn:'button'});

(6) パレット内表示文字変更
$("#mycolor").colorpicker({
   strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});
(7) パレットに透明色("#0000ffff")選択可能にする
$("#mycolor").colorpicker({
    transparentColor: true
});

５、イベント処理
(1) 色選択時
$("#mycolor").on("change.color", function(event, color){
    $("#title").attr("style", "background-color:" + color);
})

(2) パレット内のカラーボックスマウスオーバー時
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').attr("style", "background-color:" + color);
})

６、メソッド
(1) 色クリア
$("#mycolor").colorpicker("clear");

(2) グレーアウト（パレット表示できないようにする）
$('#mycolor').colorpicker("disable");
反対(パレット表示可能）の場合
$("#mycolor").colorpicker("enable");

(3) パレットの選択色設定・取得
var color = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");

(4) パレット表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("showPalette");

(5) パレット非表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("hidePalette");


７、カラーパレットテーマ（デザイン色）変更
 jQuery UI widgetと同じテーマで変更できます
独自のテーマ作成もきます
http://jqueryui.com/themeroller/#!themeGallery=undefined

<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
の"ui-lightness"を変更します。

またはプログラム内で行う場合は、以下のような感じで行います。
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+ theme +'/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');


８、実装例

    <div class="demoPanel" style="width:130px">
        <input id="cpButton" value="#92cddc" />
    </div>
    <script type="text/javascript">
        $('#cpButton').colorpicker({ showOn: 'button' });

        $("#cpButton").colorpicker({
            strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
        });
        $("#cpButton").colorpicker({
            displayIndicator: false
        });
        $("#cpButton").colorpicker({
            color: "#ffffff"
        });
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');
    </script>

９、実装例をTypeScriptで実装
JavaScriptファイル(test.js)を作成して、8で記載したコードを追加する
function SetColorPicker() {
    $('#cpButton').colorpicker({ showOn: 'button' });
    $("#cpButton").colorpicker({
        strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
    });
    $("#cpButton").colorpicker({
        displayIndicator: false
    });
    $("#cpButton").colorpicker({
        color: "#ffffff"
    });
    var theme = "ui-darkness";
    $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
    $('.css').removeClass('sel');
    $(this).addClass('sel');
}

TypeScriptファイル(app.ts)で以下のコードを追加する 。
（declare宣言（アンビエント）で、JavaScriptで定義した関数を宣言する）
 declare function SetColorPicker();
$(document.body).ready(function () {
    SetColorPicker();
}


【参考URL】
http://www.codeproject.com/Articles/452401/ColorPicker-a-jQuery-UI-Widget