2021-01-25 Facepile

by Ttt Yyy

HTML

<div class="more">
Content Above
</div>
<div id="container" class="facepile">
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="#" />
    </a>
  </div>
</div>
<div class="more">
  Content Below
</div>
<div id='console-1'></div>
<div id='console-2'></div>

CSS

.facepile {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.item {
  margin: 2px 2px 0 0;
}

.item img {
  height: 30px;
  width: 30px;
}

.more {
  background-color: #eee;
  padding: 10px;
}

JavaScript

const facepile = document.getElementById('container');
/* let children = facepile.childNodes; */
/* let index = 0; */
const console1 = document.getElementById('console-1')

// lol doesn't appear to work...
/* facepile.addEventListener('click', event => {
  let target = event.target;
  console.log('target', target);
  console.log('target.className', target.className)
  while(target.className !== 'item') {
    target = target.parentNode;
  }
  let pointer = target;
  let index = 0;
  while(pointer.previousSibling) {
    if(pointer.nodeType === 1) {
      index++;
      pointer = pointer.previousSibling;
    }
  }
  console.innerText = index;
})
 */
 
 
let children = facepile.childNodes;
let index = 0;
for(let i = 0; i < children.length; i++) {
	if(children[i].className === "item") {
    index++;
  }
  let currentIndex = index;
  children[i].addEventListener('click', () => {
    /* document.getElementById('console-2').innerHTML = i; */
    document.getElementById('console-2').innerHTML = currentIndex;
    }, false)
}