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