SCEditor HTML5 Color Picker

This javascript replaces the default color picker for another one based on HTML5.
It has the "two buttons in one" style like in Microsoft Word and many other programs.
The last color used is also stored in localStorage, to make it more handy.

Spoiler:

Code:

/*
* -- SCEditor HTML5 Color Picker --
* Version: 1.3 EN (2018-05-17)
* Author: Wecoc
* Description: Implements the default HTML5 Color Picker on the SCEditor
*/
 
$(document).ready(function() {
  if ($.sceditor && window.toolbar) {
    // Create SCEditor color buttons
    $.sceditor.command.set('color_h', {
      exec : drawColorHolder,
      txtExec : drawColorHolder
    });
    $.sceditor.command.set('color_p', {
      exec : callColorHolder,
      txtExec : callColorHolder
    });
    toolbar = toolbar.replace(/color/, 'color_h,color_p');
    setTimeout(setColorHTML5Picker, 5);
 
    // Set CSS propierties on SCEditor buttons
    $('head').append('<style type="text/css">' +
        '.sceditor-button-color_h div {' +
            'background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
        '}' +
        '.sceditor-button-color_p div {' +
            'background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
            'background-position: 0 -16px;' +
        '}' +
        '.sceditor-button-color_h {' +
            'padding-right: 2px !important;' +
            'border-radius: 3px 0px 0px 3px !important;' +
            'margin-right: -1px;' +
        '}' +
        '.sceditor-button-color_p {' +
            'padding-left: 2px !important;' +
            'border-radius: 0px 3px 3px 0px  !important;' +
            'width: 4px !important;' +
        '}' +
        '.color_holder {' +
            'position: absolute;' +
            'filter: alpha(opacity=0);' +
            'opacity: 0;' +
        '}' +
    '</style>');
  }
});
 
function setColorHTML5Picker() {
  // Get the color from last time if defined
  var start_color = startColorHolder();
  // Create HTML5 Color picker (hidden)
  var holder = $('<input type="color" class="color_holder" />')[0];
  $(holder).addClass('color_holder');
  holder.addEventListener("change", updateColorHolder);
  holder.value = start_color;
  // Define buttons "Current Color" & "New Color"
  var holder_button = document.querySelector('.sceditor-button-color_h div');
  var picker_button = document.querySelector('.sceditor-button-color_p div');
  // Set HTML5 button position
  var picker = document.querySelector('.sceditor-button-color_p');
  $(picker).after(holder);
  $('head').append('<style type="text/css">' +
      '.color_holder {' +
          'top: ' + picker.offsetTop + 'px;' +
          'left: ' + picker.offsetLeft + 'px;' +
          'width: ' + picker.offsetWidth + 'px;' +
          'height: ' + picker.offsetHeight + 'px;' +
      '}' +
  '</style>');
  // Set button tooltips
  holder_button.title = "Current Color";
  picker_button.title = "New Color";
  // Set button inner HTML (color line)
  holder_button.innerHTML = '<div class="color_line" style="position:relative;height:2px;top:12px;" />';
  refreshColorHolder(start_color);
  // Double hover effect
  var h = $(holder_button.parentElement), p = $(picker_button.parentElement);
  h.hover(function(){ p.addClass("hover") }, function(){ p.removeClass("hover") });
  p.hover(function(){ h.addClass("hover") }, function(){ h.removeClass("hover") });
  holder.addEventListener("mouseover", function(){ p.addClass("hover"); h.addClass("hover"); });
  holder.addEventListener("mouseout", function(){ p.removeClass("hover"); h.removeClass("hover"); });
};
 
function startColorHolder() {
  if (!localStorage.colorHolder) return "#ff0000";
  return localStorage.colorHolder;
};
 
function drawColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  this.insert("[color=" + holder.value + "]", "[/color]", true, true, true);
};
 
function callColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  holder.click();
};
 
function refreshColorHolder(value) {
  var line = document.querySelector('.color_line'); if (!line) return;
  line.style.background = value;
  localStorage.colorHolder = value;
};
 
function updateColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  refreshColorHolder(holder.value);
};

Name: SCEditor HTML5 Color Picker
Placement: In all the pages

There's no configuration part but if you want to modify something, you can. The code has comments to make it more understandable.

I really like the idea ...good job !! tested on punbb worked fine
@Wecoc your code on laptop is perfect but on ipad it breaks the editor in quick reply and in post reply

@Wecoc your code on laptop is perfect but on ipad it breaks the editor in quick reply and in post reply

Ok, thank you. I tried but I can't recreate the bug. The textarea looks entirely blanked out?
I would need a screen of the console log, not sure if that's possible from the iPad itself
Soon I'll try testing it on a mobile device.

The editor box where we write is there but all the buttons section is missing
I will screenshot the result in a while
@Wecoc 
here you go thank you safari/ipad

I updated the code, but I'm not sure if it will make any changes.

thanks for your time
you fixed the issue the editor is ok
the only problem is that the color picker window is not pop out when you click the button

with laptop again its all ok

Ok, silly me. The HTML5 color picker is not supported in Safari and Internet Explorer
Well, at least now it does not crash the textarea, so it's progress...
And also, now I know it's a navigator issue this will make it more easier to test, because I can test it in IE

I will try adding an alternative for those cases, as they did in the FMDesign forum for the theme color select which also uses the HTML5 color picker.
In the worst case I will force return the function in the very start in those cases, so the users of these navigators would have the default color picker instead.

Please be patient, I'll try to fix this as soon as possible.

of course, take your time am not at all in a hurry
you are sharing very good ideas and projects and we all thank you for that

Hi @Wecoc

I really liked this It is a great idea. I currently don't run a forum I can call "mine" but I just wanted to congratulate you for this excellent idea (and the execution, of course ).

I have tested the code in my test forum (phpBB3) and it works just fine, at least on my PC. I haven't tried it on my mobile phone, though.

Great job I really like all you're suggesting and posting here. I have given you a "thumbs up" in case it's any useful

Best regards.

New version 1.2 now available!
I finally had been able to make it work in Safari and Internet Explorer, too.
The HTML5 color picker IS supported in Safari and Internet Explorer, but can't be called externally so I had to put it in place and hide it.
It was not difficult to solve after all

skouliki wrote:thanks for your time
you fixed the issue the editor is ok
the only problem is that the color picker window is not pop out when you click the button

with laptop again its all ok

hello i experience the same
the window is not popping up if i click the button or the arrow beside the button
tested with invision and punbb version

the window is not popping up if i click the button or the arrow beside the button
tested with invision and punbb version

Solved.
It was the same problem as before which I already fixed, but the hidden button wasn't in the exact same place as the arrow, now I truncated it to make it sure it is.

Internet Explorer and Safari are making me work hard these days

Amazing plugin