@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
241 lines (240 loc) • 9.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.buildQuery = buildQuery;
exports.convertToMediaQuery = convertToMediaQuery;
exports.createMediaQueryListener = createMediaQueryListener;
exports.isMatchMediaSupported = exports.defaultBreakpoints = void 0;
exports.makeMediaQueryList = makeMediaQueryList;
exports.onMediaQueryChange = onMediaQueryChange;
require("core-js/modules/es.string.replace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _componentHelper = require("./component-helper");
var _helpers = require("./helpers");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const defaultBreakpoints = exports.defaultBreakpoints = {
small: '40em',
medium: '60em',
large: '72em',
'x-large': '80em',
'xx-large': '90em'
};
function onMediaQueryChange(property, callback) {
let {
runOnInit = false
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
let query = property;
let when = null;
let not = null;
if (property && typeof property === 'object') {
query = null;
when = property.when || property;
not = property.not;
}
const mediaQueryList = makeMediaQueryList({
query,
when,
not
});
if (runOnInit) {
if (typeof callback === 'function') {
callback(mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.matches, mediaQueryList);
}
}
return createMediaQueryListener(mediaQueryList, callback);
}
const isMatchMediaSupported = () => typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
exports.isMatchMediaSupported = isMatchMediaSupported;
function makeMediaQueryList() {
let {
query,
when,
not = null
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let options = arguments.length > 2 ? arguments[2] : undefined;
const isSupported = isMatchMediaSupported();
if (options !== null && options !== void 0 && options.disabled || !isSupported) {
return null;
}
if (when) {
query = buildQuery({
query,
when,
not
}, breakpoints, options);
}
const mediaQueryString = convertToMediaQuery(query, breakpoints, options);
const mediaQueryList = window.matchMedia(mediaQueryString);
if (options !== null && options !== void 0 && options.log) {
(0, _helpers.warn)('MediaQuery:', mediaQueryString);
}
return mediaQueryList;
}
function createMediaQueryListener(mediaQueryList, callback) {
if (!mediaQueryList) {
return () => null;
}
const listener = event => {
if (typeof callback === 'function') {
callback(event === null || event === void 0 ? void 0 : event.matches, event);
}
};
if (mediaQueryList !== null && mediaQueryList !== void 0 && mediaQueryList.addEventListener) {
mediaQueryList.addEventListener('change', listener);
}
return () => {
if (mediaQueryList !== null && mediaQueryList !== void 0 && mediaQueryList.removeEventListener) {
mediaQueryList.removeEventListener('change', listener);
}
};
}
function buildQuery() {
let {
query = null,
when = null,
not = null
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let breakpoints = arguments.length > 1 ? arguments[1] : undefined;
let options = arguments.length > 2 ? arguments[2] : undefined;
if (when) {
if (typeof when === 'string') {
when = when.split(/[ ,]/g);
}
let listOfQueries = [];
if (Array.isArray(when)) {
listOfQueries = listOfQueries.concat(combineQueries(when, breakpoints, options));
} else if (typeof when === 'object') {
const queryItem = convertToMediaQuery(when, breakpoints, options);
if (queryItem) {
listOfQueries.push(queryItem);
}
}
if (listOfQueries.length > 0) {
query = [listOfQueries.join(' '), query || ''].filter(Boolean).join(' and ').replace(/ +/g, ' ').replace(/ ,/g, ',');
}
}
if ((0, _componentHelper.isTrue)(not)) {
query = reverseQuery(String(query));
}
return query || 'not';
}
function reverseQuery(query) {
if (query.startsWith('not')) {
return query.replace(/^not +/, '');
}
if (!/^(screen|all|print|speech)/.test(query)) {
query = `all and ${query}`;
}
return `not ${query}`;
}
function combineQueries(queries) {
let breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let options = arguments.length > 2 ? arguments[2] : undefined;
return queries.reduce((listOfQueries, when, i, arr) => {
if (breakpoints) {
breakpoints = mergeBreakpoints(breakpoints);
}
const query = convertToMediaQuery(when, breakpoints, options);
if (query) {
if (query !== 'and' && arr[i - 1] !== 'and') {
listOfQueries.push(', ');
}
listOfQueries.push(query);
}
return listOfQueries;
}, []).filter((query, i) => {
return !(i === 0 && query.startsWith(', '));
});
}
function mergeBreakpoints(breakpoints) {
return Object.entries(_objectSpread(_objectSpread({}, defaultBreakpoints), breakpoints)).sort((a, b) => a[1] > b[1] ? 1 : -1).reduce((acc, _ref) => {
let [key, value] = _ref;
acc[key] = value;
return acc;
}, {});
}
function convertToMediaQuery(query) {
let breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let options = arguments.length > 2 ? arguments[2] : undefined;
if (typeof query === 'string') {
return query;
}
if (Array.isArray(query)) {
return query.reduce((acc, q, index) => {
acc += objToMediaQuery(q, breakpoints, options);
if (index < query.length - 1) {
if (q !== 'and' && query[index + 1] !== 'and') {
acc += ',';
}
acc += ' ';
}
return acc;
}, '');
}
return objToMediaQuery(query, breakpoints, options);
}
function objToMediaQuery(obj) {
let breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let options = arguments.length > 2 ? arguments[2] : undefined;
if (typeof obj === 'string') {
return obj;
}
let hasNot = false;
let query = Object.keys(obj).reduce((acc, feature) => {
let value = obj[feature];
feature = (0, _componentHelper.toKebabCase)(feature);
if (feature === 'not') {
hasNot = true;
return acc;
}
if (feature === 'monochrome') {
feature = `(${feature})`;
}
if (feature === 'min' || feature === 'max') {
feature = `${feature}-width`;
}
if (typeof value === 'number' && /[height|width]$/.test(feature)) {
value = value + 'em';
}
if (value === true) {
acc.push(feature);
} else if (value === false) {
acc.push('not ' + feature);
} else {
value = getValueByFeature(value, breakpoints);
if (typeof value !== 'undefined') {
acc.push(`(${feature}: ${value})`);
}
}
return acc;
}, []);
if (Array.isArray(query)) {
query = query.length > 0 ? query.join(' and ') : query.join('');
}
if (hasNot) {
query = reverseQuery(query);
}
if (options !== null && options !== void 0 && options.correctRange && /\(min-width: [0-9]+em\)/.test(query)) {
const size = parseFloat(query.match(/\(min-width: ([0-9]+)em\)/)[1]) || 0;
if (size > 0) {
const correctedSize = (size * 16 + 0.1) / 16;
query = query.replace(/(min-width: [0-9]+em)/, `min-width: ${correctedSize}em`);
}
}
return query;
}
function getValueByFeature(value) {
let types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
types = types || defaultBreakpoints;
if (Object.prototype.hasOwnProperty.call(types, value)) {
value = types[value];
}
return value;
}
//# sourceMappingURL=MediaQueryUtils.js.map