logs-content: Added character highlighter feature.

2019-04-19 16:15:07 +02:00
parent 25d4aa73d1
commit f81f05d274
8 changed files with 62 additions and 10 deletions
@@ -1,5 +1,21 @@
 module.exports = class {
+  onCreate() {
+    this.state = {
+      highlights: [],
+    }
+  }
+  
  select(value) {
    this.emit("select", value)
  }
+
+  toggleHighlight(id) {
+    if (this.state.highlights.includes(id)) {
+      this.state.highlights = this.state.highlights.filter(id2 => id2 !== id)
+    } else {
+      this.state.highlights = this.state.highlights.concat(id)
+    }
+
+    this.emit("hightlights", this.state.highlights);
+  }
 }
@@ -4,10 +4,23 @@
    <menu-link dark key="_create" on-click("select", "post.add", null) icon="+">Add Post</menu-link>
    <menu-gap />
  </if-permitted>
-  <menu-header>Links</menu-header>
+  <menu-header>Channel</menu-header>
  <menu-link href=("/logs/?channels="+encodeURIComponent(input.log.channel.name)) icon="#">${input.log.channel.name}</menu-link>
-  <menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link>
-  <for(character in input.log.characters)>
-    <menu-link href=("/logs/?characters="+character.id) icon="C">${character.name} <span class="weak">(${character.author})</span></menu-link>
-  </for>
+  <menu-gap />
+  <if(input.log.eventName)>
+    <menu-header>Event</menu-header>
+    <menu-link href=("/logs/?channels="+input.log.eventName) icon="E">${input.log.eventName}</menu-link>
+    <menu-gap />
+  </if>
+  <if(input.log.characters.length > 0)>
+    <menu-header>Characters</menu-header>
+    <for(character in input.log.characters)>
+      <menu-link weak=(state.highlights.length > 0 && !state.highlights.includes(character.id)) 
+                 icon="C"
+                 on-click("toggleHighlight", character.id)>
+        ${character.name} <span class="weak">(${character.author})</span>
+      </menu-link>
+    </for>
+    <menu-gap />
+  </if>
 </menu>