liste des couleurs.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu liste des couleurs.

Message par Jama Lun 2 Avr 2012 - 12:32

je viens de consulter l'astuce permettant de changer le sélecteur de couleur.
Mais même en respectant la marche à suivre indiquée, ça ne marche pas.
Est ce actif en phpBB3 ?

merci
cordialement
Jama


Dernière édition par Jama le Mar 3 Avr 2012 - 12:21, édité 1 fois
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Invité Lun 2 Avr 2012 - 12:39

On va essayer d'une autre manière Wink

Dans ton CSS rajoute ce code:
Code:
.colorpicker {
                  width: 356px;
                  height: 176px;
                  overflow: hidden;
                  position: absolute;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
                  font-family: Arial, Helvetica, sans-serif;
                  display: none;
                }
                .colorpicker_color {
                  width: 150px;
                  height: 150px;
                  left: 14px;
                  top: 13px;
                  position: absolute;
                  background: #f00;
                  overflow: hidden;
                  cursor: crosshair;
                }
                .colorpicker_color div {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 150px;
                  height: 150px;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
                }
                .colorpicker_color div div {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 11px;
                  height: 11px;
                  overflow: hidden;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
                  margin: -5px 0 0 -5px;
                }
                .colorpicker_hue {
                  position: absolute;
                  top: 13px;
                  left: 171px;
                  width: 35px;
                  height: 150px;
                  cursor: n-resize;
                }
                .colorpicker_hue div {
                  position: absolute;
                  width: 35px;
                  height: 9px;
                  overflow: hidden;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
                  margin: -4px 0 0 0;
                  left: 0px;
                }
                .colorpicker_new_color {
                  position: absolute;
                  width: 60px;
                  height: 30px;
                  left: 213px;
                  top: 13px;
                  background: #f00;
                }
                .colorpicker_current_color {
                  position: absolute;
                  width: 60px;
                  height: 30px;
                  left: 283px;
                  top: 13px;
                  background: #f00;
                }
                .colorpicker input {
                  background-color: transparent;
                  border: 1px solid transparent;
                  position: absolute;
                  font-size: 10px;
                  font-family: Arial, Helvetica, sans-serif;
                  color: #898989;
                  top: 4px;
                  right: 11px;
                  text-align: right;
                  margin: 0;
                  padding: 0;
                  height: 11px;
                }
                .colorpicker_hex {
                  position: absolute;
                  width: 72px;
                  height: 22px;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
                  left: 212px;
                  top: 142px;
                }
                .colorpicker_hex input {
                  right: 6px;
                }
                .colorpicker_field {
                  height: 22px;
                  width: 62px;
                  background-position: top;
                  position: absolute;
                }
                .colorpicker_field span {
                  position: absolute;
                  width: 12px;
                  height: 22px;
                  overflow: hidden;
                  top: 0;
                  right: 0;
                  cursor: n-resize;
                }
                .colorpicker_rgb_r {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
                  top: 52px;
                  left: 212px;
                }
                .colorpicker_rgb_g {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
                  top: 82px;
                  left: 212px;
                }
                .colorpicker_rgb_b {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
                  top: 112px;
                  left: 212px;
                }
                .colorpicker_hsb_h {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
                  top: 52px;
                  left: 282px;
                }
                .colorpicker_hsb_s {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
                  top: 82px;
                  left: 282px;
                }
                .colorpicker_hsb_b {
                  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
                  top: 112px;
                  left: 282px;
                }
                .colorpicker_submit {
                  position: absolute;
                  width: 22px;
                  height: 22px;
                  background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
                  left: 322px;
                  top: 142px;
                  overflow: hidden;
                }
                .colorpicker_focus {
                  background-position: center;
                }
                .colorpicker_hex.colorpicker_focus {
                  background-position: bottom;
                }
                .colorpicker_submit.colorpicker_focus {
                  background-position: bottom;
                }
                .colorpicker_slider {
                  background-position: bottom;
                }



Maintenant tu va créez un nouveau JavaScript et tu va inséré ce code:
Code:
/**
 *
 * Color picker
 * Author: Stefan Petre www.eyecon.ro
 *
 * Dual licensed under the MIT and GPL licenses
 *
 */
