====== HTML color picker ======
Grâce à HTML5, le choix des couleurs pour un utilisateur c'est amélioré et surtout simplifié.
Maintenant, une entrée spéciale HTML existe qui ressemble à un bouton et ouvre la palette de couleurs de l'OS :
Il n'y a plus à s’embêter avec les noms de couleurs ou à entrer des bonnes valeurs #xxyyzz pour l'utilisateur.
Par contre, pour nous ce type "color" n'accepte que le format #xxyyzz.
**=>C'est donc cette méthode qu'il faut utiliser et remplacer avec l'ancienne manuelle.**
Pour plus d'info : https://www.w3schools.com/colors/colors_picker.asp
==== Besoin de rétrocompatibilité ou plus ====
Néanmoins, dans notre BDD, bien la valeur hexadécimale est possible, ce sont généralement le nom des couleurs qui étaient utilisés.
Donc, si l'ont veut soit :
- transformer le choix de config où la couleur apparrait avec cette nouvelle input mais en utilisant les valeurs déjà existante ;
- offrir l'ancienne choix (en écrivant le nom) et la nouvelle.
Il faut effectuer des manipulations afin de convertir un nom en #xxyyzz, les fonctions suivantes sont pour vous :
===== Transformation vers HTML5 =====
Afin de migrer vers le choix des couleurs HTML5 mais en gardant une rétrocompatibilité avec la BDD, il faut utiliser la fonction suivante :
/** @brief Return valid HTML value for an input color.
*
* @param[in] string|int $color The color (name 'red' or '#ffddee' or value 'ffddee' or 0xffddee)
* @return array('name','value') value=HTML valid color input value ('#xxx'), 0 as default (black)
* name=code name if exist else hexadécimale string value ('ffddee')
*/
function color_convert_to_html_input($color);
// L'avantage de cette fonction est quelle prend la couleur sous n'importe quelle forme (nom, code HTML(#xxyyzz), string hexadécimale, ou valeur hexadécimale).
//Exemples d'utilisations :
$color = color_convert_to_html_input($value);
echo ''
===== Multiple choix de couleur =====
Si on voudrait à la fois un formulaire avec le nom et avec le choix HTML5 :
/** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS.
*
* @param[in] string $label HTML id of the input
* @param[in] string|int $value Color value (string 'red'/'#ff0000', int 0xffddee)
* @param[in] array $html_arg1 HTML attributes for text box (default = array('size'=>15, 'maxlength'=>20))
* @param[in] array $html_arg2 HTML attributes for color box (default = $html_arg1)
* @return string HTML content with 2 inputs linked for color text+HTML5 color
*/
function color_html_create_double_input($label, $value, $html_arg1=array('size'=>15, 'maxlength'=>20), $html_arg2=null);
//Exemples d'utilisations :
$color_input = color_html_create_double_input('color_ally1', $color_ally_e[$i - 1], array('size'=>15, 'maxlength'=>20));
// ...
echo $color_input;
//Cela crée le code HTML suivant :
//Ensuite les 2 champs sont liés entre eux par le Javascript, en modifier 1 modifie l'autre.
//Lors de la récolte du formulaire, il faut utiliser le nom donner à la fonction (ici color_ally1)
$Config_Model->update_one($pub_allied, "allied"); //Traitement fait pour la couleur des allaiances dans l'onglet administration du serveur.
===== Récapitulation des fonctions PHP et JS associé au couleur =====
Si besoin, ci-dessous l'ensemble complet des fonctions liées aux couleurs :
/** @brief Get the RGB color (red, green, blue) of the desired color.
* @param[in] $Colorname The wanted color ('all' to retrieve all RGB HTML color code name)
* @return array('red,'green','blue') 0 as default ('black'), all=array of name with RGB
*/
function color_getColor($Colorname = 'all');
/** @brief Get color name or 'hex'.
* @param[in] string|int $couleur_id An hexa value (0xffddee) or a string with the exa value ('ffddee')
* @return string code name if exist else #hex ('ffddee')
*/
function color_getName($couleur_id);
/** @brief Convert hexadecimal color to rgb color.
* @param[in] string|int $couleur_id An hexa value (0xffddee) or a string with the exa value ('ffddee')
* @return array('red,'green','blue')
*/
function color_hex_to_rgb($couleur_id);
/** @brief Convert rgb color to hexadecimal color.
* @param[in] int $r,$g, $b The RGB value
* @return string hexadecimal color value in string
*/
function color_rgb_to_hex($r, $g, $b);
/** @brief Return valid HTML value for an input color.
*
* @param[in] string|int $color The color (name 'red' or '#ffddee' or value 'ffddee' or 0xffddee)
* @return array('name','value') value=HTML valid color input value ('#xxx'), 0 as default (black)
*/
function color_convert_to_html_input($color);
/** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS.
*
* @param[in] string $label HTML id of the input
* @param[in] string|int $value Color value (string 'red'/'#ff0000', int 0xffddee)
* @param[in] array $html_arg1 HTML attributes for text box (default = array('size'=>15, 'maxlength'=>20))
* @param[in] array $html_arg2 HTML attributes for color box (default = $html_arg1)
* @return string HTML content with 2 inputs linked for color text+HTML5 color
*/
function color_html_create_double_input($label, $value, $html_arg1=array('size'=>15, 'maxlength'=>20), $html_arg2=null)
// js/ogspy.js
/* @see w3color.js ver.1.18 by w3schools.com */
/** @brief renvoie un tableau avec les noms ou son code hexadécimale.
* @param[in] string x Soit 'names' pour obtenir les noms, soit 'hexs' pour les codes, sinon renvoie array('names', 'hexs')
* @return array liste des noms si 'names', listes des codes hexa si 'hexs' sinon array('names', 'hexs')
*/
function _getColorArr(x);
/** @brief trouve si c'est une couleur ayant un nom.
* @param[in] int|string x Color value (string 'red'/'#ff0000'/'ff0000', int 0xffddee)
* @return bool|array('name','hex) retourne faux si la couleur n'a pas de nom sinon renvoie un tableau contenant son nom et son code hexa.
*/
function ogspy_isColor(x);
/** Fonction utilisée dans le cadre des doubles input (via la fonction PHP color_html_create_double_input())
*/
function ogspy_colorDoubleChange(id);