Merge pull request #377 from timjrobinson/add-liked-names

Show who liked content on hover

src/assets/style.css

@@ -411,6 +411,25 @@ section > footer > div > form > button.liked {
   color: var(--red);
 }
 
+section > footer > div > form > button.like > span.liked-by {
+  display: none;
+}
+
+section > footer > div > form > button.like:hover {
+  background-color: inherit;
+}
+
+section > footer > div > form > button.like:hover > span.liked-by {
+  display: block;
+  position: absolute;
+  max-width: 300px;
+  padding: 15px;
+  background-color: var(--base07);
+  color: var(--base00);
+  border-radius: var(--common-radius);
+  z-index: 5;
+}
+
 label {
   display: block;
   margin: 0;

src/models.js

@@ -468,6 +468,12 @@ module.exports = ({ cooler, isPublic }) => {
           .filter(([, value]) => value === 1)
           .map(([key]) => key);
 
+        // get an array of voter names, for display on hover
+        const pendingVoterNames = voters.map((author) =>
+          models.about.name(author)
+        );
+        const voterNames = await Promise.all(pendingVoterNames);
+
         const pendingName = models.about.name(msg.value.author);
         const pendingAvatarMsg = models.about.image(msg.value.author);
 
@@ -545,7 +551,7 @@ module.exports = ({ cooler, isPublic }) => {
           lodash.set(msg, "value.meta.postType", "mystery");
         }
 
-        lodash.set(msg, "value.meta.votes", voters);
+        lodash.set(msg, "value.meta.votes", voterNames);
         lodash.set(msg, "value.meta.voted", voters.includes(myFeedId));
 
         return msg;
@@ -1066,6 +1072,9 @@ module.exports = ({ cooler, isPublic }) => {
                     return acc;
                   }
 
+                  // The value of a users vote is 1 / (1 + total votes), the
+                  // more a user votes, the less weight is given to each vote.
+
                   const entries = Object.entries(values);
                   const total = 1 + Math.log(entries.length);
 

src/views/index.js

@@ -467,11 +467,19 @@ const post = ({ msg, aside = false }) => {
     typeof msg.value.content.contentWarning === "string";
 
   const likeButton = msg.value.meta.voted
-    ? { value: 0, class: "liked" }
-    : { value: 1, class: null };
+    ? { value: 0, class: "like liked" }
+    : { value: 1, class: "like" };
 
   const likeCount = msg.value.meta.votes.length;
 
+  const maxLikedNameLength = 16;
+  const maxLikedNames = 20;
+
+  const likedBy = msg.value.meta.votes
+    .slice(0, maxLikedNames)
+    .map((name) => name.slice(0, maxLikedNameLength))
+    .join(", ");
+
   const messageClasses = ["post"];
 
   if (isPrivate) {
@@ -562,7 +570,13 @@ const post = ({ msg, aside = false }) => {
               value: likeButton.value,
               class: likeButton.class,
             },
-            `❤ ${likeCount}`
+            `❤ ${likeCount}`,
+            span(
+              {
+                class: "liked-by",
+              },
+              `Liked by ${likedBy}`
+            )
           )
         ),
         a({ href: url.comment }, i18n.comment),