javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(virtual-scroller): add <template> support

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-02 18:30:19 +02:00
parent 281f9a307f
commit d40d0a706f
3 changed files with 61 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/virtual-scroll/virtual-scroll-utils.ts
View File

@ -75,7 +75,7 @@ export function doRender(
dom: VirtualNode[],
updateCellHeight: (cell: Cell, node: HTMLElement) => void
) {
const children = el.children;
const children = Array.from(el.children).filter(n => n.tagName !== 'TEMPLATE');
const childrenNu = children.length;
let child: HTMLElement;
for (let i = 0; i < dom.length; i++) {
@ -88,9 +88,10 @@ export function doRender(
child = children[i] as HTMLElement;
nodeRender(child, cell, i);
} else {
child = nodeRender(null, cell, i);
const newChild = createNode(el, cell.type);
child = nodeRender(newChild, cell, i) || newChild;
child.classList.add('virtual-item');
el.appendChild(child);
el.appendChild(child!);
}
(child as any)['$ionCell'] = cell;
} else {
@ -121,6 +122,22 @@ export function doRender(
}
}
function createNode(el: HTMLElement, type: CellType): HTMLElement | null {
const template = getTemplate(el, type);
if (template) {
return el.ownerDocument.importNode(template.content, true).children[0] as HTMLElement;
}
return null;
}
function getTemplate(el: HTMLElement, type: CellType): HTMLTemplateElement | null {
switch (type) {
case CellType.Item: return el.querySelector('template:not([name])');
case CellType.Header: return el.querySelector('template[name=header]');
case CellType.Footer: return el.querySelector('template[name=footer]');
}
}
export function getViewport(scrollTop: number, vierportHeight: number, margin: number): Viewport {
return {
top: Math.max(scrollTop - margin, 0),