https://codeforces.com/codeforces.org/s/19794/js/controls/wysiwyg.colorpicker.js

1/**
2 * Controls: Colorpicker plugin
3 * 
4 * Depends on jWYSIWYG, (farbtastic || other colorpicker plugins)
5 */
6(function ($) {
7	if (undefined === $.wysiwyg) {
8		throw "wysiwyg.colorpicker.js depends on $.wysiwyg";
9	}
10
11	if (!$.wysiwyg.controls) {
12		$.wysiwyg.controls = {};
13	}
14
15	/*
16	 * Wysiwyg namespace: public properties and methods
17	 */
18	$.wysiwyg.controls.colorpicker = {
19		modalOpen: false,
20		color: {
21			back: {
22				prev: "#ffffff",
23				palette: []
24			},
25			fore: {
26				prev: "#123456",
27				palette: []
28			}
29		},
30
31		addColorToPalette: function (type, color) {
32			if (-1 === $.inArray(color, this.color[type].palette)) {
33				this.color[type].palette.push(color);
34			} else {
35				this.color[type].palette.sort(function (a, b) {
36					if (a === color) {
37						return 1;
38					}
39
40					return 0;
41				});
42			}
43		},
44
45		init: function (Wysiwyg) {
46			if ($.wysiwyg.controls.colorpicker.modalOpen === true) {
47				return false;
48			} else {
49				$.wysiwyg.controls.colorpicker.modalOpen = true;
50			}
51			var self = this, elements, dialog, colorpickerHtml, dialogReplacements, key, translation;
52
53			dialogReplacements = {
54				legend: "Colorpicker",
55				color: "Color",
56				submit: "Apply",
57				reset: "Cancel"
58			};
59
60			colorpickerHtml = '<form class="wysiwyg"><fieldset><legend>{legend}</legend>' +
61				'<ul class="palette"></ul>' +
62				'<label>{color}: <input type="text" name="color" value="#123456"/></label>' +
63				'<div class="wheel"></div>' +
64				'<input type="submit" class="button" value="{submit}"/> ' +
65				'<input type="reset" value="{reset}"/></fieldset></form>';
66
67			for (key in dialogReplacements) {
68				if ($.wysiwyg.i18n) {
69					translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs.colorpicker");
70
71					if (translation === dialogReplacements[key]) { // if not translated search in dialogs 
72						translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs");
73					}
74
75					dialogReplacements[key] = translation;
76				}
77
78				colorpickerHtml = colorpickerHtml.replace("{" + key + "}", dialogReplacements[key]);
79			}
80
81			if ($.modal) {
82				elements = $(colorpickerHtml);
83
84				if ($.farbtastic) {
85					this.renderPalette(elements, "fore");
86					elements.find(".wheel").farbtastic(elements.find("input:text"));
87				}
88
89				$.modal(elements.html(), {
90					maxWidth: Wysiwyg.defaults.formWidth,
91					maxHeight: Wysiwyg.defaults.formHeight,
92					overlayClose: true,
93
94					onShow: function (dialog) {
95						$("input:submit", dialog.data).click(function (e) {
96							var color = $('input[name="color"]', dialog.data).val();
97							self.color.fore.prev = color;
98							self.addColorToPalette("fore", color);
99
100							if ($.browser.msie) {
101								Wysiwyg.ui.returnRange();
102							}
103
104							Wysiwyg.editorDoc.execCommand('ForeColor', false, color);
105							$.modal.close();
106							return false;
107						});
108						$("input:reset", dialog.data).click(function (e) {
109							if ($.browser.msie) {
110								Wysiwyg.ui.returnRange();
111							}
112
113							$.modal.close();
114							return false;
115						});
116						$("fieldset", dialog.data).click(function (e) {
117							e.stopPropagation();
118						});
119					},
120
121					onClose: function (dialog) {
122						$.wysiwyg.controls.colorpicker.modalOpen = false;
123						$.modal.close();
124					}
125				});
126			} else if ($.fn.dialog) {
127				elements = $(colorpickerHtml);
128
129				if ($.farbtastic) {
130					this.renderPalette(elements, "fore");
131					elements.find(".wheel").farbtastic(elements.find("input:text"));
132				}
133
134				dialog = elements.appendTo("body");
135				dialog.dialog({
136					modal: true,
137
138					open: function (event, ui) {
139						$("input:submit", elements).click(function (e) {
140							var color = $('input[name="color"]', dialog).val();
141							self.color.fore.prev = color;
142							self.addColorToPalette("fore", color);
143
144							if ($.browser.msie) {
145								Wysiwyg.ui.returnRange();
146							}
147
148							Wysiwyg.editorDoc.execCommand('ForeColor', false, color);
149							$(dialog).dialog("close");
150							return false;
151						});
152						$("input:reset", elements).click(function (e) {
153							if ($.browser.msie) {
154								Wysiwyg.ui.returnRange();
155							}
156
157							$(dialog).dialog("close");
158							return false;

159						});
160						$('fieldset', elements).click(function (e) {
161							e.stopPropagation();
162						});
163					},
164
165					close: function (event, ui) {
166						$.wysiwyg.controls.colorpicker.modalOpen = false;
167						dialog.dialog("destroy");
168						dialog.remove();
169					}
170				});
171			} else {
172				if ($.farbtastic) {
173					elements = $("<div/>")
174						.css({"position": "fixed",
175							"z-index": 2000,
176							"left": "50%", "top": "50%", "background": "rgb(0, 0, 0)",
177							"margin-top": -1 * Math.round(Wysiwyg.defaults.formHeight / 2),
178							"margin-left": -1 * Math.round(Wysiwyg.defaults.formWidth / 2)})
179						.html(colorpickerHtml);
180					this.renderPalette(elements, "fore");
181					elements.find("input[name=color]").val(self.color.fore.prev);
182					elements.find(".wheel").farbtastic(elements.find("input:text"));
183					$("input:submit", elements).click(function (event) {
184						var color = $('input[name="color"]', elements).val();
185						self.color.fore.prev = color;
186						self.addColorToPalette("fore", color);
187
188						if ($.browser.msie) {
189							Wysiwyg.ui.returnRange();
190						}
191
192						Wysiwyg.editorDoc.execCommand('ForeColor', false, color);
193
194						$(elements).remove();
195						$.wysiwyg.controls.colorpicker.modalOpen = false;
196						return false;
197					});
198					$("input:reset", elements).click(function (event) {
199
200						if ($.browser.msie) {
201							Wysiwyg.ui.returnRange();
202						}
203
204						$(elements).remove();
205						$.wysiwyg.controls.colorpicker.modalOpen = false;
206						return false;
207					});
208					$("body").append(elements);
209					elements.click(function(e) {
210					  e.stopPropagation();
211					});
212				}
213			}
214		},
215
216		renderPalette: function (jqObj, type) {
217			var palette = jqObj.find(".palette"),
218				bind = function () {
219					var color = $(this).text();
220					jqObj.find("input[name=color]").val(color);
221					// farbtastic binds on keyup
222					if ($.farbtastic) {
223						jqObj.find("input[name=color]").trigger("keyup");
224					}
225				},
226				colorExample,
227				colorSelect,
228				i;
229
230			for (i = this.color[type].palette.length - 1; i > -1; i -= 1) {
231				colorExample = $("<div/>").css({
232					"float": "left",
233					"width": "16px",
234					"height": "16px",
235					"margin": "0px 5px 0px 0px",
236					"background-color": this.color[type].palette[i]
237				});
238
239				colorSelect = $("<li>" + this.color[type].palette[i] + "</li>")
240					.css({"float": "left", "list-style": "none"})
241					.append(colorExample)
242					.bind("click.wysiwyg", bind);
243
244				palette.append(colorSelect).css({"margin": "0px", "padding": "0px"});
245			}
246		}
247	};
248})(jQuery);