UNPKG

grid-layout-plus

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.57 kB
{"version":3,"file":"responsive.mjs","sources":["../../src/helpers/responsive.ts"],"sourcesContent":["import { cloneLayout, compact, correctBounds } from './common'\n\nimport type { Breakpoint, Breakpoints, Layout, ResponsiveLayout } from './types'\n\n/**\n * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).\n *\n * @param breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})\n * @param width Screen width.\n * @return Highest breakpoint that is less than width.\n */\nexport function getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint {\n const sorted = sortBreakpoints(breakpoints)\n let matching = sorted[0]\n for (let i = 1, len = sorted.length; i < len; i++) {\n const breakpointName = sorted[i]\n if (width > breakpoints[breakpointName]) matching = breakpointName\n }\n return matching\n}\n\n/**\n * Given a breakpoint, get the # of cols set for it.\n * @param breakpoint Breakpoint name.\n * @param cols Map of breakpoints to cols.\n * @return Number of cols.\n */\nexport function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number {\n if (!cols[breakpoint]) {\n throw new Error(\n 'ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!',\n )\n }\n return cols[breakpoint]\n}\n\n/**\n * Given existing layouts and a new breakpoint, find or generate a new layout.\n *\n * This finds the layout above the new one and generates from it, if it exists.\n *\n * @param orgLayout Original layout.\n * @param layouts Existing layouts.\n * @param breakpoints All breakpoints.\n * @param breakpoint New breakpoint.\n * @param breakpoint Last breakpoint (for fallback).\n * @param cols Column count at new breakpoint.\n * @param verticalCompact Whether or not to compact the layout\n * vertically.\n * @return New layout.\n */\nexport function findOrGenerateResponsiveLayout(\n orgLayout: Layout,\n layouts: ResponsiveLayout,\n breakpoints: Breakpoints,\n breakpoint: Breakpoint,\n lastBreakpoint: Breakpoint,\n cols: number,\n verticalCompact: boolean,\n): Layout {\n debugger\n // If it already exists, just return it.\n if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint])\n // Find or generate the next layout\n let layout = orgLayout\n\n const breakpointsSorted = sortBreakpoints(breakpoints)\n const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint))\n for (let i = 0, len = breakpointsAbove.length; i < len; i++) {\n const b = breakpointsAbove[i]\n if (layouts[b]) {\n layout = layouts[b]\n break\n }\n }\n layout = cloneLayout(layout || []) // clone layout so we don't modify existing items\n return compact(correctBounds(layout, { cols }), verticalCompact)\n}\n\nexport function generateResponsiveLayout(\n layout: Layout,\n breakpoints: Breakpoints,\n breakpoint: Breakpoint,\n lastBreakpoint: Breakpoint,\n cols: number,\n verticalCompact: boolean,\n): Layout {\n // If it already exists, just return it.\n /* if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);\n // Find or generate the next layout\n let layout = layouts[lastBreakpoint]; */\n /* const breakpointsSorted = sortBreakpoints(breakpoints);\nconst breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));\nfor (let i = 0, len = breakpointsAbove.length; i < len; i++) {\n const b = breakpointsAbove[i];\n if (layouts[b]) {\n layout = layouts[b];\n break;\n }\n} */\n layout = cloneLayout(layout || []) // clone layout so we don't modify existing items\n return compact(correctBounds(layout, { cols }), verticalCompact)\n}\n\n/**\n * Given breakpoints, return an array of breakpoints sorted by width. This is usually\n * e.g. ['xxs', 'xs', 'sm', ...]\n *\n * @param breakpoints Key/value pair of breakpoint names to widths.\n * @return Sorted breakpoints.\n */\nexport function sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint> {\n const keys = Object.keys(breakpoints) as Array<Breakpoint>\n return keys.sort((a, b) => breakpoints[a] - breakpoints[b])\n}\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;AAC/B,IAAIJ,IAAQD,EAAYO,CAAc,MAAcH,IAAAG;AAAA,EAAA;AAE/C,SAAAH;AACT;AAQgB,SAAAI,EAAsBC,GAAwBC,GAA2B;AACnF,MAAA,CAACA,EAAKD,CAAU;AAClB,UAAM,IAAI;AAAA,MACR,uDAAuDA,IAAa;AAAA,IACtE;AAEF,SAAOC,EAAKD,CAAU;AACxB;AAiBO,SAASE,EACdC,GACAC,GACAb,GACAS,GACAK,GACAJ,GACAK,GACQ;AAGR,MAAIF,EAAQJ,CAAU,UAAUO,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,IAAA;AAAA,EACF;AAEO,SAAAH,IAAAD,EAAYC,KAAU,EAAE,GAC1BI,EAAQC,EAAcL,GAAQ,EAAE,MAAAP,EAAK,CAAC,GAAGK,CAAe;AACjE;AAkCO,SAASZ,EAAgBH,GAA6C;AAEpE,SADM,OAAO,KAAKA,CAAW,EACxB,KAAK,CAACuB,GAAGH,MAAMpB,EAAYuB,CAAC,IAAIvB,EAAYoB,CAAC,CAAC;AAC5D;"}