UNPKG

@wordpress/editor

Version:
86 lines (84 loc) 3.11 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // packages/editor/src/utils/device-type.js var device_type_exports = {}; __export(device_type_exports, { VIEWPORT_STATE_BY_DEVICE_TYPE: () => VIEWPORT_STATE_BY_DEVICE_TYPE, getCanvasWidthByDeviceType: () => getCanvasWidthByDeviceType, getDeviceTypeByCanvasWidth: () => getDeviceTypeByCanvasWidth }); module.exports = __toCommonJS(device_type_exports); var import_global_styles_engine = require("@wordpress/global-styles-engine"); var import_lock_unlock = require("../lock-unlock.cjs"); var { getViewportBreakpoints, getViewportBreakpointValueInPixels } = (0, import_lock_unlock.unlock)( import_global_styles_engine.privateApis ); var VIEWPORT_KEY_BY_DEVICE_TYPE = { Tablet: "tablet", Mobile: "mobile" }; var DESKTOP_DEVICE_TYPE = "Desktop"; var TABLET_DEVICE_TYPE = "Tablet"; var MOBILE_DEVICE_TYPE = "Mobile"; var DEVICE_PREVIEW_WIDTH_OFFSET = 1; var VIEWPORT_STATE_BY_DEVICE_TYPE = { Desktop: "default", Tablet: "@tablet", Mobile: "@mobile" }; function getDeviceTypeByCanvasWidth(canvasWidth, viewportSettings) { const width = getViewportBreakpointValueInPixels(canvasWidth); const breakpoints = getViewportBreakpoints(viewportSettings); if (width && width <= getViewportBreakpointValueInPixels(breakpoints.mobile)) { return MOBILE_DEVICE_TYPE; } if (width && width <= getViewportBreakpointValueInPixels(breakpoints.tablet)) { return TABLET_DEVICE_TYPE; } return DESKTOP_DEVICE_TYPE; } function getCanvasWidthByDeviceType(deviceType, viewportSettings) { const viewportKey = VIEWPORT_KEY_BY_DEVICE_TYPE[deviceType]; if (!viewportKey) { return void 0; } const breakpoints = getViewportBreakpoints(viewportSettings); const width = getViewportBreakpointValueInPixels( breakpoints[viewportKey] ); if (width === void 0) { return void 0; } let lowerBreakpoint = 0; if (deviceType === TABLET_DEVICE_TYPE) { lowerBreakpoint = getViewportBreakpointValueInPixels(breakpoints.mobile) ?? 0; } const offset = Math.min( DEVICE_PREVIEW_WIDTH_OFFSET, (width - lowerBreakpoint) / 2 ); return width - offset; } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { VIEWPORT_STATE_BY_DEVICE_TYPE, getCanvasWidthByDeviceType, getDeviceTypeByCanvasWidth }); //# sourceMappingURL=device-type.cjs.map