A new version of the plugin tinydot with update on window resize

This commit is contained in:
Alexandr Danilov 2016-08-25 16:22:47 +03:00
parent 5aba43d92c
commit 538587855a
3 changed files with 81 additions and 17 deletions

View file

@ -1,14 +1,14 @@
/*
* jQuery tinydot 0.1
* jQuery tinydot 0.2.0
*
* Copyright (c) Alexander Danilov
* www.modos189.ru
* Copyright (c) Alexander Danilov
* modos189.ru
*
* Plugin repository:
* https://gitlab.com/modos189/tinydot
* Plugin website:
* tinydot.modos189.ru
*
* Licensed under the MIT license.
* http://en.wikipedia.org/wiki/MIT_License
* Licensed under the MIT license.
* http://en.wikipedia.org/wiki/MIT_License
*/
(function( $, undef )
@ -19,21 +19,85 @@
}
$.fn.tinydot = function( o ) {
var p=$(this).children('a');
var divh=$(this).height();
while ($(p).outerHeight()>divh) {
$(p).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
var $dot = this;
$dot.child = getChildOrDie($dot);
$dot.orgContent = $($dot.child).html();
ellipsis( $dot );
$dot.watch = function()
{
$(window).on('resize', function(){
if ( watchInt )
{
clearInterval( watchInt );
}
watchInt = setTimeout(
function()
{
reinitialize($dot);
}, 100
);
});
return $dot;
};
var opts = $.extend( true, {}, $.fn.tinydot.defaults, o ),
watchInt = null;
if ( opts.watch )
{
$dot.watch();
}
}
// public
$.fn.tinydot.defaults = {
'watch' : false
};
function getChildOrDie( $elem )
{
var childrens = $elem.children();
if (childrens.length == 0) {
// create children
var data = $($elem).html();
$elem.html('');
$elem.append('<span />');
return $elem.children('span').html(data);
} else {
return childrens[0];
}
}
function reinitialize( $elem )
{
$($elem.child).html($elem.orgContent);
ellipsis( $elem );
}
function ellipsis( $elem ) {
var divh=$($elem).height();
while ($($elem.child).outerHeight()>divh) {
$($elem.child).html(function (index, html) {
return html.replace(/\W*\s(\S)*$/, '...');
});
}
}
})( jQuery );
jQuery(document).ready(function($) {
//We only invoke jQuery.tinydot on elements that have dot-ellipsis class
$(".dot-ellipsis").each(function(){
var x = new Object();
$(this).tinydot(x);
//Checking if update on window resize required
var watch_window=$(this).hasClass("dot-resize-update");
//Invoking jQuery.tinydot
var x = new Object();
if (watch_window)
x.watch='window';
$(this).tinydot(x);
});
});

View file

@ -1 +1 @@
!function(t,n){t.fn.tinydot||(t.fn.tinydot=function(n){for(var e=t(this).children("a"),i=t(this).height();t(e).outerHeight()>i;)t(e).text(function(t,n){return n.replace(/\W*\s(\S)*$/,"...")})})}(jQuery),jQuery(document).ready(function(t){t(".dot-ellipsis").each(function(){var n=new Object;t(this).tinydot(n)})});
!function(a,b){function c(b){var c=b.children();if(0==c.length){var d=a(b).html();return b.html(""),b.append("<span />"),b.children("span").html(d)}return c[0]}function d(b){a(b.child).html(b.orgContent),e(b)}function e(b){for(var c=a(b).height();a(b.child).outerHeight()>c;)a(b.child).html(function(a,b){return b.replace(/\W*\s(\S)*$/,"...")})}a.fn.tinydot||(a.fn.tinydot=function(b){var f=this;f.child=c(f),f.orgContent=a(f.child).html(),e(f),f.watch=function(){return a(window).on("resize",function(){h&&clearInterval(h),h=setTimeout(function(){d(f)},100)}),f};var g=a.extend(!0,{},a.fn.tinydot.defaults,b),h=null;g.watch&&f.watch()},a.fn.tinydot.defaults={watch:!1})}(jQuery),jQuery(document).ready(function(a){a(".dot-ellipsis").each(function(){var b=a(this).hasClass("dot-resize-update"),c=new Object;b&&(c.watch="window"),a(this).tinydot(c)})});

View file

@ -35,7 +35,7 @@
<i class="card-title grey-text text-darken-4 activator mdi-navigation-more-horiz right"></i>
{% endif %}
<span class="card-title dot-ellipsis"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|raw }}</a></span>
<span class="card-title dot-ellipsis dot-resize-update"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|raw }}</a></span>
<div class="estimatedTime grey-text">
<span class="tool reading-time">