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,

    J’utilise SAISIE et Palette 4.0.9 avec SPIP4

    array(
    			'saisie' => 'couleur',
    			'options' => array(
    				'nom' => 'fond_titre',
    				'defaut' =>'transparent',
    								)
    				),

    j’obtiens un carré .
    si je clique dans le carré j’obtiens a la fois la partie saisie des couleurs de palette et un deuxieme formulaire de saisie ( celui de windows ??)
    si je sélectionne une couleur elle s’enregistre bien.
    j’ai 2 questions :
    1- comment faire pour n’avoir que le formulaire de palette ?
    2- Une fois que j’ai choisis une couleur, et enregistré, je dois toujours en choisir une. Je peux la changer mais je ne peux plus choisir de ne pas en avoir.
    Comment supprimer la couleur choisis ? est-ce prévu dans palette ? est-ce que je dois mettre un bouton supprimer et le gérer en javascript ?

    Répondre à ce message

  • Bonjour,
    Avec Saisies, comment peut-on gérer la transparence ?
    Cordialement

    Répondre à ce message

  • 2

    Bonjour,

    Je viens d’utiliser votre plugin dans la partie privé de mon site.
    J’ai un formulaire pour le plugin que je construis actuellement, mais j’ai un léger souci :
    je cherche à avoir une largeur complète de la couleur affichée pour la partie du bouton « defaut » mais je n’ai qu’un petit rectangle. J’ai, bien évidemment,n utilisé
    'conteneur_class' => 'pleine_largeur',
    mais c’est toute la zone de la question qui est agrandie !!! et pas la zone en couleur :(
    J’utilise la syntaxe « saisies » :

    array (
    'saisie' => 'palette',
    'options' => array (
       'conteneur_class' => 'pleine_largeur',
      'non' => 'valeur_variable',
      'label' => 'le label',
     'defaut' => 'la valeur par defaut dont la taille ne change pas à l'affichage'
    )
    )

    (j’ai recopié à la main, je ne suis pas chez moi)
    j’ai loupé un truc ? ou je n’ai pas placé la ’plein_largeur’ au bonne endroit ?

    Merci de votre aide.
    Rémi.

    • Comme son nom l’indique, l’option conteneur_class s’applique au conteneur (qui englobe saisie + label). Donc le comportement est normal.

      C’est juste un problème de css. Il faudrait que tu créé un fichier de style à insérer dans le privé (par exemple via la balise style du paquet.xml) et que tu stylise input.palette

      Coquille dans ton exemple :« non » doit être remplacé par « nom ».

    • merci pour ta réponse.
      (la coquille, c’est tout simplement que j’ai recopié là la main).

      Je comprends mieux pourquoi ça ne fonctionne pas.

      Je m’y colle donc.

    Répondre à ce message

  • 1

    Attention, avec SPIP 3.2 j’ai bien le bouton de configuration du plugin, mais la page de configuration na affiche plus de formulaire...

    • Mauvaise lange moi. En fait ça fonctionne très bien ...après avoir téléchargé de nouveau (le zip était corrompu la première fois)

    Répondre à ce message

  • 1

    Bonjour,

    Sous Windows, quand on clique sur le champ couleur : Choisir une nouvelle couleur : (espace privé, au niveau d’un article), on tombe automatiquement sur la palette système Windows et donc aucun accès à l’hexa.

    Existe-t-il une astuce pour indiquer une valeur hexadécimale ?

    ps : sous OSX, la palette système propose de renseigner la valeur en hexa.

    Merci pour votre aide,
    françois

    Répondre à ce message

  • 3

    Bonjour,
    Je ne comprends pas comment ça marche . Je l’ai déjà utilisé dans des versions plus anciennes sans problème mais là, après installation et configuration, rien. Pour coloriser du texte au moment de la saisie de l’article, où faut-il ajouter <input class="palette" name="couleur" value="#dfdfdf" /> pour faire apparaître le sélecteur ?
    Si quelqu’un veut bien me renseigner...
    Merci de votre aide...

    • Palette n’a jamais servi à colorer des textes. C’est un outil qui est appelé par d’autres plugins pour afficher une palette de couleur, qui peut servir à des usages variés en fonction du plugin.

      Donc vous deviez très certainement utiliser un autre plugin pour vos couleurs dans les textes. J’ignore lequel. Il se peut deux choses :
      -  ce plugin a été désactivé
      -  ce plugin utilise palette, mais n’est pas compatible avec la version la plus récente.

    • Je comprends du coup ! Effectivement, j’utilisais Scolaspip...
      Bon... c’est un peu trop technique pour moi, tant pis pour la couleur !
      Merci beaucoup de votre réponse en tout cas !!

    • Pourquoi un passé ?

      Du reste je ne pense pas que scolas spip lui même gère la couleur dans les articles (s’il s’agit bien de cela), il doit faire appel un à un plugin externe (où vous même en avaient installé un).

      Je dirais de demander directement sur la page de scolaspip.

      Cela étant, les colurs dans les articles sont rarement conseillées.

      A mon avis, c’est du côté du plugin enluminure typographique qu’il faut chercher.

    Répondre à ce message

  • 4
    Pascal FORTIN

    Bonjour,
    Palette n’est plus opérant depuis le passage à SPIP 3.2.0.
    Ai-je loupé quelque chose ?
    Merci pour les conseils.
    Pascal FORTIN

    • Quelle version utilisez vous ?

    • Pascal FORTIN

      La dernière version de palette (4.0.7 tenue à jour régulièrement les mises à jour automatiques des plugin) et la dernière version de spip (3.2.0).
      Face au dysfonctionnement, la librairie Farbastic a été supprimée.

      pour voir : http://clg-capucins-melun.fr

      Pascal FORTIN

    • Je ne sais pas, il faudrait que je fasse des tests approfondis… et VRAIMENT pas le temps.

    • Face au dysfonctionnement, la librairie Farbastic a été supprimée.

      Bah elle n’est plus utilisée de toutes façons depuis la version 4 du plugin !

      Et sinon, en quoi la capture d’écran montre un problème ? Vous parlez vraiment du bon plugin ?

    Répondre à ce message

  • La version 4 du plugin Palette, pour SPIP 3.1+ utilise maintenant la librairie tinyColorPicker à la place de Farbtastic.

    Répondre à ce message

  • 1

    Bonjour spipien,

    Bravo pour ce plugin ! Palette se révèle un plugin indispensable dans mon projet de site, notamment pour coloriser des contenus à éditer en ligne.

    Je travaille avec le canvas de html5, et bien entendu des javascripts. Or il apparait qu’au changement de contenu de mon champ input, sous l’action de palette & farbastic, le javascript de mon canvas ne se déclenche pas automatiquement, du moins pas avec le onchange=« fn() » du HTML DOM Events. J’ai réussi à provoquer un déclenchement « automatique » avec le onmousemove=« fn() » , c’est-à-dire lorsque la souris sort de la fenêtre farbastic. C’est fastidieux. J’aurais aimé que le déclenchement (trigger) se fasse au clic dans farbastic, car c’est bien entendu beaucoup plus intuitif pour l’utilisateur.

    J’ai testé beaucoup d’autre Html Dom events, mais sans y parvenir. Y-a-t-il une solution ?

    Salutations respectueuses et spipiennes,
    LEXI

    http://caricaturejs.com

    • Après bien des essais infructueux, je m’en suis remis au web color picker jscolor qui a l’avantage de réagir à la volée au « onchange event ». Dès le clic de souris dans son « farbastic », le code couleur est soumis au script sans devoir passer par un bouton de « submit » pour valider le « input ». C’est rapide et intuitif.

      Exemple

      Donc j’abandonne « Palette », car malheureusement totalement incompétent pour proposer une amélioration de son js.

      Avec regrets !
      LEXI

    Répondre à ce message

  • 2

    Bonsoir,
    j’ai testé en local le plugin Palette sur SPIP 3.1 et tout semble bien marché : par précaution j’ai changé (en local toujours) .attr() en .prop() ici http://zone.spip.org/trac/spip-zone/browser/_plugins_/palette/trunk/javascript/palette2.js.html#L48 et aussi ligne 53. Je n’ai pas rencontré de problème dans un usage normal.
    Je le passerais bien en version 3.0.6 avec ces petits changements + une borne ouverte à SPIP 3.1 : y a-til des inconvénients ?

    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