Browse Source

logs-content: Added anchoring on posts, link posts and background on linked-to post.

1.2
Gisle Aune 6 years ago
parent
commit
fcf2361fbf
  1. 49
      marko/page/logs-content/components/post/component.js
  2. 4
      marko/page/logs-content/components/post/index.marko
  3. 25
      marko/page/logs-content/components/post/style.less

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

@ -1,3 +1,7 @@
const EventEmitter = require("events");
let linkSignal = null;
module.exports = class { module.exports = class {
onCreate(input) { onCreate(input) {
this.state = { this.state = {
@ -8,8 +12,11 @@ module.exports = class {
modal: null, modal: null,
removed: false, removed: false,
multipart: false, multipart: false,
anchored: false,
} }
this.mounted = false;
this.updatePost(input) this.updatePost(input)
} }
@ -45,15 +52,51 @@ module.exports = class {
this.updatePost(input) this.updatePost(input)
} }
onMount() {
this.linkSignalCallback = () => {
this.state.anchored = false
}
if (linkSignal == null) {
linkSignal = new EventEmitter()
linkSignal.setMaxListeners(10000)
}
linkSignal.on("signal", this.linkSignalCallback)
this.state.anchored = window.location.hash.slice(1) === this.input.post.id;
}
onUnmount() {
linkSignal.removeListener("signal", this.linkSignalCallback)
}
link() {
linkSignal.emit("signal")
this.state.anchored = true
}
updatePost(input) { updatePost(input) {
this.state.shortName = input.post.nick.split("_").shift() this.state.shortName = input.post.nick.split("_").shift()
this.state.name = input.post.nick this.state.name = input.post.nick
this.state.nameSuffix = "" this.state.nameSuffix = ""
this.state.text = input.post.text.replace(/\x02/g, "**").replace(/\x1D/g, "_")
this.state.text = input.post.text.replace(/\x02/g, "**").replace(/\x1D/g, "_").trim();
if (this.state.text.startsWith("|")) {
this.state.name = ""
this.state.text = this.state.text.slice(1).trim();
}
if (input.post.kind === "text" && !this.state.text.includes("\"") && !this.state.text.includes("|")) {
const colonIndex = this.state.text.indexOf(": ");
if (colonIndex != -1 && colonIndex < this.state.text.indexOf(" ")) {
this.state.text = this.state.text.replace(": ", ": \"") + "\"";
} else {
this.state.text = '"' + this.state.text + '"'
}
}
if (input.post.kind === "text" && !this.state.text.includes("\"")) {
this.state.text = '"' + this.state.text + '"'
if (this.state.text.charAt(0) == this.state.text.charAt(0).toUpperCase()) {
this.state.name = ""
} }
if (!input.post.nick.startsWith("=")) { if (!input.post.nick.startsWith("=")) {

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

@ -1,6 +1,8 @@
<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null]>
<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null]>
<a class="anchor" id=input.post.id />
<div class="post-meta-row"> <div class="post-meta-row">
<div class="options color-menu"> <div class="options color-menu">
<a on-click("link") href=("#" + input.post.id) class="color-menu">Link</a>
<if-permitted user=input.user permission="post.move"> <if-permitted user=input.user permission="post.move">
<a on-click("move", -1, true)>Up</a> <a on-click("move", -1, true)>Up</a>
<a on-click("move", +1, true)>Down</a> <a on-click("move", +1, true)>Down</a>

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

@ -1,13 +1,23 @@
div.post { div.post {
margin-top: 1em;
margin-bottom: 1ch; margin-bottom: 1ch;
margin-left: -12px; margin-left: -12px;
padding-left: 12px; padding-left: 12px;
padding-right: 0.5ch;
transition: background-color 0.333s linear;
div.post-meta-row { div.post-meta-row {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
a.anchor {
display: block;
position: relative;
top: -4em;
}
div.options { div.options {
position: absolute; position: absolute;
text-align: right; text-align: right;
@ -59,6 +69,9 @@ div.post {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
} }
p:last-of-type {
padding-bottom: 0.1em;
}
} }
} }
@ -67,8 +80,18 @@ div.post.pk-scene {
border-left: 2px solid #68A; border-left: 2px solid #68A;
} }
div.post.pk-scene.anchored {
background-color: rgba(102, 136, 170, 0.25);
}
div.post.pk-action.anchored {
background-color: rgba(170, 102, 68, 0.25);
}
div.post.pk-text.anchored {
background-color: rgba(170, 170, 170, 0.25);
}
div.post.multipart { div.post.multipart {
margin-top: -1.25em;
margin-top: -0.9em;
div.post-meta { div.post-meta {
span { span {

Loading…
Cancel
Save