SCEditor HTML5 Color Picker

Go down

SCEditor HTML5 Color Picker

Post by Wecoc on May 6th 2018, 9:56 pm

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.


Last edited by Wecoc on May 18th 2018, 6:19 pm; edited 3 times in total
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by skouliki on May 6th 2018, 10:41 pm

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
avatar
skouliki
Manager
Manager

Female Posts : 4897
Reputation : 801
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by Wecoc on May 7th 2018, 1:47 am

@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 scratch
Soon I'll try testing it on a mobile device.
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by skouliki on May 7th 2018, 7:12 am

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
avatar
skouliki
Manager
Manager

Female Posts : 4897
Reputation : 801
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by Wecoc on May 7th 2018, 9:42 pm

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

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by skouliki on May 7th 2018, 10:01 pm

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
avatar
skouliki
Manager
Manager

Female Posts : 4897
Reputation : 801
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by Wecoc on May 8th 2018, 5:56 am

Ok, silly me. The HTML5 color picker is not supported in Safari and Internet Explorer Facepalm
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 blackeye

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.


Last edited by Wecoc on May 18th 2018, 1:25 am; edited 1 time in total
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by skouliki on May 8th 2018, 8:45 am

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
avatar
skouliki
Manager
Manager

Female Posts : 4897
Reputation : 801
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by mpelmmc on May 10th 2018, 4:09 am

Hi @Wecoc

I really liked this Smile 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 Wink).

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 Smile I really like all you're suggesting and posting here. I have given you a "thumbs up" in case it's any useful Razz

Best regards.
avatar
mpelmmc
Support Moderator
Support Moderator

Male Posts : 898
Reputation : 137
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by Wecoc on May 18th 2018, 1:25 am

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 Cool Razz
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by skouliki on May 18th 2018, 2:10 pm

@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
avatar
skouliki
Manager
Manager

Female Posts : 4897
Reputation : 801
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor HTML5 Color Picker

Post by Wecoc on May 18th 2018, 6:18 pm

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 Laughing
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum