shortlist.js

// 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>');


  }


});