truncate léger

This commit is contained in:
Marwann 2015-11-29 01:14:16 +01:00
parent 7d0058dbe9
commit 6da679128f
2 changed files with 53 additions and 64 deletions

View file

@ -1,14 +1,12 @@
<div class="row"> <div class="row">
<%= image_tag subject.picture.url, class:"subject-main-image", alt:"#{subject.title}" if subject.picture? %> <%= image_tag subject.picture.url, class:"subject-main-image", alt:"#{subject.title}" if subject.picture? %>
<h2 class="subject-title"><%= link_to subject.title, subject %></h2> <h2 class="subject-title"><%= link_to subject.title, subject %></h2>
<p id="jTruncate_subject-presentation-text" class="subject-presentation-text"><%= subject.presentation %></p> <p class="subject-presentation-text"><%= subject.presentation %></p>
</div> </div>
<script type="text/javascript"> <script>
$().ready(function() { $(function(){
$('#subject-presentation-text').jTruncate({ $('.subject-presentation-text').succinct({
length: 200, omission: '&rarr;'
minTrail: 0,
lessAni: 2000
}); });
}); });
</script> </script>

View file

@ -1,59 +1,50 @@
/*
* Copyright (c) 2014 Mike King (@micjamking)
*
* jQuery Succinct plugin
* Version 1.1.0 (October 2014)
*
* Licensed under the MIT License
*/
/*global jQuery*/
(function($) { (function($) {
$.fn.jTruncate = function(options) { 'use strict';
var defaults = { $.fn.succinct = function(options) {
length: 300,
minTrail: 20,
moreText: "Lire Plus",
lessText: "Réduire",
ellipsisText: "...",
moreAni: "",
lessAni: ""
};
var options = $.extend(defaults, options); var settings = $.extend({
size: 240,
omission: '...',
ignore: true
}, options);
return this.each(function() { return this.each(function() {
obj = $(this);
var body = obj.html();
if(body.length > options.length + options.minTrail) { var textDefault,
var splitLocation = body.indexOf(' ', options.length); textTruncated,
if(splitLocation != -1) { elements = $(this),
// truncate tip regex = /[!-\/:-@\[-`{-~]$/,
var splitLocation = body.indexOf(' ', options.length); init = function() {
var str1 = body.substring(0, splitLocation); elements.each(function() {
var str2 = body.substring(splitLocation, body.length - 1); textDefault = $(this).html();
obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
'</span>' + '<span class="truncate_more">' + str2 + '</span>');
obj.find('.truncate_more').css("display", "none");
// insert more link if (textDefault.length > settings.size) {
obj.append( textTruncated = $.trim(textDefault)
'<div class="clearboth">' + .substring(0, settings.size)
'<a href="#" class="truncate_more_link">' + options.moreText + '</a>' + .split(' ')
'</div>' .slice(0, -1)
); .join(' ');
// set onclick event for more/less link if (settings.ignore) {
var moreLink = $('.truncate_more_link', obj); textTruncated = textTruncated.replace(regex, '');
var moreContent = $('.truncate_more', obj); }
var ellipsis = $('.truncate_ellipsis', obj);
moreLink.click(function() { $(this).html(textTruncated + settings.omission);
if(moreLink.text() == options.moreText) {
moreContent.show(options.moreAni);
moreLink.text(options.lessText);
ellipsis.css("display", "none");
} else {
moreContent.hide(options.lessAni);
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
} }
return false;
}); });
} };
} // end if init();
}); });
}; };
})(jQuery); })(jQuery);