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 + ' ' + config.ellipsesText + |
107 | + | |
108 | ||
109 | - | '</span> <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> <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); |