Readerview.prototype.placeReader = function()

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);
};