<commit_before>define([
    'text!./collage.tmpl.html',
    'lib/js/bootstrap-tooltip'
    ], function (
        collageTmpl
    ) {

    var COLLAGE_SIZE = 30,
        REPLACE_INTERVAL = 3 * 1000, // 3 secs
        replaceTimer;

    function pickRandItems(list, num) {
        var size = Math.min(list.length, num);
        return _.shuffle(list).slice(0, size);
    }

    return Backbone.View.extend({

        template: _.template(collageTmpl),

        isRendered: false,

        initialize: function (options) {
            this.app = options.app;
        },

        show: function () {
            this.render().show();
        },

        hide: function () {
            if (replaceTimer) clearTimeout(replaceTimer);
            this.$el.hide();
        },

        render: function () {
            var collageItems = pickRandItems(this.collection.toJSON(), COLLAGE_SIZE),
                html = this.template({
                    items: collageItems
                });

            this.$el.html(html);
            this.registerCollageEvents();

            if (replaceTimer) clearTimeout(replaceTimer);
            replaceTimer = setTimeout(_.bind(this.replaceRandom, this), REPLACE_INTERVAL);

            return this.$el;
        },

        registerCollageEvents: function () {
            var that = this;

            $('.collage-img', this.el)
                .css('visibility', 'hidden')
                .tooltip()
                .click(function () {
                    var $this = $(this),
                        name = $this.attr('data-title');
                    that.app.query(name);
                })
                .each(function (i, elem) {
                    var $elem = $(elem),
                        delay = POPONG.Utils.randInt(1, 30) * 100; // 0.1 ~ 3 secs

                    _.delay(function () {
                        $elem.stop(true, true)
                            .css('visibility', 'visible').hide().fadeIn();
                    }, delay);
                });
        },

        replaceRandom: function () {
            // FIXME: 퍼포먼스 개선의 여지 많음 -_-;
            var oldItemIndex = POPONG.Utils.randInt(0, COLLAGE_SIZE-1),
                $elem = $('.collage-img:eq('+oldItemIndex+')'),
                collectionSize = this.collection.length,
                newItemIndex = POPONG.Utils.randInt(0, collectionSize-1),
                newItem = this.collection.toJSON()[newItemIndex];

            if (!$elem.size()) return;

            $elem.stop(true, true).fadeOut(400, function () {
                $elem.attr({
                    src: newItem.image ? newItem.image : 'images/default_profile.jpg',
                    'data-title': newItem.name,
                    title: newItem.name
                });
                $elem.data('tooltip').fixTitle();
                $elem.stop(true, true)
                    .css('visibility', 'visible').hide().fadeIn();
            });

            if (replaceTimer) clearTimeout(replaceTimer);
            replaceTimer = setTimeout(_.bind(this.replaceRandom, this), REPLACE_INTERVAL);
        }
    });
});<commit_msg>viewport에 보이는 이미지들만 replace하도록<commit_after>define([
    'text!./collage.tmpl.html',
    'lib/js/bootstrap-tooltip'
    ], function (
        collageTmpl
    ) {

    var COLLAGE_SIZE = 30,
        REPLACE_INTERVAL = 3 * 1000, // 3 secs
        replaceTimer;

    function pickRandItems(list, num) {
        var size = Math.min(list.length, num);
        return _.shuffle(list).slice(0, size);
    }

    return Backbone.View.extend({

        template: _.template(collageTmpl),

        isRendered: false,

        initialize: function (options) {
            this.app = options.app;
            this.numImgs = this.collection.length;
        },

        show: function () {
            this.render().show();
        },

        hide: function () {
            if (replaceTimer) clearTimeout(replaceTimer);
            this.$el.hide();
        },

        render: function () {
            var collageItems = pickRandItems(this.collection.toJSON(), COLLAGE_SIZE),
                html = this.template({
                    items: collageItems
                });

            this.$el.html(html);
            this.cacheImageElems();
            this.registerCollageEvents();

            if (replaceTimer) clearTimeout(replaceTimer);
            replaceTimer = setTimeout(_.bind(this.replaceRandom, this), REPLACE_INTERVAL);

            return this.$el;
        },

        cacheImageElems: function () {
            this.$imgs = $('.collage-img', this.el);
            this.cacheNumVisibleImage();

            // invalidate on resize (rarely happens)
            $(window).resize(_.bind(this.cacheNumVisibleImage, this));
        },

        cacheNumVisibleImage: function () {
            this.numVisibleImgs = this.$imgs.filter(function () {
                var $elem = $(this),
                    offsetY = $elem.offset().top - $elem.parent().offset().top;

                return offsetY <= $elem.parent().height()-0.1;
            }).size();
        },

        registerCollageEvents: function () {
            var that = this;

            this.$imgs
                .css('visibility', 'hidden')
                .tooltip()
                .click(function () {
                    var $this = $(this),
                        name = $this.attr('data-title');
                    that.app.query(name);
                })
                .each(function (i, elem) {
                    var $elem = $(elem),
                        delay = POPONG.Utils.randInt(1, 30) * 100; // 0.1 ~ 3 secs

                    _.delay(function () {
                        $elem.stop(true, true)
                            .css('visibility', 'visible').hide().fadeIn();
                    }, delay);
                });
        },

        replaceRandom: function () {
            var oldItemIndex = POPONG.Utils.randInt(0, this.numVisibleImgs - 1),
                $elem = this.$imgs.eq(oldItemIndex),
                newItemIndex = POPONG.Utils.randInt(0, this.numImgs - 1),
                newItem = this.collection.toJSON()[newItemIndex];

            if (!$elem.size()) return;

            $elem.stop(true, true).fadeOut(400, function () {
                $elem.attr({
                    src: newItem.image ? newItem.image : 'images/default_profile.jpg',
                    'data-title': newItem.name,
                    title: newItem.name
                });
                $elem.data('tooltip').fixTitle();
                $elem.stop(true, true)
                    .css('visibility', 'visible').hide().fadeIn();
            });

            if (replaceTimer) clearTimeout(replaceTimer);
            replaceTimer = setTimeout(_.bind(this.replaceRandom, this), REPLACE_INTERVAL);
        }
    });
});
{'fraction_non_alphanumeric': 0.1339874066481183, 'fraction_numerical': 0.007614584858690877, 'mean_word_length': 1.438414851838629, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6178715', 'n_tokens_mistral': 1963, 'n_tokens_neox': 1810, 'n_words': 323}