Filtering

by amsik

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Filtering</title>

    <!-- first import Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/liquor-tree.umd.js"></script>
  </head>
  <body>
    <div class="hello">
      Filtering. Using content of the book "JavaScript for Kids"
    </div>

    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            <p>Default behaviour. Matched nodes have a 'mached' class and in this example I've added some styles.</p>
            <input type="text" placeholder="Type to filter..." v-model="treeFilter0" class="filter-field">
          </div>
          <div class="example-tree">
            <tree
              class="tree-highlights"
              :filter="treeFilter0"
              :data="treeData0"
              :options="treeOptions0" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>
              Custom matcher. Also we hide children if node has ones. Select complexity:
              <select v-model="treeFilter1">
                <option v-for="item in new Array(20).fill('').map((a, i) => i)">{{ item }}</option>
              </select>
            </p>
          </div>
          <div class="example-tree">
            <tree :filter="treeFilter1" :options="treeOptions1" :data="treeData1">
              <div slot-scope="{ node }" class="node-info">
                <span class="node-name">{{ node.text }}</span>
                <span class="node-complexity">{{ node.data.complexity }}</span>
              </div>
            </tree>
          </div>
        </div>

        <div class="example">
            <div class="example-description">
           ...

CSS

.hello {
  font-size: 2em;
  border-bottom: 1px solid #eee;
  padding: 20px;
  position: relative;
}

.menu {
  width: 42px;
  height: 42px;
  border: 1px solid #eee;
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}

.menu > span {
  position: absolute;
  height: 3px;
  width: 30px;
  background-color: #666;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.menu > span:nth-child(1) {
  margin: 10px 0 0;
}

.menu > span:nth-child(3) {
  margin: -10px 0 0;
}

.menu-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 30px 0;
  box-sizing: border-box;
  transition: all .3s;
  background: #fff;
  border-left: 1px solid #e0dddd;
}

.menu-container.opened {
  width: 300px
}

.menu-container > a {
  padding: 11px;
  text-decoration: none;
  color: #343434;
  border-bottom: 1px solid #fefcfc;
}

.menu-container > a:hover {
  background: #d5d7f9;
}

.demo {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  list-style: none
}

.demo-item {
  flex-basis: 30%;
  height: 40px;
  margin: 10px;
  line-height: 40px;
  box-sizing: border-box;
  border: 1px solid #e6eaff;
}

.demo-item a {
  color: #343434;
  text-decoration: none;
  display: block;
  padding: 0 10px;
}

.demo-item a:hover {
  background: #f2f3fc;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.example {
  flex-basis: 49%;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #eee;
  margin-top: 5px;
}


.filter-field {
  display: block;
  width: 100%;
  padding: 3px;
}

.tree-highlights .tree-node.matched > .tree-content {
  background: #f7f2e7;
}

.node-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

JavaScript

var f0 = [
  { "text": "Introduction", "children": [
    { "text": "Who Should Read This Book?" },
    { "text": "How to Read This Book" },
    { "text": "What’s in This Book?" },
    { "text": "Have Fun!" }
  ]},
  { "text": "Part I: Fundamentals", "children": [
    { "text": "What Is JavaScript?", "children": [
      { "text": "Meet JavaScript" },
      { "text": "Why Learn JavaScript?" },
      { "text": "The Structure of a JavaScript Program", "children": [
        { "text": "Syntax" },
        { "text": "Comments" }
      ]}
    ]},
    { "text": "Data Types and Variables", "children": [
      { "text": "Numbers and Operators" },
      { "text": "Variables", "children": [
        { "text": "Naming Variables" },
        { "text": "Creating New Variables Using Math" },
        { "text": "Incrementing and Decrementing" },
        { "text": "+= (plus-equals) and –= (minus-equals)" }
      ]}
    ]}
  ]},
  {
    "text": "Part II: Advanced JavaScript", "children": [
      { "text": "The DOM and jQuery", "children": [
        { "text": "Selecting DOM Elements" },
        { "text": "Using jQuery to Work with the DOM Tree", "children": [
          { "text": "Loading jQuery on Your HTML Page" },
          { "text": "Replacing the Heading Text Using jQuery" }
        ]},
        { "text": "Creating New Elements with jQuery" },
        { "text": "Animating Elements with jQuery" },
        { "text": "Chaining jQuery Animations"},
        { "text": "What You Learned" }
      ]},
      { "text": "Interactive Programming" },
      { "text": "Find the Buried Treasure!" },
      { "text": "Object-Oriented Programming" }
  ]},
  {
    "text": "Part III: Canvas", "children": [
      { "text": "The canvas Element", "children": [
        { "text": "Creating a Basic Canvas" },
        { "text": "Drawing on the Canvas", "children": [
          { "text": "Selecting and Saving the canvas Element" },
          { "text": "Getting the Drawing Context" },
          { "text": "Drawing a...