WIP Finder

index.html

<div class="container">
  <div class="finder-window">
    <div class="finder-header">
      <div class="finder-window-controls">
        <div class="finder-window-controls__close"></div>
        <div class="finder-window-controls__minimize"></div>
        <div class="finder-window-controls__maximize"></div>
      </div>
    </div>
    <div class="finder-sidebar">
      <ul class="finder-sidebar__list">
        <li class="finder-sidebar__list-item finder-sidebar__list-item--section">
          <span class="finder-sidebar__list-name finder-sidebar__list-name--section">Favourites</span>
          <ul class="finder-sidebar__sub-list">
            <li class="finder-sidebar__list-item">
              iCloud Drive
            </li>
            <li class="finder-sidebar__list-item">
              Dropbox
            </li>
            <li class="finder-sidebar__list-item">
              AirDrop
            </li>
            <li class="finder-sidebar__list-item">
              Applications
            </li>
            <li class="finder-sidebar__list-item">
              Desktop
            </li>
            <li class="finder-sidebar__list-item">
              Documents
            </li>
            <li class="finder-sidebar__list-item">
              Downloads
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="finder-main">
      <ul class="finder-file-list">
        <li class="finder-file-item">Folder #1</li>
        <li class="finder-file-item is-active">Folder #2</li>
        <li class="finder-file-item">Folder #3</li>
        <li class="finder-file-item">Folder #4</li>
        <li class="finder-file-item">Folder #5</li>
        <li class="finder-file-item">Folder #6</li>
        <li class="finder-file-item">Folder #7</li>
        <li class="finder-file-item">Folder #8</li>
      </ul>
      <ul class="finder-file-list is-active">
        <li class="finder-file-item">Folder #1</li>
        <li class="finder-file-item is-active">Folder #2</li>
        <li class="finder-file-item">Folder #3</li>
        <li class="finder-file-item">Folder #4</li>
        <li class="finder-file-item">Folder #5</li>
        <li class="finder-file-item">Folder #6</li>
        <li class="finder-file-item">Folder #7</li>
        <li class="finder-file-item">Folder #8</li>
      </ul>
    </div>
    <div class="finder-details">
      8 items
    </div>
  </div>
</div>

script.js

function FileList() {
  this.finderFileListElements = document.getElementsByClassName('finder-file-list');
  this.bindInteractions();
}

FileList.prototype.bindInteractions = function() {
  var that = this;
  
  for (var i = 0; i < this.finderFileListElements.length; i++) {
    this.finderFileListElements[i].addEventListener('mouseup', function(e) {
      var clickedElement = e.target;
      var parentElement = clickedElement.parentNode;
      var childElements = parentElement.children;
      var modifierKey = e.metaKey || e.shiftKey || e.ctrlKey;

      if (!modifierKey) {
        for (var i = 0; i < childElements.length; i++) {
          childElements[i].classList.remove('is-active');
        }
      }

      if (!e.shiftKey && !clickedElement.classList.contains('is-active') || e.metaKey) {
        clickedElement.classList.toggle('is-active');
      }
    });
  }

  for (var j = 0; j < this.finderFileListElements.length; j++) {
    this.finderFileListElements[j].addEventListener('mousedown', function(e) {
      var clickedElement = e.target;
      var parentElement = clickedElement.parentNode;
      var childElements = parentElement.children;
      var clickedIndex = that.getElementIndex(clickedElement);

      if (parentElement.querySelector('.is-active') === null) {
        referenceIndex = 0;
      } else {
        referenceIndex = that.getElementIndex(parentElement.querySelector('.is-active'));
      }

      if (referenceIndex > clickedIndex) {
        var temp = clickedIndex;
        clickedIndex = referenceIndex;
        referenceIndex = temp;
      }

      if (e.shiftKey) {
        for (var i = referenceIndex; i <= clickedIndex; i++) {
          childElements[i].classList.add('is-active');
        }
      }
    });
  }
}

FileList.prototype.getElementIndex = function(element) {
  var index = 0;

  while (element = element.previousElementSibling) {
    index++;
  }

  return index;
}

function Finder() {
  this.fileList = new FileList;
}

var finder = new Finder;

style.css

* {
  box-sizing: border-box;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.finder-window {
  display: flex;
  flex-flow: row wrap;
  margin: 50px;
  border: 1px solid #a5a5a5;
  border-radius: 5px;
  background-color: #dedede;
  box-shadow: 0 20px 100px 0px #909090;
}

.finder-header {
  flex: 1 100%;
  position: relative;
  background: linear-gradient(#e4e4e4, #cfcfcf);
  height: 54px;
  border-bottom: 1px solid #969696;
  box-shadow: inset 0 1px 1px 0px #fff;
}

.finder-window-controls {
  display: flex;
  flex-flow: row;
  position: absolute;
  top: 5px;
  left: 8px;
}

.finder-window-controls__close,
.finder-window-controls__minimize,
.finder-window-controls__maximize {
  height: 12px;
  width: 12px;
  border-radius: 99px;
  margin-right: 8px;
  cursor: pointer;
}

.finder-window-controls__close {
  background-color: #f85955;
  border: 1px solid #d74246;
}

.finder-window-controls__minimize {
  background-color: #fbbe3f;
  border: 1px solid #d7a32d;
}

.finder-window-controls__maximize {
  background-color: #45cc4b;
  border: 1px solid #40ad36;
}

.finder-sidebar {
  background-color: #f0f0f0;
  border-right: 1px solid #b8b8b8;
  padding: 10px;
}

.finder-sidebar__list {
  margin: 0;
  padding: 0;
}

.finder-sidebar__list-name--section {
  font-weight: bold;
  color: #7b807c;
  font-size: 0.7em;
}

.finder-sidebar__sub-list {
  margin: 0;
  padding: 0 0 0 9px;
  font-size: 0.8em;
}

.finder-sidebar__list-item {
  margin: 8px 0;
  list-style: none;
}

.finder-sidebar__list-item--section {
  margin: 0;
}

.finder-main {
  display: flex;
  flex-flow: row;
  flex: auto;
  background-color: #ffffff;
}

.finder-file-list {
  width: 150px;
  margin: 0;
  padding: 0;
  border-right: 1px solid #e8e8e8;
}

.finder-file-item {
  display: block;
  text-decoration: none;
  padding: 0.1em 0.5em;
  cursor: pointer;
  user-select: none;
}

.finder-file-item.is-active {
  color: #000;
  background: #dcdcdc;
}

.finder-file-list.is-active .finder-file-item.is-active {
  color: #fff;
  background: #246bd5;
}

.finder-details {
  flex: 100%;
  height: 24px;
  border-top: 1px solid #a2a2a2;
  text-align: center;
  font-size: 0.7em;
  line-height: 2;
}

wip-finder.markdown

WIP Finder

A Pen by Kevin on CodePen.

License.