zulip/static/js/list_rendering.js

var list_render = (function () {
    var DEFAULTS = {
        INITIAL_RENDER_COUNT: 80,
        LOAD_COUNT: 20,
        instances: {},
    };

    // @params
    // container: jQuery object to append to.
    // list: The list of items to progressively append.
    // opts: An object of random preferences.
    var func = function ($container, list, opts) {
        // this memoizes the results and will return a previously invoked
        // instance's prototype.
        if (opts.name && DEFAULTS.instances[opts.name]) {
            // the false flag here means "don't run `init`". This is because a
            // user is likely reinitializing and will have put .init() afterwards.
            // This happens when the same codepath is hit multiple times.
            return DEFAULTS.instances[opts.name]
                // sets the container to the new container in this prototype's args.
                .set_container($container)
                // sets the input to the new input in the args.
                .set_opts(opts)
                .__set_events()
                .data(list)
                .init();
        }

        var meta = {
            offset: 0,
            listRenders: {},
            list: list,
            filtered_list: list,

            filter_list: function (value, callback) {
                this.filtered_list = this.list.filter(function (item) {
                    if (typeof callback === "function") {
                        return callback(item, value);
                    }

                    return !!item.toLocaleLowerCase().match(value);
                });
            },
        };

        if (!opts) {
            return;
        }

        // we want to assume below that `opts.filter` exists, but may not necessarily
        // have any defined specs.
        if (!opts.filter) {
            opts.filter = {};
        }

        var prototype = {
            // Reads the provided list (in the scope directly above)
            // and renders the next block of messages automatically
            // into the specified contianer.
            render: function (load_count) {
                load_count = load_count || opts.load_count || DEFAULTS.LOAD_COUNT;

                // Stop once the offset reaches the length of the original list.
                if (meta.offset >= meta.filtered_list.length) {
                    return;
                }

                var slice = meta.filtered_list.slice(meta.offset, meta.offset + load_count);

                var html = _.reduce(slice, function (acc, item) {
                    var _item = opts.modifier(item);

                    // if valid jQuery selection, attempt to grab all elements within
                    // and string them together into a giant outerHTML fragment.
                    if (_item.constructor === jQuery) {
                        _item = (function ($nodes) {
                            var html = "";
                            $nodes.each(function () {
                                if (this.nodeType === 1) {
                                    html += this.outerHTML;
                                }
                            });

                            return html;
                        }(_item));
                    }

                    // if is a valid element, get the outerHTML.
                    if (_item instanceof Element) {
                        _item = _item.outerHTML;
                    }

                    // return the modified HTML or nothing if corrupt (null, undef, etc.).
                    return acc + (_item || "");
                }, "");

                $container.append($(html));
                meta.offset += load_count;

                return this;
            },

            // Fills the container with an initial batch of items.
            // Needs to be enough to exceed the max height, so that a
            // scrollable area is created.
            init: function () {
                this.clear();
                this.render(DEFAULTS.INITIAL_RENDER_COUNT);
                return this;
            },

            filter: function (map_function) {
                meta.filtered_list = meta.list(map_function);
            },

            // reset the data associated with a list. This is so that instead of
            // initializing a new progressive list render instance, you can just
            // update the data of an existing one.
            data: function (data) {
                if (Array.isArray(data)) {
                    meta.list = data;

                    if (opts.filter && opts.filter.element) {
                        var value = $(opts.filter.element).val().toLocaleLowerCase();
                        meta.filter_list(value, opts.filter.callback);
                    }

                    prototype.clear();

                    return this;
                }

                blueslip.warn("The data object provided to the progressive" +
                              " list render is invalid");
                return this;
            },

            clear: function () {
                $container.html("");
                meta.offset = 0;
                return this;
            },

            // Let's imagine the following:
            // list_render is initialized and becomes prototope A with scope A.
            // list_render is re-initialized and becomes prototype A with scope A again.
            // The issue is that when re-initializing, new variables could have been thrown
            // in and old variables could be useless (eg. dead nodes), so we need to
            // replace these with new copies if necessary.
            set_container: function ($new_container) {
                if ($new_container) {
                    $container = $new_container;
                }

                return this;
            },

            set_opts: function (new_opts) {
                if (opts) {
                    opts = new_opts;
                }

                return this;
            },

            // this sets the events given the particular arguments assigned in
            // the container and opts.
            __set_events: function () {
                var $nearestScrollingContainer = $container;
                while ($nearestScrollingContainer.length) {
                    if ($nearestScrollingContainer.is("body, html")) {
                        blueslip.warn("Please wrap progressive scrolling lists in an element with 'max-height' attribute. Error found in:\n" + blueslip.preview_node($container));
                        break;
                    }

                    if ($nearestScrollingContainer.css("max-height") !== "none") {
                        break;
                    }

                    $nearestScrollingContainer = $nearestScrollingContainer.parent();
                }

                // on scroll of the nearest scrolling container, if it hits the bottom
                // of the container then fetch a new block of items and render them.
                $nearestScrollingContainer.scroll(function () {
                    if (this.scrollHeight - (this.scrollTop + this.clientHeight) < 10) {
                        prototype.render();
                    }
                });

                if (opts.filter.element) {
                    opts.filter.element.on(opts.filter.event || "input", function () {
                        var self = this;
                        var value = self.value.toLocaleLowerCase();

                        meta.filter_list(value, opts.filter.callback);

                        // clear and re-initialize the list with the newly filtered subset
                        // of items.
                        prototype.clear().init();
                    });
                }

                return this;
            },
        };

        prototype.__set_events();

        // Save the instance for potential future retrieval if a name is provided.
        if (opts.name) {
            DEFAULTS.instances[opts.name] = prototype;
        }

        return prototype;
    };

    func.get = function (name) {
        return DEFAULTS.instances[name] || false;
    };

    // this can delete list render issues and free up memory if needed.
    func.delete = function (name) {
        if (DEFAULTS.instances[name]) {
            delete DEFAULTS.instances[name];
            return true;
        }

        blueslip.warn("The progressive list render instance with the name '" +
                      name + "' does not exist.");
        return false;
    };

    return func;
}());

if (typeof module !== 'undefined') {
    module.exports = list_render;
}