Meet Our Dogs (2024)

' + '

' + '

'; } thumbs.append(thumb); } $('#dog-profile').append(thumbs); } // append bottom $('#dog-profile').append(bottom); }) .catch(function(error) { console.log(error); }); } // show dog $('body').on('click', '.to-dog', (e) => { let dogID = $(e.target).attr('data-dog-id'), dogConfig = config; dogConfig.url = 'https://www.shelterluv.com/api/v1/animals/' + dogID; // update scroll position scrollPos = $(window).scrollTop(); buildDog(dogConfig); $(window).scrollTop(0); }) // change slides $('body').on('click', '.thumb', (e) => { let newRL = $(e.target).attr('src'); $('.thumb').removeClass('current'); $(e.target).addClass('current'); $('#current').attr('src', newRL); }) // back to resuts $('body').on('click', '.back-to-results', () => { $('#dog-profile').empty(); $('#dog-filter').removeClass('hidden'); $('#dogs').removeClass('hidden'); $(window).scrollTop(scrollPos); }) // adopt $('body').on('click', '.adopt', () => { let adoptionForm = '

'; $('#dog-profile').append(adoptionForm); }) // no adoption $('body').on('click', '#no-adoption', () => { $('#adoption-form-container').remove(); }) // ************ // FILTER // ************ let filters = [], newDogs = []; // number of dogs found const found = (dogs) => { $('#dog-filter-results').html(''); if (filters.length > 0) { $('#dog-filter-results').text(dogs.length + ' dogs found.'); } else { $('#dog-filter-results').html(''); } } // filter simple const filMech = (filters) => { // build array for each filter let groupFilArr = []; // clear selections $('#dog-filter-selections').html(''); for (let i = 0; i < filters.length; i++) { // push selection array let type = filters[i].category, name = filters[i].value, filArr = []; if (type !== 'Attributes') { // push array filArr = dogs.filter(d => d[type] == name); groupFilArr.push(filArr); // build selections let selection = '

'; $('#dog-filter-selections').append(selection); } else { // find dogs with attributes let haveAttrs = dogs.filter(d => d.Attributes.length > 0), foundDogs = []; // find specific attribute for (const d in haveAttrs) { let attrList = haveAttrs[d].Attributes; for (const a in attrList) { if (attrList[a].AttributeName == name) { foundDogs.push(haveAttrs[d]); } } } // push groupFilArr.push(foundDogs); } } // combine filter arrays newDogs = groupFilArr.reduce((a, c) => a.filter(i => c.includes(i))); $('#dogs').html(''); buildDogs(newDogs); // no dogs found if (newDogs.length == 0) { $('#no-dogs').addClass('show'); } else { $('#no-dogs').removeClass('show'); } } // select resetter const resetter = (category) => { let findOption = $('.dog-filter-select').toArray(), foundOption = findOption.findIndex(x => x.name == category); $('.dog-filter-select')[foundOption].selectedIndex = 0; } // structure filtering system $('body').on('change', '.dog-filter-select, .advanced-option', (e) => { let category = e.target.name, value = e.target.value, filter = { category: category, value: value }, isPresent = filters.find(f => f.category == category), selIndex = filters.findIndex(f => f.category == category); // avoid duplicate categories if (isPresent && value !== 'reset' && category !== 'Attributes') { filters[selIndex] = filter; } else if (value == 'reset' && filters.length > 1) { filters.splice(selIndex, 1); } else if (value == 'reset' && filters.length == 1) { filters = []; $('#dogs').html(''); buildDogs(dogs); } else if ($(e.target).is('input') && $(e.target).is(':checked') == false) { filters.splice(filters.findIndex(f => f.value == value), 1); if (filters.length == 0) { $('#dogs').html(''); buildDogs(dogs); } } else { filters.push(filter); } // implement only if there are filters if (filters.length >= 1) { filMech(filters); } // show number of dogs found found(newDogs); }) // remove filter $('body').on('click', '.remove', (e) => { let parent = e.target.closest('.dog-filter-selection'), filVal = $(parent).attr('data-value'), filCat = $(parent).attr('data-category'), filDex = filters.findIndex(f => f.value == filVal); // remove from list filters.splice(filDex, 1); // remove from selections $(parent).remove(); // reset selector resetter(filCat); // implement only if there are filters if (filters.length >= 1) { // filter filMech(filters); // show number of dogs found found(newDogs); } else { // reset result numbers $('#dog-filter-results').html(''); // clear list $('#dogs').html(''); // show all dogs buildDogs(dogs); } }) // reset filters $('#clear-filter').click(() => { // clear filters filters = []; // clear selections $('#dog-filter-selections').html(''); // clear checkboxes let checkboxes = $('.filter-checkbox'); for (let i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } // reset number of dogs found(dogs); // reset selectors let selectors = $('.dog-filter-select').toArray(); for (const s in selectors) { selectors[s].selectedIndex = 0; } // clear list $('#dogs').html(''); // show all dogs buildDogs(dogs); // remove no dogs found $('#no-dogs').removeClass('show'); }) // ************ // SEARCH // ************ $('#search-submit').click((e) => { // stop default behaviour e.preventDefault(); // find dog let toFind = $('#search-name').val().toLowerCase(), didFind = dogs.filter(d => d.Name.toLowerCase() == toFind); // show reset switch $('#search-reset').addClass('show'); $('#dogs').html(''); buildDogs(didFind); }) $('#search-reset').click(() => { // reset input $('#search-name').val(''); // all dogs $('#dogs').html(''); buildDogs(dogs); // hide reset switch $('#search-reset').removeClass('show'); }) // ************ // BACK TO TOP // ************ // show/hide button $(window).scroll(() => { if ($(this).scrollTop() > 500) { $('#back-to-top').removeClass('hidden'); } else { $('#back-to-top').addClass('hidden'); } }) // go back up $('#back-to-top').click(() => { $('html, body').animate({ scrollTop: 0 }, 500); }) });