Palette

Permet de choisir des couleurs avec jQuery et tinyColorPicker

Ce plugin facilite la sélection de couleurs dans des formulaires de configuration. Il suffit d’ajouter la classe CSS palette sur les input souhaitant disposer de ce sélecteur.

Ce plugin intègre la librairie tinyColorPicker dans SPIP afin de permettre aisément de sélectionner une couleur sur les formulaires qui en ont le besoin.

Installation et configuration

Ce plugin peut s’installer simplement par l’intermédiaire du gestionnaire de plugins de SPIP. Voir page dédiée.

Vous pouvez configurer ce plugin en cliquant sur sa petite icône de configuration depuis la page de gestion des plugins une fois ce plugin activé.

La configuration permet d’insérer les scripts nécessaires au fonctionnement du plugin dans l’espace privé et/ou dans l’espace public.

Utilisation

À partir du moment où la librairie est insérée dans la page (voir la configuration), tout champ input de formulaire HTML possédant la classe palette aura un sélecteur de couleur associé.

Attention ! Le sélecteur n’apparaîtra que lorsque l’on cherchera a éditer le contenu du champ ; cependant la couleur de fond déjà sélectionnée est visible.

Exemples

Sélecteur de couleur sur un input :

<input class="palette" name="couleur" value="#dfdfdf" />

Sélecteur de couleur avec gestion de la transparence (version 4+)

<input class="palette" name="couleur" 
    value="rgba(100,10,200,.6)" 
    data-palette-withalpha="1"
/>

Utilisation avec Saisies

Si vous avez le plugin Saisies activé, vous pouvez utiliser la vue couleur