$(function(){
  $("#color").length!=0&&(function(c){var e=function(){var e=65,j={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:!0,flat:!1},i=function(a,b){var d=h(a);c(b).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()},n=function(a,b){c(b).data("colorpicker").fields.eq(4).val(a.h).end().eq(5).val(a.s).end().eq(6).val(a.b).end()},l=function(a,b){c(b).data("colorpicker").fields.eq(0).val(k(h(a))).end()},
o=function(a,b){c(b).data("colorpicker").selector.css("backgroundColor","#"+k(h({h:a.h,s:100,b:100})));c(b).data("colorpicker").selectorIndic.css({left:parseInt(150*a.s/100,10),top:parseInt(150*(100-a.b)/100,10)})},p=function(a,b){c(b).data("colorpicker").hue.css("top",parseInt(150-150*a.h/360,10))},r=function(a,b){c(b).data("colorpicker").currentColor.css("backgroundColor","#"+k(h(a)))},q=function(a,b){c(b).data("colorpicker").newColor.css("backgroundColor","#"+k(h(a)))},D=function(a){a=a.charCode||
a.keyCode||-1;if(a>e&&a<=90||a==32)return!1;c(this).parent().parent().data("colorpicker").livePreview===!0&&g.apply(this)},g=function(a){var b=c(this).parent().parent(),d;if(this.parentNode.className.indexOf("_hex")>0){d=b.data("colorpicker");var f=this.value,e=6-f.length;if(e>0){for(var g=[],j=0;j<e;j++)g.push("0");g.push(f);f=g.join("")}f=m(s(f));d.color=d=f}else this.parentNode.className.indexOf("_hsb")>0?b.data("colorpicker").color=d=t({h:parseInt(b.data("colorpicker").fields.eq(4).val(),10),
s:parseInt(b.data("colorpicker").fields.eq(5).val(),10),b:parseInt(b.data("colorpicker").fields.eq(6).val(),10)}):(d=b.data("colorpicker"),f={r:parseInt(b.data("colorpicker").fields.eq(1).val(),10),g:parseInt(b.data("colorpicker").fields.eq(2).val(),10),b:parseInt(b.data("colorpicker").fields.eq(3).val(),10)},d.color=d=m({r:Math.min(255,Math.max(0,f.r)),g:Math.min(255,Math.max(0,f.g)),b:Math.min(255,Math.max(0,f.b))}));a&&(i(d,b.get(0)),l(d,b.get(0)),n(d,b.get(0)));o(d,b.get(0));p(d,b.get(0));q(d,
b.get(0));b.data("colorpicker").onChange.apply(b,[d,k(h(d)),h(d)])},E=function(){c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")},F=function(){e=this.parentNode.className.indexOf("_hex")>0?70:65;c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");c(this).parent().addClass("colorpicker_focus")},G=function(a){var b=c(this).parent().find("input").focus(),a={el:c(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>
0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:a.pageY,field:b,val:parseInt(b.val(),10),preview:c(this).parent().parent().data("colorpicker").livePreview};c(document).bind("mouseup",a,u);c(document).bind("mousemove",a,v)},v=function(a){a.data.field.val(Math.max(0,Math.min(a.data.max,parseInt(a.data.val+a.pageY-a.data.y,10))));a.data.preview&&g.apply(a.data.field.get(0),[!0]);return!1},u=function(a){g.apply(a.data.field.get(0),[!0]);a.data.el.removeClass("colorpicker_slider").find("input").focus();
c(document).unbind("mouseup",u);c(document).unbind("mousemove",v);return!1},H=function(){var a={cal:c(this).parent(),y:c(this).offset().top};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,w);c(document).bind("mousemove",a,x)},x=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,a.pageY-a.data.y)))/150,10)).get(0),[a.data.preview]);return!1},w=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));
l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",w);c(document).unbind("mousemove",x);return!1},I=function(){var a={cal:c(this).parent(),pos:c(this).offset()};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,y);c(document).bind("mousemove",a,z)},z=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,a.pageY-a.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,
a.pageX-a.data.pos.left))/150,10)).get(0),[a.data.preview]);return!1},y=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",y);c(document).unbind("mousemove",z);return!1},J=function(){c(this).addClass("colorpicker_focus")},K=function(){c(this).removeClass("colorpicker_focus")},L=function(a){var b=c(this).parent(),d=b.data("colorpicker").color;b.data("colorpicker").origColor=d;r(d,b.get(0));b.data("colorpicker").onSubmit(d,
k(h(d)),h(d),b.data("colorpicker").el,a)},B=function(){var a=c("#"+c(this).data("colorpickerId"));a.data("colorpicker").onBeforeShow.apply(this,[a.get(0)]);var b=c(this).offset(),d;d=document.compatMode=="CSS1Compat";d={l:window.pageXOffset||(d?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(d?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(d?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||
(d?document.documentElement.clientHeight:document.body.clientHeight)};var f=b.top+this.offsetHeight,b=b.left;f+176>d.t+d.h&&(f-=this.offsetHeight+176);b+356>d.l+d.w&&(b-=356);a.css({left:b+"px",top:f+"px"});a.data("colorpicker").onShow.apply(this,[a.get(0)])!=!1&&a.show();c(document).bind("mousedown",{cal:a},A);return!1},A=function(a){M(a.data.cal.get(0),a.target,a.data.cal.get(0))||(a.data.cal.data("colorpicker").onHide.apply(this,[a.data.cal.get(0)])!=!1&&a.data.cal.hide(),c(document).unbind("mousedown",
A))},M=function(a,b,d){if(a==b)return!0;if(a.contains)return a.contains(b);if(a.compareDocumentPosition)return!!(a.compareDocumentPosition(b)&16);for(b=b.parentNode;b&&b!=d;){if(b==a)return!0;b=b.parentNode}return!1},t=function(a){return{h:Math.min(360,Math.max(0,a.h)),s:Math.min(100,Math.max(0,a.s)),b:Math.min(100,Math.max(0,a.b))}},s=function(a){a=parseInt(a.indexOf("#")>-1?a.substring(1):a,16);return{r:a>>16,g:(a&65280)>>8,b:a&255}},m=function(a){var b={h:0,s:0,b:0},d=Math.max(a.r,a.g,a.b),c=d-
Math.min(a.r,a.g,a.b);b.b=d;b.s=d!=0?255*c/d:0;b.h=b.s!=0?a.r==d?(a.g-a.b)/c:a.g==d?2+(a.b-a.r)/c:4+(a.r-a.g)/c:-1;b.h*=60;b.h<0&&(b.h+=360);b.s*=100/255;b.b*=100/255;return b},h=function(a){var b={},d=Math.round(a.h),c=Math.round(a.s*255/100),a=Math.round(a.b*255/100);if(c==0)b.r=b.g=b.b=a;else{var c=(255-c)*a/255,e=(a-c)*(d%60)/60;d==360&&(d=0);d<60?(b.r=a,b.b=c,b.g=c+e):d<120?(b.g=a,b.b=c,b.r=a-e):d<180?(b.g=a,b.r=c,b.b=c+e):d<240?(b.b=a,b.r=c,b.g=a-e):d<300?(b.b=a,b.g=c,b.r=c+e):d<360?(b.r=a,
b.g=c,b.b=a-e):(b.r=0,b.g=0,b.b=0)}return{r:Math.round(b.r),g:Math.round(b.g),b:Math.round(b.b)}},k=function(a){var b=[a.r.toString(16),a.g.toString(16),a.b.toString(16)];c.each(b,function(a,c){c.length==1&&(b[a]="0"+c)});return b.join("")},N=function(){var a=c(this).parent(),b=a.data("colorpicker").origColor;a.data("colorpicker").color=b;i(b,a.get(0));l(b,a.get(0));n(b,a.get(0));o(b,a.get(0));p(b,a.get(0));q(b,a.get(0))};return{init:function(a){a=c.extend({},j,a||{});if(typeof a.color=="string")a.color=
m(s(a.color));else if(a.color.r!=void 0&&a.color.g!=void 0&&a.color.b!=void 0)a.color=m(a.color);else if(a.color.h!=void 0&&a.color.s!=void 0&&a.color.b!=void 0)a.color=t(a.color);else return this;return this.each(function(){if(!c(this).data("colorpickerId")){var b=c.extend({},a);b.origColor=a.color;var d="collorpicker_"+parseInt(Math.random()*1E3);c(this).data("colorpickerId",d);d=c('<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",
d);b.flat?d.appendTo(this).show():d.appendTo(document.body);b.fields=d.find("input").bind("keyup",D).bind("change",g).bind("blur",E).bind("focus",F);d.find("span").bind("mousedown",G).end().find(">div.colorpicker_current_color").bind("click",N);b.selector=d.find("div.colorpicker_color").bind("mousedown",I);b.selectorIndic=b.selector.find("div div");b.el=this;b.hue=d.find("div.colorpicker_hue div");d.find("div.colorpicker_hue").bind("mousedown",H);b.newColor=d.find("div.colorpicker_new_color");b.currentColor=
d.find("div.colorpicker_current_color");d.data("colorpicker",b);d.find("div.colorpicker_submit").bind("mouseenter",J).bind("mouseleave",K).bind("click",L);i(b.color,d.get(0));n(b.color,d.get(0));l(b.color,d.get(0));p(b.color,d.get(0));o(b.color,d.get(0));r(b.color,d.get(0));q(b.color,d.get(0));b.flat?d.css({position:"relative",display:"block"}):c(this).bind(b.eventName,B)}})},showPicker:function(){return this.each(function(){c(this).data("colorpickerId")&&B.apply(this)})},hidePicker:function(){return this.each(function(){c(this).data("colorpickerId")&&
c("#"+c(this).data("colorpickerId")).hide()})},setColor:function(a){if(typeof a=="string")a=m(s(a));else if(a.r!=void 0&&a.g!=void 0&&a.b!=void 0)a=m(a);else if(a.h!=void 0&&a.s!=void 0&&a.b!=void 0)a=t(a);else return this;return this.each(function(){if(c(this).data("colorpickerId")){var b=c("#"+c(this).data("colorpickerId"));b.data("colorpicker").color=a;b.data("colorpicker").origColor=a;i(a,b.get(0));n(a,b.get(0));l(a,b.get(0));p(a,b.get(0));o(a,b.get(0));r(a,b.get(0));q(a,b.get(0))}})}}}();c.fn.extend({ColorPicker:e.init,
ColorPickerHide:e.hidePicker,ColorPickerShow:e.showPicker,ColorPickerSetColor:e.setColor})}(jQuery),$("#wcolor,#color").html("<div></div>"),defaulColor=my_getcookie("defaultColor")?my_getcookie("defaultColor"):"000000",$("#color div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j){my_setcookie("defaultColor",e,1,0);bbfontstyle("[color=#"+e+"]","[/color]");selectWysiwyg(j,"color");return!1}}),$("#wcolor div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j,i){my_setcookie("defaultColor",
e,1,0);vB_Editor.text_editor.format(i,"constructBBcode_select_color_#"+e,!1,!0)}}))


NOTE: Il faut enlever l'encien code que tu as mis et prendre le mien Wink!


Si cela ne fonctionne toujours pas:
- Avec le mode WYSIWYG Cela ne fonctionne pas pour les deux codes (Le mien et le votre)... assurez vous que ce mode ne sois pas activé Wink!
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Jama Lun 2 Avr 2012 - 14:15

bonjour,
merci de la réponse,
j'ai bien essayé la solution proposée, mais sans le moindre changement.
J'ai pensé qu'il fallait peut-être se delogguer puis se reloguer mais idem.
ceci mis à part c'est un plus, on peut tout à fait vivre sans Wink

Jama

PS mon forum est en phpBB3
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Ea Lun 2 Avr 2012 - 15:35

Bonjour,


Dans le script du système de "tableau" à onglet", vous avez laissé les chiffres ( du style 1., 2. ), il faudrait mettre le code comme il faut.

C'est un bug de IE avec la numérotation de ligne, normalement on avait désactivé la numérotation de ligne pour IE mais on dirait que ce n'est plus le cas ( on peut également juste faire un copié collé en gardant la souris au dessus du code ).

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Jama Lun 2 Avr 2012 - 15:42

Etana a écrit:Bonjour,


Dans le script du système de "tableau" à onglet", vous avez laissé les chiffres ( du style 1., 2. ), il faudrait mettre le code comme il faut.

C'est un bug de IE avec la numérotation de ligne, normalement on avait désactivé la numérotation de ligne pour IE mais on dirait que ce n'est plus le cas ( on peut également juste faire un copié collé en gardant la souris au dessus du code ).

Cordialement.
Je viens de supprimer ce code. Je regarde ce que ça donne pour le picker.
Merci

PS après test
toujours rien pour le picker.
Toujours désespérément la liste.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Ea Lun 2 Avr 2012 - 15:59

Il semble manquer quelques caractères ( }) au moins ) à la fin du code de votre sélecteur de couleurs, ça devrait être :

