noide/client/tree/view.html

Web Editor built on hapi and nes websockets using browserify, superviews.js, bootstrap and the ACE editor.

<template name="tree" args="data isRoot current showMenu onClick">
  <ul class="{isRoot ? 'tree noselect' : 'noselect'}">
    <li each="fso, fso.path in data"
      oncontextmenu="{showMenu($event, fso)}"
      title="{fso.relativePath}"
      class="{fso.isDirectory ? 'dir' : 'file' + (fso === current ? ' selected' : '')}">
      <if condition="fso.isFile">
        <a href="/file?path={fso.relativePath}">
          <span data-name="{fso.name}" data-path="{fso.relativePath}" class="name icon icon-file-text"></span>
          <span class="file-name">{fso.name}</span>
        </a>
      </if>
      <if condition="fso.isDirectory">
        <a onclick="{onClick(fso)}">
          <small if="fso.expanded" class="expanded">▼</small>
          <small if="!fso.expanded" class="collapsed">▶</small>
          <span data-name="{fso.name}" data-path="{fso.relativePath}" class="name icon icon-file-directory"></span>
          <span class="dir-name">{fso.name}</span>
        </a>
      </if>
      <span if="fso.isFile && fso === current" class="triangle-left"></span>
      <if condition="fso.isDirectory && fso.expanded">
        <script>
          // sort
          fso.children.sort(function(a, b) {
            if (a.isDirectory) {
              if (b.isDirectory) {
                return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
              } else {
                return -1
              }
            } else {
              if (b.isDirectory) {
                return 1
              } else {
                return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
              }
            }
          })
          // recurse
          tree(fso.children, false, current, showMenu, onClick)
        </script>
      </if>
    </li>
  </ul>
</template>