web-dev-qa-db-fra.com

Comment ajouter du CSS aux paramètres du composant?

Je travaille sur un composant Joomla, qui inclut des hyperliens. J'aimerais inclure les URL des liens dans la configuration du composant. Par conséquent, j'ai ajouté un config.xml Au répertoire principal avec les champs de formulaire pour les URL.
Le code XML pour les champs ressemble à ceci:

<field 
    name="url-json" 
    type="url" 
    class="inputUrl"
    default="http://www.website...&amp;option=A&amp;id=1234" 
    label="COM_CUSTOM_CONFIG_LABEL" 
    description="COM_CUSTOM_CONFIG_DESC" 
    size="50" 
/>

J'ai plusieurs URL et la partie importante sont les paramètres de requête. J'ai défini la taille sur size="50" Mais celle-ci est remplacée par CSS et tous les champs de saisie ont la même largeur. De cette façon, on ne peut pas voir les paramètres de requête des URL, car ils sont coupés.

Existe-t-il un moyen d'ajouter du CSS personnalisé pour élargir les champs de texte?

J'ai déjà ajouté class="inputUrl" Aux champs, mais je ne sais pas où j'ajouterais les règles CSS. Puis-je $document->addStyleDeclaration( $style ); quelque part pour charger des styles uniquement pour la page de configuration de mon composant?

componentcsscomponent-configuration
2
jost21

Il y a deux alternatives.

  1. Un plugin.

Vous pouvez ajouter des styles ou une feuille de style à l'administrateur en utilisant la technique suivante:

Comment ajouter un fichier JS/CSS personnalisé sans modifier le modèle (à partir d'une extension)?

L'utilisation de $ app-> isClient ('administrateur') vous permettra d'ajouter des CSS uniquement à l'administrateur. Si vous voulez vraiment charger uniquement sur votre page, vous pouvez creuser dans le jinput autant que vous le souhaitez. par exemple.

class plgSystemRandomname extends JPlugin
{
   function onBeforeCompileHead()
   {
       $doc = JFactory::getDocument();
       $app = JFactory::getApplication();

       if ($app->isClient('administrator')){

           $jinput = $app->input;
           $option = $jinput->get('option','','CMD');
           $component = $jinput->get('component','','CMD');           
           if($option == "com_config" && $component == "com_yourcomponent"){
               $doc->addStyleDeclaration('.inputUrl{width:90% !important;}');
           }
      }
   }
}

Notez que isClient est uniquement J3.7 +.

  1. Un champ de formulaire personnalisé

Croyez-le ou non, en utilisant un champ de formulaire personnalisé, vous pouvez insérer tout ce que vous souhaitez dans un jform où vous êtes autrement limité au schéma xml.

https://docs.joomla.org/Creating_a_custom_form_field_type

Une fois que vous avez défini votre chemin de champ dans la configuration XML, par exemple.

<fieldset name="basic" addfieldpath="components/com_something/fields">

Vous pouvez ensuite inclure un champ de formulaire personnalisé, par exemple.

<field name="customscript" type="customscript" label="" description="" />

Votre code de champ de formulaire actuel dans components/com_something/fields/customscript.php ressemble à ceci:

defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');

class JFormFieldCustomscript extends JFormField {

    protected $type = 'customscript';

    public function getInput() {
        return '<style>.inputUrl{width:90% !important;}</style>';
    }
}
2
jamesgarrett

Inspiré par la deuxième option de la réponse de jamesgarett , je construis un champ de formulaire personnalisé qui étend le champ de formulaire url.
Un problème mineur avec la méthode de james est que joomla n'inclut pas seulement le <style>...</style> _ mais aussi quelques balises autour. Ce qui ressemble à ceci:

<div class="control-label">
    <label id="jform...></label>
</div>
<div class="controls">
    <style> ... </style>
</div>

Cela provoque une lacune dans la mise en page car il n'y a pas de contenu.

Au lieu d'utiliser un champ de formulaire distinct qui inclut le style, j'ai étendu le champ de formulaire url pour créer un champ de formulaire longurl, qui a ajouté des styles en ligne.

defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.helper');
JFormHelper::loadFieldClass('url');

class JFormFieldLongurl extends JFormFieldUrl {

    protected $type = 'longurl';

    public function getInput() {
        $input = parent::getInput();

        $pattern = 'type="url"';
        $style= ' style="width:90%"';
        return str_replace($pattern, $pattern.$style, $input);
    }

}

En incluant

<fieldset name="basic" addfieldpath="administrator/components/com_something/fields">

on peut utiliser un champ de formulaire de type longurl pour les URL nécessitant plus d'espace

<field 
    name="url-json" 
    type="longurl" 
    default="http://www.website...&amp;option=A&amp;id=1234" 
    label="COM_CUSTOM_CONFIG_LABEL" 
    description="COM_CUSTOM_CONFIG_DESC" 
    size="50" 
/>
0
jost21