ux-datagrid-infiniteScroll.js |
|
! ux-angularjs-datagrid v.1.4.11 (c) 2016, Obogo https://github.com/obogo/ux-angularjs-datagrid License: MIT. |
(function (exports, global) {
if (typeof define === "function" && define.amd) {
define(exports);
} else if (typeof module !== "undefined" && module.exports) {
module.exports = exports;
} else {
global.ux = exports;
}
|
Datagrid infinite scroll adds more data when the list scrolls to the bottom. Type
string
|
angular.module("ux").factory("infiniteScroll", function() {
return [ "inst", "$filter", function infiniteScroll(inst, $filter) {
var result = {}, scrollOffset = -1, loadingRow = {
_template: "loadingRow"
}, unwatchers = [], focusAfterSelector;
|
Set the default values for the infiniteScroll options. enable: true, limit: 0 To override these pass to the datagrid options in the template. {infiniteScroll: {enable: true, limit: 100}} Type
*
infiniteScroll
infiniteScroll
|
inst.options.infiniteScroll = inst.options.infiniteScroll || {};
inst.options.infiniteScroll.enable = inst.options.infiniteScroll.enable === undefined ? true : inst.options.infiniteScroll.enable;
inst.options.infiniteScroll.limit = inst.options.infiniteScroll.limit === undefined ? 0 : inst.options.infiniteScroll.limit;
|
Before the data change is complete. We add the loading row. Params
event
newVal
oldVal
|
result.onBeforeDataChange = function(event, newVal, oldVal) {
if (inst.options.infiniteScroll.enable && newVal) {
var limit = getLimit();
if (limit) {
buildFocusAfterUpdateSelector();
event.newValue = $filter("limitTo")(newVal, limit);
if (event.newValue.length < limit) {
event.preventDefault();
result.addExtraRow(event.newValue);
}
}
}
};
function buildFocusAfterUpdateSelector() {
|
this will only happen if you have focusManager addon loaded. and the activeElement is in the grid. |
if (ux.selector && inst.element[0].contains(document.activeElement)) {
|
get the row id of the focused element. |
var rowIndex = inst.getRowIndexFromElement(document.activeElement);
var rowEl = inst.getRowElm(rowIndex);
var activeElement = document.activeElement;
focusAfterSelector = {
rowIndex: rowIndex,
selector: ux.selector.quickSelector(activeElement, rowEl[0], inst.options.gridFocusManager && inst.options.gridFocusManager.filterClasses || [])
};
|
drop the visible off selector if it exists. |
focusAfterSelector.selector = focusAfterSelector.selector.replace(/:visible$/, "");
} else {
focusAfterSelector = null;
}
}
|
function getLimit() {
if (typeof inst.options.infiniteScroll.limit === "function") {
return inst.options.infiniteScroll.limit();
}
return inst.options.infiniteScroll.limit || 0;
}
result.getLimit = getLimit;
|
|
Add the extra row to the normalized grid data for the loading row. This will add an object with the _template: "loadingRow" property. If you have overridden the [getTemplate][angular-ux-datagrid.js.html#getTemplate] then you will need to modify it to load the template for loading row matching on the _template property of that item. Params
data
|
result.addExtraRow = function(data) {
scrollOffset = inst.values.scroll;
if (data.length && data[data.length - 1] !== loadingRow) {
inst.element.addClass("loadingInfiniteRowData");
data.push(loadingRow);
}
};
result.afterRowsAdded = function(event) {
var el, focusEl;
inst.element.removeClass("loadingInfiniteRowData");
if (focusAfterSelector) {
el = inst.getRowElm(focusAfterSelector.rowIndex);
focusEl = el[0].querySelector(focusAfterSelector.selector);
if (focusEl.select) {
focusEl.select();
}
if (focusEl) {
focusEl.focus();
}
}
};
|
result.enable = function() {
unwatchers.push(inst.scope.$on(ux.datagrid.events.ON_BEFORE_DATA_CHANGE, result.onBeforeDataChange));
unwatchers.push(inst.scope.$on(ux.datagrid.events.ON_RENDER_AFTER_DATA_CHANGE, result.afterRowsAdded));
};
|
|
result.disable = function() {
while (unwatchers.length) {
unwatchers.pop()();
}
};
|
|
result.destroy = function() {
result.disable();
loadingRow = null;
result = null;
};
result.enable();
inst.infiniteScroll = result;
} ];
});
}(this.ux = this.ux || {}, function() {return this;}()));
|