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); |