Version Mobile template pour bouton citer et ou éditer

[Invité]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.jamesblunt-french.net

Description du problème

Bonjour

Suite à ce sujet


J'avais donc dans mes templates version mobile View topic body ce code qui permet d'afficher en version mobile les boutons citer et ou editer.

Code:

<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}">
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
         <div class="postbody">
            <div class="post_header">{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
            <div class="content">
               <div>{postrow.displayed.MESSAGE}</div>
                     <!-- BEGIN switch_attachments -->
                     <div class="attachbox">
                        <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                        <dl class="attachments">
                           <!-- BEGIN switch_post_attachments -->
                              <dt>
                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->
                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>
                              <dd>
                                 <!-- BEGIN switch_no_comment -->
                                 <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                 <!-- END switch_no_comment -->
                                 <!-- BEGIN switch_no_dl_att -->
                                 <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                 <!-- END switch_no_dl_att -->
                  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
               </dd>
                           <!-- END switch_post_attachments -->
                        </dl>
                     </div>
                     <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
         </div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}
<!-- BEGIN switch_user_authreply -->
<div id="mobileActionBar">
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
        <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
    </a>
</div>
<!-- END switch_user_authreply -->

Or ce code empêche l'affichage du bouton Repondre au sujet que les dévactifs viennent de rajouter sur tous les forums et je souhaite avoir en version mobile les boutons répondre , citer et éditer. (Répondre c'est bon puisque les dévactifs l'ont rajouté hier car il était manquant)

Merci de m'aider

[Shadow]

Re bonjour,

Je ne sais pas si vous aviez vu la réponse de Chapo, la voici au cas où.

Bonjour @cathy1970,

la seule chose qui a été ajoutée dans le template pour corriger le problème que vous nous avez signalé l'a été en fin de page:

Code:


<!-- BEGIN switch_user_authreply -->
<div id="mobileActionBar">
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
        <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
    </a>
</div>
<!-- END switch_user_authreply -->


Vous pouvez donc reprendre votre ancien template et tout simplement rajouter ces quelques lignes à la toute fin ainsi vous retrouverez vos modifications tout en bénéficiant du bouton de réponse

Bonne soirée

(1920) Bouton répondre version mobile partie invités

[Invité]

Rebonjour Vivi

Merci à Chapo j'ai donc le code suivant :

