miteruzo
/
kekec_bbs
1
0
Fork 0
Code Issues 4 Pull Requests 0 Releases 0 Wiki Activity
キケッツ掲示板のリポジトリです． https://bbs.kekec.wiki
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
21 Commits
3 Branches
16 MiB
 
 
 
 
 
Tree: 493bc71c94
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '493bc71c94'
${ noResults }
kekec_bbs/scripts/colour-pad.js

1291 lines
45 KiB
Raw Blame History 

  1. // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  2. //

  3. //  【 カラーパレットPOPアップ 】  http://www.cman.jp

  4. //

  5. //   商用,改変,再配布はすべて自由ですですが、動作保証はありません

  6. //

  7. // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  8. //    maintenance history

  9. //

  10. //    Ver  Date        contents

  11. //    1.0  2015/7/15   New

  12. // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  13. //

  14. //  使用方法

  15. //    htmlのタグに以下の設定をしてください

  16. //

  17. //   「  onclick="cmanCP_JS_open(this)" cmanCPat="rc_text:id001,下記URL参照"> 」

  18. //

  19. //

  20. //   【注意】

  21. //     引数やユーザ設定内容についてはノーチェックです

  22. //     解析しやすいようにコメントを多く入れています。

  23. //     JavaScriptのファイルサイズを削減する場合は、コメントやスペースを消してください。

  24. //

  25. //

  26. //   詳細は以下でご確認ください

  27. //    https://web-designer.cman.jp/javascript_ref/color/palette/

  28. //

  29. // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  30. 

  31. 

  32. var cmanCP_VAR = {};

  33. 

  34. // =========================================================================================

  35. //	カラーパレットの作成	

  36. // =========================================================================================

  37. function cmanCP_JS_open(argThis){

  38. 

  39. 	// カラーリスト一覧

  40. 	var wColorList		=[	'#ffffff','#cccccc','#a6a6a6','#7f7f7f','#595959','#333333','#000000',

  41. 					'#ff9999','#ff4d4d','#ff0000','#b30000','#660000',

  42. 					'#ffcc99','#ffa64d','#ff7f00','#b35900','#663300',

  43. 					'#ffff99','#ffff4d','#ffff00','#b3b300','#666600',

  44. 					'#ccff99','#a6ff4d','#7fff00','#59b300','#336600',

  45. 					'#99ff99','#4dff4d','#00ff00','#00b300','#006600',

  46. 					'#99ffcc','#4dffa6','#00ff7f','#00b359','#006633',

  47. 					'#99ffff','#4dffff','#00ffff','#00b3b3','#006666',

  48. 					'#99ccff','#4da6ff','#007fff','#0059b3','#003366',

  49. 					'#9999ff','#4d4dff','#0000ff','#0000b3','#000066',

  50. 					'#cc99ff','#a64dff','#7f00ff','#5900b3','#330066',

  51. 					'#ff99ff','#ff4dff','#ff00ff','#b300b3','#660066',

  52. 					'#ff99cc','#ff4da6','#ff007f','#b30059','#660033'

  53. 				];

  54. 

  55. 	cmanCP_VAR["popId"]	= 'cmanCP_POP';		// POP枠のID

  56. 

  57. 	var wRGB_List		= [ 'R', 'G', 'B' ];

  58. 	var wRGB_TitleJP	= [ '赤み', '緑み', '青み' ];

  59. 	var wRGB_TitleEn	= [ 'red', 'green', 'blue' ];

  60. 

  61. 	var wHSL_List		= [ 'H', 'S', 'L' ];

  62. 	var wHSL_TitleJP	= [ '色相', '彩度', '輝度' ];

  63. 	var wHSL_Max		= [ '359', '1', '1' ];

  64. 	var wHSL_Step		= [ '1', '0.001', '0.001' ];

  65. 

  66. 	var wA_TitleJP		= '不透明度';

  67. 

  68. 

  69. 	// ----- 属性取得 ------------------------------------------------------------

  70. 	var wAttr	= argThis.getAttribute("cmanCPat").split(",");

  71. 

  72. 	for(var i=0; i<wAttr.length; i++){

  73. 

  74. 		if(wAttr[i] != ""){

  75. 

  76. 			var wAttrItem = wAttr[i].split(":");

  77. 

  78. 			wAttrItem[0] = cmanCP_JS_zen_TO_han(wAttrItem[0]).toLowerCase();

  79. 			wAttrItem[1] = cmanCP_JS_zen_TO_han(wAttrItem[1]);

  80. 

  81. 			switch (wAttrItem[0]){

  82. 			case 'def_size'	:

  83. 			case 'def_color':

  84. 			case 'def_tab'	:

  85. 			case 'def_alpha':

  86. 			case 'rc_form'	:

  87. 			case 'rc_func'	:

  88. 				cmanCP_VAR[wAttrItem[0]] = wAttrItem[1];

  89. 				break;

  90. 

  91. 			case 'rc_text'	:

  92. 			case 'rc_bg'	:

  93. 				if(cmanCP_VAR[wAttrItem[0]] != ''){

  94. 					cmanCP_VAR[wAttrItem[0]] += ',' + wAttrItem[1];

  95. 				}else{

  96. 					cmanCP_VAR[wAttrItem[0]] = wAttrItem[1];

  97. 				}

  98. 				break;

  99. 			}

  100. 

  101. 		}

  102. 

  103. 	}

  104. 

  105. 

  106. 	// ----- CSS定義 ------------------------------------------------------------

  107. 	var wCss =	'<style type="text/css">';

  108. 	wCss	+=	'.cmanCP_CSS_ALL{' +

  109. 				'font-family:"Osaka?等幅","ＭＳ ゴシック","monospace";' +

  110. 				'font-size: 10pt;' +

  111. 				'color: #333;' +

  112. 				'padding: 0;' +

  113. 				'background-color: #fff;' +

  114. 				'border: 1px solid #666;' +

  115. 				'box-shadow: 10px 10px 10px rgba(0,0,0,0.4);' +

  116. 			'}';

  117. 	wCss	+=	'.cmanCP_CSS_CL{' +

  118. 				'cursor: pointer;' +

  119. 				'width: 19px;' +

  120. 				'height: 19px;' +

  121. 				'margin: 1px;' +

  122. 				'float: left; ' +

  123. 				'border: 1px solid #ccc;' +

  124. 			'}';

  125. 	wCss	+=	'.cmanCP_CSS_CL:hover{' +

  126. 				'box-shadow: none;' +

  127. 			'}';

  128. 	wCss	+=	'.cmanCP_CSS_select{' +

  129. 				'cursor: pointer;' +

  130. 				'box-shadow: 3px 3px 2px rgba(0,0,0,0.5);' +

  131. 			'}';

  132. 	wCss	+=	'.cmanCP_CSS_select:hover{' +

  133. 				'box-shadow: none;' +

  134. 			'}';

  135. 	wCss	+=	'.cmanCP_CSS_Tbl{' +

  136. 				'background-color: #fff;' +

  137. 				'border-collapse: collapse;' +

  138. 				'color: #333333;' +

  139. 			'}';

  140. 	wCss	+=	'.cmanCP_CSS_Tbl td{' +

  141. 				'border: 1px #999 solid;' +

  142. 				'padding: 8px 2px;' +

  143. 				'letter-spacing: 1px;' +

  144. 				'font-size:9pt;' +

  145. 				'text-align: center;' +

  146. 			'}';

  147. 	wCss	+=	'.cmanCP_CSS_Tab {' +

  148. 				'cursor: pointer;' +

  149. 				'float: left;' +

  150. 				'width: 88px;' +

  151. 				'font-weight:bold;' +

  152. 				'text-align: center;' +

  153. 				'padding-top: 5px;' +

  154. 				'padding-bottom: 5px;' +

  155. 				'border-left: 1px solid #999;' +

  156. 				'border-top: 1px solid #999;' +

  157. 				'border-right: 1px solid #999;' +

  158. 				'border-top-left-radius: 6px;' +

  159. 				'border-top-right-radius: 6px;' +

  160. 				'-webkit-border-top-left-radius: 6px;' +

  161. 				'-webkit-border-top-right-radius: 6px;' +

  162. 				'-moz-border-radius-topleft: 6px;' +

  163. 				'-moz-border-radius-topright: 6px;' +

  164. 			'}';

  165. 	wCss	+=	'.cmanCP_CSS_TabS {' +

  166. 				'color: #fff;' +

  167. 				'background-color: #999;' +

  168. 			'}';

  169. 	wCss	+=	'.cmanCP_CSS_TabN {' +

  170. 				'color: #666;' +

  171. 				'background-color: #ddd;' +

  172. 			'}';

  173. 	wCss	+=	'.cmanCP_CSS_TabN:hover {' +

  174. 				'color: #0063dc;' +

  175. 			'}';

  176. 	wCss	+=	'#'+cmanCP_VAR["popId"]+' input[type="text"],input[type="number"]{' +

  177. 				'width: 100%;' +

  178. 				'max-width: 75px;' +

  179. 				'height: 20px;' +

  180. 				'font-weight :bold;' +

  181. 				'color: #333333;' +

  182. 				'vertical-align: middle;' +

  183. 				'text-align: center;' +

  184. 				'letter-spacing: 1px;' +

  185. 				'ime-mode: disabled;' +

  186. 				'border: 1px #cccccc solid;' +

  187. 				'background-color: #EEFFFF;' +

  188. 				'text-align: center;' +

  189. 			'}';

  190. 	wCss	+=	'#'+cmanCP_VAR["popId"]+' input[type="range"]{' +

  191. 				'width: 96%;' +

  192. 				'height: 20px;' +

  193. 			'}';

  194. 	wCss	+=	'.cmanCP_CSS_range{' +

  195. 				'padding: 0;' +

  196. 			'}';

  197. 	wCss	+=	'.cmanCP_CSS_Gaid{' +

  198. 				'margin-left: auto;' +

  199. 				'margin-right: auto;' +

  200. 				'width: 96%;' +

  201. 				'height: 5px;' +

  202. 			'}';

  203. 	wCss	+=	'.cmanCP_CSS_GaidHSL{' +

  204. 				'float: left;' +

  205. 				'width: 5%;' +

  206. 				'height: 5px;' +

  207. 			'}';

  208. 	wCss	+=	'.cmanCP_CSS_sbg0{' +

  209. 				'background-color: #fff;' +

  210. 				'height: 12px;' +

  211. 			'}';

  212. 	wCss	+=	'.cmanCP_CSS_sbg1{' +

  213. 				'background-color: #ddd;' +

  214. 				'height: 12px;' +

  215. 			'}';

  216. 	wCss	+=	'</style>';

  217. 

  218. 

  219. 	// ----- HTML定義 ------------------------------------------------------------

  220. 	var wHtml =	'';

  221. 

  222. 	// ----- 表題 -----

  223. 	wHtml +=	'<div>' +

  224. 				'<div style="position: absolute; top:2px; left:2px;width: 18px;height: 18px;margin-right:3px;margin-left: auto;background-color: #ccc;cursor: pointer;" onclick="cmanCP_JS_close();">' +

  225. 				'<svg viewBox="0 0 14 14">' +

  226. 				'<path stroke="#666" stroke-width="2" fill="none" d="M 3 3 L 11 11 , M 3 11 L 11 3">' +

  227. 				'</svg>' +

  228. 				'</div>' +

  229. 				'<div style="text-align: center;padding: 2px 10px;font-weight:bold;color: #666;background-color: #eee;border-bottom: 1px solid #999;cursor: pointer;" id="cmanCP_ID_title">' +

  230. 				'色を選んでね♥' +

  231. 				'</div>' +

  232. 			'</div>';

  233. 

  234. 	// ----- サンプル＆カラーリスト -----

  235. 	wHtml +=	'<div style="margin: 10px 0;clear: both;">' +

  236. 				'<table style="width: 100%;border:0px;border-spacing: 0;letter-spacing:0;padding:0;">' +

  237. 				'<tr>' +

  238. 				'<td>' +

  239. 				'<div class="cmanCP_CSS_select" style="margin:0 10px 5px 10px;" onclick="cmanCP_JS_select()">' +

  240. 				'<div style="width: 90px;height: 52px;padding:2px;position: relative;overflow:hidden;">' +

  241. 				'<table style="width: 100%;border:0px;border-spacing: 0;letter-spacing:0;padding:0;">' +

  242. 				'<tr><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td></tr>' +

  243. 				'<tr><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td></tr>' +

  244. 				'<tr><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td></tr>' +

  245. 				'<tr><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td></tr>' +

  246. 				'<tr><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td><td class="cmanCP_CSS_sbg0"></td><td class="cmanCP_CSS_sbg1"></td></tr>' +

  247. 				'</table>' +

  248. 				'<div style="position: absolute; top:0px; left:0px;width: 90px;height: 52px;border: 2px solid #ccc;margin: 0 auto 0 auto;" id="cmanCP_ID_sample">' + 

  249. 				'</div>' +

  250. 				'</div>' +

  251. 				'</div>' +

  252. 				'<div class="cmanCP_CSS_select" style="width: 90px;border: 1px solid #999;font-size:80%;margin: 0 auto;text-align: center;padding-top:2px;padding-bottom:2px;" onclick="cmanCP_JS_select()">この色を選択</div>' +

  253. 				'</td>' +

  254. 				'<td style="text-align: right;line-height: 0;padding-left: 5px;">';

  255. 

  256. 	for(var i=0; i<wColorList.length; i++){

  257. 		wHtml +=	'<div onclick="cmanCP_JS_csel(this)" style="background-color:'+wColorList[i]+'" class="cmanCP_CSS_CL"> </div>';		// 選択カラーリスト

  258. 	}

  259. 

  260. 	wHtml +=		'</td>' +

  261. 				'</tr>' +

  262. 				'</table>' +

  263. 			'</div>';

  264. 

  265. 	// ----- 色の文字列表示 -----

  266. 	wHtml +=	'<div style="clear: both;margin: 5px 5px 10px 5px;padding:5px;font-size: 110%;border: 1px solid #999;font-weight:bold;text-align: left;" id="cmanCP_ID_outstr">';

  267. 	wHtml +=	'</div>';

  268. 

  269. 	// ----- レンジバー -----

  270. 	wHtml +=	'<!--  -->';

  271. 	wHtml +=	'<div style="margin: 5px 5px 0 5px;">';

  272. 	wHtml +=		'<!-- タブ -->';

  273. 	wHtml +=		'<div class="cmanCP_CSS_Tab cmanCP_CSS_TabN" id="cmanCP_ID_tab_RGB16" onclick="cmanCP_JS_tanCng(\'RGB16\');">RGB(16)</div>';

  274. 	wHtml +=		'<div class="cmanCP_CSS_Tab cmanCP_CSS_TabN" id="cmanCP_ID_tab_RGB" style="margin-left: 5px;" onclick="cmanCP_JS_tanCng(\'RGB\');">RGB(255)</div>';

  275. 	wHtml +=		'<div class="cmanCP_CSS_Tab cmanCP_CSS_TabN" id="cmanCP_ID_tab_HSL" style="margin-left: 5px;" onclick="cmanCP_JS_tanCng(\'HSL\');">HSL</div>';

  276. 	wHtml +=		'<!-- カラーレンジ -->';

  277. 	wHtml +=		'<div style="clear: both;border: 3px solid #999">';

  278. 	wHtml +=			'<table border="0" cellspacing="0" class="cmanCP_CSS_Tbl" style="width: 100%;margin-top:0;">';

  279. 	wHtml +=			'<colgroup span="1" style="width:15%;"></colgroup>';

  280. 	wHtml +=			'<colgroup span="1" style="width:25%;"></colgroup>';

  281. 	wHtml +=			'<colgroup span="1" style="width:60%;"></colgroup>';

  282. 	wHtml +=			'<tbody>';

  283. 	wHtml +=			'<!-- RGB -->';

  284. 

  285. 	// --- RGB ---

  286. 	for(var i=0; i<=2; i++){

  287. 		wHtml +=		'<tr id="cmanCP_ID_aRGB_'+wRGB_List[i]+'">';

  288. 		wHtml +=		'<td>'+wRGB_TitleJP[i]+'</td>';

  289. 		wHtml +=		'<td>';

  290. 		wHtml +=		'<input type="number"  min="0" max="255" step="1" maxlength="3" id="cmanCP_ID_t'+wRGB_List[i]+'" onchange="cmanCP_JS_textCng(\'RGB\')" onInput="cmanCP_JS_textCng(\'RGB\')">';

  291. 		wHtml +=		'<input  type="text" maxlength="2" id="cmanCP_ID_t'+wRGB_List[i]+'16" onchange="cmanCP_JS_textCng(\'RGB16\')" onInput="cmanCP_JS_textCng(\'RGB16\')">';

  292. 		wHtml +=		'</td>';

  293. 		wHtml +=		'<td style="line-height: 1em;">';

  294. 		wHtml +=		'<input type="range" min="0" max="255" step="1" class="cmanCP_CSS_range" id="cmanCP_ID_r'+wRGB_List[i]+'" onchange="cmanCP_JS_rangeCng(\'RGB\')" onInput="cmanCP_JS_rangeCng(\'RGB\')">';

  295. 		wHtml +=		'<div class="cmanCP_CSS_Gaid" style="background: linear-gradient(to right, #fff, '+wRGB_TitleEn[i]+');"></div>';

  296. 		wHtml +=		'</td>';

  297. 		wHtml +=		'</tr>';

  298. 	}

  299. 

  300. 	// --- HSL ---

  301. 	for(var i=0; i<=2; i++){

  302. 		wHtml +=		'<tr id="cmanCP_ID_aHSL_'+wHSL_List[i]+'">';

  303. 		wHtml +=		'<td>'+wHSL_TitleJP[i]+'</td>';

  304. 		wHtml +=		'<td>';

  305. 		wHtml +=		'<input type="number"  min="0" max="'+wHSL_Max[i]+'" step="'+wHSL_Step[i]+'" maxlength="3" id="cmanCP_ID_t'+wHSL_List[i]+'" onchange="cmanCP_JS_textCng(\'HSL\')" onInput="cmanCP_JS_textCng(\'HSL\')">';

  306. 		wHtml +=		'</td>';

  307. 		wHtml +=		'<td style="line-height: 1em;">';

  308. 		wHtml +=		'<input type="range" min="0" max="'+wHSL_Max[i]+'" step="'+wHSL_Step[i]+'" class="cmanCP_CSS_range" id="cmanCP_ID_r'+wHSL_List[i]+'" onchange="cmanCP_JS_rangeCng(\'HSL\')" onInput="cmanCP_JS_rangeCng(\'HSL\')">';

  309. 		wHtml +=		'<div class="cmanCP_CSS_Gaid">';

  310. 		for(var j=1; j<=20; j++){

  311. 			wHtml +=	'<div class="cmanCP_CSS_GaidHSL" id="cmanCP_ID_gHSL_'+wHSL_List[i]+j+'"></div>';

  312. 		}

  313. 		wHtml +=		'</div>';

  314. 		wHtml +=		'</td>';

  315. 		wHtml +=		'</tr>';

  316. 	}

  317. 

  318. 	// --- 透明 ---

  319. 	wHtml +=			'<tr id="cmanCP_ID_aA">';

  320. 	wHtml +=			'<td>'+wA_TitleJP+'</td>';

  321. 	wHtml +=			'<td>';

  322. 	wHtml +=			'<input type="number"  min="0" max="1" step="0.01" maxlength="3" id="cmanCP_ID_tA" onchange="cmanCP_JS_textCng(\'A\')" onInput="cmanCP_JS_textCng(\'A\')">';

  323. 	wHtml +=			'</td>';

  324. 	wHtml +=			'<td style="line-height: 1em;">';

  325. 	wHtml +=			'<input type="range" min="0" max="1" step="0.01" value="1" class="cmanCP_CSS_range" id="cmanCP_ID_rA" onchange="cmanCP_JS_rangeCng(\'A\')" onInput="cmanCP_JS_rangeCng(\'A\')">';

  326. 	wHtml +=			'<div class="cmanCP_CSS_Gaid" style="background: linear-gradient(to right, #fff, #000);"></div>';

  327. 	wHtml +=			'</td>';

  328. 	wHtml +=			'</tr>';

  329. 	wHtml +=			'</tbody>';

  330. 	wHtml +=			'</table>';

  331. 	wHtml +=		'</div>';

  332. 	wHtml +=	'</div>';

  333. 

  334. 	wHtml +=	'<div style="text-align: right;font-size: 80%;padding-right: 5px;color:#666">' +

  335. 				'パクリ元：' +

  336. 				'<a href="http://web-designer.cman.jp/javascript_ref/color/palette/" target="_blank" style="color:#666;font-weight:normal;">web-designer.cman.jp</a>' +

  337. 			'</div>';

  338. 

  339. 

  340. 

  341. 	// ----- 表示枠の作成＆割り当て -----------------------------------

  342. 	if(document.getElementById(cmanCP_VAR["popId"])){

  343. 		document.getElementById(cmanCP_VAR["popId"]).style.display = "none";

  344. 	}else{

  345. 

  346. 		var wEle = document.createElement("div");   // 新規に要素（タグ）を生成

  347. 		wEle.id = cmanCP_VAR["popId"];

  348. 		wEle.style.display = "none";

  349. 		wEle.style.position = 'fixed';

  350. 		document.body.appendChild(wEle);            // このページ (document.body) の最後に生成した要素を追加

  351. 	}

  352. 

  353. 

  354. 	// ----- カラーポップをの初期設定 ---------------------------------

  355. 	cmanCP_VAR["objPop"] = document.getElementById(cmanCP_VAR["popId"]);

  356. 	cmanCP_VAR["objPop"].innerHTML		= wCss+"\n"+wHtml;

  357. 	cmanCP_VAR["objPop"].style.opacity	= 0;

  358. 	cmanCP_VAR["objPop"].className		= 'cmanCP_CSS_ALL';

  359. 	cmanCP_VAR["objPop"].style.left		= '0px';

  360. 	cmanCP_VAR["objPop"].style.top		= '0px';

  361. 

  362. 

  363. 	// ----- オブジェクトの設定 ---------------------------------------

  364. 	cmanCP_VAR["obj_tR16"]	= document.getElementById("cmanCP_ID_tR16");

  365. 	cmanCP_VAR["obj_tG16"]	= document.getElementById("cmanCP_ID_tG16");

  366. 	cmanCP_VAR["obj_tB16"]	= document.getElementById("cmanCP_ID_tB16");

  367. 	cmanCP_VAR["obj_tR"]	= document.getElementById("cmanCP_ID_tR");

  368. 	cmanCP_VAR["obj_tG"]	= document.getElementById("cmanCP_ID_tG");

  369. 	cmanCP_VAR["obj_tB"]	= document.getElementById("cmanCP_ID_tB");

  370. 	cmanCP_VAR["obj_tH"]	= document.getElementById("cmanCP_ID_tH");

  371. 	cmanCP_VAR["obj_tS"]	= document.getElementById("cmanCP_ID_tS");

  372. 	cmanCP_VAR["obj_tL"]	= document.getElementById("cmanCP_ID_tL");

  373. 	cmanCP_VAR["obj_tA"]	= document.getElementById("cmanCP_ID_tA");

  374. 	cmanCP_VAR["obj_rR"]	= document.getElementById("cmanCP_ID_rR");

  375. 	cmanCP_VAR["obj_rG"]	= document.getElementById("cmanCP_ID_rG");

  376. 	cmanCP_VAR["obj_rB"]	= document.getElementById("cmanCP_ID_rB");

  377. 	cmanCP_VAR["obj_rH"]	= document.getElementById("cmanCP_ID_rH");

  378. 	cmanCP_VAR["obj_rS"]	= document.getElementById("cmanCP_ID_rS");

  379. 	cmanCP_VAR["obj_rL"]	= document.getElementById("cmanCP_ID_rL");

  380. 	cmanCP_VAR["obj_rA"]	= document.getElementById("cmanCP_ID_rA");

  381. 

  382. 

  383. 	// ----------------------------------------------------------------

  384. 	//	パレットの初期設定

  385. 	// ----------------------------------------------------------------

  386. 

  387. 	// ----- サイズの設定 ---------------------------------------------

  388. 	if('def_size' in cmanCP_VAR){

  389. 

  390. 		cmanCP_VAR["def_size"] = cmanCP_VAR["def_size"].replace("px","");

  391. 		if(cmanCP_VAR["def_size"].toString().match(/^[0-9]+$/)){

  392. 			cmanCP_VAR["maxWidth"] = cmanCP_VAR["def_size"];

  393. 		}

  394. 	}

  395. 	if('maxWidth' in cmanCP_VAR){

  396. 	}else{

  397. 		cmanCP_VAR["maxWidth"] = 530;

  398. 	}

  399. 	cmanCP_VAR["objPop"].style.maxWidth = cmanCP_VAR["maxWidth"]+'px';

  400. 

  401. 

  402. 	// ----- 初期カラー設定 -------------------------------------------

  403. 	var wDefColorSet	= '';

  404. 	var wDefColor		= '';

  405. 

  406. 	if('def_color' in cmanCP_VAR){

  407. 

  408. 		try{

  409. 			if	(cmanCP_VAR["def_color"].indexOf('cns=') == 0){wDefColor = cmanCP_VAR["def_color"].substr(4);}

  410. 			else{

  411. 				var wObjDefColor = document.getElementById(cmanCP_VAR["def_color"].substr(4));

  412. 

  413. 				if(wObjDefColor){

  414. 					if	(cmanCP_VAR["def_color"].indexOf('val=') == 0){wDefColor = wObjDefColor.value;}

  415. 					else if	(cmanCP_VAR["def_color"].indexOf('txt=') == 0){wDefColor = wObjDefColor.innerText;}

  416. 					else if	(cmanCP_VAR["def_color"].indexOf('col=') == 0){wDefColor = wObjDefColor.style.color;}

  417. 					else if	(cmanCP_VAR["def_color"].indexOf('bgc=') == 0){wDefColor = wObjDefColor.style.backgroundColor;}

  418. 

  419. 					wDefColor = cmanCP_JS_zen_TO_han(wDefColor.toLowerCase());

  420. 				}

  421. 			}

  422. 		}

  423. 		catch(e){

  424. 			wDefColor = "";

  425. 		}

  426. 	}

  427. 

  428. 	if	(wDefColor == ""){

  429. 	}

  430. 	else if	(wDefColor.substr(0,1) == '#'){

  431. 

  432. 		if(wDefColor.substr(1).toString().match(/^[0-9a-f]+$/i)){

  433. 			switch (wDefColor.length){

  434. 			case 4:

  435. 				cmanCP_VAR["obj_tR16"].value	= wDefColor.substr(1,1).toString() + wDefColor.substr(1,1).toString();

  436. 				cmanCP_VAR["obj_tG16"].value	= wDefColor.substr(2,1).toString() + wDefColor.substr(2,1).toString();

  437. 				cmanCP_VAR["obj_tB16"].value	= wDefColor.substr(3,1).toString() + wDefColor.substr(3,1).toString();

  438. 				wDefColorSet = 'RGB16';

  439. 				break;

  440. 			case 7:

  441. 				cmanCP_VAR["obj_tR16"].value	= wDefColor.substr(1,2).toString();

  442. 				cmanCP_VAR["obj_tG16"].value	= wDefColor.substr(3,2).toString();

  443. 				cmanCP_VAR["obj_tB16"].value	= wDefColor.substr(5,2).toString();

  444. 				wDefColorSet = 'RGB16';

  445. 				break;

  446. 			}	

  447. 		}

  448. 	}

  449. 	else if	(wDefColor.indexOf('rgb(') == 0){

  450. 		wDefColor = wDefColor.replace('rgb(','');

  451. 		wDefColor = wDefColor.replace(')','');

  452. 		var wSplit = wDefColor.split(',');

  453. 		if(wSplit.length == 3){

  454. 			cmanCP_VAR["obj_tR"].value	= wSplit[0];

  455. 			cmanCP_VAR["obj_tG"].value	= wSplit[1];

  456. 			cmanCP_VAR["obj_tB"].value	= wSplit[2];

  457. 			wDefColorSet = 'RGB';

  458. 		}

  459. 		

  460. 	}

  461. 	else if	(wDefColor.indexOf('rgba(') == 0){

  462. 		wDefColor = wDefColor.replace('rgba(','');

  463. 		wDefColor = wDefColor.replace(')','');

  464. 		var wSplit = wDefColor.split(',');

  465. 		if(wSplit.length == 4){

  466. 			cmanCP_VAR["obj_tR"].value	= wSplit[0];

  467. 			cmanCP_VAR["obj_tG"].value	= wSplit[1];

  468. 			cmanCP_VAR["obj_tB"].value	= wSplit[2];

  469. 			cmanCP_VAR["obj_tA"].value	= wSplit[3];

  470. 			wDefColorSet = 'RGB';

  471. 		}

  472. 		

  473. 	}

  474. 	else if	(wDefColor.indexOf('hsl(') == 0){

  475. 		wDefColor = wDefColor.replace('hsl(','');

  476. 		wDefColor = wDefColor.replace('%','');

  477. 		wDefColor = wDefColor.replace(')','');

  478. 		var wSplit = wDefColor.split(',');

  479. 		if(wSplit.length == 3){

  480. 			cmanCP_VAR["obj_tH"].value	= wSplit[0];

  481. 			cmanCP_VAR["obj_tS"].value	= parseFloat(wSplit[1])/100;

  482. 			cmanCP_VAR["obj_tL"].value	= parseFloat(wSplit[2])/100;

  483. 			wDefColorSet = 'HSL';

  484. 		}

  485. 		

  486. 	}

  487. 	else if	(wDefColor.indexOf('hsla(') == 0){

  488. 		wDefColor = wDefColor.replace('hsla(','');

  489. 		wDefColor = wDefColor.replace('%','');

  490. 		wDefColor = wDefColor.replace(')','');

  491. 		var wSplit = wDefColor.split(',');

  492. 		if(wSplit.length == 3){

  493. 			cmanCP_VAR["obj_tH"].value	= wSplit[0];

  494. 			cmanCP_VAR["obj_tS"].value	= parseFloat(wSplit[1])/100;

  495. 			cmanCP_VAR["obj_tL"].value	= parseFloat(wSplit[2])/100;

  496. 			cmanCP_VAR["obj_tA"].value	= wSplit[3];

  497. 			wDefColorSet = 'HSL';

  498. 		}

  499. 	}

  500. 

  501. 	if(wDefColorSet == ""){

  502. 		cmanCP_VAR["obj_tR16"].value	= "ff";

  503. 		cmanCP_VAR["obj_tG16"].value	= "80";

  504. 		cmanCP_VAR["obj_tB16"].value	= "0";

  505. 		wDefColorSet = 'RGB16';

  506. 	}

  507. 	if(cmanCP_VAR["obj_tA"].value == ''){

  508. 		cmanCP_VAR["obj_tA"].value	= '1';

  509. 	}

  510. 	cmanCP_JS_textCng(wDefColorSet);

  511. 

  512. 

  513. 	// ----- 初期TAB設定 ----------------------------------------------

  514. 	var wDefTab	= '';

  515. 	if('def_tab' in cmanCP_VAR){

  516. 		wDefTab = cmanCP_VAR['def_tab'].toUpperCase();

  517. 	}

  518. 	switch (wDefTab){

  519. 	case 'RGB':

  520. 	case 'RGB16':

  521. 	case 'HSL':

  522. 		cmanCP_JS_tanCng(wDefTab);	break;

  523. 	default:

  524. 		cmanCP_JS_tanCng('HSL');	break;		// DEBUG時はコメント

  525. 	}

  526. 

  527. 

  528. 	// ----- 透明の表示設定 ----------------------------------------------

  529. 	var wDefAlpha	= '';

  530. 	if('def_alpha' in cmanCP_VAR){

  531. 		wDefAlpha = cmanCP_VAR['def_alpha'];

  532. 	}

  533. 	if(wDefAlpha == '0'){

  534. 		document.getElementById('cmanCP_ID_aA').style.display = 'none';

  535. 	}else{

  536. 		document.getElementById('cmanCP_ID_aA').style.display = '';

  537. 	}

  538. 

  539. 

  540. 	// ----- サイズ取得のため透明のまま表示 ---------------------------

  541. 	cmanCP_VAR["objPop"].style.display = "";

  542. 

  543. 

  544. 	// ----- 表示位置設定 ---------------------------------------------

  545. 	if(cmanCP_VAR["objPop"].scrollWidth >= document.documentElement.clientWidth){

  546. 		cmanCP_VAR["objPop"].style.left	= '0px';

  547. 	}else{

  548. 		cmanCP_VAR["objPop"].style.left	= Math.round((document.documentElement.clientWidth - cmanCP_VAR["objPop"].scrollWidth) / 2) + 'px';

  549. 	}

  550. 

  551. 	if(cmanCP_VAR["objPop"].scrollHeight >= document.documentElement.clientHeight){

  552. 		cmanCP_VAR["objPop"].style.top	= '0px';

  553. 	}else{

  554. 		cmanCP_VAR["objPop"].style.top	= Math.round((document.documentElement.clientHeight - cmanCP_VAR["objPop"].scrollHeight) / 2) + 'px';

  555. 	}

  556. 

  557. 	// ----- 移動イベント登録 -----------------------------------------

  558. 	document.getElementById('cmanCP_ID_title').onmousedown	= cmanCP_JS_mdown;

  559. 	document.getElementById('cmanCP_ID_title').onmouseup	= cmanCP_JS_mup;

  560. 	document.getElementById('cmanCP_ID_title').onmousemove	= cmanCP_JS_mmove;

  561. 	document.getElementById('cmanCP_ID_title').onmouseout	= cmanCP_JS_mout;

  562. 

  563. 	// ----- 透明解除 -------------------------------------------------

  564. 	cmanCP_VAR["objPop"].style.opacity = 1;

  565. 

  566. 

  567. cmanCP_ID_title

  568. 

  569. }

  570. 

  571. 

  572. // =========================================================================================

  573. //	閉じるボタンが押されたら

  574. // =========================================================================================

  575. function cmanCP_JS_close(){

  576. 

  577. 	var wDelElm = document.getElementById(cmanCP_VAR["popId"]);

  578. 	document.body.removeChild(wDelElm);

  579. 

  580. 	// ハッシュクリア

  581. 	for(var key in cmanCP_VAR){

  582. 		delete cmanCP_VAR[key];

  583. 	}

  584. }

  585. 

  586. // =========================================================================================

  587. //	色リストが選択されたら

  588. // =========================================================================================

  589. function cmanCP_JS_csel(argObj){

  590. 

  591. 	var wColor	= argObj.style.backgroundColor.toString();

  592. 	var w16		= '';

  593. 	var wRcColor	= '';

  594. 

  595. 	if(wColor.substr(0,1) == '#'){

  596. 		wRcColor = argColor.substr(1);

  597. 	}

  598. 	else{

  599. 

  600. 		//背景色の余計な文字列削除

  601. 		wColor = wColor.replace("rgb(","");

  602. 		wColor = wColor.replace(")","");

  603. 

  604. 		//文字列分割

  605. 		var wColorSplit = wColor.split(",");

  606. 

  607. 		//10進数を16進数に変換して連結

  608. 		for (var i = 0; i <= 2; i++) {

  609. 			w16	= parseInt(wColorSplit[i]).toString(16)

  610. 			if(w16.length == 1){

  611. 				wRcColor = wRcColor+'0'+w16;

  612. 			}else{

  613. 				wRcColor = wRcColor+w16;

  614. 			}

  615. 		}

  616. 	}

  617. 

  618. 	cmanCP_VAR["obj_tR16"].value	= wRcColor.substr(0,2);

  619. 	cmanCP_VAR["obj_tG16"].value	= wRcColor.substr(2,2);

  620. 	cmanCP_VAR["obj_tB16"].value	= wRcColor.substr(4,2);

  621. 

  622. 	cmanCP_JS_textCng('RGB16');

  623. 

  624. }

  625. 

  626. // =========================================================================================

  627. //	タブがクリックされたら

  628. // =========================================================================================

  629. function cmanCP_JS_tanCng(argID){

  630. 

  631. 	var wTabCssS = 'cmanCP_CSS_Tab cmanCP_CSS_TabS';

  632. 	var wTabCssN = 'cmanCP_CSS_Tab cmanCP_CSS_TabN';

  633. 

  634. 

  635. 	if(document.getElementById('cmanCP_ID_tab_'+argID).className == wTabCssS){return;}

  636. 

  637. 	var wObjTabRGB		= document.getElementById('cmanCP_ID_tab_RGB');

  638. 	var wObjTabRGB16	= document.getElementById('cmanCP_ID_tab_RGB16');

  639. 	var wObjTabHSL		= document.getElementById('cmanCP_ID_tab_HSL');

  640. 	var wObjTrRGB_R		= document.getElementById('cmanCP_ID_aRGB_R');

  641. 	var wObjTrRGB_G		= document.getElementById('cmanCP_ID_aRGB_G');

  642. 	var wObjTrRGB_B		= document.getElementById('cmanCP_ID_aRGB_B');

  643. 	var wObjTrHSL_H		= document.getElementById('cmanCP_ID_aHSL_H');

  644. 	var wObjTrHSL_S		= document.getElementById('cmanCP_ID_aHSL_S');

  645. 	var wObjTrHSL_L		= document.getElementById('cmanCP_ID_aHSL_L');

  646. 

  647. 

  648. 	switch (argID){

  649. 	case 'RGB':

  650. 		cmanCP_VAR["obj_tR"].style.display	= "";

  651. 		cmanCP_VAR["obj_tG"].style.display	= "";

  652. 		cmanCP_VAR["obj_tB"].style.display	= "";

  653. 		cmanCP_VAR["obj_tR16"].style.display	= "none";

  654. 		cmanCP_VAR["obj_tG16"].style.display	= "none";

  655. 		cmanCP_VAR["obj_tB16"].style.display	= "none";

  656. 		wObjTabRGB.className			= wTabCssS;

  657. 		wObjTabRGB16.className			= wTabCssN;

  658. 		wObjTabHSL.className			= wTabCssN;

  659. 		break;

  660. 

  661. 	case 'RGB16':

  662. 		cmanCP_VAR["obj_tR"].style.display	= "none";

  663. 		cmanCP_VAR["obj_tG"].style.display	= "none";

  664. 		cmanCP_VAR["obj_tB"].style.display	= "none";

  665. 		cmanCP_VAR["obj_tR16"].style.display	= "";

  666. 		cmanCP_VAR["obj_tG16"].style.display	= "";

  667. 		cmanCP_VAR["obj_tB16"].style.display	= "";

  668. 		wObjTabRGB.className			= wTabCssN;

  669. 		wObjTabRGB16.className			= wTabCssS;

  670. 		wObjTabHSL.className			= wTabCssN;

  671. 		break;

  672. 

  673. 	case 'HSL':

  674. 		wObjTabRGB.className			= wTabCssN;

  675. 		wObjTabRGB16.className			= wTabCssN;

  676. 		wObjTabHSL.className			= wTabCssS;

  677. 		break;

  678. 	}

  679. 

  680. 	switch (argID){

  681. 	case 'HSL':

  682. 		wObjTrRGB_R.style.display	= "none";

  683. 		wObjTrRGB_G.style.display	= "none";

  684. 		wObjTrRGB_B.style.display	= "none";

  685. 		wObjTrHSL_H.style.display	= "";

  686. 		wObjTrHSL_S.style.display	= "";

  687. 		wObjTrHSL_L.style.display	= "";

  688. 		break;

  689. 

  690. 	default :

  691. 		wObjTrRGB_R.style.display	= "";

  692. 		wObjTrRGB_G.style.display	= "";

  693. 		wObjTrRGB_B.style.display	= "";

  694. 		wObjTrHSL_H.style.display	= "none";

  695. 		wObjTrHSL_S.style.display	= "none";

  696. 		wObjTrHSL_L.style.display	= "none";

  697. 		break;

  698. 	}

  699. 

  700. 

  701. }

  702. 

  703. // =========================================================================================

  704. //	レンジが変更された場合	

  705. // =========================================================================================

  706. function cmanCP_JS_rangeCng(argID){

  707. 

  708. 

  709. 	switch (argID){

  710. 	case 'RGB':

  711. 		cmanCP_VAR["obj_tR"].value	= cmanCP_VAR["obj_rR"].value;

  712. 		cmanCP_VAR["obj_tG"].value	= cmanCP_VAR["obj_rG"].value;

  713. 		cmanCP_VAR["obj_tB"].value	= cmanCP_VAR["obj_rB"].value;

  714. 		cmanCP_JS_textCng(argID);

  715. 		break;

  716. 

  717. 	case 'HSL':

  718. 		cmanCP_VAR["obj_tH"].value	= cmanCP_VAR["obj_rH"].value;

  719. 		cmanCP_VAR["obj_tS"].value	= cmanCP_VAR["obj_rS"].value;

  720. 		cmanCP_VAR["obj_tL"].value	= cmanCP_VAR["obj_rL"].value;

  721. 		cmanCP_JS_textCng(argID);

  722. 		break;

  723. 

  724. 	case 'A':

  725. 		cmanCP_VAR["obj_tA"].value	= cmanCP_VAR["obj_rA"].value;

  726. 		cmanCP_JS_textCng(argID);

  727. 		break;

  728. 

  729. 	}

  730. }

  731. 

  732. // =========================================================================================

  733. //	テキスト入力が変更された場合	

  734. // =========================================================================================

  735. function cmanCP_JS_textCng(argID){

  736. 

  737. 

  738. 	// テキストの整備

  739. 	switch (argID){

  740. 	case 'RGB16'	:	cmanCP_JS_rgb16_TO_rgb();	cmanCP_JS_rgb_TO_hsl();		break;

  741. 	case 'RGB'	:	cmanCP_JS_rgb_TO_rgb16();	cmanCP_JS_rgb_TO_hsl();		break;

  742. 	case 'HSL'	:	cmanCP_JS_hsl_TO_rgb();		cmanCP_JS_rgb_TO_rgb16();	break;

  743. 	case 'A'	:	cmanCP_JS_chk_a();						break;

  744. 	default		:	return;								break;

  745. 	}

  746. 

  747. 	// レンジの整備

  748. 	cmanCP_VAR["obj_rR"].value	= cmanCP_VAR["obj_tR"].value;

  749. 	cmanCP_VAR["obj_rG"].value	= cmanCP_VAR["obj_tG"].value;

  750. 	cmanCP_VAR["obj_rB"].value	= cmanCP_VAR["obj_tB"].value;

  751. 	cmanCP_VAR["obj_rH"].value	= cmanCP_VAR["obj_tH"].value;

  752. 	cmanCP_VAR["obj_rS"].value	= cmanCP_VAR["obj_tS"].value;

  753. 	cmanCP_VAR["obj_rL"].value	= cmanCP_VAR["obj_tL"].value;

  754. 	cmanCP_VAR["obj_rA"].value	= cmanCP_VAR["obj_tA"].value;

  755. 

  756. 

  757. 	// サンプル更新

  758. 	cmanCP_JS_sampleCng();

  759. }

  760. 

  761. 

  762. // =========================================================================================

  763. //	RGB16→RGB 設定	

  764. // =========================================================================================

  765. function cmanCP_JS_rgb16_TO_rgb(){

  766. 

  767. 	// RGB16の入力チェック＆正規化

  768. 	cmanCP_VAR["obj_tR16"].value	= cmanCP_JS_chk00toFF(cmanCP_VAR["obj_tR16"].value);

  769. 	cmanCP_VAR["obj_tG16"].value	= cmanCP_JS_chk00toFF(cmanCP_VAR["obj_tG16"].value);

  770. 	cmanCP_VAR["obj_tB16"].value	= cmanCP_JS_chk00toFF(cmanCP_VAR["obj_tB16"].value);

  771. 

  772. 	// RGB置換

  773. 	cmanCP_VAR["obj_tR"].value	= parseInt(cmanCP_VAR["obj_tR16"].value, 16);

  774. 	cmanCP_VAR["obj_tG"].value	= parseInt(cmanCP_VAR["obj_tG16"].value, 16);

  775. 	cmanCP_VAR["obj_tB"].value	= parseInt(cmanCP_VAR["obj_tB16"].value, 16);

  776. }

  777. 

  778. 

  779. // =========================================================================================

  780. //	RGB→RGB16 設定	

  781. // =========================================================================================

  782. function cmanCP_JS_rgb_TO_rgb16(){

  783. 

  784. 	// RGBの入力チェック＆正規化

  785. 	cmanCP_VAR["obj_tR"].value	= cmanCP_JS_chk0to255(cmanCP_VAR["obj_tR"].value);

  786. 	cmanCP_VAR["obj_tG"].value	= cmanCP_JS_chk0to255(cmanCP_VAR["obj_tG"].value);

  787. 	cmanCP_VAR["obj_tB"].value	= cmanCP_JS_chk0to255(cmanCP_VAR["obj_tB"].value);

  788. 

  789. 	// RGB16置換

  790. 	cmanCP_VAR["obj_tR16"].value	= cmanCP_JS_chk00toFF(parseInt(cmanCP_VAR["obj_tR"].value).toString(16));

  791. 	cmanCP_VAR["obj_tG16"].value	= cmanCP_JS_chk00toFF(parseInt(cmanCP_VAR["obj_tG"].value).toString(16));

  792. 	cmanCP_VAR["obj_tB16"].value	= cmanCP_JS_chk00toFF(parseInt(cmanCP_VAR["obj_tB"].value).toString(16));

  793. }

  794. 

  795. // =========================================================================================

  796. //	RGB(10進数) → HSL

  797. // =========================================================================================

  798. function cmanCP_JS_rgb_TO_hsl(){

  799. 

  800. 	var wR		= parseInt(cmanCP_VAR["obj_tR"].value);

  801. 	var wG		= parseInt(cmanCP_VAR["obj_tG"].value);

  802. 	var wB		= parseInt(cmanCP_VAR["obj_tB"].value);

  803. 

  804. 	var wMax	= Math.max(wR, wG, wB);

  805. 	var wMin	= Math.min(wR, wG, wB);

  806. 

  807. 	var wH		= 0;

  808. 	var wS		= 0;

  809. 	var wL		= 0;

  810. 

  811. 	// --- 色相(H) ----------------------------------------------------------

  812. 	if	(wMax == wMin)	{}

  813. 	else if	(wMax == wR)	{wH = 60 * (( wG - wB ) / ( wMax - wMin ));}

  814. 	else if	(wMax == wG)	{wH = 60 * (( wB - wR ) / ( wMax - wMin )) + 120;}

  815. 	else			{wH = 60 * (( wR - wG ) / ( wMax - wMin )) + 240;}

  816. 	if(wH < 0)		{wH = wH + 360;}

  817. 	if(wH >= 360)		{wH = 0;}

  818. 

  819. 	// --- 輝度(L) ----------------------------------------------------------

  820. 	wL = ( wMax + wMin ) / 2;

  821. 

  822. 	// --- 彩度(S) ----------------------------------------------------------

  823. 	if	(wMax == wMin)	{}

  824. 	else{

  825. 		if( wL <= (255 / 2) )	{wS = 255 * ( wMax -wMin ) / ( wMax + wMin );}

  826. 		else			{wS = 255 * ( wMax -wMin ) / ( 2 *  255 - ( wMax + wMin ));}

  827. 	}

  828. 

  829. 	// --- 色相(H)の整数化 -------------------------------------------------

  830. 	wH = Math.round(wH);

  831. 

  832. 	// --- 彩度(S)の小数1桁整備（浮動小数のためテキストで処理） ------------

  833. 	wS = Math.round(wS / 255 * 1000).toString();

  834. 	if	(wS == 0)	{}

  835. 	else if	(wS.length < 2)	{wS = ''+'0.00'+wS;}

  836. 	else if	(wS.length < 3)	{wS = ''+'0.0'+wS;}

  837. 	else if	(wS.length < 4)	{wS = ''+'0.'+wS;}

  838. 	else			{wS = wS.substr(0,1)+'.'+wS.substr(1);}

  839. 

  840. 	// --- 輝度(L)の小数1桁整備（浮動小数のためテキストで処理） ------------

  841. 	wL = Math.round(wL / 255 * 1000).toString();

  842. 	if	(wL == 0)			{}

  843. 	else if	(wL.length < 2)	{wL = ''+'0.00'+wL;}

  844. 	else if	(wL.length < 3)	{wL = ''+'0.0'+wL;}

  845. 	else if	(wL.length < 4)	{wL = ''+'0.'+wL;}

  846. 	else			{wL = wL.substr(0,1)+'.'+wL.substr(1);}

  847. 

  848. 	// --- 変換結果を設定 --------------------------------------------------

  849. 	cmanCP_VAR["obj_tH"].value	= wH;

  850. 	cmanCP_VAR["obj_tS"].value	= wS;

  851. 	cmanCP_VAR["obj_tL"].value	= wL;

  852. 

  853. }

  854. 

  855. 

  856. // =========================================================================================

  857. //	HSL → RGB(10進数)

  858. // =========================================================================================

  859. function cmanCP_JS_hsl_TO_rgb(){

  860. 

  861. 	var wCal;

  862. 

  863. 	// HSLの入力チェック＆正規化

  864. 	cmanCP_VAR["obj_tH"].value	= cmanCP_JS_chk0to359(cmanCP_VAR["obj_tH"].value);

  865. 

  866. 	wCal			= cmanCP_JS_chk0to1s3(cmanCP_VAR["obj_tS"].value);

  867. 	if(wCal.toString()	!= cmanCP_VAR["obj_tS"].value.toString()){cmanCP_VAR["obj_tS"].value = wCal;}	// number対応

  868. 

  869. 	wCal			= cmanCP_JS_chk0to1s3(cmanCP_VAR["obj_tL"].value);

  870. 	if(wCal.toString()	!= cmanCP_VAR["obj_tL"].value.toString()){cmanCP_VAR["obj_tL"].value = wCal;}	// number対応

  871. 

  872. 

  873. 	// HSLからRGB計算

  874. 	var wH	= parseInt(cmanCP_VAR["obj_tH"].value);

  875. 	var wS	= parseFloat(cmanCP_VAR["obj_tS"].value);

  876. 	var wL	= parseFloat(cmanCP_VAR["obj_tL"].value);

  877. 

  878. 	var wMax	= 0;

  879. 	var wMin	= 0;

  880. 	var wR		= 0;

  881. 	var wG		= 0;

  882. 	var wB		= 0;

  883. 

  884. 	wS = wS * 100;

  885. 	wL = wL * 100;

  886. 

  887. 

  888. 	if	(wL < 50){

  889. 		wMax = 2.55 * ( wL + wL * (wS / 100));

  890. 		wMin = 2.55 * ( wL - wL * (wS / 100));

  891. 	}else{

  892. 		wMax = 2.55 * ( wL + ( 100 - wL) * (wS / 100));

  893. 		wMin = 2.55 * ( wL - ( 100 - wL) * (wS / 100));

  894. 	}

  895. 

  896. 	if	(wH < 60){

  897. 		wR = wMax;

  898. 		wG = (wH / 60) * (wMax - wMin ) + wMin;

  899. 		wB = wMin;

  900. 

  901. 	}else if(wH < 120){

  902. 		wR = (( 120 - wH ) / 60 ) * ( wMax - wMin ) + wMin;

  903. 		wG = wMax;

  904. 		wB = wMin;

  905. 

  906. 	}else if(wH < 180){

  907. 		wR = wMin;

  908. 		wG = wMax;

  909. 		wB = (( wH - 120 ) / 60 ) * ( wMax - wMin ) + wMin;

  910. 

  911. 	}else if(wH < 240){

  912. 		wR = wMin;

  913. 		wG = (( 240 - wH ) / 60 ) * ( wMax - wMin ) + wMin;

  914. 		wB = wMax;

  915. 

  916. 	}else if(wH < 300){

  917. 		wR = (( wH - 240 ) / 60 ) * ( wMax - wMin ) + wMin;

  918. 		wG = wMin;

  919. 		wB = wMax;

  920. 

  921. 	}else{

  922. 		wR = wMax;

  923. 		wG = wMin;

  924. 		wB = (( 360 - wH ) / 60 ) * ( wMax - wMin ) + wMin;

  925. 	}

  926. 

  927. 	// --- 色相(H)の整数化 -------------------------------------------------

  928. 	wR = Math.round(wR);

  929. 	wG = Math.round(wG);

  930. 	wB = Math.round(wB);

  931. 

  932. 	// --- 変換結果を設定 --------------------------------------------------

  933. 	cmanCP_VAR["obj_tR"].value	= wR;

  934. 	cmanCP_VAR["obj_tG"].value	= wG;

  935. 	cmanCP_VAR["obj_tB"].value	= wB;

  936. 

  937. }

  938. 

  939. 

  940. // =========================================================================================

  941. //	Aはチェック＆正規化 設定	

  942. // =========================================================================================

  943. function cmanCP_JS_chk_a(){

  944. 

  945. 	var wCal = cmanCP_JS_chk0to1s2(cmanCP_VAR["obj_tA"].value);

  946. 	if(wCal.toString() != cmanCP_VAR["obj_tA"].value.toString()){cmanCP_VAR["obj_tA"].value = wCal;}	// number対応

  947. 	

  948. }

  949. 

  950. // =========================================================================================

  951. //	16進数チェック＆正規化（0～ff）	

  952. // =========================================================================================

  953. function cmanCP_JS_chk00toFF(arg16){

  954. 

  955. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg16);

  956. 	var wRc		= 0;

  957. 	var wStrPos	= 0;

  958. 

  959. 	if(wChkStr.toString().match(/^[0-9a-f]+$/i)){

  960. 

  961. 		wRc = parseInt(wChkStr, 16);

  962. 

  963. 		if(wRc < 0)	{wRc = 0;}

  964. 		if(wRc > 255)	{wRc = 255;}

  965. 

  966. 		wRc = parseInt(wRc).toString(16);

  967. 		if(wRc.length == 1){wRc = '0'+wRc;}

  968. 	

  969. 	}

  970. 

  971. 	return wRc;

  972. }

  973. 

  974. // =========================================================================================

  975. //	10進数チェック＆正規化（0～255）	

  976. // =========================================================================================

  977. function cmanCP_JS_chk0to255(arg10){

  978. 

  979. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg10);

  980. 	var wRc		= 0;

  981. 

  982. 	if(wChkStr.toString().match(/^[0-9]+$/)){

  983. 		wRc = parseInt(wChkStr);

  984. 		if(wRc < 0)	{wRc = 0;}

  985. 		if(wRc > 255)	{wRc = 255;}

  986. 	}

  987. 	return wRc;

  988. }

  989. 

  990. // =========================================================================================

  991. //	10進数チェック＆正規化（0～359）	

  992. // =========================================================================================

  993. function cmanCP_JS_chk0to359(arg10){

  994. 

  995. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg10);

  996. 	var wRc		= 0;

  997. 

  998. 	if(wChkStr.toString().match(/^[0-9]+$/)){

  999. 		wRc = parseInt(wChkStr);

  1000. 		if(wRc < 0)	{wRc = 0;}

  1001. 		if(wRc > 359)	{wRc = 359;}

  1002. 	}

  1003. 	return wRc;

  1004. }

  1005. 

  1006. // =========================================================================================

  1007. //	10進数チェック（0～1,0.1刻み）	

  1008. // =========================================================================================

  1009. function cmanCP_JS_chk0to100s1(arg10){

  1010. 

  1011. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg10);

  1012. 	var wRc		= 0;

  1013. 

  1014. 	if(wChkStr.toString().match(/^[0-9]+(\.[0-9]+)?$/)){

  1015. 

  1016. 		wRc =  Math.round(parseFloat(wChkStr) * 10) / 10;

  1017. 		if(wRc < 0)	{wRc = 0;}

  1018. 		if(wRc > 100)	{wRc = 100;}

  1019. 

  1020. 		wRc = wRc.toString();

  1021. 		wPos = wRc.indexOf('.');

  1022. 

  1023. 		if(wPos < 0){

  1024. 		}else{

  1025. 			wRc = wRc.substr(0,wPos)+'.'+wRc.substr(wPos+1,1);

  1026. 		}

  1027. 

  1028. 	}

  1029. 	return wRc;

  1030. }

  1031. 

  1032. // =========================================================================================

  1033. //	10進数チェック（0～1,0.01刻み）	

  1034. // =========================================================================================

  1035. function cmanCP_JS_chk0to1s2(arg10){

  1036. 

  1037. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg10);

  1038. 	var wRc		= 0;

  1039. 

  1040. 	if(wChkStr != ''){

  1041. 

  1042. 		if(wChkStr.toString().match(/^[0-9]+\.$/)){

  1043. 			wRc = wChkStr;

  1044. 		}

  1045. 		else if(wChkStr.toString().match(/^[0-9]+\.0$/)){

  1046. 			wRc = wChkStr;

  1047. 		}

  1048. 		else if(wChkStr.toString().match(/^[0-9]+(\.[0-9]+)?$/)){

  1049. 

  1050. 			wRc = Math.round(parseFloat(wChkStr) * 100) / 100;

  1051. 			if(wRc < 0)	{wRc = 0;}

  1052. 			if(wRc > 1)	{wRc = 1;}

  1053. 

  1054. 			wRc = wRc.toString().substr(0,4);

  1055. 

  1056. 			if((wChkStr.length > wRc.length)&&(wChkStr.length <= 4)&&(wRc.substr(1,1) == '.')){

  1057. 				wRc += ''+Array((wChkStr.length - wRc.length) + 1).join('0');

  1058. 			}

  1059. 

  1060. 		}

  1061. 	}

  1062. 

  1063. 	return wRc;

  1064. }

  1065. 

  1066. // =========================================================================================

  1067. //	10進数チェック（0～1,0.001刻み）	

  1068. // =========================================================================================

  1069. function cmanCP_JS_chk0to1s3(arg10){

  1070. 

  1071. 	var wChkStr	= cmanCP_JS_zen_TO_han(arg10);

  1072. 	var wRc		= 0;

  1073. 

  1074. 	if(wChkStr != ''){

  1075. 

  1076. 		if(wChkStr.toString().match(/^[0-9]+\.$/)){

  1077. 			wRc = wChkStr;

  1078. 		}

  1079. 		else if(wChkStr.toString().match(/^[0-9]+\.0$/)){

  1080. 			wRc = wChkStr;

  1081. 		}

  1082. 		else if(wChkStr.toString().match(/^[0-9]+\.00$/)){

  1083. 			wRc = wChkStr;

  1084. 		}

  1085. 		else if(wChkStr.toString().match(/^[0-9]+(\.[0-9]+)?$/)){

  1086. 

  1087. 			wRc = Math.round(parseFloat(wChkStr) * 1000) / 1000;

  1088. 			if(wRc < 0)	{wRc = 0;}

  1089. 			if(wRc > 1)	{wRc = 1;}

  1090. 

  1091. 			wRc = wRc.toString().substr(0,5);

  1092. 

  1093. 			if((wChkStr.length > wRc.length)&&(wChkStr.length <= 5)&&(wRc.substr(1,1) == '.')){

  1094. 				wRc += ''+Array((wChkStr.length - wRc.length) + 1).join('0');

  1095. 			}

  1096. 

  1097. 		}

  1098. 	}

  1099. 

  1100. 	return wRc;

  1101. }

  1102. 

  1103. // =========================================================================================

  1104. //	全角入力対応（trimを含む）

  1105. // =========================================================================================

  1106. function cmanCP_JS_zen_TO_han(argStr){

  1107. 

  1108. 	var wRcStr	= argStr.toString();

  1109. 

  1110. 	var befstr = new Array("０","１","２","３","４","５","６","７","８","９","Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","ａ","ｂ","ｃ","ｄ","ｅ","ｆ","あ","え","．","。");

  1111. 	var aftstr = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","a","b","c","d","e","f","a","e",".",".");

  1112. 

  1113. 	wRcStr = wRcStr.replace(/[ ]|[　]/g, '');

  1114. 	wRcStr = wRcStr.replace(/\t|\r|\n/g, '');

  1115. 

  1116. 	for(var i=0; i<aftstr.length; i++){

  1117. 		var reg = new RegExp(befstr[i],"g");

  1118. 		wRcStr = wRcStr.replace(reg, aftstr[i]);

  1119. 	}

  1120. 

  1121. 	return wRcStr;

  1122. }

  1123. 

  1124. // =========================================================================================

  1125. //	サンプル更新	

  1126. // =========================================================================================

  1127. function cmanCP_JS_sampleCng(){

  1128. 

  1129. 	cmanCP_VAR["strRGB16"]	= '#'+cmanCP_VAR["obj_tR16"].value+cmanCP_VAR["obj_tG16"].value+cmanCP_VAR["obj_tB16"].value;

  1130. 	cmanCP_VAR["strRGB"]	= 'rgb('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+')';

  1131. 	cmanCP_VAR["strHSL"]	= 'hsl('+cmanCP_VAR["obj_tH"].value+', '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tS"].value) * 100))+'%, '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tL"].value) * 100)) + '%)';

  1132. 	cmanCP_VAR["strRGBA"]	= 'rgba('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+', '+cmanCP_VAR["obj_tA"].value+')';

  1133. 	cmanCP_VAR["strHSLA"]	= 'hsla('+cmanCP_VAR["obj_tH"].value+', '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tS"].value) * 100))+'%, '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tL"].value) * 100)) + '%, '+cmanCP_VAR["obj_tA"].value+')';

  1134. 

  1135. 

  1136. 	// サンプル色

  1137. 	document.getElementById('cmanCP_ID_sample').style.backgroundColor = cmanCP_VAR["strRGBA"];

  1138. 

  1139. 	// HSLのガイダンスカラー

  1140. 	for( var i=1; i <= 20; i++){

  1141. 		document.getElementById('cmanCP_ID_gHSL_H'+i).style.backgroundColor  = 'hsl(' + ( (i - 1) * 18.9 ) + ',' + (parseFloat(cmanCP_VAR["obj_tS"].value) * 100) + '%,' + (parseFloat(cmanCP_VAR["obj_tL"].value) * 100) + '%)';

  1142. 		document.getElementById('cmanCP_ID_gHSL_S'+i).style.backgroundColor  = 'hsl(' + cmanCP_VAR["obj_tH"].value + ',' + ( i * 5 ) + '%,' + (parseFloat(cmanCP_VAR["obj_tL"].value) * 100) + '%)';

  1143. 		document.getElementById('cmanCP_ID_gHSL_L'+i).style.backgroundColor  = 'hsl(' + cmanCP_VAR["obj_tH"].value + ',' + (parseFloat(cmanCP_VAR["obj_tS"].value) * 100) + '%,' + ( i * 5 ) + '%)';

  1144. 	}

  1145. 

  1146. 

  1147. 	if(cmanCP_VAR["obj_tA"].value == '1'){

  1148. 		document.getElementById('cmanCP_ID_outstr').innerHTML = '<span style="font-size:120%;white-space: nowrap;">' + cmanCP_VAR["strRGB16"] + '</span> ' +

  1149. 									'<span style="padding-left:20px;white-space: nowrap;">' + cmanCP_VAR["strRGB"] + '</span> ' +

  1150. 									'<span style="padding-left:20px;white-space: nowrap;">' + cmanCP_VAR["strHSL"] + '</span>';

  1151. 	}else{

  1152. 		document.getElementById('cmanCP_ID_outstr').innerHTML = '<span style="font-size:120%;">' + cmanCP_VAR["strRGB16"] + '<small> (opacity:' + cmanCP_VAR["obj_tA"].value + ')</small></span> ' +

  1153. 									'<span style="padding-left:20px;">' + cmanCP_VAR["strRGBA"] + '</span> ' +

  1154. 									'<span style="padding-left:20px;">' + cmanCP_VAR["strHSLA"] + '</span>';

  1155. 	}

  1156. 

  1157. }

  1158. 

  1159. // =========================================================================================

  1160. //	この色を選択	

  1161. // =========================================================================================

  1162. function cmanCP_JS_select(){

  1163. 

  1164. 	// ----- 返却形式 -------------------------------------------------

  1165. 	var wForm	= '';

  1166. 	var wOutText	= '';

  1167. 

  1168. 	if('rc_form' in cmanCP_VAR){

  1169. 		wForm = cmanCP_VAR['rc_form'].toUpperCase();

  1170. 	}

  1171. 

  1172. 	switch (wForm){

  1173. 	case '#16':

  1174. 		wOutText = '#'+cmanCP_VAR["obj_tR16"].value+cmanCP_VAR["obj_tG16"].value+cmanCP_VAR["obj_tB16"].value;

  1175. 		break;

  1176. 	case '16':

  1177. 		wOutText = ''+cmanCP_VAR["obj_tR16"].value+cmanCP_VAR["obj_tG16"].value+cmanCP_VAR["obj_tB16"].value;

  1178. 		break;

  1179. 	case 'RGB':

  1180. 		wOutText = 'rgb('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+')';

  1181. 		break;

  1182. 	case 'RGBA':

  1183. 		wOutText = 'rgba('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+', '+cmanCP_VAR["obj_tA"].value+')';

  1184. 		break;

  1185. 	case 'HSL':

  1186. 		wOutText = 'hsl('+cmanCP_VAR["obj_tH"].value+', '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tS"].value) * 100))+'%, '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tL"].value) * 100)) + '%)';

  1187. 		break;

  1188. 	case 'HSLA':

  1189. 		wOutText = 'hsla('+cmanCP_VAR["obj_tH"].value+', '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tS"].value) * 100))+'%, '+(cmanCP_JS_chk0to100s1(parseFloat(cmanCP_VAR["obj_tL"].value) * 100)) + '%, '+cmanCP_VAR["obj_tA"].value+')';

  1190. 		break;

  1191. 	default:

  1192. 		if(cmanCP_VAR["obj_tA"].value == '1'){

  1193. 			wOutText = 'rgb('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+')';

  1194. 		}else{

  1195. 			wOutText = 'rgba('+cmanCP_VAR["obj_tR"].value+', '+cmanCP_VAR["obj_tG"].value+', '+cmanCP_VAR["obj_tB"].value+', '+cmanCP_VAR["obj_tA"].value+')';

  1196. 		}

  1197. 		break;

  1198. 	}

  1199. 

  1200. 	// ----- テキスト設定 ---------------------------------------------

  1201. 	var wOutTextID = [];

  1202. 

  1203. 	if('rc_text' in cmanCP_VAR){

  1204. 		wOutTextID = cmanCP_VAR["rc_text"].split(',');

  1205. 	}

  1206. 

  1207. 	for(var i=0; i<wOutTextID.length; i++){

  1208. 

  1209. 		var wSetObj = document.getElementById(wOutTextID[i]);

  1210. 

  1211. 		if(wSetObj){

  1212. 			switch (wSetObj.tagName.toLowerCase()){

  1213. 			case 'button':

  1214. 			case 'data':

  1215. 			case 'input':

  1216. 			case 'option':

  1217. 			case 'progress':

  1218. 				wSetObj.value = wOutText;

  1219. 				break;

  1220. 			default:

  1221. 				wSetObj.innerText = wOutText;

  1222. 				break;

  1223. 			}

  1224. 		}

  1225. 	}

  1226. 

  1227. 	// ----- 背景色設定 ---------------------------------------------

  1228. 	var wOutBgID = [];

  1229. 

  1230. 	if('rc_bg' in cmanCP_VAR){

  1231. 		wOutBgID = cmanCP_VAR["rc_bg"].split(',');

  1232. 	}

  1233. 

  1234. 	for(var i=0; i<wOutBgID.length; i++){

  1235. 

  1236. 		var wSetObj = document.getElementById(wOutBgID[i]);

  1237. 

  1238. 		if(wSetObj){

  1239. 			wSetObj.style.backgroundColor = wOutText;

  1240. 		}

  1241. 	}

  1242. 

  1243. 	// --- 個別画面のonload呼び出し ----------------------------------

  1244. 	if('rc_func' in cmanCP_VAR){

  1245. 		try{

  1246. 			eval(cmanCP_VAR["rc_func"]+'("'+wOutText+'")');

  1247. 		}

  1248. 		catch(e){

  1249. 			alert('関数('+cmanCP_VAR["rc_func"]+')を実行できません');

  1250. 		}

  1251. 	}

  1252. 

  1253. 	// --- カラーパレットを閉じる ----------------------------------

  1254. 	cmanCP_JS_close();

  1255. 

  1256. }

  1257. 

  1258. 

  1259. // =========================================================================================

  1260. //	カラーパレット移動イベント	

  1261. // =========================================================================================

  1262. function cmanCP_JS_mdown(argEvent){

  1263. 

  1264. 	cmanCP_VAR['mdown']=1;

  1265. 

  1266. 	cmanCP_VAR['sPosX']	= argEvent.clientX;

  1267. 	cmanCP_VAR['sPosY']	= argEvent.clientY;

  1268. 	cmanCP_VAR['sTop']	= parseInt(cmanCP_VAR["objPop"].style.top.replace("px", ""));

  1269. 	cmanCP_VAR['sLeft']	= parseInt(cmanCP_VAR["objPop"].style.left.replace("px", ""));

  1270. 

  1271. 	return false;

  1272. 

  1273. }

  1274. function cmanCP_JS_mup(argEvent){

  1275. 	cmanCP_VAR['mdown']=0;

  1276. }

  1277. function cmanCP_JS_mout(argEvent){

  1278. 	cmanCP_VAR['mdown']=0;

  1279. }

  1280. 

  1281. function cmanCP_JS_mmove(argEvent){

  1282. 

  1283. 	if(cmanCP_VAR['mdown'] != 1){return;}

  1284. 	cmanCP_VAR["objPop"].style.top = cmanCP_VAR['sTop'] - ( cmanCP_VAR['sPosY'] - argEvent.clientY) + 'px';

  1285. 	cmanCP_VAR["objPop"].style.left = cmanCP_VAR['sLeft'] - ( cmanCP_VAR['sPosX'] - argEvent.clientX) + 'px';

  1286. 

  1287. 	return false;

  1288. 	

  1289. }