AI OnAI Off
Hi,
I do not think id for color picker is the reason. It may be cause of missing css for color picker.
Just try to do it as following:
define([
"dojo/_base/array",
"dojo/_base/connect",
"dojo/_base/declare",
"dijit/_CssStateMixin",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojox/widget/ColorPicker",
"epi/epi",
"epi/shell/widget/_ValueRequiredMixin",
"dojo/text!dojox/widget/ColorPicker/ColorPicker.css",
"dojo/dom-construct"],
function (
array,
connect,
declare,
_CssStateMixin,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
ColorPicker,
epi,
_ValueRequiredMixin,
css,
domConstruct) {
return declare("customCms/ColorPickerEditor", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin],
{
templateString: '<div class=\"dijitInline\"><div class=\"colorPickerContainer\"> \
<div data-dojo-attach-point=\"stateNode, tooltipNode\"> \
<div data-dojo-attach-point=\"colorPicker\" data-dojo-type=\"dojox.widget.ColorPicker\" > \
</div></div></div></div>',
intermediateChanges: false,
value: null,
multiple: true,
onChange: function (value) {
// Event
},
postCreate: function () {
// summary:
// Set the value to the control after the DOM fragment is created.
// tags:
// protected
// call base implementation
this.inherited(arguments);
// Init widget and bind event
this.colorPicker.set("intermediateChanges", this.intermediateChanges);
this.connect(this.colorPicker, "onChange", this._onColorPickerChanged);
domConstruct.create("style", { innerHTML: css }, document.head);
},
...
I'm trying to create a custom colour picker based on the dojo colour picker widget as i can't find any plugins or out of the box full colour pickers for the CMS. I have my editor descriptor set up and the widget is showing but i'm having trouble where when i set two properties on my page both of them will only edit the first instance of my widget.
From the documentation for dojox/widget/ColorPicker it looks like i need to add in an Id to the div but I'm not too sure where i can pull in a unique id for my custom widget. The styling is also not being pulled in because i haven't referenced the CSS style sheet as i couldn't see any examples of where i would place the import line or do i need to download the css and place it in my ClientResources.
I based my code from the Alloy demo https://github.com/episerver/alloy-mvc-template/blob/master/src/Alloy.Mvc.Template/ClientResources/Scripts/Editors/StringList.js example but i didn't override/include some function that were handling events/data i didn't need.