5bed8f56d4
* adds focusTrap wrapper to preact Modal component * add view specific code for focus trap in admin add nav link * add script to return a focustrap toggle, use in add nav link modal partial * add trap to edit nav link modal * add handlers for sign up modal * update modal controller for admin section, update nav link modals to use * update other admin modals with new data values for trap * remove unneeded erb script file * remove unneeded target * refactor to remove extra unneeded param * remove duplicate code, store getFocusTrapToggle in window * trap focus in comment and bookmark showModal instances for not logged in user * remove need for activator id * clean up id refs no longer needed * remove custom code and re-use focsu-trap lib * update storybook docs * update default export in focusTrap * prevent close button click triggering a modal toggle twice * ensure if user navigates from a modal the trap is deactivated * add jsdoc comments and add dynamic import * ensure admin controller modal traps are cleaned up on disconnect * update sign up modal to use crayons * update modal controller and admin nav links modals to use preact modal * update profile fields modals for new controller * tweak styling of sign up and admin modals to match previous * update listings modal to use crayons modal, adapt focus trap to work with click outside * memoize deactivate callback to ensure modal can be presented on first page load * add missed focustrap changes * fix focus trap issues in onboarding flow * refactor onboarding focus trap, remove getFocusTrapToggle * tweaks for styling and article modal toggle * add click outside tests to modal * add cypress tests for the login modal * update liquid tag tests affected by change * refactors to address review comments * fix issue with login modal presented twice on comment add * change ids to selectors in admin modals * small pr comment refactors * add listings e2e tests * add nav link modal tests * fix issue with help modal * tweak to fix ui bug from merge * remove context from showLoginModal * rename toggleModal * rename state property for clarity Co-authored-by: Nick Taylor <nick@dev.to>
85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
/**
|
|
* How many listings to show per page
|
|
* @constant {number}
|
|
*/
|
|
export const LISTING_PAGE_SIZE = 75;
|
|
|
|
export function updateListings(listings) {
|
|
const fullListings = [];
|
|
|
|
listings.forEach((listing) => {
|
|
if (listing.bumped_at) {
|
|
fullListings.push(listing);
|
|
}
|
|
});
|
|
|
|
return fullListings;
|
|
}
|
|
|
|
export function getQueryParams() {
|
|
let queryString = document.location.search;
|
|
queryString = queryString.split('+').join(' ');
|
|
|
|
const params = {};
|
|
let tokens;
|
|
const re = /[?&]?([^=]+)=([^&]*)/g;
|
|
|
|
// eslint-disable-next-line no-cond-assign
|
|
while ((tokens = re.exec(queryString))) {
|
|
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
|
|
}
|
|
|
|
return params;
|
|
}
|
|
|
|
function resizeMasonryItem(item) {
|
|
/* Get the grid object, its row-gap, and the size of its implicit rows */
|
|
const grid = document.getElementsByClassName('listings-columns')[0];
|
|
const rowGap = parseInt(
|
|
window.getComputedStyle(grid).getPropertyValue('grid-row-gap'),
|
|
10,
|
|
);
|
|
const rowHeight = 0;
|
|
const rowSpan = Math.ceil(
|
|
(item.getElementsByClassName('listing-content')[0].getBoundingClientRect()
|
|
.height +
|
|
rowGap) /
|
|
(rowHeight + rowGap),
|
|
);
|
|
|
|
/* Set the spanning as calculated above (S) */
|
|
// eslint-disable-next-line no-param-reassign
|
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
}
|
|
|
|
export function resizeAllMasonryItems() {
|
|
// Get all item class objects in one list
|
|
const allItems = document.getElementsByClassName('single-listing');
|
|
|
|
/*
|
|
* Loop through the above list and execute the spanning function to
|
|
* each list-item (i.e. each masonry item)
|
|
*/
|
|
// eslint-disable-next-line vars-on-top
|
|
for (let i = 0; i < allItems.length; i += 1) {
|
|
resizeMasonryItem(allItems[i]);
|
|
}
|
|
}
|
|
|
|
export function getLocation({ query = '', tags = [], category = '', slug }) {
|
|
let newLocation = '';
|
|
if (slug) {
|
|
newLocation = `/listings/${category}/${slug}`;
|
|
} else if (query.length > 0 && tags.length > 0) {
|
|
newLocation = `/listings/${category}?q=${query}&t=${tags}`;
|
|
} else if (query.length > 0) {
|
|
newLocation = `/listings/${category}?q=${query}`;
|
|
} else if (tags.length > 0) {
|
|
newLocation = `/listings/${category}?t=${tags}`;
|
|
} else if (category.length > 0) {
|
|
newLocation = `/listings/${category}`;
|
|
} else {
|
|
newLocation = '/listings';
|
|
}
|
|
return newLocation;
|
|
}
|