colorpicker focus()

[trowa88]

this code not working IE11

In IE11, color picker focus lost....

    /**
     * Custom `color picker` extension
     */
    var ColorPickerExtension = MediumEditor.extensions.button.extend({
        name: "colorPicker",
        action: "applyForeColor",
        aria: "color picker",
        contentDefault: "<span class='editor-color-picker'>Text Color<span>",

        handleClick: function(e) {
            e.preventDefault();
            e.stopPropagation();

            this.selectionState = this.base.exportSelection();

            // If no text selected, stop here.
            if(this.selectionState && (this.selectionState.end - this.selectionState.start === 0) ) {
              return;
            }

            // colors for picker
            var pickerColors = [ 
              "#1abc9c",
              "#2ecc71",
              "#3498db",
              "#9b59b6",
              "#34495e",
              "#16a085",
              "#27ae60",
              "#2980b9",
              "#8e44ad",
              "#2c3e50",
              "#f1c40f",
              "#e67e22",
              "#e74c3c",
              "#bdc3c7",
              "#95a5a6",
              "#f39c12"
            ];

            var picker = vanillaColorPicker(this.document.querySelector(".medium-editor-toolbar-active .editor-color-picker"));
            picker.set("customColors", pickerColors);
            picker.set("positionOnTop");
            picker.openPicker();
            picker.on("colorChosen", function(color) {
              this.base.importSelection(this.selectionState);
              this.document.execCommand("styleWithCSS", false, true);
              this.document.execCommand("foreColor", false, color);
            }.bind(this));
        }
    });

[j0k3r]

Which version of MediumEditor are you using?

[trowa88]

version : 5.5.2 using

[j0k3r]

Any chance to update to the latest to see if the bug is still present?

[sobanhameed]

I am using latest and it seems to be working fine.

[stfnh]

I have the same problem using Firefox, the latest version of the medium-editor (5.13) and latest version of vanilla-color-picker (0.1.4). It works in Chrome and Opera, but in Firefox I can not select the color. The cursor changes according to the element in the background. In the screenshot, if the cursor is on the red color, the cursor will be the text selector and you can't click on the color.

Have you solved the problem already?

[nmielnik]

@stfnh I'm not sure I understand the issue you're describing. Specifically, could you try to explain this another way or in more detail?

The cursor changes according to the element in the background. In the screenshot, if the cursor is on the red color, the cursor will be the text selector and you can't click on the color.

[stfnh]

Thanks, @nmielnik The things is, that I can not select the color. The cursor acts as there would not be a colorpicker. It would like like this (see the cursor now):

[nmielnik]

@stfnh could you provide some example of this bug happening? Perhaps a jsfiddle, jsbin, codepen, etc.? I have a feeling this might be something simple, but I'd need to be able to investigate to have any idea...

[kargnas]

@nmielnik Basically, this is the point of issue. https://jsfiddle.net/6cn6epbg/ You can't see "test" alert in inner div of button on IE whatever you do.

[kargnas]

@stfnh @nmielnik Just I modify this code

var picker = vanillaColorPicker(this.document.querySelector(".medium-editor-toolbar-active .editor-color-picker"));

to this:

var picker = vanillaColorPicker(this.document.querySelector(".medium-editor-toolbar-active .editor-color-picker").parentNode);