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.
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.
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, 5:19 pm; edited 3 times in total