daily pastebin goal
15%
SHARE
TWEET

Shorten text plugin for jQuery : UPDATE

a guest Jul 20th, 2012 712 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ;(function($) {
  2.  
  3.   $.fn.shorten = function(settings) {
  4.  
  5.    var config = $.extend( {
  6.      showChars : 100,
  7.      ellipsesText : "...",
  8.      moreText : "more",
  9.      lessText : "less"
  10.     }, settings);
  11.  
  12.     $('.morelink').live('click', function() {
  13.       var $this = $(this);
  14.      
  15.       // Toggle del nombre del link
  16.       if ($this.hasClass('less')) { // clic en more para mostrar less
  17.        
  18.         $this.removeClass('less');
  19.         $this.html(config.moreText);
  20.        
  21.         // muestro shorcontent y escondo allcontent
  22.         $this.parent().prev().prev().show(); // shortcontent
  23.         $this.parent().prev().hide(); // allcontent
  24.        
  25.       } else { // click en less para mostrar more
  26.        
  27.         $this.addClass('less');
  28.         $this.html(config.lessText);
  29.        
  30.         $this.parent().prev().prev().hide(); // shortcontent
  31.         $this.parent().prev().show(); // allcontent
  32.       }
  33.      
  34.       return false;
  35.     });
  36.  
  37.  
  38.     return this.each(function() {
  39.       var $this = $(this);
  40.  
  41.       var content = $this.html();
  42.        
  43.       if (content.length > config.showChars) {
  44.         var c = content.substr(0, config.showChars);
  45.         if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
  46.         {
  47.           var inTag = false; // I'm in a tag?
  48.           var bag = ''; // Put the characters to be shown here
  49.           var countChars = 0; // Current bag size
  50.           var openTags = []; // Stack for opened tags, so I can close them later
  51.                            
  52.           for (i=0; i<content.length; i++)
  53.           {
  54.             if (content[i] == '<' && !inTag)
  55.             {
  56.               inTag = true;
  57.              
  58.               // This could be "tag" or "/tag"
  59.               tagName = content.substring(i+1, content.indexOf('>', i));
  60.              
  61.               // If its a closing tag
  62.               if (tagName[0] == '/')
  63.               {
  64.                 if (tagName != '/'+openTags[0]) console.log('ERROR en HTML: el tope del stack debe ser la tag que cierra');
  65.                 else
  66.                   openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
  67.               }
  68.               else
  69.               {
  70.                 // There are some nasty tags that don't have a close tag like <br/>
  71.                 if (tagName.toLowerCase() != 'br')
  72.                   openTags.unshift( tagName );// Agrega al inicio el nombre de la tag que abre
  73.               }
  74.             }
  75.             if (inTag && content[i] == '>')
  76.             {
  77.               inTag = false;
  78.             }
  79.            
  80.             if (inTag) bag += content[i]; // Add tag name chars to the result
  81.             else
  82.             {
  83.               if (countChars < config.showChars)
  84.               {
  85.                 bag += content[i];
  86.                 countChars ++;
  87.               }
  88.               else // Ya tengo los caracteres necesarios
  89.               {
  90.                 if (openTags.length > 0) // Tengo tags sin cerrar
  91.                 {
  92.                   console.log('Quedaron tags abiertas');
  93.                   console.log(openTags);
  94.                   for (j=0; j<openTags.length; j++)
  95.                   {
  96.                     console.log('Cierro tag '+ openTags[j]);
  97.                     bag += '</'+ openTags[j] +'>'; // Cierro todas las tags que quedaron abiertas
  98.  
  99.                     // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
  100.                   }
  101.                   break;
  102.                 }
  103.               }
  104.             }
  105.           }
  106.           c = bag;
  107.         }
  108.          
  109.           // Removing the <p> from the short text
  110.           var c = c.replace(/<p[^>]*>/g, '').replace(/<\/p>/g, '');
  111.        
  112.         var html = '<span class="shortcontent">' + c + config.ellipsesText +
  113.                    '</span><span class="allcontent">' + content +
  114.                    '</span>&nbsp;<span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
  115.        
  116.         $this.html(html);
  117.         $(".allcontent").hide(); // Esconde el contenido completo para todos los textos
  118.       }
  119.     });
  120.   };
  121. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand