PowJS: My Folders

by YU HengChun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/highlight.js@9.12.0/styles/darcula.css">
<script src="https://unpkg.com/powjs@2.3.0/powjs.js"></script>
<template>
  <ul param="model, open" render="open, model">
    <li func="folders" param="open, model, idx, len, num">
      <div class="{{open&&'bold'||''}}">
        {{model.name}}<span if="model.children">[-]</span>
      </div>
      <ul if="model.children"
          each="model.children, open"
          >
        {{@folders}}
        <li if="len===num" class="add">+</li>
      </ul>
    </li>
  </ul>
</template>

<p>(Try it yourself, Complete the event for double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo"></ul>

<p>The script of view</p>

<pre><code id="view" class="hljs js"></code></pre>

CSS

body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}
.item {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}

JavaScript

// Try it yourself
// Event behavior
function toggle(pow) {
}

function changeType(pow) {
}

function addChild(pow) {
  //name: 'new stuff'
}

// Folding option
let open = true; // try change to true

// demo data
let
	data = {
  name: 'My Folders',
  children: [
    { name: 'hello' },
    { name: 'Tom' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'Jimmy' }
          ]
        },
        { name: 'hello' },
        { name: 'Pow' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'JS' }
          ]
        }
      ]
    }
  ]
}

let
	pow = PowJS(document.querySelector('template').content.childNodes);

document.querySelector('#view').textContent = js_beautify(pow.toScript());
hljs.highlightBlock(document.querySelector('#view'));
pow.render(data, open).renew(document.querySelector('#demo'));