ColorPicker attached to property?

Vote:
 

Hi!

Is there a built-in ColorPicker in EPiServer 7?

What I want to achieve is this: instead of manually typing a string like '#112233' you get to pick a color and the corresponding hex-value is written.

If there is no ColorPicker available (which I'm starting to suspect), should one write or download a custom property?

 

//Marcus

#79423
Dec 17, 2013 9:37
Vote:
 

I guess you have to add a custom Tiny MCE plug-in. There seems to be one built into Tiny MCE 4 (http://www.tinymce.com/wiki.php/Plugin:textcolor) but I'm not sure how much work it is getting it to work in Tiny MCE 3.5 which is the current version used in EPiServer. Check the Tiny MCE developers guide on how to plug-in a Tiny MCE plug-in into EPiServer.

#79425
Dec 17, 2013 10:32
Vote:
 

Yes, it's worth looking into if you want a color picker in Tiny MCE. I would like a color picker attached to a string property, somewhat like this:

// Start dummy code

[UIHint(UIHint.ColorPicker)]
public virtual string HeadingBackground { get; set; }

// End dummy code

#79430
Dec 17, 2013 11:28
Vote:
 

Tiny MCE settings are stored using something called property settings. These can be defined either for a specific property or as a global setting that can be reused for some or all properties. There is currently no built in support to define property settings for a specific property through code. So you will have to create a Tiny MCE plug-in as described in the documentation and add that setting using the administrative interface (it's possible to automatically configure this in an initialization module. Here is an example of that).

#79432
Dec 17, 2013 11:35
Vote:
 

Ok. The thing is I don't want the color picker inside the Tiny MCE Editor. I want it attached to a simple textbox so that when you set focus on the textbox a color picker shows up.

There's a Logica Color Picker 0.2.0.1 available on EPiServer NUGET, but for various reasons I want to avoid 3rd party solutions.

Thanks anyway for the information!

#79465
Dec 18, 2013 8:03
Vote:
 
#79467
Dec 18, 2013 8:28
Vote:
 

You could use the dojox.widget.ColorPicker.

 

#79764
Jan 03, 2014 17:22
Vote:
 

I probably could use the dojox.widget.ColorPicker, however wouldn't that require me to use a custom property? Or could I use UIHint or such? We're running EPiServer 7.0.

#79804
Jan 08, 2014 8:51
Vote:
 

In general, you should be able to just define the widget directly, for instance by using the uihint/editordescriptor pattern or by defining the clienteditor attribute ([ClientEditor(ClientEditingClass = "dojox/widget/ColorPicker")]). For the ColorPicker however, is seems like it throws an exception if the value is null so you have to create a wrapping widget. See the StringList editor in the Alloy sample packages for an example (though you can probably simplify your widget quite a lot).

#79810
Jan 08, 2014 9:32
Vote:
 

Linus, thanks,

I did the same.

But I have a small question with css file for dojox.widget.ColorPicker. I copied it to the project, but how to define usage of the standard css file from dojo library in the wrapping widget? 

 

#79812
Jan 08, 2014 9:48
Vote:
 

The dojox-color picker seems very experimental and non-AMD. You can probably add the link to the template of your wrapping widget. There seems to be a somewhat simpler widget in the supported dijit namespace: http://livedocs.dojotoolkit.org/dijit/ColorPalette

#79816
Jan 08, 2014 10:15
Vote:
 

Please, check (I used Alloy mvc as an example)

1. Use the UIHint or ClientEditor for property.

[ClientEditor(ClientEditingClass = "alloy.editors.ColorPicker")]

public virtual string ColorPicker { get; set; }

2. add to the project ClientResources\Scripts\Editors\ColorPicker.js

define([

    "dojo/_base/connect",

   "dojo/_base/declare",

    "dijit/_CssStateMixin",

    "dijit/_Widget",

    "dijit/_TemplatedMixin",

    "dijit/_WidgetsInTemplateMixin",

     "dojox/widget/ColorPicker",

    "epi/shell/widget/_ValueRequiredMixin"

],

function (

    connect,

    declare,

    _CssStateMixin,

    _Widget,

    _TemplatedMixin,

    _WidgetsInTemplateMixin,

     ColorPicker,

    _ValueRequiredMixin

 ) {

    return declare("alloy.editors.ColorPicker", [_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,

 

            onChange: function (value) {

                // summary:

                //    Called when the value in the widget changes.

                // tags:

                //    public callback

            },

 

            postCreate: function() {

                // summary:

                //    Set the value to the control after the DOM fragment is created.

                // tags:

                //    protected

               

                if (this.value != null) {

                    this.set("value", this.value);

                } else {

                    this._set("value", "#ffffff");

                    this.onChange(this.value);

                }

 

                // call base implementation

                this.inherited(arguments);

               

                // Init widget and bind event

                this.colorPicker.set("intermediateChanges", this.intermediateChanges);

                this.connect(this.colorPicker, "onChange", this._onColorPickerChanged);

            },

 

            _onIntermediateChange: function(event) {

                // summary:

                //    Handles the color picker key press events event and populates this to the onChange method.

                // tags:

                //    private

 

                if (this.intermediateChanges) {

                    this._set("value", event.target.value);

                    this.onChange(this.value);

                }

            },          

 

            focus: function () {

                // summary:

                //    Put focus on this widget.

                // tags:

                //    public

 

                dijit.focus(this.colorPicker);

            },

 

            isValid: function() {

                // summary:

                //    Check if widget's value is valid.

                // tags:

                //    protected, override

 

                return !this.required || this.colorPicker.value.length > 0;

            },

 

            _setValueAttr: function (value) {

                // summary:

                //    Sets the value of the widget to "value" and updates the value displayed in the textbox.

                // tags:

                //    private 

                if (value != null) {

                    this._set("value", value);

                    this.colorPicker.set("value", value);

                }

            }, 

            _setReadOnlyAttr: function(value) {

                this._set("readOnly", value);

                this.colorPicker.set("readOnly", value);

            },

 

            // Setter for intermediateChanges

            _setIntermediateChangesAttr: function(value) {

                this.colorPicker.set("intermediateChanges", value);

                this._set("intermediateChanges", value);

            },

 

            // Event handler for widget

            _onColorPickerChanged: function(value) {

                // summary:

                //    Handles the textbox change event and populates this to the onChange method.

                // tags:

                //    private

                 this._set("value", value);

                this.onChange(this.value);

            },                  

        }

    );

});

3. Add to the ClientResources\Styles\

ColorPicker.css (contains the styles for color picker)

Styles.css contains @import url("ColorPicker.css");

4. Add to the project module.config

#79862
Jan 08, 2014 18:14
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.