Color Picker Control: Example of Color Picker Built in a Dialog via JavaScript
YAHOO.widget.ColorPickerを、YAHOO.widget.Dialogをコンテナとして入れるExample。
ColorPickerは、先のButtonのところで出てきた（「Button Control: Color Picker Button」を参照）が、ボタンに仕込んだり、今回のようにDialogに仕込んだりするのが普通だろう（CalendarPickerも同様だと思う）。
ボタンに仕込んだ際には、YUI.widget.Buttonが、YUI.widget.Overlay（か、その子孫の）インスタンスをmenu属性として持てることを利用して、コンテナを作り、そこへColorPickerを入れるという戦略だった。
今回のサンプルでは、ColorPickerをインスタンス化する際に、コンテナとしてYUI.widget.Panel（か、その子孫の）インスタンスを指定できることを利用して、DialogをレンダリングするイベントでColorPickerを忍び込ませる、という戦略となっている。
画面は、サンプルでColorPickerを開き、青系の色を選択したときの画面である。
このコントロール画面のうち、以下の4項目は画面の表示項目を変更するボタンで、これはColorPickerの属性値を切り替えることで実現される。
| Show/hide HSV fields | HSV表現を表示する（初期値は非表示） |
| Show/hide HEX field | 6桁のRGBのHexa表現を表示する（初期値は表示） |
| Show/hide RGB field | RGB表現を表示する。（初期値は表示） |
| Show/hide HEX summary info | RGB表現の右脇にHexa（2桁）を表示する（初期値は非表示） |
Dialogボックスであるので、Connection Managerを経由して、サーバーにSubmitをすることが前提となっている（「Container Family: Dialog Quickstart Example」を参照）。
サンプリングでは、この「Container Family: Dialog Quickstart Example」で使ったPHPプログラム（添付のソースで、"ajax_yui_container_dialog_quickstart.php"となっている）をつかった。
上の画面をSubmitしたときの画面が以下。
POSTした属性名と値がリスト化されて戻ってくるようになっている。
また、YUIのExampleでは、Loggerが使われることになっているが、画面中に追記していくこととした。
以下にJavascriptを含むHTMLの全文を示す。
YUIのExampleが（珍しく）モジュール・パターンできれいに書かれているので、コードの変更は（上記の変更を除き）注記の訳と追記をする程度に留めた。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> body { margin:0; padding:0; } </style> <link rel="stylesheet" type="text/css" href="scripts/yui/slider/assets/skins/sam/slider.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/colorpicker/assets/skins/sam/colorpicker.css" /> <script type="text/javascript" src="scripts/yui/utilities/utilities.js"></script> <script type="text/javascript" src="scripts/yui/container/container-min.js"></script> <script type="text/javascript" src="scripts/yui/slider/slider-min.js"></script> <script type="text/javascript" src="scripts/yui/colorpicker/colorpicker-min.js"></script> <style type="text/css" id="defaultstyle"> #container { margin: 2px; padding: 3px; width: 400px; height: auto; border:1px dashed #999999; } #resp { /* font-family:courier; */ margin:10px; padding:5px; border:1px solid #ccc; background:#fff; } #yui-picker-panel { visibility:hidden; } </style> <script type="text/javascript"> YAHOO.namespace("EGP") //YAHOO.example.colorpickerモジュールにオブジェクトを追加する。 YAHOO.EGP.inDialog = function() { //Aliasの定義 var Event=YAHOO.util.Event, Dom=YAHOO.util.Dom, lang=YAHOO.lang; return { init: function() { // Dialogをインスタンス化する。 this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", { width : "500px", close: true, fixedcenter : true, visible : false, constraintoviewport : true, buttons : [ { text:"Submit", handler:this.handleSubmit, isDefault:true }, { text:"Cancel", handler:this.handleCancel } ] }); // Dialogがレンダリングされるタイミングで、ColorPickerのインスタンスを作成してDialogのボディーにいれる。 this.dialog.renderEvent.subscribe(function() { // ColorPickerが作られてなければ、dialogをコンテナにして作成する。 if (!this.picker) { Dom.get('log').innerHTML+='<hr/>ColorPickerのインスタンス化が終了しました。<br/>'; this.picker = new YAHOO.widget.ColorPicker("yui-picker", { // containerはPanelとその子孫を指定できる（APIドキュメント） container: this.dialog, images: { PICKER_THUMB: "scripts/yui/colorpicker/assets/picker_thumb.png", HUE_THUMB: "scripts/yui/colorpicker/assets/hue_thumb.png" } //Here are some other configurations we could use for our Picker: //showcontrols: false, // default is true, false hides the entire set of controls //showhexcontrols: true, // default is false //showhsvcontrols: true // default is false }); //listen to rgbChange to be notified about new values this.picker.on("rgbChange", function(o) { Dom.get('log').innerHTML+='<hr/>RBGが変更されました。<br/>次はオブジェクトダンプ'+ lang.dump(o)+'<br/>'; }); } }); // DialogにValidationを持たせたければ書く。 this.dialog.validate = function() { return true; }; // Connection Managerのハンドラ this.dialog.callback = { success: this.handleSuccess, failure: this.handleFailure }; // 全てセットアップが終わったので、Dialogをレンダリングする。 this.dialog.render(); // We can wrap up initialization by wiring all of the buttons in our // button dashboard to selectively show and hide parts of the // Color Picker interface. Remember that "Event" here is an // alias for YAHOO.util.Event and "Event.on" is therfor a shortcut // for YAHOO.util.Event.onAvailable -- the standard Dom event attachment // method: // おのおののボタンにclickイベントのハンドラを仕込む。 Event.on("show", "click", this.dialog.show, this.dialog, true); Event.on("hide", "click", this.dialog.hide, this.dialog, true); Event.on("btnhsv", "click", function(e) { var p = this.picker; // set(a,b)はa属性をbにするという意味。YAHOO.util.AttributeProviderに由来。 // 下の書き方でtoggleボタンとなっている。 p.set(p.OPT.SHOW_HSV_CONTROLS, !p.get(p.OPT.SHOW_HSV_CONTROLS)); }, this.dialog, true); Event.on("btnhex", "click", function(e) { var p = this.picker; p.set(p.OPT.SHOW_HEX_CONTROLS, !p.get(p.OPT.SHOW_HEX_CONTROLS)); }, this.dialog, true); Event.on("btnrgb", "click", function(e) { var p = this.picker; p.set(p.OPT.SHOW_RGB_CONTROLS, !p.get(p.OPT.SHOW_RGB_CONTROLS)); }, this.dialog, true); Event.on("btnhexsummary", "click", function(e) { var p = this.picker; p.set(p.OPT.SHOW_HEX_SUMMARY, !p.get(p.OPT.SHOW_HEX_SUMMARY)); }, this.dialog, true); //initialization complete: Dom.get('log').innerHTML+='<hr/>初期処理が終了しました。<br/>'; }, //ダイアログでsubmitボタンが押されたときのハンドラ handleSubmit: function() { //ダイアログをsubmitする（POSTメソッドになる）。thisはDialogインスタンス。 this.submit(); Dom.get('log').innerHTML+='<hr/>Dialogがsubmitされました。<br/>'; }, //ダイアログでcancelボタンが押されたときのハンドラ handleCancel: function() { //thisはDialogインスタンス。Cancelメソッドが呼ばれるとDialogは自動的に消える。 this.cancel(); Dom.get('log').innerHTML+='<hr/>Dialogがcancelされました。<br/>'; }, //ダイアログをConnection Manager経由で、submitしたときのsuccessのハンドラ。 handleSuccess: function(o) { Dom.get('log').innerHTML+='<hr/>Connection Managerの処理が正常に終了しました。<br/>'; var response = o.responseText; //On Yahoo servers, we may get some page stamping; //we can trim off the trailing comment: response = response.split("<!")[0]; response = "<strong>サーバーからのレスポンスは次の通りです:</strong> " + response; document.getElementById("resp").innerHTML = response; }, //ダイアログをConnection Manager経由で、submitしたときのsuccessのハンドラ。 handleFailure: function(o) { Dom.get('log').innerHTML+='<hr/>Connection Managerの処理が失敗しました。<br/>'; } }; }(); YAHOO.util.Event.onDOMReady( YAHOO.EGP.inDialog.init, YAHOO.EGP.inDialog, true ); </script> </HEAD> <BODY class="yui-skin-sam"> <div id="container"> <p> ColorPickerをDialogに埋め込むサンプルです。 </p> <div> <button id="show">Show Color Picker</button> <button id="hide">Hide Color Picker</button> <button id="btnhsv">Show/hide HSV fields</button> <button id="btnhex">Show/hide HEX field</button> <button id="btnrgb">Show/hide RGB field</button> <button id="btnhexsummary">Show/hide HEX summary info</button> </div> <!--begin Dialog markup in standard module format--> <div id="yui-picker-panel" class="yui-picker-panel"> <div class="hd">色を選んでください。:</div> <div class="bd"> <form name="yui-picker-form" id="yui-picker-form" method="post" action="ajax_yui_container_dialog_quickstart.php"> <div class="yui-picker" id="yui-picker"></div> </form> </div> <div class="ft"></div> </div> <!--サーバーレスポンスの表示領域--> <div id="resp">サーバーからのレスポンスがここに表示されます。</div> <div id='log'></div> </div> </BODY> </HTML>
