fr:developpers:documentation_aide_colorpicker
no way to compare when less than two revisions
Différences
Ci-dessous, les différences entre deux révisions de la page.
Dernière révision | |||
— | fr:developpers:documentation_aide_colorpicker [2021/02/09 14:34] – créée pitch314 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== 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 : | ||
+ | <code html> | ||
+ | <input name=" | ||
+ | </ | ||
+ | Il n'y a plus à s’embêter avec les noms de couleurs ou à entrer des bonnes valeurs #xxyyzz pour l' | ||
+ | Par contre, pour nous ce type " | ||
+ | |||
+ | **=> | ||
+ | |||
+ | < | ||
+ | |||
+ | ==== 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' | ||
+ | |||
+ | 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 : | ||
+ | <code php> | ||
+ | /** @brief Return valid HTML value for an input color. | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_convert_to_html_input($color); | ||
+ | // L' | ||
+ | |||
+ | //Exemples d' | ||
+ | $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 : | ||
+ | <code php> | ||
+ | /** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS. | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_html_create_double_input($label, | ||
+ | |||
+ | //Exemples d' | ||
+ | $color_input = color_html_create_double_input(' | ||
+ | // ... | ||
+ | echo $color_input; | ||
+ | //Cela crée le code HTML suivant : | ||
+ | <input name=" | ||
+ | <input name=" | ||
+ | |||
+ | //Ensuite les 2 champs sont liés entre eux par le Javascript, en modifier 1 modifie l' | ||
+ | //Lors de la récolte du formulaire, il faut utiliser le nom donner à la fonction (ici color_ally1) | ||
+ | $Config_Model-> | ||
+ | </ | ||
+ | |||
+ | ===== Récapitulation des fonctions PHP et JS associé au couleur ===== | ||
+ | Si besoin, ci-dessous l' | ||
+ | <code php> | ||
+ | /** @brief Get the RGB color (red, green, blue) of the desired color. | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_getColor($Colorname = ' | ||
+ | /** @brief Get color name or ' | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_getName($couleur_id); | ||
+ | /** @brief Convert hexadecimal color to rgb color. | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_hex_to_rgb($couleur_id); | ||
+ | /** @brief Convert rgb color to hexadecimal color. | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_rgb_to_hex($r, | ||
+ | /** @brief Return valid HTML value for an input color. | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | 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. | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | function color_html_create_double_input($label, | ||
+ | |||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | // 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 ' | ||
+ | * @return array liste des noms si ' | ||
+ | */ | ||
+ | function _getColorArr(x); | ||
+ | /** @brief trouve si c'est une couleur ayant un nom. | ||
+ | * @param[in] int|string x Color value (string ' | ||
+ | * @return bool|array(' | ||
+ | */ | ||
+ | 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); | ||
+ | |||
+ | </ |