Fixed #175. Contribute ColorPickerTextField back to wicket-bootstrap

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/ColorPickerTextField.java

@@ -0,0 +1,104 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.form;
+
+import java.util.Map;
+
+import org.apache.wicket.Component;
+import org.apache.wicket.ajax.AjaxRequestHandler;
+import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.AjaxRequestTarget.IJavaScriptResponse;
+import org.apache.wicket.ajax.AjaxRequestTarget.IListener;
+import org.apache.wicket.event.IEvent;
+import org.apache.wicket.markup.ComponentTag;
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.markup.html.form.TextField;
+import org.apache.wicket.model.IModel;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import de.agilecoders.wicket.core.util.Attributes;
+
+/**
+ * Bootstrap ColorPicker from http://www.eyecon.ro/bootstrap-colorpicker/
+ * @author ceefour
+ */
+public class ColorPickerTextField extends TextField<String> {
+
+	private static final long serialVersionUID = 1L;
+	/**
+	 * bootstrap-colorpicker won't enhance if the textfield was not enabled,
+	 * so we must wait until the first time the textfield is enabled.
+	 */
+	private boolean wasEnhanced = false;
+
+	/**
+	 * @param id
+	 */
+	public ColorPickerTextField(String id) {
+		super(id, String.class);
+	}
+
+	/**
+	 * @param id
+	 * @param model
+	 */
+	public ColorPickerTextField(String id, IModel<String> model) {
+		super(id, model, String.class);
+	}
+
+	@Override
+	protected void onInitialize() {
+		super.onInitialize();
+		setOutputMarkupId(true);
+	}
+
+	@Override
+	public void renderHead(IHeaderResponse response) {
+		super.renderHead(response);
+		response.render(CssHeaderItem.forReference(ColorPickerTextFieldCssReference.instance()));
+		response.render(JavaScriptHeaderItem.forReference(ColorPickerTextFieldJavaScriptReference.instance()));
+		if (isEnabledInHierarchy()) {
+			response.render(JavaScriptHeaderItem.forScript("$(document).ready(function() {" +
+					"$('#" + getMarkupId() + "').colorpicker();" +
+				"});",
+				"bootstrap-colorpicker"));
+//			wasEnhanced = true; // not working if initially disabled
+		}
+	}
+
+	@Override
+	protected void onComponentTag(ComponentTag tag) {
+		super.onComponentTag(tag);
+		Attributes.addClass(tag, "bootstrap-colorpicker");
+	}
+
+	private static final Logger log = LoggerFactory
+			.getLogger(ColorPickerTextField.class);
+	@Override
+	public void onEvent(IEvent<?> event) {
+		super.onEvent(event);
+		if (event.getPayload() instanceof AjaxRequestHandler) {
+			final AjaxRequestHandler target = (AjaxRequestHandler) event.getPayload();
+			target.addListener(new IListener() {
+				@Override
+				public void onBeforeRespond(Map<String, Component> map,
+						AjaxRequestTarget target) {
+				}
+
+				@Override
+				public void onAfterRespond(Map<String, Component> map,
+						IJavaScriptResponse response) {
+					if (isEnabledInHierarchy() && !wasEnhanced) {
+						response.addJavaScript("$('#" + getMarkupId() + "').colorpicker();");
+						wasEnhanced = true;
+					} else if (!isEnabledInHierarchy()) {
+						// we need to enhance again when/if this component is enabled later
+						wasEnhanced = false;
+					}
+				}
+			});
+		}
+	}
+
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/ColorPickerTextFieldCssReference.java

@@ -0,0 +1,31 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.form;
+
+import org.apache.wicket.request.resource.CssResourceReference;
+
+/**
+ * Bootstrap {@link ColorPickerTextField} CSS reference.
+ *
+ * @author ceefour
+ */
+public class ColorPickerTextFieldCssReference extends CssResourceReference {
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * Singleton instance of this reference
+     */
+    private static final ColorPickerTextFieldCssReference INSTANCE = new ColorPickerTextFieldCssReference();
+
+    /**
+     * @return the single instance of the resource reference
+     */
+    public static ColorPickerTextFieldCssReference instance() {
+        return INSTANCE;
+    }
+
+    /**
+     * Private constructor.
+     */
+    private ColorPickerTextFieldCssReference() {
+        super(ColorPickerTextFieldCssReference.class, "css/colorpicker.css");
+    }
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/ColorPickerTextFieldJavaScriptReference.java

@@ -0,0 +1,31 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.form;
+
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+
+/**
+ * Bootstrap {@link ColorPickerTextField} JavaScript reference.
+ *
+ * @author ceefour
+ */
+public class ColorPickerTextFieldJavaScriptReference extends JavaScriptResourceReference {
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * Singleton instance of this reference
+     */
+    private static final ColorPickerTextFieldJavaScriptReference INSTANCE = new ColorPickerTextFieldJavaScriptReference();
+
+    /**
+     * @return the single instance of the resource reference
+     */
+    public static ColorPickerTextFieldJavaScriptReference instance() {
+        return INSTANCE;
+    }
+
+    /**
+     * Private constructor.
+     */
+    private ColorPickerTextFieldJavaScriptReference() {
+        super(ColorPickerTextFieldJavaScriptReference.class, "js/colorpicker.js");
+    }
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/css/colorpicker.css

@@ -0,0 +1,127 @@
+/*!
+* Colorpicker for Bootstrap
+*
+* Copyright 2012 Stefan Petre
+* Licensed under the Apache License v2.0
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+*/
+.colorpicker-saturation {
+	width: 100px;
+	height: 100px;
+	background-image: url(../img/saturation.png);
+	cursor: crosshair;
+	float: left;
+}
+.colorpicker-saturation i {
+	display: block;
+	height: 5px;
+	width: 5px;
+	border: 1px solid #000;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin: -4px 0 0 -4px;
+}
+.colorpicker-saturation i b {
+	display: block;
+	height: 5px;
+	width: 5px;
+	border: 1px solid #fff;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+}
+.colorpicker-hue, .colorpicker-alpha {
+	width: 15px;
+	height: 100px;
+	float: left;
+	cursor: row-resize;
+	margin-left: 4px;
+	margin-bottom: 4px;
+}
+.colorpicker-hue i, .colorpicker-alpha i {
+	display: block;
+	height: 1px;
+	background: #000;
+	border-top: 1px solid #fff;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	margin-top: -1px;
+}
+.colorpicker-hue {
+	background-image: url(../img/hue.png);
+}
+.colorpicker-alpha {
+	background-image: url(../img/alpha.png);
+	display: none;
+}
+.colorpicker {
+	*zoom: 1;
+	top: 0;
+	left: 0;
+	padding: 4px;
+	min-width: 120px;
+	margin-top: 1px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+.colorpicker:before, .colorpicker:after {
+	display: table;
+	content: "";
+}
+.colorpicker:after {
+	clear: both;
+}
+.colorpicker:before {
+	content: '';
+	display: inline-block;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-bottom: 7px solid #ccc;
+	border-bottom-color: rgba(0, 0, 0, 0.2);
+	position: absolute;
+	top: -7px;
+	left: 6px;
+}
+.colorpicker:after {
+	content: '';
+	display: inline-block;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-bottom: 6px solid #ffffff;
+	position: absolute;
+	top: -6px;
+	left: 7px;
+}
+.colorpicker div {
+	position: relative;
+}
+.colorpicker.alpha {
+	min-width: 140px;
+}
+.colorpicker.alpha .colorpicker-alpha {
+	display: block;
+}
+.colorpicker-color {
+	height: 10px;
+	margin-top: 5px;
+	clear: both;
+	background-image: url(../img/alpha.png);
+	background-position: 0 100%;
+}
+.colorpicker-color div {
+	height: 10px;
+}
+.input-append.color .add-on i, .input-prepend.color .add-on i {
+	display: block;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+}