Limiter la longueur des citations

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

Astuce Limiter la longueur des citations

Message par Walt le Ven 14 Avr 2017 - 11:48

Limiter la longueur des citations


Ce tutoriel vous permet de limiter la hauteur des citations afin de ne pas rallonger inutilement vos sujets. Par défaut, vos citations seront limitées à 400px de hauteur, en intégrant un lien permettant de poursuivre la lecture. Ce script est compatible avec toutes les versions de forum.



Installation du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Limiter citations" et pour placement "Sujets".

Insérez-y le code suivant :
Code:
/* globals jQuery */
   
    /**
    * Make tall quotes on topics collapsed.
    *
    * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
    * @license MIT
    */
   
    var FA = FA || {};
   
    FA.Topic = FA.Topic || {};
   
    FA.Topic.QuoteCollapse = (function($, settings) {
      'use strict';
   
      var $quotes;
      var version;
   
      /**
      * Initialization function
      */
      function QuoteCollapse() {
        var self = this;
   
        $(function() {
          $.each({
            'phpbb2': 'table.bodylinewidth',
            'phpbb3': 'body#phpbb',
            'punbb': 'div.pun',
            'invision': 'div#ipbwrapper',
            'modernbb': 'body#modernbb',
            'mobile': 'div#mpage-body',
            'mobile-modern': 'body#mpage-body-modern',
          }, function(key, selector) {
            if ($(selector).length !== 0) {
              version = key;
            }
          });
   
          if (!version) {
            return;
          }
   
          self.init();
          self.collapse();
        });
      }
   
      QuoteCollapse.prototype.init = function() {
        switch (version) {
          case 'phpbb2':
            $quotes = $('.postbody dl.codebox > dd');
            break;
          case 'phpbb3':
            $quotes = $('.postbody blockquote');
            break;
          case 'punbb':
            $quotes = $('.postbody blockquote');
            break;
          case 'invision':
            $quotes = $('.postbody blockquote');
            break;
          case 'modernbb':
            $quotes = $('.postbody blockquote');
            break;
          case 'mobile':
            $quotes = $('.content blockquote .quote_content');
            break;
          case 'mobile-modern':
            $quotes = $('.post-content blockquote .quote_content');
            break;
          default:
            return;
        }
   
        $quotes
          .addClass('fa-quote')
          .append($('<a>', {
            href: '#',
            class: 'fa-quote-expand',
            text: settings.label,
          }));
   
        $quotes.on('click', '.fa-quote-expand', function(event) {
          event.preventDefault();
   
          $(this)
            .closest('.fa-quote')
            .removeClass('fa-quote-collapsed');
        });
      };
   
      QuoteCollapse.prototype.collapse = function() {
        $quotes.each(function() {
          var $self = $(this);
   
          if ($self.height() > settings.height) {
            $self.addClass('fa-quote-collapsed');
          }
        });
      };
   
      return new QuoteCollapse();
    }(jQuery, {
      height: 400,
      label: 'Continuer la lecture',
    }));

Installation du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Ajoutez le code suivant à votre CSS :
Code:
/** BEGIN Quote Collapse */
.fa-quote-collapsed {
   display:block;
   height:200px;
   overflow:hidden;
   position:relative;
}
a.fa-quote-expand {
   display:none;
   position:absolute;
   z-index:1;
   left:50%;
   width:150px;
   margin-left:-75px;
   height:30px;
   line-height:30px;
   bottom:15px;
   text-align:center;
   text-decoration:none;
   color:inherit;
   background-color:#fff;
   border:1px #999 solid;
}
.fa-quote-collapsed a.fa-quote-expand {
   display: block;
}
/** END Quote Collapse */

L'astuce devrait être fonctionnelle. Very Happy

avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 2618
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

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


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