141 lines
3.3 KiB
JavaScript
141 lines
3.3 KiB
JavaScript
/* eslint-disable no-console */
|
|
import { Scope } from "../core/scope.js";
|
|
import domObjects from "../utils/domObjects.js";
|
|
import { parentNode } from "../utils/domUtils.js";
|
|
import extend from "../utils/extend.js";
|
|
import is from "../utils/is.js";
|
|
import * as 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'
|
|
}; // eslint-disable-next-line no-undef
|
|
|
|
const isProduction = "development" === '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) {
|
|
const value = element.style[prop] || win.window.getComputedStyle(element)[prop];
|
|
return styleRe.test((value || '').toString());
|
|
}
|
|
|
|
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=plugin.js.map
|