Color picker en paramètre de thème

[Louis-Marie Kraft, modifié il y a 9 années.]

Bonjour à tous,

Je débute sur Liferay un peu seul, et suis sur les thèmes après avoir développé mes petites portlets.
J'aimerai pouvoir ajouter un "color picker" dans le Look And Feel de mon thème afin de choisir la couleur de fond du site (et plus tard si possible la couleur de la police, mais chaque chose en son temps ^^). Ainsi, j'ai trouvé le tuto suivant qui explique exactement ce que je cherche : Theme Settings

D'après cet article, il s'agit simplement d'ajouter le script suivant dans les settings du thème :

		<settings>
			<setting key="header-type" value="detailed" />
			<!-- Choix des couleurs -->
				<setting configurable="true" key="portal-main-color" type="text" value="#EEF0F2">
					
                   	                AUI().ready(
				         'aui-color-picker-base',
				         function(A) {
				            var target = A.one('#[@NAMESPACE@]portal-main-color');
				            target.attr('readonly', 'readonly');
				            var currentValue = target.val();
				 
				            target.ancestor(
				                '.aui-field-element').append("&lt;div id='[@NAMESPACE@]PortalMainColorPicker'&gt;&lt;/div&gt;");
				 
				            setTimeout(function() {
				                var [@NAMESPACE@]PortalMainColorPicker = new A.ColorPicker(
				                    {
				                        hex: currentValue
				                    }
				                ).render('#[@NAMESPACE@]PortalMainColorPicker');
				 
				                [@NAMESPACE@]PortalMainColorPicker.on('colorChange',
				                    function(event) {
				                        var hex = [@NAMESPACE@]PortalMainColorPicker.get("hex");
				 
				                        target.val('#' + hex);
				                    }
				                );
				            }, 0);
				        }
				    );
            	             
			</setting>
		</settings>

Si je ne le met pas, j'ai un champs tout con avec une valeur hexa.
Si je le met, le champs est simplement en lecture seule, pas de joli color picker

Vu comme c'est présenté sur le lien, c'est censé un peu tout me faire, ce que ça ne fait pas (sinon je ne serai pas ici ^^). Normalement, le color picker est censé être bindé au champ d'input, mais ne s'ouvre malheureusement pas !

J'ai cherché pleins d'alternatives ou de raisons à ce non fonctionnement, mais suis revenu bredouille. Ais-je oublié quelque chose?
Je me rappelle que pour utiliser AUI dans les portlets, il fallait faire un import: en est-il de même pour les thèmes? Si oui, où faire cet import?

C'est toujours la galère avec Alloy, je suis complètement perdu dans ce cas... Si quelqu'un a ne serait-ce qu'une piste, je suis preneur !!

Pour infos :
- Je suis sur Liferay IDE et eclipse, LR v 6.2.1. Et au cas où ça puisse servir, le haut de mon liferay-look-and-feel.xml :

<!--?xml version="1.0"?-->


<look-and-feel>
	<compatibility>
		<version>6.2.0+</version></compatibility></look-and-feel>

Merci d'avance

[Louis-Marie Kraft, modifié il y a 9 années.]

Au cas où quelqu'un ait le même problème, je pense avoir trouvé la solution. Du moins ça fonctionne !

Apparemment, AUI est déprécié dans LR 6.2. Il vaut mieux donc utiliser YUI ou bootstrap, même si les tutos 6.2 sont faits avec des fonctions AUI...
Ainsi, voilà le code corrigé pour exemple :

<setting configurable="true" key="portal-main-color" type="text" value="#EEF0F2">
  
    YUI().use('aui-color-picker-popover', function(Y) {
      var colorPicker = new Y.ColorPickerPopover({
        trigger: '#[@NAMESPACE@]portal-main-color',
        zIndex: 2
      }).render();

      colorPicker.on('select', function(event) {
        event.trigger.setStyle('backgroundColor', event.color);
        event.trigger.val(event.color);
      });
    });
  
</setting>

Le reste restant dans le même état !