Merge pull request #4 from merkle-open/colorPicker

Add custom ColorPickerField

custom-definitions-spring/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/configuration/ColorPickerConfiguration.java

@@ -0,0 +1,20 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker.configuration;
+
+import info.magnolia.objectfactory.Components;
+
+import org.springframework.beans.factory.config.ConfigurableBeanFactory;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Scope;
+
+import com.merkle.oss.magnolia.definition.custom.colorpicker.model.ColorFactory;
+
+@Configuration
+public class ColorPickerConfiguration {
+
+	@Bean("merkle-customDefinition-colorPickerFactory")
+	@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
+	public ColorFactory colorFactory() {
+		return Components.getComponent(ColorFactory.class);
+	}
+}

custom-definitions-spring/src/main/java/com/merkle/oss/magnolia/definition/custom/configuration/CustomDefinitionBuildersConfiguration.java

@@ -1,5 +1,6 @@
 package com.merkle.oss.magnolia.definition.custom.configuration;
 
+import com.merkle.oss.magnolia.definition.custom.colorpicker.configuration.ColorPickerConfiguration;
 import com.merkle.oss.magnolia.definition.custom.imageset.configuration.ImageSetConfiguration;
 import com.merkle.oss.magnolia.definition.custom.linkset.configuration.LinkSetConfiguration;
 import com.merkle.oss.magnolia.definition.custom.videoset.configuration.VideoSetConfiguration;
@@ -10,7 +11,8 @@
 @Import({
 		LinkSetConfiguration.class,
 		ImageSetConfiguration.class,
-		VideoSetConfiguration.class
+		VideoSetConfiguration.class,
+		ColorPickerConfiguration.class
 })
 public class CustomDefinitionBuildersConfiguration {
 }

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerField.java

@@ -0,0 +1,56 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker;
+
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.ColorPicker;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CustomField;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.components.colorpicker.ColorPickerPopup;
+
+public class ColorPickerField extends CustomField<Integer> {
+	private final ColorPicker colorPicker;
+
+	public ColorPickerField(final ColorPickerFieldDefinition definition) {
+		colorPicker = new ColorPicker() {
+			@Override
+			protected void showPopup(final boolean open) {
+				super.showPopup(open);
+				if(open) {
+					getUI().getWindows().stream().filter(ColorPickerPopup.class::isInstance).forEach(this::addPopupStyles);
+				}
+			}
+
+			private void addPopupStyles(final Window window) {
+				window.addStyleName("dialog");
+				window.addStyleName("v-window-dialog");
+				window.addStyleName("framed");
+				window.addStyleName("v-window-framed");
+				window.addStyleName("small");
+			}
+		};
+		colorPicker.setModal(true);
+		colorPicker.setHSVVisibility(definition.isHsvv());
+		colorPicker.setTextfieldVisibility(definition.isTextField());
+		colorPicker.setRGBVisibility(definition.isRgb());
+		colorPicker.setSwatchesVisibility(definition.isSwatches());
+		colorPicker.setHistoryVisibility(definition.isHistory());
+		colorPicker.addValueChangeListener(event -> setValue(event.getValue().getRGB()));
+	}
+
+	@Override
+	protected void doSetValue(final Integer color) {
+		if(color != null) {
+			colorPicker.setValue(new Color(color));
+		}
+	}
+
+	@Override
+	protected Component initContent() {
+		return colorPicker;
+	}
+
+	@Override
+	public Integer getValue() {
+		return this.colorPicker.getValue().getRGB();
+	}
+}

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldDefinition.java

