Ellipsis added, but doesn't play nice with onRender... yet.

This commit is contained in:
Mark McDowall 2013-08-08 00:27:49 -07:00
parent aa2fdb9d76
commit 1df9c49c46
4 changed files with 650 additions and 4 deletions

View File

@ -3,12 +3,14 @@ define(
[
'app',
'marionette',
'Quality/QualityProfileCollection',
'AddSeries/RootFolders/Collection',
'AddSeries/RootFolders/Layout',
'Series/SeriesCollection',
'Config',
'Shared/Messenger'
'Shared/Messenger',
'jquery.dotdotdot'
], function (App, Marionette, QualityProfiles, RootFolders, RootFolderLayout, SeriesCollection, Config, Messenger) {
return Marionette.ItemView.extend({
@ -54,6 +56,12 @@ define(
if (RootFolders.get(defaultRoot)) {
this.ui.rootFolder.val(defaultRoot);
}
//TODO: make this work via onRender, FM?
//works with onShow, but stops working after the first render
this.ui.overview.dotdotdot({
height: 120
});
},
serializeData: function () {

View File

@ -58,10 +58,8 @@
.search-item {
.new-series-overview {
text-overflow : ellipsis;
white-space : pre-line;
overflow : hidden;
height : 125px;
height : 120px;
}
.new-series-poster {

View File

@ -0,0 +1,632 @@
/*
* jQuery dotdotdot 1.6.1
*
* Copyright (c) 2013 Fred Heusschen
* www.frebsite.nl
*
* Plugin website:
* dotdotdot.frebsite.nl
*
* Dual licensed under the MIT and GPL licenses.
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*/
(function( $ )
{
if ( $.fn.dotdotdot )
{
return;
}
$.fn.dotdotdot = function( o )
{
if ( this.length == 0 )
{
if ( !o || o.debug !== false )
{
debug( true, 'No element found for "' + this.selector + '".' );
}
return this;
}
if ( this.length > 1 )
{
return this.each(
function()
{
$(this).dotdotdot( o );
}
);
}
var $dot = this;
if ( $dot.data( 'dotdotdot' ) )
{
$dot.trigger( 'destroy.dot' );
}
$dot.data( 'dotdotdot-style', $dot.attr( 'style' ) );
$dot.css( 'word-wrap', 'break-word' );
if ($dot.css( 'white-space' ) === 'nowrap')
{
$dot.css( 'white-space', 'normal' );
}
$dot.bind_events = function()
{
$dot.bind(
'update.dot',
function( e, c )
{
e.preventDefault();
e.stopPropagation();
opts.maxHeight = ( typeof opts.height == 'number' )
? opts.height
: getTrueInnerHeight( $dot );
opts.maxHeight += opts.tolerance;
if ( typeof c != 'undefined' )
{
if ( typeof c == 'string' || c instanceof HTMLElement )
{
c = $('<div />').append( c ).contents();
}
if ( c instanceof $ )
{
orgContent = c;
}
}
$inr = $dot.wrapInner( '<div class="dotdotdot" />' ).children();
$inr.empty()
.append( orgContent.clone( true ) )
.css({
'height' : 'auto',
'width' : 'auto',
'border' : 'none',
'padding' : 0,
'margin' : 0
});
var after = false,
trunc = false;
if ( conf.afterElement )
{
after = conf.afterElement.clone( true );
conf.afterElement.remove();
}
if ( test( $inr, opts ) )
{
if ( opts.wrap == 'children' )
{
trunc = children( $inr, opts, after );
}
else
{
trunc = ellipsis( $inr, $dot, $inr, opts, after );
}
}
$inr.replaceWith( $inr.contents() );
$inr = null;
if ( $.isFunction( opts.callback ) )
{
opts.callback.call( $dot[ 0 ], trunc, orgContent );
}
conf.isTruncated = trunc;
return trunc;
}
).bind(
'isTruncated.dot',
function( e, fn )
{
e.preventDefault();
e.stopPropagation();
if ( typeof fn == 'function' )
{
fn.call( $dot[ 0 ], conf.isTruncated );
}
return conf.isTruncated;
}
).bind(
'originalContent.dot',
function( e, fn )
{
e.preventDefault();
e.stopPropagation();
if ( typeof fn == 'function' )
{
fn.call( $dot[ 0 ], orgContent );
}
return orgContent;
}
).bind(
'destroy.dot',
function( e )
{
e.preventDefault();
e.stopPropagation();
$dot.unwatch()
.unbind_events()
.empty()
.append( orgContent )
.attr( 'style', $dot.data( 'dotdotdot-style' ) )
.data( 'dotdotdot', false );
}
);
return $dot;
}; // /bind_events
$dot.unbind_events = function()
{
$dot.unbind('.dot');
return $dot;
}; // /unbind_events
$dot.watch = function()
{
$dot.unwatch();
if ( opts.watch == 'window' )
{
var $window = $(window),
_wWidth = $window.width(),
_wHeight = $window.height();
$window.bind(
'resize.dot' + conf.dotId,
function()
{
if ( _wWidth != $window.width() || _wHeight != $window.height() || !opts.windowResizeFix )
{
_wWidth = $window.width();
_wHeight = $window.height();
if ( watchInt )
{
clearInterval( watchInt );
}
watchInt = setTimeout(
function()
{
$dot.trigger( 'update.dot' );
}, 10
);
}
}
);
}
else
{
watchOrg = getSizes( $dot );
watchInt = setInterval(
function()
{
var watchNew = getSizes( $dot );
if ( watchOrg.width != watchNew.width ||
watchOrg.height != watchNew.height )
{
$dot.trigger( 'update.dot' );
watchOrg = getSizes( $dot );
}
}, 100
);
}
return $dot;
};
$dot.unwatch = function()
{
$(window).unbind( 'resize.dot' + conf.dotId );
if ( watchInt )
{
clearInterval( watchInt );
}
return $dot;
};
var orgContent = $dot.contents(),
opts = $.extend( true, {}, $.fn.dotdotdot.defaults, o ),
conf = {},
watchOrg = {},
watchInt = null,
$inr = null;
if ( !( opts.lastCharacter.remove instanceof Array ) )
{
opts.lastCharacter.remove = $.fn.dotdotdot.defaultArrays.lastCharacter.remove;
}
if ( !( opts.lastCharacter.noEllipsis instanceof Array ) )
{
opts.lastCharacter.noEllipsis = $.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis;
}
conf.afterElement = getElement( opts.after, $dot );
conf.isTruncated = false;
conf.dotId = dotId++;
$dot.data( 'dotdotdot', true )
.bind_events()
.trigger( 'update.dot' );
if ( opts.watch )
{
$dot.watch();
}
return $dot;
};
// public
$.fn.dotdotdot.defaults = {
'ellipsis' : '... ',
'wrap' : 'word',
'fallbackToLetter' : true,
'lastCharacter' : {},
'tolerance' : 0,
'callback' : null,
'after' : null,
'height' : null,
'watch' : false,
'windowResizeFix' : true,
'debug' : false
};
$.fn.dotdotdot.defaultArrays = {
'lastCharacter' : {
'remove' : [ ' ', '\u3000', ',', ';', '.', '!', '?' ],
'noEllipsis' : []
}
};
// private
var dotId = 1;
function children( $elem, o, after )
{
var $elements = $elem.children(),
isTruncated = false;
$elem.empty();
for ( var a = 0, l = $elements.length; a < l; a++ )
{
var $e = $elements.eq( a );
$elem.append( $e );
if ( after )
{
$elem.append( after );
}
if ( test( $elem, o ) )
{
$e.remove();
isTruncated = true;
break;
}
else
{
if ( after )
{
after.detach();
}
}
}
return isTruncated;
}
function ellipsis( $elem, $d, $i, o, after )
{
var $elements = $elem.contents(),
isTruncated = false;
$elem.empty();
var notx = 'table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, blockquote, select, optgroup, option, textarea, script, style';
for ( var a = 0, l = $elements.length; a < l; a++ )
{
if ( isTruncated )
{
break;
}
var e = $elements[ a ],
$e = $(e);
if ( typeof e == 'undefined' )
{
continue;
}
$elem.append( $e );
if ( after )
{
$elem[ ( $elem.is( notx ) ) ? 'after' : 'append' ]( after );
}
if ( e.nodeType == 3 )
{
if ( test( $i, o ) )
{
isTruncated = ellipsisElement( $e, $d, $i, o, after );
}
}
else
{
isTruncated = ellipsis( $e, $d, $i, o, after );
}
if ( !isTruncated )
{
if ( after )
{
after.detach();
}
}
}
return isTruncated;
}
function ellipsisElement( $e, $d, $i, o, after )
{
var isTruncated = false,
e = $e[ 0 ];
if ( typeof e == 'undefined' )
{
return false;
}
var txt = getTextContent( e ),
space = ( txt.indexOf(' ') !== -1 ) ? ' ' : '\u3000',
separator = ( o.wrap == 'letter' ) ? '' : space,
textArr = txt.split( separator ),
position = -1,
midPos = -1,
startPos = 0,
endPos = textArr.length - 1;
while ( startPos <= endPos && !( startPos == 0 && endPos == 0 ) )
{
var m = Math.floor( ( startPos + endPos ) / 2 );
if ( m == midPos )
{
break;
}
midPos = m;
setTextContent( e, textArr.slice( 0, midPos + 1 ).join( separator ) + o.ellipsis );
if ( !test( $i, o ) )
{
position = midPos;
startPos = midPos;
}
else
{
endPos = midPos;
}
if( endPos == startPos && endPos == 0 && o.fallbackToLetter )
{
separator = '';
textArr = textArr[0].split(separator);
position = -1;
midPos = -1;
startPos = 0;
endPos = textArr.length - 1;
}
}
if ( position != -1 && !( textArr.length == 1 && textArr[ 0 ].length == 0 ) )
{
txt = addEllipsis( textArr.slice( 0, position + 1 ).join( separator ), o );
isTruncated = true;
setTextContent( e, txt );
}
else
{
var $w = $e.parent();
$e.remove();
var afterLength = ( after ) ? after.length : 0 ;
if ( $w.contents().size() > afterLength )
{
var $n = $w.contents().eq( -1 - afterLength );
isTruncated = ellipsisElement( $n, $d, $i, o, after );
}
else
{
var $p = $w.prev()
var e = $p.contents().eq( -1 )[ 0 ];
if ( typeof e != 'undefined' )
{
var txt = addEllipsis( getTextContent( e ), o );
setTextContent( e, txt );
if ( after )
{
$p.append( after );
}
$w.remove();
isTruncated = true;
}
}
}
return isTruncated;
}
function test( $i, o )
{
return $i.innerHeight() > o.maxHeight;
}
function addEllipsis( txt, o )
{
while( $.inArray( txt.slice( -1 ), o.lastCharacter.remove ) > -1 )
{
txt = txt.slice( 0, -1 );
}
if ( $.inArray( txt.slice( -1 ), o.lastCharacter.noEllipsis ) < 0 )
{
txt += o.ellipsis;
}
return txt;
}
function getSizes( $d )
{
return {
'width' : $d.innerWidth(),
'height': $d.innerHeight()
};
}
function setTextContent( e, content )
{
if ( e.innerText )
{
e.innerText = content;
}
else if ( e.nodeValue )
{
e.nodeValue = content;
}
else if (e.textContent)
{
e.textContent = content;
}
}
function getTextContent( e )
{
if ( e.innerText )
{
return e.innerText;
}
else if ( e.nodeValue )
{
return e.nodeValue;
}
else if ( e.textContent )
{
return e.textContent;
}
else
{
return "";
}
}
function getElement( e, $i )
{
if ( typeof e == 'undefined' )
{
return false;
}
if ( !e )
{
return false;
}
if ( typeof e == 'string' )
{
e = $(e, $i);
return ( e.length )
? e
: false;
}
if ( typeof e == 'object' )
{
return ( typeof e.jquery == 'undefined' )
? false
: e;
}
return false;
}
function getTrueInnerHeight( $el )
{
var h = $el.innerHeight(),
a = [ 'paddingTop', 'paddingBottom' ];
for ( var z = 0, l = a.length; z < l; z++ ) {
var m = parseInt( $el.css( a[ z ] ), 10 );
if ( isNaN( m ) )
{
m = 0;
}
h -= m;
}
return h;
}
function debug( d, m )
{
if ( !d )
{
return false;
}
if ( typeof m == 'string' )
{
m = 'dotdotdot: ' + m;
}
else
{
m = [ 'dotdotdot:', m ];
}
if ( typeof window.console != 'undefined' )
{
if ( typeof window.console.log != 'undefined' )
{
window.console.log( m );
}
}
return false;
}
// override jQuery.html
var _orgHtml = $.fn.html;
$.fn.html = function( str ) {
if ( typeof str != 'undefined' )
{
if ( this.data( 'dotdotdot' ) )
{
if ( typeof str != 'function' )
{
return this.trigger( 'update', [ str ] );
}
}
return _orgHtml.call( this, str );
}
return _orgHtml.call( this );
};
// override jQuery.text
var _orgText = $.fn.text;
$.fn.text = function( str ) {
if ( typeof str != 'undefined' )
{
if ( this.data( 'dotdotdot' ) )
{
var temp = $( '<div />' );
temp.text( str );
str = temp.html();
temp.remove();
return this.trigger( 'update', [ str ] );
}
return _orgText.call( this, str );
}
return _orgText.call( this );
};
})( jQuery );

View File

@ -22,6 +22,7 @@ require.config({
'marionette' : 'JsLibraries/backbone.marionette',
'signalR' : 'JsLibraries/jquery.signalR',
'jquery.knob' : 'JsLibraries/jquery.knob',
'jquery.dotdotdot' : 'JsLibraries/jquery.dotdotdot',
'libs' : 'JsLibraries/'
},
@ -114,6 +115,13 @@ require.config({
]
},
'jquery.dotdotdot': {
deps:
[
'$'
]
},
'backbone.pageable': {
deps:
[