spectrumで、透過の有無でカラーフォーマットを変更する方法を教えてください

要件

ユーザーが透過度のない色を選択した場合、HEXカラーとして値をPOST
ユーザーが透過度のある色を選択した場合、RGBAとして値をPOST

実装

実は既に上記の要件を満たすものは実装したのですが、
個人的にもっとスマートな書き方がありそうだったので質問した次第です。

https://codepen.io/qwe001/pen/GmENod

/*
color.getAlpha()で選択した色の透過度の値を取得し、
1なら透過なしということなのでinput id="spectrum"のvalueをHEXカラーの文字列で置き換えます。
1以外なら透過度ありということなのでvalueをRGBAの文字列で置き換えます。
*/
$(function(){
	$('#spectrum').spectrum({
		// 他のオプションは上記のURLを参照して下さい
		change: function(color){
			var format = color.getAlpha() === 1 ? color.toHexString() : color.toRgbString();
			$(this).attr('value', format); // この部分をcolor.preferredFormat NULL or 'Hex' みたいにしたい
			$('#color').text(format);
		},
	});
});

もっと良いアイデアはございますでしょうか。ご教授お願い致します。

追記

s8_chu様返信ありがとうございます。

提示頂いているコード拝見しました。clickoutFiresChangeとallowEmptyはおっしゃる通りですね。記述の必要はないです。
また、ceil関数を使うという方法、採用させて頂きます。ありがとうございました。

preferredFormatについては、string型で、デフォルト値はNULLです。
実際のところ、valueの値を明示的に書き換えなくてもこのformatを'HEX'と指定すれば、値の書き換えは行われませんがHEXカラーコードとしてPOSTされます。
しかし、この時に透過色を指定すると、本当はRGBAとしてPOSTして欲しいのですが、実際はHEXとしてPOSTされます。
結果として、透過色の情報が破棄され、透過色の反映ができなくなります。
じゃあformatを'rgba'にすればいいんじゃないの、と思いますが、その指定方法はないんです…。なんでだよ。

参考URL: https://bgrins.github.io/spectrum/#options-preferredFormat

RGBAでPOSTさせるためには、preferredFormatのオプションを書かないか、明示的にNULLと記述するしかありません。
しかしNULLにすると、透過色ではない時にvalueがRGBとしてPOSTされるので、valueをHEXに書き換えてPOSTする、ということをしているのが上記URLにて実装したコードです。
その後、私のほうでも引き続きより良い書き方を調べましたが見つからなかったのでとりあえずこのコードで実装することにします。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

質問文に載っている部分のコードではないですが、2つ不要であろう箇所がありました。

clickoutFiresChange, はデフォルトでtrueになっているので、記述する必要はないと思います。
allowEmpty, preferredFormatはデフォルトでfalseになっているので、記述する必要はないと思います。

質問文のコードよりもスマートな書き方は思いつきませんでしたが、color.getAlpha() === 1という部分はceil関数を使うことで以下のように書くこともできると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" type="text/css"
7          href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
8    <title>タイトル</title>
9</head>
10<body>
11<input id="spectrum" name="color" type="text" value="#FFFFFF">
12<span id="text">#FFFFFF</span>
13<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
14<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
15<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/i18n/jquery.spectrum-ja.min.js"></script>
16<script>
17    $(function () {
18        $("#spectrum").spectrum({
19            color: $(this).val(),
20            flat: false,
21            showInput: true,
22            showAlpha: true,
23            showInitial: true,
24            showPalette: true,
25            showPaletteOnly: true,
26            togglePaletteOnly: true,
27            togglePaletteMoreText: "カスタム...",
28            togglePaletteLessText: "閉じる",
29            hideAfterPaletteSelect: true,
30            chooseText: "OK",
31            cancelText: "キャンセル",
32            palette: [
33                [
34                    "#000000",
35                    "#993300",
36                    "#333300",
37                    "#003300",
38                    "#003366",
39                    "#000080",
40                    "#333399",
41                    "#333333"
42                ],
43                [
44                    "#800000",
45                    "#FF6600",
46                    "#808000",
47                    "#008000",
48                    "#008080",
49                    "#0000FF",
50                    "#666699",
51                    "#808080"
52                ],
53                [
54                    "#FF0000",
55                    "#FF9900",
56                    "#99CC00",
57                    "#339966",
58                    "#33CCCC",
59                    "#3366FF",
60                    "#800080",
61                    "#999999"
62                ],
63                [
64                    "#FF00FF",
65                    "#FFCC00",
66                    "#FFFF00",
67                    "#00FF00",
68                    "#00FFFF",
69                    "#00CCFF",
70                    "#993366",
71                    "#FFFFFF"
72                ],
73                [
74                    "#FF99CC",
75                    "#FFCC99",
76                    "#FFFF99",
77                    "#CCFFCC",
78                    "#CCFFFF",
79                    "#99CCFF",
80                    "#CC99FF",
81                    "rgba(255,255,255,0)"
82                ]
83            ],
84            change: function (color) {
85                var format = Math.ceil(color.getAlpha()) ? color.toHexString() : color.toRgbString();
86                $(this).attr("value", format);
87                $("#text").text(format);
88            }
89        });
90    });
91</script>
92</body>
93</html>