logs-content: Added character highlighter feature.

marko/components/menu-link/index.marko

@@ -1,6 +1,6 @@
 <a on-click("onClick") href=input.href>
-  <div class=state.classes>
-    <div class="icon color-primary">${input.icon}</div>
+  <div class=[state.classes, input.weak ? "dark" : null]>
+    <div class=["icon", "color-primary"]>${input.icon}</div>
     <div class=["text", input.selected ? "color-primary" : input.textClass]>
       <include(input.renderBody) />
     </div>

marko/page/logs-content/components/logs-content-menu/component.js

@@ -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);
+  }
 }

marko/page/logs-content/components/logs-content-menu/index.marko

@@ -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>

marko/page/logs-content/components/page/component.js

@@ -9,6 +9,7 @@ module.exports = class {
       log: input.log,
       modal: null,
       removed: false,
+      highlights: [],
     }
   }  
   
@@ -161,6 +162,10 @@ module.exports = class {
     this.state.removed = true
   }
 
+  highlightsChanged(highlights) {
+    this.state.highlights = highlights.slice();
+  }
+
   get title() {
     if (this.state.log.title) {
       return this.state.log.title

marko/page/logs-content/components/page/index.marko

@@ -1,4 +1,4 @@
-<logs-content-menu user=input.user log=state.log on-select("open") />
+<logs-content-menu on-hightlights("highlightsChanged") user=input.user log=state.log on-select("open") />
 <main>
   <div class="logs-content">
     <div class="header">
@@ -25,6 +25,7 @@
           prev=(state.log.posts[loop.getIndex() - 1] || {})
           post=post
           characters=state.log.characters
+          highlights=state.highlights
           last=(post.position === state.log.posts.length)
     />
   </div>

marko/page/logs-content/components/post/component.js

@@ -14,6 +14,7 @@ module.exports = class {
       multipart: false,
       anchored: false,
       prevWasText: false,
+      dark: false,
     }
 
     this.mounted = false;
@@ -83,18 +84,30 @@ module.exports = class {
 
     this.state.text = input.post.text
 
+    if (input.highlights.length > 0 && (input.post.kind === "action" || input.post.kind === "text")) {
+      this.state.dark = true
+    } else {
+      this.state.dark = false
+    }
+
     if (!input.post.nick.startsWith("=")) {
       const postNick = input.post.nick.replace("'s", "").replace("s'", "s")
       for (const character of input.characters) {
         for (const nick of character.nicks) {
           if (nick === postNick) {
-            this.state.name = character.name
+            this.state.name = character.name + character.id
             this.state.shortName = character.shortName
 
             if (input.post.nick.endsWith("'s") || input.post.nick.endsWith("'")) {
               this.state.nameSuffix = (character.shortName.endsWith("s") || character.shortName.endsWith("z")) ? "'" : "'s"
             }
 
+            if (input.highlights.length > 0) {
+              this.state.dark = !(input.highlights.includes(character.id))
+            } else {
+              this.state.dark = false
+            }
+
             return
           }
         }

marko/page/logs-content/components/post/index.marko

@@ -1,4 +1,4 @@
-<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null]>
+<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null, state.dark ? "dark" : null]>
   <a class="anchor" id=input.post.id />  
   <div class="post-meta-row">
     <div class="options color-menu">

marko/page/logs-content/components/post/style.less

@@ -140,4 +140,8 @@ div.post.multipart {
       display: none;
     }
   }
+}
+
+div.post.dark {
+  opacity: 0.25;
 }