************************* foundation-util-paginator ************************* Paginator is a utility class for the purpose of infinity scrolling. AdaptTo Interface ================= type ``foundation-util-paginator`` condition ``window`` object returned type Constructor of type ``FoundationUtilPaginator`` .. code-block:: ts interface FoundationUtilPaginator { /** * The container element that the scroll event and dimensions are registered and measured. * @readonly */ el: Element; /** * Indicates if the paginator is currently loading. * @readonly */ isLoading: boolean; /** * Indicates if there is more item to be loaded. * @readonly */ hasNext: boolean; /** * The current offset. * @readonly */ offset: number; /** * The page size. * @readonly */ limit: number; /** * Instanciates a new paginator. */ new(config: FoundationUtilPaginatorConfig); /** * Starts the pagination process: * - The scroll event handler is registered. * - Start loading items when there is available space. * * @param offset The initial offset. Set this param when there is existing items. * @param hasNext true to indicate if there is more item to be loaded; false otherwise. * @param forceFirstLoad true to force doing the first load regardless of available space. * @param delay The delay, in millisecond, when to start the process. */ start(offset = 0, hasNext = true, forceFirstLoad = false, delay = 0): void; /** * Restarts the pagination process: * - Start loading items when there is available space. * * This method is usually used when the items are added or removed by external party. * Hence the paginator internal state needs to reflect that new items. * Aborts the loading process if the paginator is currently loading. * * @param offset The initial offset. Set this param when there is existing items. * @param hasNext true to indicate if there is more item to be loaded; false otherwise. * @param forceFirstLoad true to force doing the first load regardless of available space. */ restart(offset = 0, hasNext = true, forceFirstLoad = false): void; /** * Destroys the paginator. The instance MUST NOT be used anymore. */ destroy(): void; } interface FoundationUtilPaginatorConfig { /** * The container element that the scroll event and dimensions are registered and measured. */ el: Element; /** * The page size. Default is 20. */ limit?: number; /** * Returns a URL for the given paginator values (offset and limit). * The URL is used to fetch the next page. */ resolveURL(paginator: FoundationUtilPaginator): string; /** * Processes the returned response. * * @returns A promise of the length of new items; and if more item to be loaded. */ processResponse(paginator: FoundationUtilPaginator, response: any): Promise; /** * Shows a wait mask. */ wait?: (paginator: FoundationUtilPaginator) => FoundationUtilPaginatorWait; /** * The callback when the new page is loaded and the paginator's states are updated. * It is called after #processResponse. */ onNewPage?: (paginator: FoundationUtilPaginator) => void; } interface FoundationUtilPaginatorWait { /** * Clears the wait. */ clear(): void; } interface FoundationUtilPaginatorResponse { /** * The length of new items. */ length: number; /** * true if more item to be loaded. */ hasMode: boolean; } Example ======= .. code-block:: js var Paginator = $(window).adaptTo("foundation-util-paginator"); var paginator = new Paginator({ el: scrollContainer, resolveURL: function(paginator) { return URITemplate.expand(src, { offset: paginator.offset, limit: paginator.limit }); }, processResponse: function(paginator, html) { var deferred = $.Deferred(); var processed = Granite.UI.Foundation.Utils.processHtml(html, undefined, function() { var el = $(processed); var items = getItems(el); appendItems(items); deferred.resolve(items.length, items.length >= paginator.limit); }); return deferred.promise(); }, wait: function(paginator) { var wait = getWait(table); wait.show(); return { clear: function() { wait.hide(); } }; } }); paginator.start(collection.find(".foundation-collection-item").length);