in lib/@uncharted/thumbnails/src/thumbnails.readerview.js [140:230]
Readerview.prototype.placeReader = function (thumbnailId, stayOpened) {
var t = this;
var $previousPlaceHolder = t.$currentReaderHolder;
var wasOpen = $previousPlaceHolder && $previousPlaceHolder.hasClass('open');
var targetThumbnail = _.find(t.thumbnailItems, function(thumbnail) {
return thumbnail.data.id === thumbnailId;
});
var targetThumbnailPosition = targetThumbnail._$element.position();
var visibleThumbnailsInSameRow = t.thumbnailItems.filter(function(item) {
var isInSameRow = item._$element.position().top === targetThumbnailPosition.top;
return item._$element.is(':visible') && isInSameRow;
});
var lastVisibleThumbnailInRow = _.find(visibleThumbnailsInSameRow, function(item) {
var $nextItems = item._$element.nextAll('.thumbnail:visible');
return $nextItems.length > 0
? $($nextItems[0]).position().top !== targetThumbnailPosition.top
: true;
});
// check if the lastVisibleThumbnailInRow is in the last row (no visible thumbnails are next to it)
var $nextItems = lastVisibleThumbnailInRow._$element.nextAll('.thumbnail:visible:first, .dummyThumbnail:last');
var $targetElement = $($nextItems[0]).hasClass('dummyThumbnail')
? $($nextItems[0])
: lastVisibleThumbnailInRow._$element;
if (stayOpened) {
// remove all previously created reader holders except the current one
t.$currentReaderHolder.siblings('.reader-holder').remove();
} else {
t.$currentReaderHolder = $targetElement.next('.reader-holder').length === 0
? $('<div class="reader-holder"></div>')
: $targetElement.next('.reader-holder');
t.$currentReaderHolder.append(t.$element);
if ($previousPlaceHolder && (t.$currentReaderHolder[0] !== $previousPlaceHolder[0])) {
$previousPlaceHolder.removeClass('open');
$previousPlaceHolder.height(0);
}
}
$targetElement.after(t.$currentReaderHolder);
// scroll to the reader
var $scrollTo = lastVisibleThumbnailInRow._$element;
if (lastVisibleThumbnailInRow) {
var $container = t.$scrollView;
var thumbsPerRow = 0;
var top = undefined;
var count = 0;
_.each(t.thumbnailItems, function (thumbnailItem) {
var $thumb = thumbnailItem._$element;
if ($thumb.is(':visible')) {
if (top === undefined) {
top = $thumb.position().top;
}
thumbnailItem.index = count;
if (!thumbsPerRow && $thumb.position().top !== top) {
thumbsPerRow = count;
}
count++;
}
});
var thumbnailIndex = lastVisibleThumbnailInRow.index - thumbsPerRow + 1;
var currentTop = t.$currentReaderHolder.position().top;
var previousTop = $previousPlaceHolder ? $previousPlaceHolder.position().top : currentTop;
if (!wasOpen || previousTop !== currentTop || !$previousPlaceHolder || stayOpened) {
// Top of the row containing the target thumbnail
var thumbnailHeight = $scrollTo.height();
var rowCount = Math.ceil(thumbnailIndex / thumbsPerRow);
var scrollTop = thumbnailHeight * rowCount;
var leftoverReaderHeight = Math.max(0, (thumbnailHeight + t._config.readerHeight) - $container.height());
// try to bring the reader into view
scrollTop = scrollTop + leftoverReaderHeight;
var onComplete = function () {
t.outlineReader.redrawEntities();
};
if (stayOpened) {
$container.scrollTop(scrollTop);
onComplete();
} else {
$container.animate({scrollTop: scrollTop}, {
duration: t._config.openAnimationMs,
complete: onComplete,
});
}
}
}
t._clickedThumbnail = targetThumbnail;
t._placeMarker();
t.emit(defaults.events.readerviewOpen, targetThumbnail.data);
};