Events - Liquor Tree

by cmaai

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Events </title>
    <!-- first import Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/liquor-tree"></script>
  </head>
  <body>
    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            <input type="text" placeholder="Type to filter..." v-model="filter" class="filter-field">
          </div>
          <div class="example-tree">
            <tree :data="data" :options="opts" :filter="filter" ref="tree" @node:checked="">
              <div slot-scope="{ node }" class="node-container">
                <div class="node-text">{{ node.text }}</div>
                <div class="node-controls">
                  <a href="#" @mouseup.stop="editNode(node)">Edit</a>
                  <a href="#" @mouseup.stop="removeNode(node)">Remove</a>
                  <a href="#" @mouseup.stop="addChildNode(node)">Add child</a>
                </div>
              </div>
            </tree>
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            List of tree events. Open console to details.
          </div>

          <div class="events-table">
            <div class="events-table-header">
              <span>Event Name</span>
              <span>Event Args</span>
              <span>Node Name</span>
              <span>Timestamp</span>
            </div>

            <transition-group name="fade" tag="div" class="events-table-body">
              <div :key="e.id" v-for="e in eventsList" class="event">
                <span><b>{{ e.name }}</b></span>
                <span>{{ e.args }}</span>
                <span>{{ e.nodeText }}</span>
                <span>{{ e.time | time }}</span>
     ...

CSS

.demo-tree {
  width: 50%;
}

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

.events-table {
  width: 100%;
  margin-top: 15px;
}

.events-table-header {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  background-color: #fff;
  text-align: left;
  display: flex;
  justify-content: space-between;

}

.events-table .event:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.events-table .event {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
  display: flex;
}

.events-table .event > span,
.events-table-header > span {
  flex-basis: 25%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.node-controls a {
  color: #ff14ce
}

JavaScript

var data = [
	[
    { "text": "Who Should Read This Book?" },
    { "text": "How to Read This Book" },
    { "text": "What’s in This Book?" },
    { "text": "Have Fun!" }
  ],
  [
    { "text": "Naming Variables" },
    { "text": "Creating New Variables Using Math", "state": { "disabled": true } },
    { "text": "Incrementing and Decrementing" },
    { "text": "+= (plus-equals) and –= (minus-equals)" }
  ],
  [
    { "text": "Interactive Programming" },
    { "text": "Find the Buried Treasure!", "state": { "disabled": true, "expanded": true }, "children": [
      { "text": "#1: A Snowman-Drawing Function" },
      { "text": "#2: Drawing an Array of Points" },
      { "text": "#3: Painting with Your Mouse" },
      { "text": "#4: Drawing the Man in Hangman" }
    ]},
    { "text": "Object-Oriented Programming" }
  ]


]