Code:
$(function() {
  $("#color").length != 0 && (function(c) {
    var e = function() {
      var e = 65, j = {eventName:"click", onShow:function() {
      }, onBeforeShow:function() {
      }, onHide:function() {
      }, onChange:function() {
      }, onSubmit:function() {
      }, color:"ff0000", livePreview:!0, flat:!1}, i = function(a, b) {
        var d = h(a);
        c(b).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()
      }, n = function(a, b) {
        c(b).data("colorpicker").fields.eq(4).val(a.h).end().eq(5).val(a.s).end().eq(6).val(a.b).end()
      }, l = function(a, b) {
        c(b).data("colorpicker").fields.eq(0).val(k(h(a))).end()
      }, o = function(a, b) {
        c(b).data("colorpicker").selector.css("backgroundColor", "#" + k(h({h:a.h, s:100, b:100})));
        c(b).data("colorpicker").selectorIndic.css({left:parseInt(150 * a.s / 100, 10), top:parseInt(150 * (100 - a.b) / 100, 10)})
      }, p = function(a, b) {
        c(b).data("colorpicker").hue.css("top", parseInt(150 - 150 * a.h / 360, 10))
      }, r = function(a, b) {
        c(b).data("colorpicker").currentColor.css("backgroundColor", "#" + k(h(a)))
      }, q = function(a, b) {
        c(b).data("colorpicker").newColor.css("backgroundColor", "#" + k(h(a)))
      }, D = function(a) {
        a = a.charCode || a.keyCode || -1;
        if(a > e && a <= 90 || a == 32) {
          return!1
        }
        c(this).parent().parent().data("colorpicker").livePreview === !0 && g.apply(this)
      }, g = function(a) {
        var b = c(this).parent().parent(), d;
        if(this.parentNode.className.indexOf("_hex") > 0) {
          d = b.data("colorpicker");
          var f = this.value, e = 6 - f.length;
          if(e > 0) {
            for(var g = [], j = 0;j < e;j++) {
              g.push("0")
            }
            g.push(f);
            f = g.join("")
          }
          f = m(s(f));
          d.color = d = f
        }else {
          this.parentNode.className.indexOf("_hsb") > 0 ? b.data("colorpicker").color = d = t({h:parseInt(b.data("colorpicker").fields.eq(4).val(), 10), s:parseInt(b.data("colorpicker").fields.eq(5).val(), 10), b:parseInt(b.data("colorpicker").fields.eq(6).val(), 10)}) : (d = b.data("colorpicker"), f = {r:parseInt(b.data("colorpicker").fields.eq(1).val(), 10), g:parseInt(b.data("colorpicker").fields.eq(2).val(), 10), b:parseInt(b.data("colorpicker").fields.eq(3).val(), 10)}, d.color = d = m({r:Math.min(255,
          Math.max(0, f.r)), g:Math.min(255, Math.max(0, f.g)), b:Math.min(255, Math.max(0, f.b))}))
        }
        a && (i(d, b.get(0)), l(d, b.get(0)), n(d, b.get(0)));
        o(d, b.get(0));
        p(d, b.get(0));
        q(d, b.get(0));
        b.data("colorpicker").onChange.apply(b, [d, k(h(d)), h(d)])
      }, E = function() {
        c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")
      }, F = function() {
        e = this.parentNode.className.indexOf("_hex") > 0 ? 70 : 65;
        c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");
        c(this).parent().addClass("colorpicker_focus")
      }, G = function(a) {
        var b = c(this).parent().find("input").focus(), a = {el:c(this).parent().addClass("colorpicker_slider"), max:this.parentNode.className.indexOf("_hsb_h") > 0 ? 360 : this.parentNode.className.indexOf("_hsb") > 0 ? 100 : 255, y:a.pageY, field:b, val:parseInt(b.val(), 10), preview:c(this).parent().parent().data("colorpicker").livePreview};
        c(document).bind("mouseup", a, u);
        c(document).bind("mousemove", a, v)
      }, v = function(a) {
        a.data.field.val(Math.max(0, Math.min(a.data.max, parseInt(a.data.val + a.pageY - a.data.y, 10))));
        a.data.preview && g.apply(a.data.field.get(0), [!0]);
        return!1
      }, u = function(a) {
        g.apply(a.data.field.get(0), [!0]);
        a.data.el.removeClass("colorpicker_slider").find("input").focus();
        c(document).unbind("mouseup", u);
        c(document).unbind("mousemove", v);
        return!1
      }, H = function() {
        var a = {cal:c(this).parent(), y:c(this).offset().top};
        a.preview = a.cal.data("colorpicker").livePreview;
        c(document).bind("mouseup", a, w);
        c(document).bind("mousemove", a, x)
      }, x = function(a) {
        g.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360 * (150 - Math.max(0, Math.min(150, a.pageY - a.data.y))) / 150, 10)).get(0), [a.data.preview]);
        return!1
      }, w = function(a) {
        i(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        l(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        c(document).unbind("mouseup", w);
        c(document).unbind("mousemove", x);
        return!1
      }, I = function() {
        var a = {cal:c(this).parent(), pos:c(this).offset()};
        a.preview = a.cal.data("colorpicker").livePreview;
        c(document).bind("mouseup", a, y);
        c(document).bind("mousemove", a, z)
      }, z = function(a) {
        g.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100 * (150 - Math.max(0, Math.min(150, a.pageY - a.data.pos.top))) / 150, 10)).end().eq(5).val(parseInt(100 * Math.max(0, Math.min(150, a.pageX - a.data.pos.left)) / 150, 10)).get(0), [a.data.preview]);
        return!1
      }, y = function(a) {
        i(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        l(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        c(document).unbind("mouseup", y);
        c(document).unbind("mousemove", z);
        return!1
      }, J = function() {
        c(this).addClass("colorpicker_focus")
      }, K = function() {
        c(this).removeClass("colorpicker_focus")
      }, L = function(a) {
        var b = c(this).parent(), d = b.data("colorpicker").color;
        b.data("colorpicker").origColor = d;
        r(d, b.get(0));
        b.data("colorpicker").onSubmit(d, k(h(d)), h(d), b.data("colorpicker").el, a)
      }, B = function() {
        var a = c("#" + c(this).data("colorpickerId"));
        a.data("colorpicker").onBeforeShow.apply(this, [a.get(0)]);
        var b = c(this).offset(), d;
        d = document.compatMode == "CSS1Compat";
        d = {l:window.pageXOffset || (d ? document.documentElement.scrollLeft : document.body.scrollLeft), t:window.pageYOffset || (d ? document.documentElement.scrollTop : document.body.scrollTop), w:window.innerWidth || (d ? document.documentElement.clientWidth : document.body.clientWidth), h:window.innerHeight || (d ? document.documentElement.clientHeight : document.body.clientHeight)};
        var f = b.top + this.offsetHeight, b = b.left;
        f + 176 > d.t + d.h && (f -= this.offsetHeight + 176);
        b + 356 > d.l + d.w && (b -= 356);
        a.css({left:b + "px", top:f + "px"});
        a.data("colorpicker").onShow.apply(this, [a.get(0)]) != !1 && a.show();
        c(document).bind("mousedown", {cal:a}, A);
        return!1
      }, A = function(a) {
        M(a.data.cal.get(0), a.target, a.data.cal.get(0)) || (a.data.cal.data("colorpicker").onHide.apply(this, [a.data.cal.get(0)]) != !1 && a.data.cal.hide(), c(document).unbind("mousedown", A))
      }, M = function(a, b, d) {
        if(a == b) {
          return!0
        }
        if(a.contains) {
          return a.contains(b)
        }
        if(a.compareDocumentPosition) {
          return!!(a.compareDocumentPosition(b) & 16)
        }
        for(b = b.parentNode;b && b != d;) {
          if(b == a) {
            return!0
          }
          b = b.parentNode
        }
        return!1
      }, t = function(a) {
        return{h:Math.min(360, Math.max(0, a.h)), s:Math.min(100, Math.max(0, a.s)), b:Math.min(100, Math.max(0, a.b))}
      }, s = function(a) {
        a = parseInt(a.indexOf("#") > -1 ? a.substring(1) : a, 16);
        return{r:a >> 16, g:(a & 65280) >> 8, b:a & 255}
      }, m = function(a) {
        var b = {h:0, s:0, b:0}, d = Math.max(a.r, a.g, a.b), c = d - Math.min(a.r, a.g, a.b);
        b.b = d;
        b.s = d != 0 ? 255 * c / d : 0;
        b.h = b.s != 0 ? a.r == d ? (a.g - a.b) / c : a.g == d ? 2 + (a.b - a.r) / c : 4 + (a.r - a.g) / c : -1;
        b.h *= 60;
        b.h < 0 && (b.h += 360);
        b.s *= 100 / 255;
        b.b *= 100 / 255;
        return b
      }, h = function(a) {
        var b = {}, d = Math.round(a.h), c = Math.round(a.s * 255 / 100), a = Math.round(a.b * 255 / 100);
        if(c == 0) {
          b.r = b.g = b.b = a
        }else {
          var c = (255 - c) * a / 255, e = (a - c) * (d % 60) / 60;
          d == 360 && (d = 0);
          d < 60 ? (b.r = a, b.b = c, b.g = c + e) : d < 120 ? (b.g = a, b.b = c, b.r = a - e) : d < 180 ? (b.g = a, b.r = c, b.b = c + e) : d < 240 ? (b.b = a, b.r = c, b.g = a - e) : d < 300 ? (b.b = a, b.g = c, b.r = c + e) : d < 360 ? (b.r = a, b.g = c, b.b = a - e) : (b.r = 0, b.g = 0, b.b = 0)
        }
        return{r:Math.round(b.r), g:Math.round(b.g), b:Math.round(b.b)}
      }, k = function(a) {
        var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
        c.each(b, function(a, c) {
          c.length == 1 && (b[a] = "0" + c)
        });
        return b.join("")
      }, N = function() {
        var a = c(this).parent(), b = a.data("colorpicker").origColor;
        a.data("colorpicker").color = b;
        i(b, a.get(0));
        l(b, a.get(0));
        n(b, a.get(0));
        o(b, a.get(0));
        p(b, a.get(0));
        q(b, a.get(0))
      };
      return{init:function(a) {
        a = c.extend({}, j, a || {});
        if(typeof a.color == "string") {
          a.color = m(s(a.color))
        }else {
          if(a.color.r != void 0 && a.color.g != void 0 && a.color.b != void 0) {
            a.color = m(a.color)
          }else {
            if(a.color.h != void 0 && a.color.s != void 0 && a.color.b != void 0) {
              a.color = t(a.color)
            }else {
              return this
            }
          }
        }
        return this.each(function() {
          if(!c(this).data("colorpickerId")) {
            var b = c.extend({}, a);
            b.origColor = a.color;
            var d = "collorpicker_" + parseInt(Math.random() * 1E3);
            c(this).data("colorpickerId", d);
            d = c('<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",
            d);
            b.flat ? d.appendTo(this).show() : d.appendTo(document.body);
            b.fields = d.find("input").bind("keyup", D).bind("change", g).bind("blur", E).bind("focus", F);
            d.find("span").bind("mousedown", G).end().find(">div.colorpicker_current_color").bind("click", N);
            b.selector = d.find("div.colorpicker_color").bind("mousedown", I);
            b.selectorIndic = b.selector.find("div div");
            b.el = this;
            b.hue = d.find("div.colorpicker_hue div");
            d.find("div.colorpicker_hue").bind("mousedown", H);
            b.newColor = d.find("div.colorpicker_new_color");
            b.currentColor = d.find("div.colorpicker_current_color");
            d.data("colorpicker", b);
            d.find("div.colorpicker_submit").bind("mouseenter", J).bind("mouseleave", K).bind("click", L);
            i(b.color, d.get(0));
            n(b.color, d.get(0));
            l(b.color, d.get(0));
            p(b.color, d.get(0));
            o(b.color, d.get(0));
            r(b.color, d.get(0));
            q(b.color, d.get(0));
            b.flat ? d.css({position:"relative", display:"block"}) : c(this).bind(b.eventName, B)
          }
        })
      }, showPicker:function() {
        return this.each(function() {
          c(this).data("colorpickerId") && B.apply(this)
        })
      }, hidePicker:function() {
        return this.each(function() {
          c(this).data("colorpickerId") && c("#" + c(this).data("colorpickerId")).hide()
        })
      }, setColor:function(a) {
        if(typeof a == "string") {
          a = m(s(a))
        }else {
          if(a.r != void 0 && a.g != void 0 && a.b != void 0) {
            a = m(a)
          }else {
            if(a.h != void 0 && a.s != void 0 && a.b != void 0) {
              a = t(a)
            }else {
              return this
            }
          }
        }
        return this.each(function() {
          if(c(this).data("colorpickerId")) {
            var b = c("#" + c(this).data("colorpickerId"));
            b.data("colorpicker").color = a;
            b.data("colorpicker").origColor = a;
            i(a, b.get(0));
            n(a, b.get(0));
            l(a, b.get(0));
            p(a, b.get(0));
            o(a, b.get(0));
            r(a, b.get(0));
            q(a, b.get(0))
          }
        })
      }}
    }();
    c.fn.extend({ColorPicker:e.init, ColorPickerHide:e.hidePicker, ColorPickerShow:e.showPicker, ColorPickerSetColor:e.setColor})
  }(jQuery), $("#wcolor,#color").html("<div></div>"), defaulColor = my_getcookie("defaultColor") ? my_getcookie("defaultColor") : "000000", $("#color div").ColorPicker({color:defaulColor, flat:!0, onSubmit:function(c, e, C, j) {
    my_setcookie("defaultColor", e, 1, 0);
    bbfontstyle("[color=#" + e + "]", "[/color]");
    selectWysiwyg(j, "color");
    return!1
  }}), $("#wcolor div").ColorPicker({color:defaulColor, flat:!0, onSubmit:function(c, e, C, j, i) {
    my_setcookie("defaultColor", e, 1, 0);
    vB_Editor.text_editor.format(i, "constructBBcode_select_color_#" + e, !1, !0)
  }}))
});
plutôt.


