Skip to content

Commit

Permalink
Add doc comments
Browse files Browse the repository at this point in the history
  • Loading branch information
noisysocks committed May 9, 2024
1 parent 3c110e8 commit 0a0a87c
Showing 1 changed file with 28 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,19 @@ export function GridItemResizer( { clientId, onChange } ) {
);
}

/**
* Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
* position in pixels of each grid track.
*
* https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
*
* @param {string} template The grid-template-columns or grid-template-rows CSS property value.
* Only supports fixed sizes in pixels.
* @param {number} gap The gap between grid tracks in pixels.
*
* @return {Array<{start: number, end: number}>} An array of objects with the start and end
* position in pixels of each grid track.
*/
function getGridTracks( template, gap ) {
const tracks = [];
for ( const size of template.split( ' ' ) ) {
Expand All @@ -96,6 +109,21 @@ function getGridTracks( template, gap ) {
return tracks;
}

/**
* Given an array of grid tracks and a position in pixels, gets the index of the closest track to
* that position.
*
* https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
*
* @param {Array<{start: number, end: number}>} tracks An array of objects with the start and end
* position in pixels of each grid track.
* @param {number} position The position in pixels.
* @param {string} edge The edge of the track to compare the
* position to. Either 'start' or 'end'.
*
* @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
* is 1-based.
*/
function getClosestTrack( tracks, position, edge = 'start' ) {
return tracks.reduce(
( closest, track, index ) =>
Expand Down

0 comments on commit 0a0a87c

Please sign in to comment.