vgapp 1.3.0 → 1.3.2

package/app/modules/vgdynamictable/js/vgdynamictable.js

@@ -131,26 +131,26 @@ class VGDynamicTable extends BaseModule {
 			nextWidth: 0,
 			frame: 0,
 		};
-		this._virtualState = {
-			enabled: false,
-			bound: false,
-			lastPage: -1,
-			lastPerPage: -1,
+		this._virtualState = {
+			enabled: false,
+			bound: false,
+			lastPage: -1,
+			lastPerPage: -1,
 			start: 0,
 			end: 0,
 			page: -1,
-			perPage: -1,
-			frame: 0,
-			lastScrollTop: -1,
-			rowHeight: 44,
-		};
-		this._virtualSpacers = {
-			top: null,
-			bottom: null,
-		};
-		this._boundVirtualScroll = this._handleVirtualScroll.bind(this);
-		this._expandable = null;
-	}
+			perPage: -1,
+			frame: 0,
+			lastScrollTop: -1,
+			rowHeight: 44,
+		};
+		this._virtualSpacers = {
+			top: null,
+			bottom: null,
+		};
+		this._boundVirtualScroll = this._handleVirtualScroll.bind(this);
+		this._expandable = null;
+	}
 
 	static get NAME() { return NAME; }
 
@@ -256,7 +256,7 @@ class VGDynamicTable extends BaseModule {
 		});
 	}
 
-	setLocale(locale) {
+	setLocale(locale) {
 		const normalized = String(locale || '').toLowerCase().trim() || 'ru';
 		this._params.locale = normalized;
 		this._writePersistentState('locale', normalized);
@@ -511,8 +511,8 @@ class VGDynamicTable extends BaseModule {
 
 		this._ensureTableViewport(directParent);
 		this._bindViewportPan();
-		this._restorePersistentState();
-		this._ensureLiveRegion();
+		this._restorePersistentState();
+		this._ensureLiveRegion();
 		this._ensureSummaryNode();
 		this._ensurePanHintNode();
 		this._applyFooterVisibility();
@@ -554,9 +554,9 @@ class VGDynamicTable extends BaseModule {
 		this._bindPopState();
 		this._refreshStickyAndFixedLayout();
 
-		if (paginationEnabled) {
-			this.setPagination();
-			this._emitAction('init', {
+		if (paginationEnabled) {
+			this.setPagination();
+			this._emitAction('init', {
 				page: this._pageState.page,
 				perPage: this._pageState.perPage,
 			});
@@ -656,10 +656,10 @@ class VGDynamicTable extends BaseModule {
 		this._renderFooterFromCurrentState();
 	}
 
-	_setRemotePagination() {
-		const page = this._getInitialPage();
-		const perPage = this._getInitialPerPage();
-		this._pageState = { page, perPage };
+	_setRemotePagination() {
+		const page = this._getInitialPage();
+		const perPage = this._getInitialPerPage();
+		this._pageState = { page, perPage };
 
 		const userOnChange = this._params.pagination.onChange;
 		const userOnPerPageChange = this._params.pagination.onPerPageChange;
@@ -704,13 +704,13 @@ class VGDynamicTable extends BaseModule {
 		this._loadRemotePage(page, perPage, null, filtersRequestMeta);
 	}
 
-	_getTableRows() {
-		const body = this._element.tBodies && this._element.tBodies[0];
-		if (!body) {
-			return [];
-		}
-		return Array.from(body.rows).filter((row) => String(row.getAttribute('data-virtual-spacer') || '') !== '1');
-	}
+	_getTableRows() {
+		const body = this._element.tBodies && this._element.tBodies[0];
+		if (!body) {
+			return [];
+		}
+		return Array.from(body.rows).filter((row) => String(row.getAttribute('data-virtual-spacer') || '') !== '1');
+	}
 
 	_getTotalPages(perPage) {
 		if (!this._rows.length) {
@@ -719,62 +719,62 @@ class VGDynamicTable extends BaseModule {
 		return Math.max(1, Math.ceil(this._rows.length / perPage));
 	}
 
-	_renderPageRows(page, perPage) {
-		if (!this._rows.length) {
-			return;
-		}
-
-		const isVirtualEnabled = this._isVirtualEnabled();
-		const start = (page - 1) * perPage;
-		const end = start + perPage;
-
-		this._rows.forEach((row, index) => {
-			row.hidden = index < start || index >= end;
-		});
-		if (isVirtualEnabled) {
-			this._virtualState.lastPage = page;
-			this._virtualState.lastPerPage = perPage;
-			this._applyVirtualWindow(page, perPage);
-		} else {
-			this._teardownVirtualWindow();
-		}
-		this._refreshExpandable();
-		this._renderFooterFromCurrentState();
-		this._refreshStickyAndFixedLayout();
-	}
-
-	_isVirtualEnabled() {
-		const options = this._params.virtual || {};
-		const attr = this._element.getAttribute('data-virtual-enable');
-		const enabled = attr !== null
-			? this._isTruthy(attr)
-			: Boolean(options.enable);
-		if (!enabled) {
-			return false;
-		}
-		const thresholdRaw = this._element.getAttribute('data-virtual-threshold');
-		const threshold = this._normalizePositiveInt(
-			thresholdRaw !== null ? thresholdRaw : options.threshold,
-			500
-		);
-		return this._rows.length >= threshold;
-	}
-
-	_initVirtualization() {
-		if (!this._tableViewport || this._virtualState.bound) {
-			return;
-		}
-		this._tableViewport.addEventListener('scroll', this._boundVirtualScroll, { passive: true });
-		this._virtualState.bound = true;
-	}
-
-	_teardownVirtualizationBinding() {
-		if (!this._tableViewport || !this._virtualState.bound) {
-			return;
-		}
-		this._tableViewport.removeEventListener('scroll', this._boundVirtualScroll);
-		this._virtualState.bound = false;
-	}
+	_renderPageRows(page, perPage) {
+		if (!this._rows.length) {
+			return;
+		}
+
+		const isVirtualEnabled = this._isVirtualEnabled();
+		const start = (page - 1) * perPage;
+		const end = start + perPage;
+
+		this._rows.forEach((row, index) => {
+			row.hidden = index < start || index >= end;
+		});
+		if (isVirtualEnabled) {
+			this._virtualState.lastPage = page;
+			this._virtualState.lastPerPage = perPage;
+			this._applyVirtualWindow(page, perPage);
+		} else {
+			this._teardownVirtualWindow();
+		}
+		this._refreshExpandable();
+		this._renderFooterFromCurrentState();
+		this._refreshStickyAndFixedLayout();
+	}
+
+	_isVirtualEnabled() {
+		const options = this._params.virtual || {};
+		const attr = this._element.getAttribute('data-virtual-enable');
+		const enabled = attr !== null
+			? this._isTruthy(attr)
+			: Boolean(options.enable);
+		if (!enabled) {
+			return false;
+		}
+		const thresholdRaw = this._element.getAttribute('data-virtual-threshold');
+		const threshold = this._normalizePositiveInt(
+			thresholdRaw !== null ? thresholdRaw : options.threshold,
+			500
+		);
+		return this._rows.length >= threshold;
+	}
+
+	_initVirtualization() {
+		if (!this._tableViewport || this._virtualState.bound) {
+			return;
+		}
+		this._tableViewport.addEventListener('scroll', this._boundVirtualScroll, { passive: true });
+		this._virtualState.bound = true;
+	}
+
+	_teardownVirtualizationBinding() {
+		if (!this._tableViewport || !this._virtualState.bound) {
+			return;
+		}
+		this._tableViewport.removeEventListener('scroll', this._boundVirtualScroll);
+		this._virtualState.bound = false;
+	}
 
 	_handleVirtualScroll() {
 		if (!this._isVirtualEnabled()) {
@@ -801,43 +801,43 @@ class VGDynamicTable extends BaseModule {
 		});
 	}
 
-	_applyVirtualWindow(page, perPage) {
-		if (!this._isVirtualEnabled() || !this._tableViewport) {
-			this._teardownVirtualWindow();
-			return;
-		}
-
-		this._initVirtualization();
-		const body = this._getBody();
-		if (!body) {
-			this._teardownVirtualWindow();
-			return;
-		}
-		const options = this._params.virtual || {};
-		const rowHeight = this._resolveVirtualRowHeight(page, perPage, options);
-		const overscanRaw = this._element.getAttribute('data-virtual-overscan');
-		const overscan = Math.max(0, this._normalizePositiveInt(overscanRaw !== null ? overscanRaw : options.overscan, 8));
-		const visibleCount = Math.max(1, Math.ceil((this._tableViewport.clientHeight || 0) / rowHeight));
+	_applyVirtualWindow(page, perPage) {
+		if (!this._isVirtualEnabled() || !this._tableViewport) {
+			this._teardownVirtualWindow();
+			return;
+		}
+
+		this._initVirtualization();
+		const body = this._getBody();
+		if (!body) {
+			this._teardownVirtualWindow();
+			return;
+		}
+		const options = this._params.virtual || {};
+		const rowHeight = this._resolveVirtualRowHeight(page, perPage, options);
+		const overscanRaw = this._element.getAttribute('data-virtual-overscan');
+		const overscan = Math.max(0, this._normalizePositiveInt(overscanRaw !== null ? overscanRaw : options.overscan, 8));
+		const visibleCount = Math.max(1, Math.ceil((this._tableViewport.clientHeight || 0) / rowHeight));
 		const pageStart = (page - 1) * perPage;
 		const pageEnd = Math.min(pageStart + perPage, this._rows.length);
 
-		const scrolledRows = Math.floor((this._tableViewport.scrollTop || 0) / rowHeight);
-		const windowStart = Math.max(pageStart, pageStart + scrolledRows - overscan);
-		const windowEnd = Math.min(pageEnd, pageStart + scrolledRows + visibleCount + overscan);
-
-		const topSpacerHeight = Math.max(0, (windowStart - pageStart) * rowHeight);
-		const bottomSpacerHeight = Math.max(0, (pageEnd - windowEnd) * rowHeight);
-		if (
-			this._virtualState.start === windowStart
-			&& this._virtualState.end === windowEnd
-			&& this._virtualState.page === page
-			&& this._virtualState.perPage === perPage
-		) {
-			this._syncVirtualSpacers(body, windowStart, windowEnd, topSpacerHeight, bottomSpacerHeight);
-			return;
-		}
-
-		const isSameContext = this._virtualState.page === page && this._virtualState.perPage === perPage;
+		const scrolledRows = Math.floor((this._tableViewport.scrollTop || 0) / rowHeight);
+		const windowStart = Math.max(pageStart, pageStart + scrolledRows - overscan);
+		const windowEnd = Math.min(pageEnd, pageStart + scrolledRows + visibleCount + overscan);
+
+		const topSpacerHeight = Math.max(0, (windowStart - pageStart) * rowHeight);
+		const bottomSpacerHeight = Math.max(0, (pageEnd - windowEnd) * rowHeight);
+		if (
+			this._virtualState.start === windowStart
+			&& this._virtualState.end === windowEnd
+			&& this._virtualState.page === page
+			&& this._virtualState.perPage === perPage
+		) {
+			this._syncVirtualSpacers(body, windowStart, windowEnd, topSpacerHeight, bottomSpacerHeight);
+			return;
+		}
+
+		const isSameContext = this._virtualState.page === page && this._virtualState.perPage === perPage;
 		const prevStart = this._virtualState.start;
 		const prevEnd = this._virtualState.end;
 		const updateFrom = isSameContext
@@ -846,145 +846,145 @@ class VGDynamicTable extends BaseModule {
 		const updateTo = isSameContext
 			? Math.min(pageEnd, Math.max(prevEnd, windowEnd))
 			: pageEnd;
-		for (let index = updateFrom; index < updateTo; index += 1) {
-			const row = this._rows[index];
-			if (!row) {
-				continue;
-			}
-			row.hidden = index < windowStart || index >= windowEnd;
-		}
-		this._syncVirtualSpacers(body, windowStart, windowEnd, topSpacerHeight, bottomSpacerHeight);
-		this._virtualState.start = windowStart;
-		this._virtualState.end = windowEnd;
-		this._virtualState.page = page;
-		this._virtualState.perPage = perPage;
-		this._virtualState.rowHeight = rowHeight;
-	}
-
-	_resolveVirtualRowHeight(page, perPage, options = {}) {
-		const attrRowHeight = this._element.getAttribute('data-virtual-row-height');
-		if (attrRowHeight !== null && String(attrRowHeight).trim() !== '') {
-			return Math.max(24, this._normalizePositiveInt(attrRowHeight, 44));
-		}
-
-		const optionRowHeight = this._normalizePositiveInt(options.rowheight, 0);
-		const pageStart = Math.max(0, (page - 1) * perPage);
-		const pageEnd = Math.min(pageStart + perPage, this._rows.length);
-		const measuredHeight = this._measureVirtualRowHeight(pageStart, pageEnd);
-		if (measuredHeight > 0) {
-			return measuredHeight;
-		}
-		if (optionRowHeight > 0) {
-			return Math.max(24, optionRowHeight);
-		}
-		const cachedHeight = this._normalizePositiveInt(this._virtualState.rowHeight, 44);
-		return Math.max(24, cachedHeight);
-	}
-
-	_measureVirtualRowHeight(pageStart, pageEnd) {
-		const samples = [];
-		for (let index = pageStart; index < pageEnd; index += 1) {
-			const row = this._rows[index];
-			if (!row || row.hidden) {
-				continue;
-			}
-			const rect = row.getBoundingClientRect();
-			const height = Math.round(rect && rect.height ? rect.height : 0);
-			if (height > 0) {
-				samples.push(height);
-			}
-			if (samples.length >= 6) {
-				break;
-			}
-		}
-		if (!samples.length) {
-			return 0;
-		}
-		const total = samples.reduce((sum, value) => sum + value, 0);
-		return Math.max(24, Math.round(total / samples.length));
-	}
-
-	_syncVirtualSpacers(body, windowStart, windowEnd, topHeight, bottomHeight) {
-		const columns = this._getRenderedColumnsCount();
-		const topSpacer = this._ensureVirtualSpacer('top', columns);
-		const bottomSpacer = this._ensureVirtualSpacer('bottom', columns);
-		const firstVisibleRow = this._rows[windowStart] || null;
-		const afterVisibleRow = this._rows[windowEnd] || null;
-
-		this._updateVirtualSpacer(topSpacer, topHeight, columns);
-		this._updateVirtualSpacer(bottomSpacer, bottomHeight, columns);
-
-		if (firstVisibleRow) {
-			body.insertBefore(topSpacer, firstVisibleRow);
-		} else if (!topSpacer.parentElement) {
-			body.appendChild(topSpacer);
-		}
-
-		if (afterVisibleRow) {
-			body.insertBefore(bottomSpacer, afterVisibleRow);
-		} else {
-			body.appendChild(bottomSpacer);
-		}
-	}
-
-	_ensureVirtualSpacer(position, columns) {
-		const current = this._virtualSpacers && this._virtualSpacers[position]
-			? this._virtualSpacers[position]
-			: null;
-		if (current && current.isConnected) {
-			this._syncVirtualSpacerColumns(current, columns);
-			return current;
-		}
-
-		const spacer = document.createElement('tr');
-		spacer.setAttribute('data-virtual-spacer', '1');
-		spacer.setAttribute('data-virtual-spacer-position', position);
-		spacer.setAttribute('data-group-header', '1');
-		spacer.setAttribute('aria-hidden', 'true');
-		const cell = document.createElement('td');
-		cell.setAttribute('data-virtual-spacer-cell', '1');
-		cell.colSpan = Math.max(1, columns);
-		spacer.appendChild(cell);
-		this._virtualSpacers[position] = spacer;
-		return spacer;
-	}
-
-	_syncVirtualSpacerColumns(spacer, columns) {
-		if (!spacer || !spacer.cells || !spacer.cells[0]) {
-			return;
-		}
-		spacer.cells[0].colSpan = Math.max(1, columns);
-	}
-
-	_updateVirtualSpacer(spacer, height, columns) {
-		if (!spacer || !spacer.cells || !spacer.cells[0]) {
-			return;
-		}
-		const safeHeight = Math.max(0, Math.round(height));
-		this._syncVirtualSpacerColumns(spacer, columns);
-		const cell = spacer.cells[0];
-		cell.style.height = `${safeHeight}px`;
-		spacer.hidden = safeHeight <= 0;
-	}
-
-	_teardownVirtualWindow() {
-		this._teardownVirtualizationBinding();
-		if (this._virtualState.frame && typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
-			window.cancelAnimationFrame(this._virtualState.frame);
-		}
-		this._virtualState.start = 0;
-		this._virtualState.end = 0;
-		this._virtualState.page = -1;
-		this._virtualState.perPage = -1;
-		this._virtualState.frame = 0;
-		this._virtualState.lastScrollTop = -1;
-		Object.keys(this._virtualSpacers || {}).forEach((key) => {
-			const spacer = this._virtualSpacers[key];
-			if (spacer && spacer.parentElement) {
-				spacer.parentElement.removeChild(spacer);
-			}
-		});
-	}
+		for (let index = updateFrom; index < updateTo; index += 1) {
+			const row = this._rows[index];
+			if (!row) {
+				continue;
+			}
+			row.hidden = index < windowStart || index >= windowEnd;
+		}
+		this._syncVirtualSpacers(body, windowStart, windowEnd, topSpacerHeight, bottomSpacerHeight);
+		this._virtualState.start = windowStart;
+		this._virtualState.end = windowEnd;
+		this._virtualState.page = page;
+		this._virtualState.perPage = perPage;
+		this._virtualState.rowHeight = rowHeight;
+	}
+
+	_resolveVirtualRowHeight(page, perPage, options = {}) {
+		const attrRowHeight = this._element.getAttribute('data-virtual-row-height');
+		if (attrRowHeight !== null && String(attrRowHeight).trim() !== '') {
+			return Math.max(24, this._normalizePositiveInt(attrRowHeight, 44));
+		}
+
+		const optionRowHeight = this._normalizePositiveInt(options.rowheight, 0);
+		const pageStart = Math.max(0, (page - 1) * perPage);
+		const pageEnd = Math.min(pageStart + perPage, this._rows.length);
+		const measuredHeight = this._measureVirtualRowHeight(pageStart, pageEnd);
+		if (measuredHeight > 0) {
+			return measuredHeight;
+		}
+		if (optionRowHeight > 0) {
+			return Math.max(24, optionRowHeight);
+		}
+		const cachedHeight = this._normalizePositiveInt(this._virtualState.rowHeight, 44);
+		return Math.max(24, cachedHeight);
+	}
+
+	_measureVirtualRowHeight(pageStart, pageEnd) {
+		const samples = [];
+		for (let index = pageStart; index < pageEnd; index += 1) {
+			const row = this._rows[index];
+			if (!row || row.hidden) {
+				continue;
+			}
+			const rect = row.getBoundingClientRect();
+			const height = Math.round(rect && rect.height ? rect.height : 0);
+			if (height > 0) {
+				samples.push(height);
+			}
+			if (samples.length >= 6) {
+				break;
+			}
+		}
+		if (!samples.length) {
+			return 0;
+		}
+		const total = samples.reduce((sum, value) => sum + value, 0);
+		return Math.max(24, Math.round(total / samples.length));
+	}
+
+	_syncVirtualSpacers(body, windowStart, windowEnd, topHeight, bottomHeight) {
+		const columns = this._getRenderedColumnsCount();
+		const topSpacer = this._ensureVirtualSpacer('top', columns);
+		const bottomSpacer = this._ensureVirtualSpacer('bottom', columns);
+		const firstVisibleRow = this._rows[windowStart] || null;
+		const afterVisibleRow = this._rows[windowEnd] || null;
+
+		this._updateVirtualSpacer(topSpacer, topHeight, columns);
+		this._updateVirtualSpacer(bottomSpacer, bottomHeight, columns);
+
+		if (firstVisibleRow) {
+			body.insertBefore(topSpacer, firstVisibleRow);
+		} else if (!topSpacer.parentElement) {
+			body.appendChild(topSpacer);
+		}
+
+		if (afterVisibleRow) {
+			body.insertBefore(bottomSpacer, afterVisibleRow);
+		} else {
+			body.appendChild(bottomSpacer);
+		}
+	}
+
+	_ensureVirtualSpacer(position, columns) {
+		const current = this._virtualSpacers && this._virtualSpacers[position]
+			? this._virtualSpacers[position]
+			: null;
+		if (current && current.isConnected) {
+			this._syncVirtualSpacerColumns(current, columns);
+			return current;
+		}
+
+		const spacer = document.createElement('tr');
+		spacer.setAttribute('data-virtual-spacer', '1');
+		spacer.setAttribute('data-virtual-spacer-position', position);
+		spacer.setAttribute('data-group-header', '1');
+		spacer.setAttribute('aria-hidden', 'true');
+		const cell = document.createElement('td');
+		cell.setAttribute('data-virtual-spacer-cell', '1');
+		cell.colSpan = Math.max(1, columns);
+		spacer.appendChild(cell);
+		this._virtualSpacers[position] = spacer;
+		return spacer;
+	}
+
+	_syncVirtualSpacerColumns(spacer, columns) {
+		if (!spacer || !spacer.cells || !spacer.cells[0]) {
+			return;
+		}
+		spacer.cells[0].colSpan = Math.max(1, columns);
+	}
+
+	_updateVirtualSpacer(spacer, height, columns) {
+		if (!spacer || !spacer.cells || !spacer.cells[0]) {
+			return;
+		}
+		const safeHeight = Math.max(0, Math.round(height));
+		this._syncVirtualSpacerColumns(spacer, columns);
+		const cell = spacer.cells[0];
+		cell.style.height = `${safeHeight}px`;
+		spacer.hidden = safeHeight <= 0;
+	}
+
+	_teardownVirtualWindow() {
+		this._teardownVirtualizationBinding();
+		if (this._virtualState.frame && typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
+			window.cancelAnimationFrame(this._virtualState.frame);
+		}
+		this._virtualState.start = 0;
+		this._virtualState.end = 0;
+		this._virtualState.page = -1;
+		this._virtualState.perPage = -1;
+		this._virtualState.frame = 0;
+		this._virtualState.lastScrollTop = -1;
+		Object.keys(this._virtualSpacers || {}).forEach((key) => {
+			const spacer = this._virtualSpacers[key];
+			if (spacer && spacer.parentElement) {
+				spacer.parentElement.removeChild(spacer);
+			}
+		});
+	}
 
 
 	_normalizePositiveInt(value, fallback) {
@@ -1003,7 +1003,7 @@ class VGDynamicTable extends BaseModule {
 	}
 
 	_restorePersistentState() {
-		const storedLocale = this._readPersistentState('locale');
+		const storedLocale = this._readPersistentState('locale');
 		if (storedLocale) {
 			this._params.locale = String(storedLocale).toLowerCase().trim();
 		}
@@ -1028,9 +1028,9 @@ class VGDynamicTable extends BaseModule {
 		}
 
 		const attrNameMap = {
-			locale: 'data-persistence-locale',
-			filtersApplyMode: 'data-persistence-filters-apply-mode',
-		};
+			locale: 'data-persistence-locale',
+			filtersApplyMode: 'data-persistence-filters-apply-mode',
+		};
 		const attrName = attrNameMap[key];
 		if (attrName) {
 			const attrValue = this._element.getAttribute(attrName);
@@ -3653,7 +3653,7 @@ class VGDynamicTable extends BaseModule {
 		this._syncCloneStickyHeader();
 	}
 
-	_renderRemoteRows(rows) {
+	_renderRemoteRows(rows) {
 		const body = this._getBody();
 
 		if (!rows.length) {