Et sinon le tutoriel a été mis a jour avec la nouvelle version de ce sélecteur de couleur depuis quelques temps :
https://forum.forumactif.com/t287454-ajouter-un-selecteur-de-couleur

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: liste des couleurs.

Message par Jama Mar 3 Avr 2012 - 8:07

Etana a écrit:Il semble manquer quelques caractères ( }) au moins ) à la fin du code de votre sélecteur de couleurs, ça devrait être :

Code:
$(function() {
  $("#color").length != 0 && (function(c) {
    var e = function() {
      var e = 65, j = {eventName:"click", onShow:function() {
      }, onBeforeShow:function() {
      }, onHide:function() {
      }, onChange:function() {
      }, onSubmit:function() {
      }, color:"ff0000", livePreview:!0, flat:!1}, i = function(a, b) {
        var d = h(a);
        c(b).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()
      }, n = function(a, b) {
        c(b).data("colorpicker").fields.eq(4).val(a.h).end().eq(5).val(a.s).end().eq(6).val(a.b).end()
      }, l = function(a, b) {
        c(b).data("colorpicker").fields.eq(0).val(k(h(a))).end()
      }, o = function(a, b) {
        c(b).data("colorpicker").selector.css("backgroundColor", "#" + k(h({h:a.h, s:100, b:100})));
        c(b).data("colorpicker").selectorIndic.css({left:parseInt(150 * a.s / 100, 10), top:parseInt(150 * (100 - a.b) / 100, 10)})
      }, p = function(a, b) {
        c(b).data("colorpicker").hue.css("top", parseInt(150 - 150 * a.h / 360, 10))
      }, r = function(a, b) {
        c(b).data("colorpicker").currentColor.css("backgroundColor", "#" + k(h(a)))
      }, q = function(a, b) {
        c(b).data("colorpicker").newColor.css("backgroundColor", "#" + k(h(a)))
      }, D = function(a) {
        a = a.charCode || a.keyCode || -1;
        if(a > e && a <= 90 || a == 32) {
          return!1
        }
        c(this).parent().parent().data("colorpicker").livePreview === !0 && g.apply(this)
      }, g = function(a) {
        var b = c(this).parent().parent(), d;
        if(this.parentNode.className.indexOf("_hex") > 0) {
          d = b.data("colorpicker");
          var f = this.value, e = 6 - f.length;
          if(e > 0) {
            for(var g = [], j = 0;j < e;j++) {
              g.push("0")
            }
            g.push(f);
            f = g.join("")
          }
          f = m(s(f));
          d.color = d = f
        }else {
          this.parentNode.className.indexOf("_hsb") > 0 ? b.data("colorpicker").color = d = t({h:parseInt(b.data("colorpicker").fields.eq(4).val(), 10), s:parseInt(b.data("colorpicker").fields.eq(5).val(), 10), b:parseInt(b.data("colorpicker").fields.eq(6).val(), 10)}) : (d = b.data("colorpicker"), f = {r:parseInt(b.data("colorpicker").fields.eq(1).val(), 10), g:parseInt(b.data("colorpicker").fields.eq(2).val(), 10), b:parseInt(b.data("colorpicker").fields.eq(3).val(), 10)}, d.color = d = m({r:Math.min(255,
          Math.max(0, f.r)), g:Math.min(255, Math.max(0, f.g)), b:Math.min(255, Math.max(0, f.b))}))
        }
        a && (i(d, b.get(0)), l(d, b.get(0)), n(d, b.get(0)));
        o(d, b.get(0));
        p(d, b.get(0));
        q(d, b.get(0));
        b.data("colorpicker").onChange.apply(b, [d, k(h(d)), h(d)])
      }, E = function() {
        c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")
      }, F = function() {
        e = this.parentNode.className.indexOf("_hex") > 0 ? 70 : 65;
        c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");
        c(this).parent().addClass("colorpicker_focus")
      }, G = function(a) {
        var b = c(this).parent().find("input").focus(), a = {el:c(this).parent().addClass("colorpicker_slider"), max:this.parentNode.className.indexOf("_hsb_h") > 0 ? 360 : this.parentNode.className.indexOf("_hsb") > 0 ? 100 : 255, y:a.pageY, field:b, val:parseInt(b.val(), 10), preview:c(this).parent().parent().data("colorpicker").livePreview};
        c(document).bind("mouseup", a, u);
        c(document).bind("mousemove", a, v)
      }, v = function(a) {
        a.data.field.val(Math.max(0, Math.min(a.data.max, parseInt(a.data.val + a.pageY - a.data.y, 10))));
        a.data.preview && g.apply(a.data.field.get(0), [!0]);
        return!1
      }, u = function(a) {
        g.apply(a.data.field.get(0), [!0]);
        a.data.el.removeClass("colorpicker_slider").find("input").focus();
        c(document).unbind("mouseup", u);
        c(document).unbind("mousemove", v);
        return!1
      }, H = function() {
        var a = {cal:c(this).parent(), y:c(this).offset().top};
        a.preview = a.cal.data("colorpicker").livePreview;
        c(document).bind("mouseup", a, w);
        c(document).bind("mousemove", a, x)
      }, x = function(a) {
        g.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360 * (150 - Math.max(0, Math.min(150, a.pageY - a.data.y))) / 150, 10)).get(0), [a.data.preview]);
        return!1
      }, w = function(a) {
        i(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        l(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        c(document).unbind("mouseup", w);
        c(document).unbind("mousemove", x);
        return!1
      }, I = function() {
        var a = {cal:c(this).parent(), pos:c(this).offset()};
        a.preview = a.cal.data("colorpicker").livePreview;
        c(document).bind("mouseup", a, y);
        c(document).bind("mousemove", a, z)
      }, z = function(a) {
        g.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100 * (150 - Math.max(0, Math.min(150, a.pageY - a.data.pos.top))) / 150, 10)).end().eq(5).val(parseInt(100 * Math.max(0, Math.min(150, a.pageX - a.data.pos.left)) / 150, 10)).get(0), [a.data.preview]);
        return!1
      }, y = function(a) {
        i(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        l(a.data.cal.data("colorpicker").color, a.data.cal.get(0));
        c(document).unbind("mouseup", y);
        c(document).unbind("mousemove", z);
        return!1
      }, J = function() {
        c(this).addClass("colorpicker_focus")
      }, K = function() {
        c(this).removeClass("colorpicker_focus")
      }, L = function(a) {
        var b = c(this).parent(), d = b.data("colorpicker").color;
        b.data("colorpicker").origColor = d;
        r(d, b.get(0));
        b.data("colorpicker").onSubmit(d, k(h(d)), h(d), b.data("colorpicker").el, a)
      }, B = function() {
        var a = c("#" + c(this).data("colorpickerId"));
        a.data("colorpicker").onBeforeShow.apply(this, [a.get(0)]);
        var b = c(this).offset(), d;
        d = document.compatMode == "CSS1Compat";
        d = {l:window.pageXOffset || (d ? document.documentElement.scrollLeft : document.body.scrollLeft), t:window.pageYOffset || (d ? document.documentElement.scrollTop : document.body.scrollTop), w:window.innerWidth || (d ? document.documentElement.clientWidth : document.body.clientWidth), h:window.innerHeight || (d ? document.documentElement.clientHeight : document.body.clientHeight)};
        var f = b.top + this.offsetHeight, b = b.left;
        f + 176 > d.t + d.h && (f -= this.offsetHeight + 176);
        b + 356 > d.l + d.w && (b -= 356);
        a.css({left:b + "px", top:f + "px"});
        a.data("colorpicker").onShow.apply(this, [a.get(0)]) != !1 && a.show();
        c(document).bind("mousedown", {cal:a}, A);
        return!1
      }, A = function(a) {
        M(a.data.cal.get(0), a.target, a.data.cal.get(0)) || (a.data.cal.data("colorpicker").onHide.apply(this, [a.data.cal.get(0)]) != !1 && a.data.cal.hide(), c(document).unbind("mousedown", A))
      }, M = function(a, b, d) {
        if(a == b) {
          return!0
        }
        if(a.contains) {
          return a.contains(b)
        }
        if(a.compareDocumentPosition) {
          return!!(a.compareDocumentPosition(b) & 16)
        }
        for(b = b.parentNode;b && b != d;) {
          if(b == a) {
            return!0
          }
          b = b.parentNode
        }
        return!1
      }, t = function(a) {
        return{h:Math.min(360, Math.max(0, a.h)), s:Math.min(100, Math.max(0, a.s)), b:Math.min(100, Math.max(0, a.b))}
      }, s = function(a) {
        a = parseInt(a.indexOf("#") > -1 ? a.substring(1) : a, 16);
        return{r:a >> 16, g:(a & 65280) >> 8, b:a & 255}
      }, m = function(a) {
        var b = {h:0, s:0, b:0}, d = Math.max(a.r, a.g, a.b), c = d - Math.min(a.r, a.g, a.b);
        b.b = d;
        b.s = d != 0 ? 255 * c / d : 0;
        b.h = b.s != 0 ? a.r == d ? (a.g - a.b) / c : a.g == d ? 2 + (a.b - a.r) / c : 4 + (a.r - a.g) / c : -1;
        b.h *= 60;
        b.h < 0 && (b.h += 360);
        b.s *= 100 / 255;
        b.b *= 100 / 255;
        return b
      }, h = function(a) {
        var b = {}, d = Math.round(a.h), c = Math.round(a.s * 255 / 100), a = Math.round(a.b * 255 / 100);
        if(c == 0) {
          b.r = b.g = b.b = a
        }else {
          var c = (255 - c) * a / 255, e = (a - c) * (d % 60) / 60;
          d == 360 && (d = 0);
          d < 60 ? (b.r = a, b.b = c, b.g = c + e) : d < 120 ? (b.g = a, b.b = c, b.r = a - e) : d < 180 ? (b.g = a, b.r = c, b.b = c + e) : d < 240 ? (b.b = a, b.r = c, b.g = a - e) : d < 300 ? (b.b = a, b.g = c, b.r = c + e) : d < 360 ? (b.r = a, b.g = c, b.b = a - e) : (b.r = 0, b.g = 0, b.b = 0)
        }
        return{r:Math.round(b.r), g:Math.round(b.g), b:Math.round(b.b)}
      }, k = function(a) {
        var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
        c.each(b, function(a, c) {
          c.length == 1 && (b[a] = "0" + c)
        });
        return b.join("")
      }, N = function() {
        var a = c(this).parent(), b = a.data("colorpicker").origColor;
        a.data("colorpicker").color = b;
        i(b, a.get(0));
        l(b, a.get(0));
        n(b, a.get(0));
        o(b, a.get(0));
        p(b, a.get(0));
        q(b, a.get(0))
      };
      return{init:function(a) {
        a = c.extend({}, j, a || {});
        if(typeof a.color == "string") {
          a.color = m(s(a.color))
        }else {
          if(a.color.r != void 0 && a.color.g != void 0 && a.color.b != void 0) {
            a.color = m(a.color)
          }else {
            if(a.color.h != void 0 && a.color.s != void 0 && a.color.b != void 0) {
              a.color = t(a.color)
            }else {
              return this
            }
          }
        }
        return this.each(function() {
          if(!c(this).data("colorpickerId")) {
            var b = c.extend({}, a);
            b.origColor = a.color;
            var d = "collorpicker_" + parseInt(Math.random() * 1E3);
            c(this).data("colorpickerId", d);
            d = c('<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",
            d);
            b.flat ? d.appendTo(this).show() : d.appendTo(document.body);
            b.fields = d.find("input").bind("keyup", D).bind("change", g).bind("blur", E).bind("focus", F);
            d.find("span").bind("mousedown", G).end().find(">div.colorpicker_current_color").bind("click", N);
            b.selector = d.find("div.colorpicker_color").bind("mousedown", I);
            b.selectorIndic = b.selector.find("div div");
            b.el = this;
            b.hue = d.find("div.colorpicker_hue div");
            d.find("div.colorpicker_hue").bind("mousedown", H);
            b.newColor = d.find("div.colorpicker_new_color");
            b.currentColor = d.find("div.colorpicker_current_color");
            d.data("colorpicker", b);
            d.find("div.colorpicker_submit").bind("mouseenter", J).bind("mouseleave", K).bind("click", L);
            i(b.color, d.get(0));
            n(b.color, d.get(0));
            l(b.color, d.get(0));
            p(b.color, d.get(0));
            o(b.color, d.get(0));
            r(b.color, d.get(0));
            q(b.color, d.get(0));
            b.flat ? d.css({position:"relative", display:"block"}) : c(this).bind(b.eventName, B)
          }
        })
      }, showPicker:function() {
        return this.each(function() {
          c(this).data("colorpickerId") && B.apply(this)
        })
      }, hidePicker:function() {
        return this.each(function() {
          c(this).data("colorpickerId") && c("#" + c(this).data("colorpickerId")).hide()
        })
      }, setColor:function(a) {
        if(typeof a == "string") {
          a = m(s(a))
        }else {
          if(a.r != void 0 && a.g != void 0 && a.b != void 0) {
            a = m(a)
          }else {
            if(a.h != void 0 && a.s != void 0 && a.b != void 0) {
              a = t(a)
            }else {
              return this
            }
          }
        }
        return this.each(function() {
          if(c(this).data("colorpickerId")) {
            var b = c("#" + c(this).data("colorpickerId"));
            b.data("colorpicker").color = a;
            b.data("colorpicker").origColor = a;
            i(a, b.get(0));
            n(a, b.get(0));
            l(a, b.get(0));
            p(a, b.get(0));
            o(a, b.get(0));
            r(a, b.get(0));
            q(a, b.get(0))
          }
        })
      }}
    }();
    c.fn.extend({ColorPicker:e.init, ColorPickerHide:e.hidePicker, ColorPickerShow:e.showPicker, ColorPickerSetColor:e.setColor})
  }(jQuery), $("#wcolor,#color").html("<div></div>"), defaulColor = my_getcookie("defaultColor") ? my_getcookie("defaultColor") : "000000", $("#color div").ColorPicker({color:defaulColor, flat:!0, onSubmit:function(c, e, C, j) {
    my_setcookie("defaultColor", e, 1, 0);
    bbfontstyle("[color=#" + e + "]", "[/color]");
    selectWysiwyg(j, "color");
    return!1
  }}), $("#wcolor div").ColorPicker({color:defaulColor, flat:!0, onSubmit:function(c, e, C, j, i) {
    my_setcookie("defaultColor", e, 1, 0);
    vB_Editor.text_editor.format(i, "constructBBcode_select_color_#" + e, !1, !0)
  }}))
});
plutôt.


Et sinon le tutoriel a été mis a jour avec la nouvelle version de ce sélecteur de couleur depuis quelques temps :
https://forum.forumactif.com/t287454-ajouter-un-selecteur-de-couleur

Cordialement.


Effectivement, cette fois cela a marché.Initialement, je ne voulais que customiser la liste des couleurs, mais à ce que j'ai lu cela n'est pas possible en phpBB3.
En terme de picker, existe t il un selecteur du type de celui accessible depuis le chat ?
Merci

Jama
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum