Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Bouton avec menu déroulant


2 participants

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

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Ven 10 Jan 2020 - 22:58

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour,

Désolé pour la longueur du post, mais c'est pour être le plus précis possible.

J'ai actuellement sur toutes les pages au dessus de l'éditeur (réponse, réponse rapide, mp)  2 boutons destinés aux admins.
Spoiler:

L'idée serait de remplacer le bouton rouge de droite "Le mot de l'admin" par un menu déroulant ainsi:
Spoiler:

Le menu déroulant présenterait 6 item:
Spoiler:

L'ensemble des 6 items seraient destinés aux administrateurs
Les 4 premiers items seraient destinés aux modérateurs.

Lorsqu'un item est sélectionné et inséré, un message (modifiable) est automatiquement déposé dans l'éditeur.

Par exemple, lorsque l'on insère le premier item, on aurait ce texte dans l'éditeur:
Spoiler:

Lorsque le second item est inséré, on aurait dans l'éditeur:
Spoiler:

Idem pour les autres items (textes bidons à mettre en attendant que je les finalise).


Le JS actuel du bouton rouge à remplacer:
Code:

//Boutons le mot de l'Admin                            
    jQuery(document).ready(function(){
     if (_userdata.user_level ==1||_userdata.user_level == 2 ){
    jQuery("#text_editor_textarea").before("<img src='https://i.servimg.com/u/f86/19/48/39/10/bouton14.png' title='Le mot de Admin' id='admbutt'style='margin-top: -40px;float: right; '/>");
    jQuery('#admbutt').click(function(){
    jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[adm][/adm]');
    jQuery('.sceditor-container textarea')[0].value += '[adm][/adm]'  
     });  
    
     }
    });


Merci pour votre aide.









Dernière édition par photoclic le Sam 11 Jan 2020 - 15:51, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 11 Jan 2020 - 7:31

Hello Serge,
ce menu et réservé non pas qu'aux admins mais aussi aux modos.
Désires tu garder cette condition ?

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Sam 11 Jan 2020 - 8:22

Bonjour Philippe,

Merci pour ton aide.

si cela est possible, seuls les 4 premiers items pour les modos et tout pour les admins.

Pourquoi ce choix?
J'ai eu des membres qui se sont inscrits et proposés modos; à l'époque, je les plaçais admins et ils n'ont fait que passer quelques jours. Leur seul but était d'avoir accès aux scripts pour les récupérer pour un autre forum photo.

Depuis, j'ai défini plusieurs niveaux d'accès: admins, modos (qui ne sont donc pas admins) et animateurs (pour leur simplifier quelques taches et les valoriser).
Le bouton vert par exemple est aussi accessible à l'animateur.

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 11 Jan 2020 - 9:32

si cela est possible, seuls les 4 premiers items pour les modos et tout pour les admins.

Hum, cela m'oblige a tout revoir Serge...
De plus je suis confronté à un dilemme avec Chrome qui n'aime pas trop que l'on touche à un select.
Ne serait il pas plus judicieux au clic de placer un tag simple dans l'éditeur et un script viendrait injecter le bb code !!!!






Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 11 Jan 2020 - 11:11

Alors voici un petit script qui va répondre à ta demande Serge.
Merci d'être plus clair sur les droits la prochaine fois  clin oeil .

Les admins auront les 6 items et les modos que les 4 premiers.
Tout à la fin du menu déroulant tu auras aussi un bouton reset (effacer) qui au clic effacera
le contenu de l’éditeur en cas ou...
Je dois me sauver alors je te laisse mon essais


Le script est ainsi conçu:

J'ai respecté l'ordre d'affichage comme mentionné sur ton sujet.
Donc cette variable:
Code:
var text1="";
Recevra le contenu qui sera déposé dans l'éditeur,c'est à dire:
Code:


    [u][b]Qualité documentaire[/b][/u] (Sujet identifiable, autres sujets, éléments visibles) --->

    | [u][b]Qualité Artistique[/b][/u] |

    [u]Composition[/u] (cadrage, points forts, ligne de guidage, géométrie) --->
    [u]Sujet[/u] (Regard original, moments révélateur, inhabituel) --->
    [u]Accessoires[/u] (cadre, Titre, signature) --->

    [b][u]Coup de coeur[/u][/b] (simplicité, force, émotion) --->

    [u][b]Suggestion[/b][/u]  ---->

    [u][b]Lien vers un exemple/un tuto[/b][/u] --->



Revu en afin d'éviter les caractères spéciaux:
Code:

\n
[u][b]Qualité documentaire[/b][/u] (Sujet identifiable, autres sujets, éléments visibles).\n
[u][b]Qualité Artistique[/b][/u].\n
[u]Composition[/u] (cadrage, points forts, ligne de guidage, géométrie).\n
[u]Sujet[/u] (Regard original, moments révélateur, inhabituel).\n
[u]Accessoires[/u] (cadre, Titre, signature) .\n
[b][u]Coup de coeur[/u][/b] (simplicité, force, émotion).\n
[u][b]Suggestion[/b][/u].\n
[u][b]Lien vers un exemple/un tuto.[/b][/u]\n



Notre variable sera alors une fois renseignée:
Code:

var text1="\n
[u][b]Qualité documentaire[/b][/u] (Sujet identifiable, autres sujets, éléments visibles).\n
[u][b]Qualité Artistique[/b][/u].\n
[u]Composition[/u] (cadrage, points forts, ligne de guidage, géométrie).\n
[u]Sujet[/u] (Regard original, moments révélateur, inhabituel).\n
[u]Accessoires[/u] (cadre, Titre, signature) .\n
[b][u]Coup de coeur[/u][/b] (simplicité, force, émotion).\n
[u][b]Suggestion[/b][/u].\n
[u][b]Lien vers un exemple/un tuto.[/b][/u]\n";


J'ai volontairement ajouter un retour chariot:
Code:
\n

Attention toutefois aux apostrophes Serge

l'invitation devra être inscrit ainsi dans la variable;:
Code:
l\'invitation


Le script complet avec la première variable renseignée

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:

//Boutons le mot de l Admin                            
$(function(){
var admin=_userdata.user_level ==1;
var modo=_userdata.user_level ==2 ;
if(admin||modo)
{
var text1="\n
[u][b]Qualité documentaire[/b][/u] (Sujet identifiable, autres sujets, éléments visibles).\n
[u][b]Qualité Artistique[/b][/u].\n
[u]Composition[/u] (cadrage, points forts, ligne de guidage, géométrie).\n
[u]Sujet[/u] (Regard original, moments révélateur, inhabituel).\n
[u]Accessoires[/u] (cadre, Titre, signature) .\n
[b][u]Coup de coeur[/u][/b] (simplicité, force, émotion).\n
[u][b]Suggestion[/b][/u].\n
[u][b]Lien vers un exemple/un tuto.[/b][/u]\n";
var text2="";
var text3="";
var text4="";
var text5="";
var text6="";
$("#text_editor_textarea").before('<div id="M14_selected_moder">
<span class="M14_optionOpen">Sélectionner un modéle de message</span>
<div class="Bloc"style="display:none;">                                  
<span class="M14_optiontag" rel="'+text1+'">-Aide aux commentaires</span>
<span class="M14_optiontag" rel="'+text2+'">-Bienvenue</span>
<span class="M14_optiontag" rel="'+text3+'">-Mp-Bienvenue</span>
<span class="M14_optiontag" rel="'+text4+'">-MP-Participation</span>
<span class="M14_optiontag" id="admin" rel="'+text5+'">-MP-Bannissement</span>
<span class="M14_optiontag" id="admin" rel="'+text6+'">-MP-Photo gagnante</span>
<span class="M14_optiontagreset">Effacer</span></div></div>');
if(modo){$('span[id="admin"]').remove();}                                    
$('#M14_selected_moder').find('.M14_optiontag').each(function(){
var M14_value=$(this).attr('rel');
$(this).click(function(){
$('#text_editor_textarea').sceditor("instance").insert(M14_value);});
  
});
$('.M14_optionOpen').click(function(){
    $(this).next().slideToggle();});
  $('.M14_optiontagreset').click(function(){
    $('#text_editor_textarea').sceditor("instance").val('');});
}
});

Penser a cliquer sur le bouton Valid






La c.s.s
Code:

#quick_reply #M14_selected_moder
{
color:#4cd8eb;
background: #2E2E2E !important;
height:auto;
width: 250px;
margin-left: 500px;
position: absolute;
padding:3px;
}

span[class^="M14_option"]
{
display:list-item;
list-style:none;
height: 20px;
line-height: 20px;
text-align: left;
margin-left:5px;
}
.M14_optiontagreset{text-align: right!important;}

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Sam 11 Jan 2020 - 14:23

Bonjour Philippe,

Un grand merci pour ce nouveau développement.

Désolé si tu n'as pas trouvé claire ma description pour les droits.
J'avais écrit sous l'image 3 là haut:
"L'ensemble des 6 items seraient destinés aux administrateurs
Les 4 premiers items seraient destinés aux modérateurs."
J'aurais du formuler cela peut-être autrement ou en ajoutant une image.

Merci aussi pour les précisions pour l’apostrophe et retour chariot.

Sinon, cela fonctionne à merveille super
Le bouton effacer est excellent.

J'ai juste ajouté (merci de valider) un z-index pour que le menu apparaisse devant l'éditeur. et ajouté #M14_selected_moder pour que le css agisse sur la réponse rapide et la messagerie.
Ce qui donne:
Code:
#M14_selected_moder, #quick_reply #M14_selected_moder {
   background: #2E2E2E !important;
   color: #4cd8eb;
   height: auto;
   margin-left: 500px;
   margin-top: -30px;
   padding: 3px;
   position: absolute;
   width: 250px;
   z-index: 10;
}

Serait-il possible une fois que le contenu d'un item est déposé dans l'éditeur de refermer le menu, comme quand on appui sur le titre du menu. Sinon laisse ainsi Phil.



Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 11 Jan 2020 - 15:35

Désolé si tu n'as pas trouvé claire ma description pour les droits.
J'avais écrit sous l'image 3 là haut:
"L'ensemble des 6 items seraient destinés aux administrateurs

Oups désolé, autant pour moi Serge,
j'ai lu encore trop vite...




Pour refermer après avoir déposé le tag:

Recherches ceci dans le script:

Code:
$('#M14_selected_moder').find('.M14_optiontag').each(function(){
var M14_value=$(this).attr('rel');
$(this).click(function(){
$('#text_editor_textarea').sceditor("instance").insert(M14_value);});
 
});

Supprimes et remplaces par:

Code:
$('#M14_selected_moder').find('.M14_optiontag').each(function(){
var M14_value=$(this).attr('rel');
$(this).click(function(){$(this).closest('div').slideUp();
$('#text_editor_textarea').sceditor("instance").insert(M14_value);});
 
});

Et voilou Serge.



photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Sam 11 Jan 2020 - 15:51

Re Phil,

Magnifique l'ami tape la

C'est tout bon et en place.
Je passe en résolu et je cherche d'autres éventuelles idées :-)

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 11 Jan 2020 - 15:52

Pas de soucis Serge et hâte de lire les éventuelles idées de ce genre MDR .




Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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