From 9576d5caef8e8faa3f06a19e09e503b9164e3ec0 Mon Sep 17 00:00:00 2001 From: Brock Whittaker Date: Thu, 16 Mar 2017 13:00:56 -0700 Subject: [PATCH] frontend: Implement list_render class. This implements a list_render closure class that allows for progressive, responsive rendering of long, scrollable lists, with filtering support. It isn't used, at present. --- .eslintrc.json | 1 + static/js/list_rendering.js | 186 ++++++++++++++++++++++++++++++++++++ zproject/settings.py | 1 + 3 files changed, 188 insertions(+) create mode 100644 static/js/list_rendering.js diff --git a/.eslintrc.json b/.eslintrc.json index fd7e78ec48..cce774a1c7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -109,6 +109,7 @@ "message_fetch": false, "favicon": false, "condense": false, + "list_render": false, "floating_recipient_bar": false, "tab_bar": false, "emoji": false, diff --git a/static/js/list_rendering.js b/static/js/list_rendering.js new file mode 100644 index 0000000000..2ff60b25e2 --- /dev/null +++ b/static/js/list_rendering.js @@ -0,0 +1,186 @@ +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]) { + return DEFAULTS.instances[opts.name].data(list); + } + + var meta = { + offset: 0, + listRenders: {}, + filtered_list: list, + }; + + // this is a list that could be filtered by the value of the + // `opts.filter.element` this value should never change. + Object.defineProperty(meta, "list", { + configurable: false, + writeable: false, + value: list, + }); + + 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 $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" + util.preview_node($container)); + break; + } + + if ($nearestScrollingContainer.css("max-height") !== "none") { + break; + } + + $nearestScrollingContainer = $nearestScrollingContainer.parent(); + } + + 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 the first elem. + if (_item.constructor === jQuery) { + _item = _item[0]; + } + + // 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.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; + meta.filtered_list = data; + + prototype.clear().init(); + 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; + }, + }; + + // 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.toLowerCase(); + + meta.filtered_list = meta.list.filter(function (item) { + if (opts.filter.callback) { + return opts.filter.callback(item, value); + } + + return !!item.toLowerCase().match(value); + }); + + // clear and re-initialize the list with the newly filtered subset + // of items. + prototype.clear().init(); + }); + } + + // 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; +} diff --git a/zproject/settings.py b/zproject/settings.py index d6a280cf6c..33f401c4ac 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -862,6 +862,7 @@ JS_SPECS = { 'js/message_edit.js', 'js/condense.js', 'js/resize.js', + 'js/list_rendering.js', 'js/floating_recipient_bar.js', 'js/lightbox.js', 'js/ui_state.js',