UNPKG

grid-layout-plus-no-pnpm

Version:

<p align="center"> <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" /> </a> </p>

1 lines 5.7 kB
{"version":3,"file":"responsive.mjs","sources":["../../src/helpers/responsive.ts"],"sourcesContent":["import { cloneLayout, compact, correctBounds } from './common'\r\n\r\nimport type { Layout, Breakpoint, Breakpoints, ResponsiveLayout } from './types'\r\n\r\n/**\r\n * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).\r\n *\r\n * @param breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})\r\n * @param width Screen width.\r\n * @return Highest breakpoint that is less than width.\r\n */\r\nexport function getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint {\r\n const sorted = sortBreakpoints(breakpoints)\r\n let matching = sorted[0]\r\n for (let i = 1, len = sorted.length; i < len; i++) {\r\n const breakpointName = sorted[i]\r\n if (width > breakpoints[breakpointName]) matching = breakpointName\r\n }\r\n return matching\r\n}\r\n\r\n/**\r\n * Given a breakpoint, get the # of cols set for it.\r\n * @param breakpoint Breakpoint name.\r\n * @param cols Map of breakpoints to cols.\r\n * @return Number of cols.\r\n */\r\nexport function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number {\r\n if (!cols[breakpoint]) {\r\n throw new Error('ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!')\r\n }\r\n return cols[breakpoint]\r\n}\r\n\r\n/**\r\n * Given existing layouts and a new breakpoint, find or generate a new layout.\r\n *\r\n * This finds the layout above the new one and generates from it, if it exists.\r\n *\r\n * @param orgLayout Original layout.\r\n * @param layouts Existing layouts.\r\n * @param breakpoints All breakpoints.\r\n * @param breakpoint New breakpoint.\r\n * @param breakpoint Last breakpoint (for fallback).\r\n * @param cols Column count at new breakpoint.\r\n * @param verticalCompact Whether or not to compact the layout\r\n * vertically.\r\n * @return New layout.\r\n */\r\nexport function findOrGenerateResponsiveLayout(orgLayout: Layout, layouts: ResponsiveLayout, breakpoints: Breakpoints,\r\n breakpoint: Breakpoint, lastBreakpoint: Breakpoint,\r\n cols: number, verticalCompact: boolean): Layout {\r\n // If it already exists, just return it.\r\n if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint])\r\n // Find or generate the next layout\r\n let layout = orgLayout\r\n\r\n const breakpointsSorted = sortBreakpoints(breakpoints)\r\n const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint))\r\n for (let i = 0, len = breakpointsAbove.length; i < len; i++) {\r\n const b = breakpointsAbove[i]\r\n if (layouts[b]) {\r\n layout = layouts[b]\r\n break\r\n }\r\n }\r\n layout = cloneLayout(layout || []) // clone layout so we don't modify existing items\r\n return compact(correctBounds(layout, { cols }), verticalCompact)\r\n}\r\n\r\nexport function generateResponsiveLayout(layout: Layout, breakpoints: Breakpoints,\r\n breakpoint: Breakpoint, lastBreakpoint: Breakpoint,\r\n cols: number, verticalCompact: boolean): Layout {\r\n // If it already exists, just return it.\r\n /* if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);\r\n // Find or generate the next layout\r\n let layout = layouts[lastBreakpoint]; */\r\n /* const breakpointsSorted = sortBreakpoints(breakpoints);\r\nconst breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));\r\nfor (let i = 0, len = breakpointsAbove.length; i < len; i++) {\r\n const b = breakpointsAbove[i];\r\n if (layouts[b]) {\r\n layout = layouts[b];\r\n break;\r\n }\r\n} */\r\n layout = cloneLayout(layout || []) // clone layout so we don't modify existing items\r\n return compact(correctBounds(layout, { cols }), verticalCompact)\r\n}\r\n\r\n/**\r\n * Given breakpoints, return an array of breakpoints sorted by width. This is usually\r\n * e.g. ['xxs', 'xs', 'sm', ...]\r\n *\r\n * @param breakpoints Key/value pair of breakpoint names to widths.\r\n * @return Sorted breakpoints.\r\n */\r\nexport function sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint> {\r\n const keys = Object.keys(breakpoints) as Array<Breakpoint>\r\n return keys.sort((a, b) => breakpoints[a] - breakpoints[b])\r\n}\r\n"],"names":["getBreakpointFromWidth","breakpoints","width","sorted","sortBreakpoints","matching","i","len","breakpointName","getColsFromBreakpoint","breakpoint","cols","findOrGenerateResponsiveLayout","orgLayout","layouts","lastBreakpoint","verticalCompact","cloneLayout","layout","breakpointsSorted","breakpointsAbove","b","compact","correctBounds","a"],"mappings":";AAWgB,SAAAA,EAAuBC,GAA0BC,GAA2B;AACpF,QAAAC,IAASC,EAAgBH,CAAW;AACtC,MAAAI,IAAWF,EAAO,CAAC;AACvB,WAASG,IAAI,GAAGC,IAAMJ,EAAO,QAAQG,IAAIC,GAAKD,KAAK;AAC3C,UAAAE,IAAiBL,EAAOG,CAAC;AAC3B,IAAAJ,IAAQD,EAAYO,CAAc,MAAcH,IAAAG;AAAA;AAE/C,SAAAH;AACT;AAQgB,SAAAI,EAAsBC,GAAwBC,GAA2B;AACnF,MAAA,CAACA,EAAKD,CAAU;AAClB,UAAM,IAAI,MAAM,uDAAuDA,IAAa,cAAc;AAEpG,SAAOC,EAAKD,CAAU;AACxB;AAiBO,SAASE,EAA+BC,GAAmBC,GAA2Bb,GAC3FS,GAAwBK,GACxBJ,GAAcK,GAAkC;AAEhD,MAAIF,EAAQJ,CAAU;AAAU,WAAAO,EAAYH,EAAQJ,CAAU,CAAC;AAE/D,MAAIQ,IAASL;AAEP,QAAAM,IAAoBf,EAAgBH,CAAW,GAC/CmB,IAAmBD,EAAkB,MAAMA,EAAkB,QAAQT,CAAU,CAAC;AACtF,WAASJ,IAAI,GAAGC,IAAMa,EAAiB,QAAQd,IAAIC,GAAKD,KAAK;AACrD,UAAAe,IAAID,EAAiBd,CAAC;AACxB,QAAAQ,EAAQO,CAAC,GAAG;AACd,MAAAH,IAASJ,EAAQO,CAAC;AAClB;AAAA;AAAA;AAGK,SAAAH,IAAAD,EAAYC,KAAU,CAAA,CAAE,GAC1BI,EAAQC,EAAcL,GAAQ,EAAE,MAAAP,EAAM,CAAA,GAAGK,CAAe;AACjE;AA6BO,SAASZ,EAAgBH,GAA6C;AAEpE,SADM,OAAO,KAAKA,CAAW,EACxB,KAAK,CAACuB,GAAGH,MAAMpB,EAAYuB,CAAC,IAAIvB,EAAYoB,CAAC,CAAC;AAC5D;"}