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">
<%= 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>
<p id="jTruncate_subject-presentation-text" class="subject-presentation-text"><%= subject.presentation %></p>
<p class="subject-presentation-text"><%= subject.presentation %></p>
</div>
<script type="text/javascript">
$().ready(function() {
$('#subject-presentation-text').jTruncate({
length: 200,
minTrail: 0,
lessAni: 2000
<script>
$(function(){
$('.subject-presentation-text').succinct({
omission: '&rarr;'
});
});
});
</script>
</script>

View file

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