@@ -0,0 +1,58 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker;
+
+import info.magnolia.ui.field.ConfiguredFieldDefinition;
+import info.magnolia.ui.field.FieldType;
+
+@FieldType("colorPickerField")
+public class ColorPickerFieldDefinition extends ConfiguredFieldDefinition<Integer> {
+	private boolean rgb = false;
+	private boolean hsvv = false;
+	private boolean swatches = true;
+	private boolean history = false;
+	private boolean textField = true;
+
+	public ColorPickerFieldDefinition() {
+		setType(Integer.class);
+		setFactoryClass(ColorPickerFieldFactory.class);
+	}
+
+	public boolean isRgb() {
+		return rgb;
+	}
+
+	public void setRgb(final boolean rgb) {
+		this.rgb = rgb;
+	}
+
+	public boolean isHsvv() {
+		return hsvv;
+	}
+
+	public void setHsvv(final boolean hsvv) {
+		this.hsvv = hsvv;
+	}
+
+	public boolean isSwatches() {
+		return swatches;
+	}
+
+	public void setSwatches(final boolean swatches) {
+		this.swatches = swatches;
+	}
+
+	public boolean isHistory() {
+		return history;
+	}
+
+	public void setHistory(final boolean history) {
+		this.history = history;
+	}
+
+	public boolean isTextField() {
+		return textField;
+	}
+
+	public void setTextField(final boolean textField) {
+		this.textField = textField;
+	}
+}

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldDefinitionBuilder.java

@@ -0,0 +1,90 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker;
+
+import com.merkle.oss.magnolia.definition.builder.simple.AbstractConfiguredFieldDefinitionBuilder;
+
+import javax.annotation.Nullable;
+import java.util.Optional;
+
+/**
+ * builds a {@link ColorPickerFieldDefinition}
+ * @see <a href="https://vaadin.com/api/framework/current/com/vaadin/ui/ColorPicker.html">vaadin Docs - ColorPicker</a>
+ * @author Merkle DACH
+ */
+public class ColorPickerFieldDefinitionBuilder extends AbstractConfiguredFieldDefinitionBuilder<Integer, ColorPickerFieldDefinition, ColorPickerFieldDefinitionBuilder> {
+	@Nullable
+	private Boolean rgb;
+	@Nullable
+	private Boolean hsvv;
+	@Nullable
+	private Boolean swatches;
+	@Nullable
+	private Boolean history;
+	@Nullable
+	private Boolean textField;
+
+	public ColorPickerFieldDefinitionBuilder() {}
+	public ColorPickerFieldDefinitionBuilder(final ColorPickerFieldDefinition definition) {
+		super(definition);
+		rgb(definition.isRgb());
+		hsvv(definition.isHsvv());
+		swatches(definition.isSwatches());
+		history(definition.isHistory());
+		textField(definition.isTextField());
+	}
+
+	public ColorPickerFieldDefinitionBuilder rgb(final boolean rgb) {
+		this.rgb = rgb;
+		return self();
+	}
+
+	public ColorPickerFieldDefinitionBuilder rgb() {
+		return rgb(true);
+	}
+
+	public ColorPickerFieldDefinitionBuilder hsvv(final boolean hsvv) {
+		this.hsvv = hsvv;
+		return self();
+	}
+
+	public ColorPickerFieldDefinitionBuilder hsvv() {
+		return hsvv(true);
+	}
+
+	public ColorPickerFieldDefinitionBuilder swatches(final boolean swatches) {
+		this.swatches = swatches;
+		return self();
+	}
+
+	public ColorPickerFieldDefinitionBuilder swatches() {
+		return swatches(true);
+	}
+
+	public ColorPickerFieldDefinitionBuilder history(final boolean history) {
+		this.history = history;
+		return self();
+	}
+
+	public ColorPickerFieldDefinitionBuilder history() {
+		return history(true);
+	}
+
+	public ColorPickerFieldDefinitionBuilder textField(final boolean textField) {
+		this.textField = textField;
+		return self();
+	}
+
+	public ColorPickerFieldDefinitionBuilder textField() {
+		return textField(true);
+	}
+
+	public ColorPickerFieldDefinition build(final String name) {
+		final ColorPickerFieldDefinition definition = new ColorPickerFieldDefinition();
+		super.populate(definition, name);
+		Optional.ofNullable(rgb).ifPresent(definition::setRgb);
+		Optional.ofNullable(hsvv).ifPresent(definition::setHsvv);
+		Optional.ofNullable(swatches).ifPresent(definition::setSwatches);
+		Optional.ofNullable(history).ifPresent(definition::setHistory);
+		Optional.ofNullable(textField).ifPresent(definition::setTextField);
+		return definition;
+	}
+}

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldFactory.java

@@ -0,0 +1,19 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker;
+
+import com.vaadin.ui.Component;
+import info.magnolia.objectfactory.ComponentProvider;
+import info.magnolia.ui.field.factory.AbstractFieldFactory;
+
+public class ColorPickerFieldFactory extends AbstractFieldFactory<Integer, ColorPickerFieldDefinition> {
+	final ColorPickerFieldDefinition definition;
+
+	public ColorPickerFieldFactory(final ColorPickerFieldDefinition definition, final ComponentProvider componentProvider) {
+		super(definition, componentProvider);
+		this.definition = definition;
+	}
+
+	@Override
+	protected Component createFieldComponent() {
+		return new ColorPickerField(definition);
+	}
+}

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/README.md

@@ -0,0 +1,45 @@
+# Color-Picker
+A color picker field using vaadin color picker.
+
+## Screenshots
+### Dialog
+<img alt="dialog" src='assets/dialog.png' width='500'>
+
+### Picker
+| rgb                                              | swatches                                              | hsv                                              | 
+|--------------------------------------------------|-------------------------------------------------------|--------------------------------------------------|
+| <img alt="rgb" src='assets/rgb.png' width='250'> | <img alt="rgb" src='assets/swatches.png' width='250'> | <img alt="rgb" src='assets/hsv.png' width='250'> |
+
+
+
+## Usage
+### Dialog
+
+```java
+import info.magnolia.ui.field.EditorPropertyDefinition;
+import info.magnolia.module.blossom.annotation.TabFactory;
+
+import com.merkle.oss.magnolia.definition.custom.colorpicker.ColorPickerFieldDefinitionBuilder;
+
+@TabFactory("someTab")
+public List<EditorPropertyDefinition> someTab() {
+    return List.of(
+            new ColorPickerFieldDefinitionBuilder().history().hsvv().rgb().swatches().textField().build("color")
+    );
+}
+```
+### Model
+
+```java
+import info.magnolia.jcr.util.PropertyUtil;
+import com.vaadin.shared.ui.colorpicker.Color;
+
+private final ColorFactory colorFactory;
+
+@RequestMapping("someComponentRequestMapping")
+public String render(final Model model, final PowerNode node) {
+    colorFactory.create("color", node);
+    colorFactory.create("color", dialogLocale, node); // if color is i18n
+    ...
+}
+```

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/model/ColorFactory.java

@@ -0,0 +1,29 @@
+package com.merkle.oss.magnolia.definition.custom.colorpicker.model;
+
+import java.util.Locale;
+import java.util.Optional;
+
+import javax.inject.Inject;
+
+import com.merkle.oss.magnolia.definition.custom.configuration.LocaleProvider;
+import com.merkle.oss.magnolia.powernode.PowerNode;
+import com.merkle.oss.magnolia.powernode.ValueConverter;
+import com.vaadin.shared.ui.colorpicker.Color;
+
+public class ColorFactory {
+    private final LocaleProvider localeProvider;
+
+    @Inject
+    public ColorFactory(final LocaleProvider localeProvider) {
+        this.localeProvider = localeProvider;
+    }
+
+    public Optional<Color> create(final String propertyName, final PowerNode node) {
+        return create(propertyName, localeProvider.getDefaultLocale(node), node);
+    }
+    public Optional<Color> create(final String propertyName, final Locale locale, final PowerNode node) {
+        return node
+                .getProperty(propertyName, locale, ValueConverter::getInteger)
+                .map(Color::new);
+    }
+}

custom-definitions/src/main/resources/META-INF/magnolia/custom-definition-builders.xml

@@ -52,6 +52,10 @@
             <type>com.merkle.oss.magnolia.definition.custom.imageset.model.ImageReferenceModel$Factory</type>
             <implementation>com.merkle.oss.magnolia.definition.custom.imageset.model.ImageReferenceModel$Factory</implementation>
         </component>
+        <component>
+            <type>com.merkle.oss.magnolia.definition.custom.colorpicker.model.ColorFactory</type>
+            <implementation>com.merkle.oss.magnolia.definition.custom.colorpicker.model.ColorFactory</implementation>
+        </component>
 
         <component>
             <type>com.merkle.oss.magnolia.definition.custom.videoset.model.VideoModel$Factory</type>