Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Only load this script when the document is ready as it needs to run after.
$( document ).ready( function() {
// Check browser supports localStorage
if ( localStorage ) {
// Add link for shortlist page to bottom of 'New Memorials' dropdown
var navbarDropdownShortlistItem = '<a class="dropdown-item" id="dropdownMyShortlist" href="../my-shortlist.html">My Shortlist</a>';
$('#newMemorialsDropdown').append( navbarDropdownShortlistItem );
// Check if items already exist in localStorage
if ( window.localStorage.length == 0 ) {
var emptyShortlistMsg = '<div class="col-12 px-3"><h3>Your Shortlist is Empty</h3><p>To add items to your shortlist, please visit the New Memorials pages and use the "+" icon as seen in the example below.</p></div><div class="col-12 col-sm-6 col-md-6 col-lg-4"><div class="card brochure-item"><button class="btn btn-secondary example-add-to-shortlist"><i class="fa fa-plus" aria-hidden="true"></i></button><img class="card-img-top" src="/images/new-memorials/lawn-memorials/Ainthorpe.jpg" alt="Black granite headstone of camber top shape with decorative carved roses." itemprop="image"><div class="card-block bg-slate-lightest"><h4 class="card-title" itemprop="name">Example</h4><p class="card-text" itemprop="description">Shown in <strong class="text-slate-dark">Your Shortlist</strong> as an example brochure item.</p></div></div></div>';
// Do this if localStorage is empty
$('#shortlist-container > .row').prepend( emptyShortlistMsg );
} else {
$('#siteNavbar > .navbar-nav').append('<a class="nav-item nav-link" id="nav-my-shortlist" href="../my-shortlist.html">My Shortlist</a>');
$('#shortlist-container').prepend( '<button class="btn btn-secondary mb-5" id="clearShortlist">Clear Shortlist</button>' );
$('#clearShortlist').click( function() {
localStorage.clear();
window.location.reload();
});
// Loop local storage for brochure items ( only shows on my-shortlist.html with #shortlist-container div )
// Object.keys(localStorage).forEach(function(key){
//
// var openLargeCol = '<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-5">';
// var openCol = '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">';
// var closeCol = '</div>';
//
// if ( key.match('^K_') ) {
// $('#shortlist-container > .row').prepend( openLargeCol + localStorage.getItem(key) + closeCol );
// } else {
// $('#shortlist-container > .row').prepend( openCol + localStorage.getItem(key) + closeCol );
// }
//
// });
var shortlistItems = [];
var shortlistLawnMemorials = [];
var shortlistChurchyardMemorials = [];
var shortlistChildrensMemorials = [];
var shortlistKerbs = [];
var shortlistKerbExtra = [];
var shortlistChippings = [];
var shortlistVases = [];
var shortlistPlaques = [];
Object.keys(localStorage).forEach(function(key){
if ( key.match('^LM_') ) {
shortlistLawnMemorials.push(localStorage.getItem(key));
}
if ( key.match('^CY_') ) {
shortlistChurchyardMemorials.push(localStorage.getItem(key));
}
if ( key.match('^CM_') ) {
shortlistChildrensMemorials.push(localStorage.getItem(key));
}
if ( key.match('^K_') ) {
shortlistKerbs.push(localStorage.getItem(key));
}
if ( key.match('^KE_') ) {
shortlistKerbExtra.push(localStorage.getItem(key));
}
if ( key.match('^CHIP_') ) {
shortlistChippings.push(localStorage.getItem(key));
}
if ( key.match('^V_') ) {
shortlistVases.push(localStorage.getItem(key));
}
if ( key.match('^P_') ) {
shortlistPlaques.push(localStorage.getItem(key));
}
});
if ( shortlistLawnMemorials ) {
shortlistItems.push(shortlistLawnMemorials);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Lawn Memorials</h2><hr/></div>');
shortlistLawnMemorials.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistChurchyardMemorials ) {
shortlistItems.push(shortlistChurchyardMemorials);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Churchyard Memorials</h2><hr/></div>');
shortlistChurchyardMemorials.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistChildrensMemorials ) {
shortlistItems.push(shortlistChildrensMemorials);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Childrens Memorials</h2><hr/></div>');
shortlistChildrensMemorials.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistKerbs ) {
shortlistItems.push(shortlistKerbs);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Kerbs</h2><hr/></div>');
shortlistKerbs.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-5">' + key + '</div>' );
});
}
if ( shortlistKerbExtra ) {
shortlistItems.push(shortlistKerbExtra);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Kerb Extras</h2><hr/></div>');
shortlistKerbExtra.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistChippings ) {
shortlistItems.push(shortlistChippings);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Chippings</h2><hr/></div>');
shortlistChippings.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistVases ) {
shortlistItems.push(shortlistVases);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Vases</h2><hr/></div>');
shortlistVases.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
if ( shortlistPlaques ) {
shortlistItems.push(shortlistPlaques);
$('#shortlist-container > .row').append('<div class="col-12"><h2>Plaques</h2><hr/></div>');
shortlistPlaques.forEach(function(key, value){
$('#shortlist-container > .row').append( '<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-5">' + key + '</div>' );
});
}
console.log(shortlistItems);
};
// add button with appropriate class depending on if the item is in localStorage
$('.brochure-item').each(function() {
// Get item id to compare with localStorage
var itemId = $(this).attr('id');
// Does it exist in localStorage?
if ( !localStorage.getItem(itemId) ) {
if ( !$.contains( $(this), $('.add-to-shortlist') ) ) {
$(this).children('.add-to-shortlist').remove();
$(this).children('.delete-from-shortlist').remove();
$(this).prepend( '<button class="btn btn-secondary add-to-shortlist"><i class="fa fa-plus" aria-hidden="true"></i></button>' );
}
} else {
if ( !$.contains( $(this), $('.delete-from-shortlist') ) ) {
$(this).children('.add-to-shortlist').remove();
$(this).children('.delete-from-shortlist').remove();
$(this).prepend( '<button class="btn btn-secondary delete-from-shortlist"><i class="fa fa-minus" aria-hidden="true"></i></button>' );
}
}
});
// Capture "add to shortlist" click event
$(".add-to-shortlist").click( function() {
// Toggle class, icon and tooltip after click
$(this).find(".fa").removeClass("fa-plus");
$(this).removeClass("add-to-shortlist");
$(this).find(".fa").addClass("fa-minus");
$(this).addClass("delete-from-shortlist");
// Get name for local storage
var brochureItemName = $(this).parent().attr("id");
// Get HTML for local storage
var brochureItemHTML = $(this).parent().parent().html();
// Get text for modal
var brochureItemTitle = $(this).parent().find('.card-title').text();
// Store locally with unique name
localStorage.setItem( brochureItemName, brochureItemHTML );
$('#shortlistModal').on('show.bs.modal', function(e) {
// Add brochure item specific content
$(this).find('#shortlistModalTitle').text( 'Added To Shortlist' );
$(this).find('#shortlistModalText').html( 'Added <strong>' + brochureItemTitle + '</strong> to your shortlist.' );
});
$('#shortlistModal').modal('show');
$('#shortlistModal').on('hidden.bs.modal', function (e) {
// Refresh window to show updated shortlist
window.location.reload();
});
});
// Capture delete from shortlist click event
$(".delete-from-shortlist").click( function() {
// Toggle class, icon and tooltip after click
$(this).find(".fa").removeClass("fa-minus");
$(this).removeClass("delete-from-shortlist");
$(this).find(".fa").addClass("fa-plus");
$(this).addClass("add-to-shortlist");
// Get name for local storage
var brochureItemName = $(this).parent().attr("id");
// Get text for modal
var brochureItemTitle = $(this).parent().find('.card-title').text();
// Remove from localStorage
localStorage.removeItem( brochureItemName );
$('#shortlistModal').on('show.bs.modal', function (e) {
// Add brochure item specific content
$(this).find('#shortlistModalTitle').text( 'Removed From Shortlist' );
$(this).find('#shortlistModalText').html( 'Removed <strong>' + brochureItemTitle + '</strong> from your shortlist.' );
});
$('#shortlistModal').modal('show');
$('#shortlistModal').on('hidden.bs.modal', function (e) {
// Refresh window to show updated shortlist
window.location.reload();
});
});
} else {
// Error report
$("#shortlist-container > .row").prepend('<div class="col-12"><h3>Your Web Browser Does Not Support Web Storage</h3><p>To add items to the shortlist your browser must support <em>localStorage</em>, this is a technology used to prevent the need for a database and sign-up when using Watson Memorials shortlisting features.</p></div>');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment