Experiment color type

This commit is contained in:
Laurent Destailleur 2023-07-31 20:16:49 +02:00
parent 21559be84d
commit d040f5c8a9
3 changed files with 32 additions and 4 deletions

View file

@ -847,8 +847,9 @@ class FormOther
$out = '';
if (!is_array($arrayofcolors) || count($arrayofcolors) < 1) {
// Case of selection of any color
$langs->load("other");
if (empty($conf->dol_use_jmobile) && !empty($conf->use_javascript_ajax)) {
if (empty($conf->dol_use_jmobile) && !empty($conf->use_javascript_ajax) && !getDolGlobalInt('MAIN_USE_HTML5_COLOR_SELECTOR')) {
$out .= '<link rel="stylesheet" media="screen" type="text/css" href="'.DOL_URL_ROOT.'/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.css" />';
$out .= '<script nonce="'.getNonce().'" type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jpicker/jpicker-1.1.6.js"></script>';
$out .= '<script nonce="'.getNonce().'" type="text/javascript">
@ -913,9 +914,31 @@ class FormOther
);
});
</script>';
$out .= '<input id="colorpicker'.$prefix.'" name="'.$prefix.'" size="6" maxlength="7" class="flat'.($morecss ? ' '.$morecss : '').'" type="text" value="'.dol_escape_htmltag($set_color).'" />';
} else {
$out .= '<input id="colorpicker'.$prefix.'" name="'.$prefix.'" size="6" maxlength="7" class="flat colorselector '.($morecss ? ' '.$morecss : '').'" type="color" value="#'.dol_escape_htmltag($set_color).'" />';
$out .= '<script nonce="'.getNonce().'" type="text/javascript">
jQuery(document).ready(function(){
var originalhex = null;
jQuery("#colorpicker'.$prefix.'").on(\'change\', function() {
var hex = jQuery("#colorpicker'.$prefix.'").val();
console.log("new color selected in input color "+hex+" setpropertyonselect='.dol_escape_js($setpropertyonselect).'");';
if ($setpropertyonselect) {
$out .= 'if (originalhex == null) {';
$out .= ' originalhex = getComputedStyle(document.querySelector(":root")).getPropertyValue(\'--'.dol_escape_js($setpropertyonselect).'\');';
$out .= ' console.log("original color is saved into originalhex = "+originalhex);';
$out .= '}';
$out .= 'if (hex != null) {';
$out .= ' document.documentElement.style.setProperty(\'--'.dol_escape_js($setpropertyonselect).'\', hex);';
$out .= '}';
}
$out .= '
});
});
</script>';
}
$out .= '<input id="colorpicker'.$prefix.'" name="'.$prefix.'" size="6" maxlength="7" class="flat'.($morecss ? ' '.$morecss : '').'" type="text" value="'.dol_escape_htmltag($set_color).'" />';
} else { // In most cases, this is not used. We used instead function with no specific list of colors
} else {
// In most cases, this is not used. We used instead function with no specific list of colors
if (empty($conf->dol_use_jmobile) && !empty($conf->use_javascript_ajax)) {
$out .= '<link rel="stylesheet" href="'.DOL_URL_ROOT.'/includes/jquery/plugins/colorpicker/jquery.colorpicker.css" type="text/css" media="screen" />';
$out .= '<script nonce="'.getNonce().'" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/colorpicker/jquery.colorpicker.js" type="text/javascript"></script>';

View file

@ -5713,7 +5713,9 @@ A.none, A.none:active, A.none:visited, A.none:hover {
padding : 0px;
margin : 0px;
}
.colorselector {
border: solid 1px #ddd !important;
}
/* Style to overwrites JQuery styles */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {

View file

@ -5720,6 +5720,9 @@ A.none, A.none:active, A.none:visited, A.none:hover {
padding : 0px;
margin : 0px;
}
.colorselector {
border: solid 1px #ddd !important;
}
/* Style to overwrites JQuery styles */