Add love sorting

Author: jgthms

docs/_data/love.json

@@ -1,7 +1,10 @@
 {% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
 {% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
 
-<article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
+<article
+  data-likes="{{ tweet.hearts }}"
+  data-id="{{ tweet.id }}"
+  class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">

docs/_includes/elements/tw.html

@@ -0,0 +1,44 @@
+.bd-pills {
+  @extend %block;
+  align-items: center;
+  color: $text-light;
+  display: flex;
+  justify-content: center;
+}
+
+.bd-pill-label {
+  padding: 0 0.5em;
+}
+
+.bd-pills-body {
+  background: $background;
+  align-items: center;
+  background: #fafafa;
+  border-radius: 0.5em;
+  display: flex;
+  padding: 0.25em;
+}
+
+.bd-pill-button {
+  @extend %reset;
+  border-radius: 0.25em;
+  color: $text;
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0.5em 0.75em;
+  position: relative;
+  transition-duration: 0.5s;
+  transition-property: color, background-color;
+
+  &:hover {
+    background-color: $white;
+    color: $text-strong;
+  }
+
+  &.is-active {
+    background-color: $white;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.125em 0.125em rgba(0, 0, 0, 0.05);
+    color: $text-strong;
+    z-index: 1;
+  }
+}

docs/_sass/components/pill.scss

@@ -222,6 +222,7 @@ $navbar-breakpoint: $tablet;
 @import "./_sass/components/spacing-table";
 @import "./_sass/components/survey";
 @import "./_sass/components/color";
+@import "./_sass/components/pill";
 
 @import "./_sass/pages/index";
 @import "./_sass/pages/docs";

docs/bulma-docs.scss

@@ -45,7 +45,45 @@
   button=call_button
 %}
 
-<div class="bd-tws">
+<script type="text/javascript">
+  function compareTweets(key) {
+    return (a, b) => {
+      const avalue = parseInt(a.dataset[key]);
+      const bvalue = parseInt(b.dataset[key]);
+
+      if (avalue > bvalue)
+        return -1;
+
+      if (avalue < bvalue)
+        return 1;
+
+      return 0;
+    }
+  }
+
+  function sortTweets(key) {
+    const $pills = document.querySelectorAll("#bd-pills .bd-pill-button");
+    $pills.forEach($pill => $pill.classList.remove('is-active'));
+    window.event.target.classList.add('is-active');
+
+    const $tweets = document.querySelectorAll("#love-tweets .bd-tw");
+    const tweets = Array.from($tweets);
+    let sorted = tweets.sort(compareTweets(key));
+
+    sorted.forEach(e =>
+        document.querySelector("#love-tweets .bd-tws-list").appendChild(e));
+  }
+</script>
+
+<nav id="bd-pills" class="bd-pills">
+  <div class="bd-pills-body">
+    <span class="bd-pill-label">Sort by</span>
+    <button class="bd-pill-button is-active" onclick="sortTweets('id')">Date</button>
+    <button class="bd-pill-button" onclick="sortTweets('likes')">Likes</button>
+  </div>
+</nav>
+
+<div id="love-tweets" class="bd-tws">
   <div class="bd-tws-list">
     {% for tweet_pair in site.data.love.tweets_by_id reversed %}
       {% assign tweet_id = tweet_pair[0] %}