Code:

        <script type="text/javascript">
        //<![CDATA[
        var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
        showHiddenMessage = function(id)
        {
            try
            {
                var regId = parseInt(id, 10);
                if( isNaN(regId) ) { regId = 0; }
             
                if( regId > 0)
                {
                    $('.post--' + id).toggle(0, function()
                {
                    if( $(this).is(":visible") )
                    {
                      $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                    }
                    else
                    {
                      $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                    }
                });
                }
            }
            catch(e) { }
         
          return false;
        };
       
        //]]>
        </script>
       
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
        {POLL_DISPLAY}
       
        <!-- BEGIN postrow -->
        <div id="{postrow.U_POST_ID}">
          <!-- BEGIN hidden -->
              <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
              </div>
          <!-- END hidden -->
          <!-- BEGIN displayed -->
              <div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                <div class="postbody">
                    <div class="post_header">{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
                    <div class="content">
                      <div>{postrow.displayed.MESSAGE}</div>
                            <!-- BEGIN switch_attachments -->
                            <div class="attachbox">
                                <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                                <dl class="attachments">
                                  <!-- BEGIN switch_post_attachments -->
                                      <dt>
                                        <!-- BEGIN switch_dl_att -->
                                        <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_dl_att -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_no_dl_att -->
                                      </dt>
                                      <dd>
                                        <!-- BEGIN switch_no_comment -->
                                        <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                        <!-- END switch_no_comment -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                        <!-- END switch_no_dl_att -->
                          <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                      </dd>
                                  <!-- END switch_post_attachments -->
                                </dl>
                            </div>
                            <!-- END switch_attachments -->
                    </div>
                    {postrow.displayed.EDITED_MESSAGE}
                </div>
              </div>
              <!-- BEGIN first_post_br -->
              <hr id="first-post-br" />
              <!-- END first_post_br -->
          <!-- END displayed -->
        </div>
        <!-- END postrow -->
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
        {INLINE_MESSAGE}
        {QUICK_REPLY_FORM}
        <!-- BEGIN switch_user_authreply -->
        <div id="mobileActionBar">
            <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
                <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
            </a>
        </div>
        <!-- END switch_user_authreply -->
       
        <!-- BEGIN switch_user_authreply -->
        <div id="mobileActionBar">
            <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
                <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
            </a>
        </div>
        <!-- END switch_user_authreply -->

si le bouton Répondre apparait bien toujours je n'ai plus les boutons Citer et Editer
Je précise que j'ai mis ce code dans la version mobile des templates dans viewtopic body comme avant

[Invité]

Bon en recherchant j'ai retrouvéton tuto vivi et j'ai pu refaire le code correctement avec la correction donnée par Chapo et tout marche

Voici le code pour avoir boutons répondre, citer et ou éditer pour ceux qui auraient besoin

Code:

<style type="text/css">.mobile-actions{float:right;padding-top:3px}
.mobile-actions li{float:left;list-style:none}
#mobile_editor {text-align:center}
#text_box {padding:6px 5%}
#mobile_editor textarea {width:100%;height:100px}
#post_status {color:#000;background:#FFF;border:1px solid #2F6BC2;border-left-width:4px;margin:4px auto;padding:4px;width:90%}
#post_status.post_progress {background-color:#FFE;border-color:#990}
#post_status.post_done {background-color:#EFE;border-color:#090}
#post_status.post_fail {background-color:#FEE;border-color:#C33}
blockquote {display:block}</style>
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
 
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
 
  return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}">
  <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="postbody">
            <div class="post_header">{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
            <ul class="mobile-actions">
              <li>{postrow.displayed.QUOTE_IMG}</li>
              <li>{postrow.displayed.EDIT_IMG}</li>
              <li>{postrow.displayed.DELETE_IMG}</li>
            </ul>
                                <br class="clear"/>
                                <div class="content">
              <div>{postrow.displayed.MESSAGE}</div>
                    <!-- BEGIN switch_attachments -->
                    <div class="attachbox">
                        <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                        <dl class="attachments">
                          <!-- BEGIN switch_post_attachments -->
                              <dt>
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                              <dd>
                                <!-- BEGIN switch_no_comment -->
                                <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                <!-- END switch_no_comment -->
                                <!-- BEGIN switch_no_dl_att -->
                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                <!-- END switch_no_dl_att -->
                  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
              </dd>
                          <!-- END switch_post_attachments -->
                        </dl>
                    </div>
                    <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
        </div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
  <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
 
    lang : {
      title_reply : '<b>Répondre</b>',
      title_edit : '<b>Éditer le post</b>',
 
      status_progress : 'Envoi en cours...',
      status_done : function(url) {
        return 'Message enregistré avec succès. <a href="' + url + '">Cliquez ici</a> si vous n\'êtes pas redirigé.'
      },
      status_fail : 'Une erreur est survenue, veuillez réessayer plus tard.',
 
      delete_warning : 'Êtes-vous sûr de vouloir supprimer ce message ?',
      delete_done : 'Message supprimé avec succès.',
      delete_fail : 'Le message n\'a pas pu être supprimé, veuillez réessayer plus tard .',
 
      textarea_placeholder : 'Corps du message.',
      button_submit : 'Envoyer',

      fatal_error : 'En cas d\'erreur : ',
      button_force : 'Forcer l\'envoi'
    },
 
    node : null,
 
    id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
 
    store : new Object(),

    encode : function(string) {
      return encodeURIComponent(escape(this.message.value).replace(/%u[A-F0-9]{4}/g, function(match) {
        return '&#' + parseInt(match.substr(2), 16) + ';';
      })).replace(/%25/g, '%');
    },
 
    create : function(node, href) {
      var form = document.createElement('form');
      form.action = '/post';
      form.method = 'post';
      form.name = 'post';
      form.id = 'mobile_editor';
      form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data" style="display:none"></div>';
 
      form.onsubmit = function(e) {
        e.preventDefault();

        try {
          var t = this,
              data = $(t).serialize() + '&post=1',
              status = document.getElementById('post_status'),
              charSet = document.characterSet || document.charset;

          if (charSet != 'UTF-8') {
            if (t.message) data = data.replace(/message=.*?&/, 'message=' + $FAMA.encode(t.message.value) + '&');
            if (t.subject) data = data.replace(/subject=.*?&/, 'subject=' + $FAMA.encode(t.subject.value) + '&');
          }
   
          t.post.style.display = 'none';
          status.style.display = 'block';
          status.className = 'post_progress';
          status.innerHTML = $FAMA.lang.status_progress;
   
          $.post('/post', data, function(d) {
            var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
                url = (redir && redir[1]) ? redir[1].replace(/&/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
         
            status.className = 'post_done';
            status.innerHTML = $FAMA.lang.status_done(url);
     
            window.setTimeout(function() {
              window.location.href = url;
            }, 1500);
     
          }).fail(function() {
            status.className = 'post_fail';
            status.innerHTML = $FAMA.lang.status_fail;
            t.post.style.display = '';
          });
        } catch (err) {
          var status = document.getElementById('post_status');
          this.onsubmit = null;
          status.innerHTML = err + '<div>' + $FAMA.lang.fatal_error + '<input type="submit" name="post" value="' + $FAMA.lang.button_force + '" /></div>';
          status.className = 'post_fail';
          status.style.display = 'block';
        }
      };
 
 
      $FAMA.node = form;
      $FAMA.change(node, href);
    },
 
    change : function(node, href) {
      node.appendChild($FAMA.node);
 
      if ($FAMA.node.mode) {
        var oldid = document.getElementById('old_post_id');
        if ($FAMA.node.mode.value == 'reply' && oldid)  {
          if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
          $FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
        }
        else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
          if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
          $FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
        }
      }
 
      $FAMA.node.message.value = '';
 
      var mode = href.replace(/.*?mode=(.*)/, '$1'),
          pid = href.replace(/.*?p=(\d+).*/, '$1'),
          data = document.getElementById('mobile_data'),
          title = document.getElementById('editor_title');
 
 
      if (mode == 'quote') {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
        title.innerHTML = $FAMA.lang.title_reply;
        data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
      } else {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
        title.innerHTML = $FAMA.lang.title_edit;
        data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
      }

      $.get(href, function(d) {
        var titre = $('input[name="subject"]', d)[0],
            editer = $('input[name="edit_reason"]', d)[0];
     
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
        if (titre && titre.value) data.appendChild(titre);
        if (editer && editer.value) data.appendChild(editer);
      });
    }
 
  };
 
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
    if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
      if (/mode=(?:quote|editpost)/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var node = this.parentNode.parentNode.parentNode, href = this.href;
          e.preventDefault();
          $FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
        };
      } else if (/mode=delete/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var del = confirm($FAMA.lang.delete_warning);

          if (del) {
            $.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
              alert($FAMA.lang.delete_done);
              window.location.reload();
            }).fail(function() {
              alert($FAMA.lang.delete_fail);
            });
          }
     
          e.preventDefault();
        };
      }
    }
  }
})();
//]]></script>
       
        <!-- BEGIN switch_user_authreply -->
        <div id="mobileActionBar">
            <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
                <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
            </a>
        </div>
        <!-- END switch_user_authreply -->

Je ne sais pas pourquoi le code ne ressemble plus au premier mais ça marche et tant mieux je passe donc en résolu

Merci Vivi et Chapo