about:profiles: Add color picker scripts

1 files changed, 57 insertions, 0 deletions

diff --git a/src/schemes/about/profiles.c b/src/schemes/about/profiles.c
index 5b8e374..0e7d804 100644
--- a/src/schemes/about/profiles.c
+++ b/src/schemes/about/profiles.c
@@ -180,6 +180,62 @@ static const gchar *styles =
 	"}\n"
 	;
 
+static const gchar *cp_script =
+	"(function () {\n"
+	"var parent = document.currentScript.parentNode;\n"
+	"var radio      = parent.querySelector(\"input[type=radio]\");\n"
+	"var svg        = parent.querySelector(\"svg\");\n"
+	"var colorInput = parent.querySelector(\"input[type=hidden]\");\n"
+	"var cpDiv      = parent.querySelector(\"div.color-picker\");\n"
+	"var slide     = cpDiv.querySelector(\"div.slide\");\n"
+	"var slideInd  = cpDiv.querySelector(\"div.slide-indicator\");\n"
+	"var picker    = cpDiv.querySelector(\"div.picker\");\n"
+	"var pickerInd = cpDiv.querySelector(\"div.picker-indicator\");\n"
+	"var cancelBtn = cpDiv.querySelector(\"input[type=reset]\");\n"
+	"var okBtn     = cpDiv.querySelector(\"input[type=submit]\");\n"
+	"var colorHex;\n"
+	"var cp = ColorPicker(slide, picker,\n"
+	"	function (hex, hsv, rgb, pickerCoord, sliderCoord) {\n"
+	"		ColorPicker.positionIndicators(\n"
+	"				slideInd, pickerInd,\n"
+	"				sliderCoord, pickerCoord);\n"
+	"		colorHex = hex;\n"
+	"	});\n"
+	"radio.addEventListener(\"change\", function (event) {\n"
+	"	var cps = document.querySelectorAll(\n"
+	"			\"div.color-picker\");\n"
+	"	for (var i = 0; i < cps.length; ++i) {\n"
+	"		cps[i].style.display = \"none\";\n"
+	"	}\n"
+	"});\n"
+	"svg.addEventListener(\"click\", function (event) {\n"
+	"	if (radio.checked) {\n"
+	"		cp.setHex(colorInput.value);\n"
+	"		cpDiv.style.display = \"block\";\n"
+	"	}\n"
+	"});\n"
+	"cancelBtn.addEventListener(\"click\", function (event) {\n"
+	"	cpDiv.style.display = \"none\";\n"
+	"	event.preventDefault();\n"
+	"	return false;\n"
+	"});\n"
+	"okBtn.addEventListener(\"click\", function (event) {\n"
+	"	colorInput.value = colorHex;\n"
+	"	for (var i = 0; i < svg.childNodes.length; ++i) {\n"
+	"		if (svg.childNodes[i].nodeType != Node.ELEMENT_NODE)\n"
+	"		{\n"
+	"			continue;\n"
+	"		}\n"
+	"		svg.childNodes[i].setAttribute(\"fill\",\n"
+	"				colorHex);\n"
+	"	}\n"
+	"	cpDiv.style.display = \"none\";\n"
+	"	event.preventDefault();\n"
+	"	return false;\n"
+	"});\n"
+	"})();\n"
+	;
+
 static gchar *
 generate_div(MqProfiles *profiles, gchar *id)
 {
@@ -236,6 +292,7 @@ generate_div(MqProfiles *profiles, gchar *id)
 				NULL),
 			mq_html_buttonbox(NULL, "OK", NULL, "Cancel"),
 			NULL),
+		mq_html_container("script", NULL, g_strdup(cp_script), NULL),
 		mq_html_container("span", is_current ? "current" : NULL, name,
 			NULL),
 		mq_html_input_text(name_str, NULL, name),