[(#SAISIE{couleur, couleur_aside,
		label=<:odaiba:cfg_couleur_aside:>,
		defaut=#ff6600})]

Historique

  • À partir de la version 4, la transparence peut être gérée
  • Avant la version 4 du plugin, la librairie Farbtastic était utilisée.
  • Avant SPIP 3, le plugin CFG permettait la même chose mais la classe à appliquer était « cfg_couleur ». Il suffit de remplacer « cfg_couleur » par « palette »

Discussion

37 discussions

  • Bonjour ,

    lors d’une install de ce plugin comme tous les autres, par le gestion des plugins, elle se termine mal et demande des autorisations spéciales :

    « • Palette a besoin de la bibliothèque farbtastic_1_3_2 placée dans le répertoire lib/ à la racine de votre site. Cependant, ce répertoire n’existe pas ou n’est pas accessible en écriture. Vous devez installer manuellement cette bibliothèque ou créer ce répertoire en lui donnant des permissions d’écriture. »

    On ne pourrait pas profiter des demandes conjointes pour mettre cela aux normes du jour SVP ?
    merci d’avance.

    Répondre à ce message

  • Salut kent1
    Je t’ai envoyer un mail, mais comme je ne suis pas sûr qu’il n’est pas dans tes spams...

    Loiseau2nuit à changer l’adresse de la lib pour prendre de nouveau l’officielle, le problème est que je ne suis pas sûr qu’elle contient tes corrections...
    Elle pointe désormais vers la v1 de https://github.com/mattfarina/farbtastic
    Normal ou pas alors ?

    Répondre à ce message

  • 8

    Bonjour

    Sous Iphone 4 Ios 6.1.3 palette ne fonctionne pas.
    Il n’est pas possible de changer une couleur.

    En prenant le code ici
    http://signedon.com/touch-events/adding-ios-touch-events-to-farbtastic-color-picker/
    Cela ne serait pas possible de faire une mise à jour de la lib ?
    j’ai essayer, mais je suis pas doué...

    Cerise sur le gâteau pendant que j’y suis :-D
    Cela serait possible d’avoir une gestion des transparents en prenant le code ici :
    http://lantralab.com/farbtastica/index.html

    Cordialement, Franck

    • Oui mais ce plugin ne fait que mettre à disposition la bibliothèque Farbastic ; donc s’il y a un connertif à faire sur le code de cette bibliothèque ça doit se faire en amont... (peut-être une prochaine version ?)

    • En théorie, tu as parfaitement raison !
      Sauf que ...
      La librairie dans le plug est déjà une modif de l’originale.
      Sur la zone, elle est en 1.3.1 et l’originale est en 1.3
      http://code.google.com/p/farbtastic/source/list

      Que les personnes s’occupant de l’originale ne s’en occupe plus du tout, (manque de temps. ou autre, je ne sais pas)
      D’ailleurs, Quentin l’explique lui même :
      http://archives.rezo.net/archives/spip-zone.mbox/ENWCCWXP2I2UGJ3Y4AFS54XLD5D4DPUH/

      Ensuite, il suffit de ce rendre compte qu’il y a déjà pas mal de monde qui patch cette lib rien que sur git-hub par exemple.
      https://github.com/search?q=farbtastic&type=Repositories&ref=searchresults

      C’est pour cela que je demandais si la lib qui est sur la zone ne pourrait pas être patcher avec au moins la modif de F1LT3R pour que cela fonctionne sous IOS (et sans doute tous les écrans tactile) !

      Car si tu attends une prochaine version de l’originale, je pense que nous risquons encore d’attendre longtemps... :-(

    • Hello

      Mes propos sur la source ne visaient pas ceux qui s’en occupaient initialement ; d’autres peuvent prendre le relais s’il y a de l’intérêt : c’est du code ouvert et libre...
      Sur GitHub plus des trois quart de ce qui est présenté sont des intégrations de la bibilothèque (tout comme on l’a fait pour Spip d’autres ont voulu pareil pour Ror, Sympoh, etc. Certains ont voulu l’utiliser aussi dans d’autres ensembles JS autre que jQuery...)

      Ceci dit, je comprends l’attente et l’idée. Peut-être que cela retiendra l’attention de quelque développeur capable de la zone ? (car c’est une chose bien différente que je ne soit pas du même avis)

    • Je viens de modifier la lib de la zone avec les modifs de https://github.com/F1LT3R/farbtastic-color-picker/blob/master/farbtastic.js et de https://github.com/mattfarina/farbtastic/tree/farbtastic-1

      Pour le truc d’opacité je ne suis pas chaud parce que je n’ai pas trouvé de doc sur la portabilité de ce genre de code de couleur. Et que je n’ai surtout pas le courage de tester.

      Lorsque le zip de la lib sera recréé, je mettrais à jour Palette

    • Voilà, cela a retenu l’attention de Kent1  ;-) Un grand merci à lui.

    • Merci kent1 :-)
      Je vais attendre que tu mettes palette à jour pour te dire si tout fonctionne bien.
      J’ai essayer de trouver du code pour l’opacité, mais j’ai rien trouver :-(

      L’unique solution que j’ai trouver serait d’utiliser jquery-color à la place de farbtastic, mais bon, là, c’est autre chose...
      https://github.com/jquery/jquery-color

      En tout cas merci :-)

    • ça fonctionne du tonner sur l’Iphone maintenant :-)

    Répondre à ce message

  • 1

    Super sympa ce plugin. Merci.
    Si c’est possible, ce serait bien d’avoir en plus la possibilité de choisir la couleur sur un dégradé du blanc au noir dans la gamme de la couleur choisie dans le carré... ça facilite la mise en place de thème avec une stabilité de tons ;-)

    • Je réponds un peu tard a ceci, mais c’est bien se qui se passe comme on se met complètement à droite du carré (du haut vers le bas) puis complétement en bas (de la droite vers la gauche)

    Répondre à ce message

  • Bonjour
    Serait-il possible d’avoir un « nuancier » comme sous Chrome au lieu d’uniquement la roue ?
    D’après ce que j’ai compris en juillet http://contrib.spip.net/Couleur-de-Rubrique
    cela dépend du navigateur, mais une évolution de palette pour spip3 serait-elle possible pour avoir la même chose avec les autres navigateurs ?

    Cordialement, Franck

    Répondre à ce message

  • 2

    Bonjour
    Il y a un problème pour activer « palette » sous spip 2.1.14 et peut-être même spip 3
    Cela demande à chaque fois de telecharger la lib

    Le problème semble venir de là :
    http://zone.spip.org/trac/spip-zone/changeset/61190

    Cela fait la création d’un dossier farbtastic_1_3 alors qu’il faudrait faire la création d’un dossier farbtastic_1_3_1

    La lib est en 1.3.1 semble t’il http://zone.spip.org/trac/spip-zone/browser/_libs_/farbtastic/farbtastic.js

    Répondre à ce message

  • 4

    Bonjour :-)

    Sous Spip 3 [19073] en local sous easyphp 5.3.8.0
    Quand j’active palette, STEP me sort comme message :

    -  L’activation du plugin « Palette » (version : 2.0.0) s’est correctement déroulée
    -  L’installation du plugin « Palette » (version : 2.0.0) a échoué

    Le plug est visible dans "configuration" de spip, mais la roue chromatique n’est pas visible quand on clique sur le bouton "palette"

    Les autres plugs (je viens de les récupérer à l’instant sur le svn via tortoise) actif sont :
    API de vérification
    CFG
    Enluminures typographiques
    NivoSlider
    Saisies pour formulaires
    YAML

    A savoir, j’ai donc télécharger les plugs puis les aient mit moi même dans le dossier "plugins/auto" de spip

    • J’ai rien compris, j’ai supprimer la lib, puis l’ai remit et maintenant, cela fonctionne !

      Possible que le problème est venu du fait que la lib était déjà dans le répertoire « lib » avant que j’active palette ?!
      Normalement, c’est le plug qui installe la lib et comme là, elle était déjà présente...
      Enfin, je sais pas, mais si cela arrive à d’autre !

    • Pour info :
      Je viens de refaire des tests sous spip 3 [19080]
      J’ai SVP qui m’a sorti les messages :
      L’activation du plugin « Palette » (version : 2.0.0) s’est correctement déroulée
      L’installation du plugin « Palette » (version : 2.0.0) a échoué

      Cela dit, le plug semble fonctionner.

      Bref, il y a peut-être un problème, mais possible que cela soit aléatoire car sur l’un des test, le plug à fonctionner correctement et d’autres fois, pas du tout !

    • désolé, trop débordé en ce moment pour travailler dessus. Peut être en mai / juin ?

    • J’ai remis à jour le paquet.xml de description de ce plugin pour SPIP 3.n.n, donc pour la version SVN 3.1.0-dev et suivantes.

    Répondre à ce message

  • 5

    Je pense qu’il y a un bug avec Spip 2.0.15

    Je n’arrive pas à activer la palette, que cela soit dans l’espace privée ou public, cela ne fonctionne pas
    Donc, je ne vois pas la roue chromatique ! :-(

    Quand je coche l’une des deux possibilité (privée ou public) et clique sur « enregistrer » j’ai le message « config info enregistree » mais à ce moment là, cela décoche l’option tt seul.

    Pour info, il n’y a que :

    Spip 2.0.15 [17661]
    Palette Version : 1.3.2 [50295]
    Spip bonux Version : 2.2.21 [50439]
    CFG Version : 1.16.0 [49254]

    • Je complète mon message.

      Il semble que le fait que la case reste cocher, ou pas via CFG, vienne du fait que bonux soit activer également.

      Car là, je viens de faire un test en le désactivant Bonux et la case est apparu cocher quand j’ai été voir les réglages via CFG.

      Par contre, toujours aucune trace de la roue :-(

    • Bonjour,

      merci de me relancer vers la mi septembre, quand je serai rentré de vacances. Je suis assez étonné du problème, mais bon, sait-on jamais.

    • meme probleme ici , spip 2.0.17 , impossible d activer la palette

    • hum, j’ai fait des modifs dans palette, pour les compatibilité spip 2.0.x

      pouvez vous tester avec la nouvelle version de palette correspondant (palette 1.0)

    • précisions : il faut vider les caches des js compressés (par ?var_mode=recalcul) ou bien en passant par ftp vider le dossier local/cache-js ou encore par la page de vidage du cache (cache des images)

    Répondre à ce message

  • 1
    StephBretagne

    Bonsoir,

    Et merci aux développeurs pour ce plugin très sympa :-))

    Je me demandais s’il ne serait pas possible de le perfectionner en ajoutant un nuancier sous la roue chromatique. Le but ? après avoir choisi sur la roue chromatique une jolie couleur (avec son code précis), ce serait vraiment bien si on pouvait l’ajouter à un nuancier (aussi appelé palette de couleur par le plugin FF ColorZilla).

    L’idéal serait de pouvoir ainsi choisir les 6 à 10 couleurs de sa propre charte graphique et de les appliquer aux champs « input » de formulaire html possédant la classe « palette ».

    Mais je rêve peut-être ?

    Merci de vos réponses et bonne soirée !

    • C’est une excellente idée !
      L’idéal serait de stocker automatiquement les valeurs posées dans le nuancier, pour faciliter la réutilisation de couleurs.
      Par contre, je ne sais pas trop quand ça pourra se faire ... Pour ma part, je travaille beaucoup plus sur le plugin ACS, et comme il permet de définir la couleur d’une variable avec la référence d’une autre variable pour gérer l’héritabilité de couleurs entre composants, je suis probablement l’une des personnes qui a le moins besoin de ce nuancier dans Palette ! ;-)

    Répondre à ce message

  • Escusez moi, mais impossible d’avoir accès a :
    http://kent1.sklunk.net/IMG/zip/farbtastic_1_3_1.zip

    Erreur la page n’existe pas, quelqu’un en a une copie pour me permettre de l’installer ?
    ou vous connaissez un nouveau lien, merci

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom