/* eslint-disable no-console */ /* global process */ import domObjects from "../utils/domObjects.js"; import { parentNode } from "../utils/domUtils.js"; import extend from "../utils/extend.js"; import * as is from "../utils/is.js"; import win from "../utils/window.js"; var CheckName; (function (CheckName) { CheckName["touchAction"] = "touchAction"; CheckName["boxSizing"] = "boxSizing"; CheckName["noListeners"] = "noListeners"; })(CheckName || (CheckName = {})); const prefix = '[interact.js] '; const links = { touchAction: 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action', boxSizing: 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing' }; const isProduction = undefined === 'production'; // eslint-disable-next-line no-restricted-syntax function install(scope, { logger } = {}) { const { Interactable, defaults } = scope; scope.logger = logger || console; defaults.base.devTools = { ignore: {} }; Interactable.prototype.devTools = function (options) { if (options) { extend(this.options.devTools, options); return this; } return this.options.devTools; }; } const checks = [{ name: CheckName.touchAction, perform({ element }) { return !parentHasStyle(element, 'touchAction', /pan-|pinch|none/); }, getInfo({ element }) { return [element, links.touchAction]; }, text: 'Consider adding CSS "touch-action: none" to this element\n' }, { name: CheckName.boxSizing, perform(interaction) { const { element } = interaction; return interaction.prepared.name === 'resize' && element instanceof domObjects.HTMLElement && !hasStyle(element, 'boxSizing', /border-box/); }, text: 'Consider adding CSS "box-sizing: border-box" to this resizable element', getInfo({ element }) { return [element, links.boxSizing]; } }, { name: CheckName.noListeners, perform(interaction) { const actionName = interaction.prepared.name; const moveListeners = interaction.interactable.events.types[`${actionName}move`] || []; return !moveListeners.length; }, getInfo(interaction) { return [interaction.prepared.name, interaction.interactable]; }, text: 'There are no listeners set for this action' }]; function hasStyle(element, prop, styleRe) { return styleRe.test(element.style[prop] || win.window.getComputedStyle(element)[prop]); } function parentHasStyle(element, prop, styleRe) { let parent = element; while (is.element(parent)) { if (hasStyle(parent, prop, styleRe)) { return true; } parent = parentNode(parent); } return false; } const id = 'dev-tools'; const defaultExport = isProduction ? { id, install: () => {} } : { id, install, listeners: { 'interactions:action-start': ({ interaction }, scope) => { for (const check of checks) { const options = interaction.interactable && interaction.interactable.options; if (!(options && options.devTools && options.devTools.ignore[check.name]) && check.perform(interaction)) { scope.logger.warn(prefix + check.text, ...check.getInfo(interaction)); } } } }, checks, CheckName, links, prefix }; export default defaultExport; //# sourceMappingURL=index.js.map