View difference between Paste ID: ARTYQUuc and svRPehJJ
SHOW: | | - or go back to the newest paste.
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-
          
49+
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-
        var html = '<span class="shortcontent">' + c + '&nbsp;' + config.ellipsesText +
107+
108
	  
109-
                   '</span>&nbsp;&nbsp;<span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
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);