vgapp 1.5.5 → 1.5.6

package/app/modules/vgtable/js/_responsive.js

@@ -0,0 +1,79 @@
+/**
+ * Описание: адаптер общего Responsive для представления VGTable.
+ * Возможности: отбор безопасных параметров пагинации и события таблицы; границы, наследование и подписки делегируются Responsive.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+import {Responsive} from "../../../utils/js/components/responsive";
+
+const object = (value) => value && typeof value === 'object' && !Array.isArray(value);
+
+// Только представление: page/per, callbacks, storage и параметры запросов не принимаются.
+const paginationProfile = (value) => {
+	const result = {};
+	if (!object(value)) return result;
+	if (value.maxButtons === null || (Number.isInteger(value.maxButtons) && value.maxButtons >= 3)) result.maxButtons = value.maxButtons;
+	if (['left', 'center', 'right', 'between'].includes(value.align)) result.align = value.align;
+	if (['top', 'bottom', 'both'].includes(value.position)) result.position = value.position;
+	if (object(value.size)) {
+		result.size = {};
+		if (typeof value.size.enabled === 'boolean') result.size.enabled = value.size.enabled;
+		if (value.size.label === false || typeof value.size.label === 'string') result.size.label = value.size.label;
+	}
+	if (object(value.quick) && [true, false, 'auto'].includes(value.quick.enabled)) result.quick = {enabled: value.quick.enabled};
+	return result;
+};
+
+class _responsive {
+	constructor(table, options, onChange) {
+		this._table = table;
+		this._onChange = onChange;
+		this._responsive = new Responsive({breakpoints: options.breakpoints, window: table.ownerDocument.defaultView});
+		this._profiles = Object.fromEntries(Object.keys(this._responsive.breakpoints).map((name) => [name, paginationProfile(options[name]?.pagination)]));
+		this._breakpoint = null;
+		this._pagination = {};
+		this._width = 0;
+		this._valid = this._responsive.isValid();
+	}
+
+	init() {
+		if (!this._valid) {
+			console.warn('VGTable: responsive.breakpoints must start at xs: 0 and increase through xxl.');
+			return this;
+		}
+		this.refresh();
+		this._responsive.subscribe(() => this.refresh());
+		return this;
+	}
+
+	refresh(force = false) {
+		if (!this._valid || !this._responsive) return this.getState();
+		this._width = this._responsive.viewport().width;
+		const breakpoint = this._responsive.getBreakpointKey(this._width);
+		if (!force && breakpoint === this._breakpoint) return this.getState();
+		const previous = this._breakpoint;
+		this._breakpoint = breakpoint;
+		this._pagination = this._responsive.resolve(this._profiles, {}, this._width);
+		this._onChange();
+		if (previous !== null && previous !== breakpoint) {
+			EventHandler.trigger(this._table, 'responsivechange.vg.table', {...this.getState(), previous});
+		}
+		return this.getState();
+	}
+
+	getState() {
+		return {
+			breakpoint: this._breakpoint,
+			width: this._responsive?.viewport().width ?? this._width,
+			reason: this._valid ? null : 'invalid-breakpoints',
+			pagination: {...this._pagination, size: {...this._pagination.size}, quick: {...this._pagination.quick}},
+		};
+	}
+
+	dispose() {
+		this._width = this._responsive?.viewport().width ?? this._width;
+		this._responsive?.dispose();
+		this._responsive = null;
+	}
+}
+
+export default _responsive;

package/app/modules/vgtable/js/vgtable.js

@@ -1,6 +1,6 @@
 /**
  * Описание: основной модуль базовых таблиц VGTable.
- * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, управление колонками и строками, сортировка, дерево, пагинация, выбор и panning.
+ * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, колонки и строки, сортировка, дерево, responsive-пагинация, выбор и panning.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -9,7 +9,8 @@ import Selectors from "../../../utils/js/dom/selectors";
 import _sorting from "./_sorting.js";
 import _panning from "./_panning.js";
 import _selection from "./_selection.js";
-import _pagination from "./_pagination.js";
+import _pagination from "./_pagination.js";
+import _responsive from "./_responsive.js";
 import _expandable from "./_expandable.js";
 import _stickyHeader from "./_sticky-header.js";
 import _fixedColumns from "./_fixed-columns.js";
@@ -63,7 +64,8 @@ class VGTable extends BaseModule {
 		this._panning = null;
 		this._selection = null;
 		this._expandable = null;
-		this._pagination = null;
+		this._pagination = null;
+		this._responsive = null;
 		this._filters = null;
 		this._search = null;
 		this._skeleton = null;
@@ -187,9 +189,17 @@ class VGTable extends BaseModule {
 			this._expandable.init();
 		}
 
-		// Включаем локальную или серверную пагинацию
-		if (!this._pagination && this._params.pagination.enabled === true) {
-			this._pagination = new _pagination(this._element, Object.assign({}, this._params.pagination, {
+		if (!this._responsive && this._params.responsive?.enabled === true) {
+			this._responsive = new _responsive(this._element, this._params.responsive, () => {
+				this._pagination?.updatePresentation(this._paginationOptions());
+			});
+			this._responsive.init();
+		}
+
+		// Включаем локальную или серверную пагинацию
+		if (!this._pagination && this._params.pagination.enabled === true) {
+			this._pagination = new _pagination(this._element, Object.assign({}, this._paginationOptions(), {
+				responsive: this._responsive?.getState().reason === null,
 				remote: this._isRemote,
 				onChange: (state) => this._handlePaginationChange(state),
 			}));
@@ -300,15 +310,27 @@ class VGTable extends BaseModule {
 		this._normalizeColumnsDataOptions();
 		this._normalizeRowReorderDataOptions();
 		if (this._remote) this._remote._options.labels = this._dictionary.remote || {};
-		this._pagination?.refresh?.();
+		this._pagination?.updatePresentation(this._paginationOptions());
 		this._expandable?.refresh?.();
 		this._columns?.refresh?.();
 		this._rowReorder?.refresh?.();
 		const state = this._states?.getState?.();
 		if (state) this._states.render(state.type);
 		EventHandler.trigger(this._element, 'localechange.vg.table', {locale: normalized});
-		return normalized;
-	}
+		return normalized;
+	}
+
+	/** Текущий брейкпоинт и накопленные переопределения; null при выключенном responsive. */
+	getResponsiveState() { return this._responsive?.getState() || null; }
+
+	/** Принудительно обновляет только адаптивное представление, без загрузки данных. */
+	refreshResponsive() { return this._responsive?.refresh(true) || null; }
+
+	_paginationOptions() {
+		const base = this._params.pagination;
+		const profile = this._responsive?.getState().pagination || {};
+		return {...base, ...profile, size: {...base.size, ...profile.size}, quick: {...base.quick, ...profile.quick}};
+	}
 
 	_mergeLocale(target, source) {
 		if (!target || !source || typeof source !== 'object') return target;
@@ -524,7 +546,11 @@ class VGTable extends BaseModule {
 		assign('ellipsis', (value) => { pagination.ellipsis = boolean(value); });
 		assign('ellipsis-hover', (value) => { pagination.ellipsisHover = boolean(value); });
 		assign('ellipsis-after', (value) => { pagination.threshold = number(value, pagination.threshold); });
-		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
+		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
+		assign('max-buttons', (value) => {
+			const parsed = Number(value);
+			pagination.maxButtons = Number.isInteger(parsed) && parsed >= 3 ? parsed : null;
+		});
 		assign('show-per-page', (value) => { pagination.size.enabled = boolean(value); });
 		assign('show-per-page-label', (value) => { pagination.size.label = boolean(value) ? 'Строк на странице' : false; });
 		assign('per-page-label', (value) => { pagination.size.label = value; });
@@ -1436,7 +1462,8 @@ class VGTable extends BaseModule {
 	/**
 	 * Очистка ресурсов
 	 */
-	dispose() {
+	dispose() {
+		this._responsive?.dispose();
 		if (this._remote) this._remote.dispose();
 		if (this._skeleton) this._skeleton.dispose();
 		if (this._urlState) this._urlState.dispose();

package/app/utils/js/components/responsive.js

@@ -0,0 +1,165 @@
+/**
+ * Описание: общий сервис брейкпоинтов и адаптивных настроек VGApp.
+ * Возможности: xs–xxl, глобальные и локальные границы, наследование профилей, подписки, viewport и эвристики устройства/touch.
+ */
+import {normalizeData} from "../functions";
+
+export const DEFAULT_BREAKPOINTS = Object.freeze({xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400});
+
+const plainObject = (value) => {
+	if (value === null || typeof value !== 'object') return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || Object.getPrototypeOf(prototype) === null;
+};
+const entries = (value) => Object.entries(value).filter(([key]) => !['__proto__', 'constructor', 'prototype'].includes(key));
+const clone = (value) => Array.isArray(value) ? value.map(clone)
+	: plainObject(value) ? Object.fromEntries(entries(value).map(([key, item]) => [key, clone(item)])) : value;
+
+// В профилях массив заменяется целиком, а не конкатенируется как в mergeDeepObject.
+const merge = (base, profile) => {
+	const result = plainObject(base) ? clone(base) : {};
+	if (plainObject(profile)) entries(profile).forEach(([key, value]) => {
+		result[key] = plainObject(value) ? merge(result[key], value) : clone(value);
+	});
+	return result;
+};
+
+export class Responsive {
+	constructor(options = {}) {
+		this._window = options.window === undefined ? (typeof window === 'undefined' ? null : window) : options.window;
+		const globalPoints = this._window?.Breakpoints ?? this._window?.breakpoints;
+		const globalMap = normalizeData(globalPoints ?? {});
+		const localMap = normalizeData(options.breakpoints ?? {});
+		const sourcesValid = plainObject(globalMap) && plainObject(localMap);
+		const combined = {...DEFAULT_BREAKPOINTS, ...(plainObject(globalMap) ? globalMap : {}), ...(plainObject(localMap) ? localMap : {})};
+		this._breakpoints = Object.freeze(Object.fromEntries(entries(combined).map(([key, value]) => [key,
+			typeof value === 'string' && value.trim() !== '' ? Number(value) : value,
+		])));
+		const standardNames = Object.keys(DEFAULT_BREAKPOINTS);
+		const widths = Object.values(this._breakpoints);
+		this._valid = sourcesValid && widths.every((width) => Number.isFinite(width) && width >= 0)
+			&& new Set(widths).size === widths.length
+			&& standardNames.every((name, index) => index === 0 ? this._breakpoints[name] === 0
+				: this._breakpoints[name] > this._breakpoints[standardNames[index - 1]]);
+		this._keys = this._valid ? Object.keys(this._breakpoints).sort((a, b) => this._breakpoints[a] - this._breakpoints[b]) : [];
+		this._subscribers = new Set();
+		this._previous = null;
+		this._boundResize = () => {
+			const state = this.getState();
+			if (state.breakpoint === this._previous) return;
+			const previous = this._previous;
+			this._previous = state.breakpoint;
+			Array.from(this._subscribers).forEach((subscriber) => {
+				if (!this._subscribers.has(subscriber)) return;
+				try { subscriber({...this.getState(), previous}); }
+				catch (error) {
+					if (typeof this._window?.reportError === 'function') this._window.reportError(error);
+					else console.error(error);
+				}
+			});
+		};
+	}
+
+	/** Копия границ; внешнее изменение не влияет на экземпляр. */
+	get breakpoints() { return {...this._breakpoints}; }
+	isValid() { return this._valid; }
+
+	/** Без аргумента — карта; имя — min-width; число (включая 0) — имя диапазона. */
+	breakpoint(point) {
+		if (point === undefined) return this.breakpoints;
+		if (typeof point === 'number') return this.getBreakpointKey(point);
+		return this.checkBreakpoint(point) ? this._breakpoints[point] : null;
+	}
+
+	checkBreakpoint(point) {
+		return this._valid && typeof point === 'string' && Object.prototype.hasOwnProperty.call(this._breakpoints, point);
+	}
+
+	breakpointDown(point) { return this.checkBreakpoint(point) && this.viewport().width < this._breakpoints[point]; }
+	breakpointUp(point) { return this.checkBreakpoint(point) && this.viewport().width >= this._breakpoints[point]; }
+
+	/** Полуоткрытый диапазон [start, end), без пересечения соседних диапазонов. */
+	breakpointBetween(start, end) {
+		const width = this.viewport().width;
+		return this.checkBreakpoint(start) && this.checkBreakpoint(end)
+			&& this._breakpoints[start] < this._breakpoints[end]
+			&& width >= this._breakpoints[start] && width < this._breakpoints[end];
+	}
+
+	getActiveBreakpoints(width = this.viewport().width) {
+		if (!this._valid || !Number.isFinite(width) || width < 0) return [];
+		return this._keys.filter((key) => width >= this._breakpoints[key]);
+	}
+
+	getBreakpointKey(width = this.viewport().width) { return this.getActiveBreakpoints(width).at(-1) ?? null; }
+
+	/** База + все достигнутые профили; вложенные объекты объединяются, массивы заменяются. */
+	resolve(profiles = {}, base = {}, width = this.viewport().width) {
+		return this.getActiveBreakpoints(width).reduce((result, key) => merge(result, profiles?.[key]), merge({}, base));
+	}
+
+	getState() {
+		const viewport = this.viewport();
+		return {...viewport, breakpoint: this.getBreakpointKey(viewport.width), active: this.getActiveBreakpoints(viewport.width),
+			reason: this._valid ? null : 'invalid-breakpoints'};
+	}
+
+	/** Уведомляет только о смене диапазона; возвращает функцию отписки. */
+	subscribe(callback, {immediate = false} = {}) {
+		if (typeof callback !== 'function') throw new TypeError('Responsive.subscribe expects a function.');
+		if (!this._valid) return () => {};
+		const subscriber = (state) => callback(state);
+		if (this._subscribers.size === 0) {
+			this._previous = this.getBreakpointKey();
+			this._window?.addEventListener('resize', this._boundResize);
+		}
+		this._subscribers.add(subscriber);
+		const unsubscribe = () => {
+			this._subscribers.delete(subscriber);
+			if (this._subscribers.size === 0) this._window?.removeEventListener('resize', this._boundResize);
+		};
+		if (immediate) {
+			try { callback({...this.getState(), previous: null}); }
+			catch (error) { unsubscribe(); throw error; }
+		}
+		return unsubscribe;
+	}
+
+	dispose() {
+		this._window?.removeEventListener('resize', this._boundResize);
+		this._subscribers.clear();
+	}
+
+	viewport() {
+		return {width: this._window?.innerWidth ?? 0, height: this._window?.innerHeight ?? 0};
+	}
+
+	/** Возможность touch-ввода, не классификация телефона или планшета. */
+	detectTouchDevice() {
+		return !!this._window && (Number(this._window.navigator?.maxTouchPoints) > 0 || 'ontouchstart' in this._window);
+	}
+
+	/** Эвристики устройства не используются при выборе responsive-профилей. */
+	isMobileDevice() {
+		if (!this._window) return false;
+		const userAgent = this._window.navigator?.userAgent || '';
+		return /Android|iPhone|iPad|iPod/i.test(userAgent)
+			|| (this.detectTouchDevice() && this.viewport().width < 768 && this._window.devicePixelRatio >= 2);
+	}
+
+	isTabletDevice() {
+		if (!this._window) return false;
+		const navigator = this._window.navigator || {};
+		const userAgent = (navigator.userAgent || '').toLowerCase();
+		const {width, height} = this.viewport();
+		const short = Math.min(width, height);
+		const long = Math.max(width, height);
+		return /ipad/.test(userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+			|| (/android/.test(userAgent) && !/mobile/.test(userAgent) && long > 800)
+			|| (this.detectTouchDevice() && short >= 600 && short <= 1200 && long >= 800 && long <= 1600);
+	}
+
+	detectDevice() {
+		return this.isTabletDevice() ? 'tablet' : this.isMobileDevice() ? 'mobile' : 'desktop';
+	}
+}