CanJS File Navigator (Advanced)

Starter version of the CanJS File Navigator Guide (Advanced)

by donejs

HTML

<script src="https://unpkg.com/can@3/dist/global/can.all.js"></script>
<script type="text/stache" id="app-template">
</script>

<script type="text/stache" id="folder-template">
</script>

<!--
  <span>root</span>
  <ul>
    <li class='file'>📝 <span>cats.png</span></li>
    <li class='file'>📝 <span>dogs.jpg</span></li>
    <li class='folder'>📁 <span>empty folder</span></li>
    <li class='folder hasChildren'>📁 <span>folder with files</span></li>
    <li class='folder hasChildren'>
      📁 <span>folder loading files </span>
      <div class="loading">Loading</div>
    </li>
    <li class='folder hasChildren'>
      📁 <span>opened folder</span>
      <ul>
        <li class='file'>📝 <span>file1.png</span></li>
        <li class='file'>📝 <span>file2.jpg</span></li>
      </ul>
    </li>
  </ul>
-->

CSS

body {
  padding: 10px;
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto Mono", "Lucida Console", Monaco, monospace;
  font-size: 14px;
  color: #000;
}

ul {
  list-style: none;
}

li {
  padding-left: 20px;
  position: relative;
  line-height: 2em;
}

li:before {
  position: absolute;
  left: 5px;
  top: -2px;
  content: '';
  display: block;
  height: 1em;
  border-bottom: 1px solid #bbb;
  width: 10px;
}

li:after {
  position: absolute;
  left: 5px;
  bottom: 0;
  content: '';
  display: block;
  border-left: 1px solid #bbb;
  height: 100%;
}

.loading {
  color: black;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.loading:after {
  content: "...";
}

.hasChildren > a-folder > span, .hasChildren > span {
  transition: all .1s ease-in-out;
  cursor: pointer;
  border-bottom: 1px dotted #000;
}

.hasChildren > a-folder > span:hover, .hasChildren > span:hover {
  opacity: .5;
}