Breadcrumbs array

by Plippie Plop

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
<div class="link-container">
  <p>Click item to add link to array:</p>

  <ul>
    <li data-link="www.one.com" data-text="one">Link one</li>
    <li data-link="www.two.com" data-text="two">Link two</li>
    <li data-link="www.three.com" data-text="three">Link three</li>
  </ul>
</div>

<div class="crumbs">
  <span class="btn go-back hidden"><i class="fa fa-backward"></i></span>
  <div class="path hidden"></div>
</div>

CSS

body {
  font-family: 'Saira';
  font-size: 1rem;
}

.link-container {
  padding: .5em;
  border: 1px solid grey;
}

.link-container li {
  cursor: pointer;
  padding: .25em;
  list-style: none;
  font-weight: 600;
}

.crumbs {
  padding: .5em;
  margin-top: .5em;
  border: 1px solid lightgrey;
  font-size: .8rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.crumbs>* {
  flex: 1 1 auto;
}

.crumbs>.btn {
  flex: 0 0 auto;
  padding: calc(.562em - 1px);
  margin-right: .5em;
  border: 1px solid gray;
  background-color: lightgray;
  text-align: center;
}

.crumbs .path {
  border: 1px solid gray;
  padding: calc(.562em - 1px);
}

.crumbs .divider {
  font-weight: 800;
}

.crumbs .link-back {
  cursor: pointer;
}

.hidden {
  visibility: none;
  display: none;
}

JavaScript

var linkArray = [];
var $crumbs = $('.crumbs');

// add link to links array
$('.link-container li').on('click', function() {

  var dt = $(this).data();

  if (dt.link) {

    var isthere = false;





    if (linkArray.length > 0) {


      for (var i = 0; i < linkArray.length; i++) {

        if (linkArray[i].url.trim() == dt.link.trim()) {

          isthere = true;

        }


      } // loop

      if (!isthere) {

        linkArray.push({
          "url": dt.link,
          "text": dt.text
        });
      }

    } else {
      linkArray.push({
        "url": dt.link,
        "text": dt.text
      });
    }
  }

  fillcrumbs();
  console.table(linkArray);

});


//go previous link and remove last one:
$crumbs.find('.go-back').on('click', function(e) {
  console.log("clicked prev/remove link btn");
  
  if(linkArray.length > 1){
  var prevLink = linkArray[linkArray.length - 2].url;  
  console.log("PREV LINK:",prevLink);
  }
  
  linkArray.pop();
  
  console.table(linkArray);
  fillcrumbs();
});


$crumbs.on('click', '.link-back', function() {
  console.log('crumb link clicked');
  linkArray.splice($(this).data("link-index") + 1);
  fillcrumbs();
});



function fillcrumbs() {

console.log("filcrumbs:");

  var idx = 0, links = "";

  for (var i = 0; i < linkArray.length; i++) {

    links += '<span data-link-index="' + i + '" class="link-back">' + linkArray[i].text + ' (' + linkArray[i].url + ')</span>';

   
    if (i !== linkArray.length - 1) {
      links += '<span class="divider"> » </span>';
    }


  }

 // $crumbs.find('.path').html(links);

  if (linkArray.length > 0) {
    $('.path, .go-back').removeClass('hidden');
  } else {
    $('.path, .go-back').addClass('hidden');
  }

}