Module Backend btn-group-yesno

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • lomart
    a répondu
    Cette fois c'est bon, le css est dans le header.
    BIen sur que c'est bon, puisque j'ai corrigé vos erreurs
    Je vois des slashs et des antislashs dans l'url, c'est normal ?
    Oui, vous êtes sur PC

    Laisser un commentaire:


  • djphil
    a répondu
    Cette fois c'est bon, le css est dans le header.
    Je vois des slashs et des antislashs dans l'url, c'est normal ?
    Code:
    <link href="[URL="http://digigrids.no-ip.org/private/joomla30/modules/mod_helloworld/elements/custom.css"]/modules\mod_helloworld\elements/custom.css[/URL]" rel="stylesheet" />
    Dernière édition par djphil à 20/10/2017, 12h24

    Laisser un commentaire:


  • lomart
    a répondu
    Il ne fait que ça mais ne fonctionne pas mieux pour autant ...
    C'est normal, il fallait créer un champ xtitle et non un champ radio nommé xtitle. C'est pour cela que le code xtitle.php n'était pas appelé et donc que la feuille css n'était pas visible
    ci-joint le module corrigé qui fonctionne
    Cliquez sur l'image pour l'afficher en taille normale  Nom : Image 1.png  Affichages : 1  Taille : 4,5 Ko  ID : 1967783
    J'ai ajouté une règle au survol pour neutraliser celle de btn-group
    Fichiers joints
    Dernière édition par lomart à 20/10/2017, 12h08 Raison: Nouveau zip, il restait un dump dans le fichier xtitle.php

    Laisser un commentaire:


  • djphil
    a répondu
    Je viens de créer un petit module "mod_helloworld" pour tester le code fournis.
    Il ne fait que ça mais ne fonctionne pas mieux pour autant ...
    Fichiers joints

    Laisser un commentaire:


  • djphil
    a répondu
    Bonjour,
    J'ai procédé comme indiqué mais rien ne se passe.
    Aucun changement de titre ou de sous-titre.
    Et je ne vois pas le custom.css chargé dans le head de la page admin.

    Voici ce que j'ai fais:
    1 - placer le dossier elements dans mon dossier de module
    2 - ajouter le chemin dans le manifeste et créer un champ xitle
    comme ceci:
    Code:
    <fields name="params" addfieldpath="/modules/mod_custom/elements/">
        <fieldset name="basic">
            <field
                name="xtitle"
                type="radio"
                class="btn-group btn-group-yesno"
                default="0"
                label="MOD_CUSTOM_LABEL"
                description="MOD_CUSTOM_LABEL_DESC">
                <option value="1">JYES</option>
                <option value="0">JNO</option>
            </field>
        </fieldset>
    </fields>
    3 - Modifier le css
    comme ceci:
    Code:
    [for="jform_params_xtitle0"].active {
        background-color: orange;
        color: blue;
    }
    
    [for="jform_params_xtitle1"].active {
        background-color: blue;
        color: orange;
    }
    Sauf erreur de ma part, je pense avoir suivi tes explications à la lettre.
    Dernière édition par djphil à 20/10/2017, 09h59

    Laisser un commentaire:


  • lomart
    a répondu
    Bonjour,

    Ca ne peut pas marcher. Si j'ai bien compris, tu veux ajouter des règles CSS aux champs Joomla utilisés pour la configuration du module.

    Le GROS problème est que, à ma connaissance, les scripts PHP ne sont pas appelés.
    Joomla affiche le fichier XML selon les règles des types de champs et sauve le résultat dans la BD. Jamais tu n'as pas la main sur ce processus, SAUF en créant un champ personnalisé dans le sous-dossier elements.
    Si l'on veut faire un module installable par tout le monde, il n'y a pas d'autres choix. Si c'est pour un développement spécifique et unique, l'ajout dans custom.css est une solution

    Ci-joint, une adaptation d'un de mes champs personnalisés pour charger une feuille de style
    Il suffit de :
    - copier le dosssier "elements" du zip dans le dossier du module
    - ajouter le chemin dans le manifest.xml du module : <fields name="params" addfieldpath="/modules/ton_module/elements/">
    - modifier le fichier "elements/custom.css" avec ses règles
    - créer un champ "xtitle". Son contenu a peu d'importance, mais il permet de faire un titre plus sexy que celui de base. LABEL est le titre, DESC est le sous-titre

    Fichiers joints

    Laisser un commentaire:


  • djphil
    a répondu
    Si je met votre css dans le custom.css d'Isis alors oui ça fonctionne ...

    Pour ma part j'avais déjà mis d'autres css similaires dans un template Isis de ma mouture mais dans la cas qui nous concerne, je veux le mécanisme dans le module car je ne pas toucher au Template Isis.

    Dans mon css Isis j'utilise ceci (légèrement différent):
    Code:
    label[for="jform_params_backtotoptype0"].active,
    label[for="jform_params_backtotoptype1"].active {
        background:#FF8000;
        border-color:#FF8000;
    }
    Maintenant qu'on est arrivé à cibler via css, comment charge t'on ce css dans la partie admin du module sans toucher au template et sans utiliser de plugin additionnel tel que plg_customcss et consores ?

    Pour l'instant je charge mon css comme ceci:
    Code:
    $assetpath = JUri::base(true)."/modules/mod_custom_test/assets/";
    $doc->addStyleSheet($assetpath.'mod_custom_test.css');
    Et j'ai aussi essayé avec JURI::root(true) à la place de JUri::base(true)
    Dernière édition par djphil à 19/10/2017, 21h58

    Laisser un commentaire:


  • djphil
    a répondu
    Après vérification, je constate que mon fichier css n'est chargé qu'en frontend.
    Voilà qui explique pas mal de choses ...
    Mais pourquoi n'est il pas chargé en backend ?

    Dans le cas présent ce n'est pas mon module mais j'en "maitrise" le code.
    Je lui ai ajouté une 20ène de nouveaux paramètres (essentiellement de style).
    Sinon j'ai fais plusieurs autres modules entièrement de A à Z.

    La solution pour créer des nouveaux éléments, je l'avais vue sur le web.
    Il y a plusieurs tutos qui expliquent comment procéder.
    Je n'ai pas opté pour cette façon car me semble bien compliqué juste pour changer une couleur ...

    Mince alors ça fonctionne super chez vous!
    Dernière édition par djphil à 19/10/2017, 21h25

    Laisser un commentaire:


  • lomart
    a répondu
    Hélas, aucun effet sur mon bouton module en admin.
    chez moi, ça marche
    Cliquez sur l'image pour l'afficher en taille normale

Nom : Image 1.png 
Affichages : 154 
Taille : 97,2 Ko 
ID : 1967716

    Laisser un commentaire:


  • lomart
    a répondu
    C'est ton module ?
    Si c'est pour un cas précis, dont tu maitrise le code, ma solution doit marcher. Le plus délicat est où mettre le CSS

    Sinon pour tout faire de a à z, j'ai indiqué de regarder du coté des elements. Je n'ai pas d'exemple sous la main, mais beaucoup de modules et plugins ont ce dossier avec des exemples pour s'inspirer

    Laisser un commentaire:


  • djphil
    a répondu
    Je viens d'essayer comme ceci:
    Code:
    [for="jform_params_balanceposition0"].active {
        background-color: blue;
        color: red;
    }
    Où jform_params_nomparamx a été changé en jform_params_balanceposition0 suivant ce que j'ai pu inspecter.
    Hélas, aucun effet sur mon bouton module en admin.

    La proposition css me plait bien mais il faudrait arriver à attraper ce label de bouton radio.
    Dernière édition par djphil à 20/10/2017, 02h42

    Laisser un commentaire:


  • djphil
    a répondu
    le js qui s'occupe de changer les classes des boutons du template admin Isis est le suivant:
    Code:
    // Turn radios into btn-group
    $('.radio.btn-group label').addClass('btn');
    
    $('fieldset.btn-group').each(function() {
        // Handle disabled, prevent clicks on the container, and add disabled style to each button
        if ($(this).prop('disabled')) {
            $(this).css('pointer-events', 'none').off('click');
            $(this).find('.btn').addClass('disabled');
        }
    });
    
    $('.btn-group label:not(.active)').click(function()
    {
        var label = $(this);
        var input = $('#' + label.attr('for'));
    
        if (!input.prop('checked'))
        {
            label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
    
            if (label.closest('.btn-group').hasClass('btn-group-reversed'))
            {
                if (input.val() == '')
                {
                    label.addClass('active btn-primary');
                }
                else if (input.val() == 0)
                {
                    label.addClass('active btn-success');
                }
                else
                {
                    label.addClass('active btn-danger');
                }
            }
            else
            {
                if (input.val() == '')
                {
                    label.addClass('active btn-primary');
                }
                else if (input.val() == 0)
                {
                    label.addClass('active btn-danger');
                }
                else
                {
                    label.addClass('active btn-success');
                }
    
            }
            input.prop('checked', true);
            input.trigger('change');
        }
    });
    $('.btn-group input[checked=checked]').each(function()
    {
        var $self  = $(this);
        var attrId = $self.attr('id');
    
        if ($self.parent().hasClass('btn-group-reversed'))
        {
            if ($self.val() == '')
            {
                $('label[for=' + attrId + ']').addClass('active btn-primary');
            }
            else if ($self.val() == 0)
            {
                $('label[for=' + attrId + ']').addClass('active btn-success');
            }
            else
            {
                $('label[for=' + attrId + ']').addClass('active btn-danger');
            }
        }
        else
        {
            if ($self.val() == '')
            {
                $('label[for=' + attrId + ']').addClass('active btn-primary');
            }
            else if ($self.val() == 0)
            {
                $('label[for=' + attrId + ']').addClass('active btn-danger');
            }
            else
            {
                $('label[for=' + attrId + ']').addClass('active btn-success');
            }
        }
    });
    Le soucis est qu'il fait partie du template ...
    Je voudrais ce mécanisme dans le module.
    Je pourrais alors modifier aisément les classes des boutons.
    Non ?

    Laisser un commentaire:


  • lomart
    a répondu
    Pour la 1ère proposition, qu'appelez-vous "attribut" ?
    Donc que mettre à la place de jform_params_nomparamx ?
    Attribut dans mon exemple, c'est for. Regardez avec un inspecteur de code pour trouver les informations à mettre
    Je penses que js doit intervenir quelque part non ?
    Non, c'est le js de Joomla qui s'en occupe
    Pour compléter mon exemple. Il faudrait mettre:
    Code:
    [for="jform_params_nomparamx"][B].active[/B] {
        background-color: orange;
        color: red;
    }

    Laisser un commentaire:


  • djphil
    a répondu
    @lomart: Pour la 1ère proposition, qu'appelez-vous "attribut" ?
    Donc que mettre à la place de jform_params_nomparamx ?

    Voici un exemple de bouton extrait du fichier .xml
    Code:
    <field
        name="bgtest"
        type="radio"
        class="btn-group btn-group-yesno"
        default="1"
        label="Background Test"
        description="Ceci est un test.">
        <option value="1">Avant</option>
        <option value="0">Après</option>
    </field>
    Ceci dit, je vois mal comment ce css ...
    Code:
    [for="jform_params_nomparamx"] {
        background-color: orange;
        color: red;
    }
    ... pourrait modifier un fond de bouton lorsque l'on clic dessus.
    Je penses que js doit intervenir quelque part non ?

    La 2ème proposition, la modif dans le fichier lang, on peut l'oublier de suite.
    Elle n'agit que sur la partie texte, le radio ne change pas.
    Dernière édition par djphil à 19/10/2017, 20h19

    Laisser un commentaire:


  • lomart
    a répondu
    Une autre solution "plus limité" est d'intégrer le css dans la traduction.
    Exemple:
    Code:
    INFO_LABEL="<b style='color:blue'>info</b>"

    Laisser un commentaire:

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X