#web utility

Font Meme is a fonts & typography resource.

The "Font Finder" section features newfound fonts from creative designers around the web;

The "Fonts in Use" section features posts about fonts used in famous logos, popular movies, books and many more;

It seems as though adding ellipses to pagination navigation would be straight forward, and that concise utilities would exist to help out. Two incorrect assumptions later, I set about tackling the problem and packaging the resultant code as a utility, available from Sly Trunk on github.

Desired behavior

First item visible

Last item visible

Selected item visible

Remaining number of visible items surround selected item, favoring looking ahead

Number of visible items a parameter

The utility annotates the input array of items based on this logic. The annotated array can then be serialized to HTML including tag classes corresponding to the newly added ellipsis annotations, and then be styled accordingly.

Further, the utility provides the option of annotating the markup in such a way that the client (JS in the browser in our case) can update the ellipses in page for dynamic navigation. I avoided duplicating any of the logic used to determine which items were hidden etc. via simple bounding box annotations.

It's a fairly straight forward algorithm when laid out in code, and it exists as static functionality within a single class with a demo file on github - let us know if you find it useful, or find any bugs!