FEATURE: Many (see description)

- Make setting for tag groups and just tags - Make sortable by setting - Show count - Improve styling - Version bump - Update readme.md
paviliondev · Sep 3, 2021 · 829fe5c · 829fe5c
1 parent 98224aa
commit 829fe5c
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 101 deletions.
diff --git a/about.json b/about.json
@@ -2,14 +2,7 @@
   "name": "Layouts Tag List Widget",
   "component": true,
   "authors": "Keegan George",
-  "theme_version": "0.1.0",
+  "theme_version": "1.0.0",
   "about_url": "https://github.com/paviliondev/layouts-tag-list-widget",
-  "license_url": "https://github.com/paviliondev/layouts-tag-list-widget/blob/master/LICENSE.txt",
-  "assets": {
-  },
-  "color_schemes": {
-  },
-  "modifiers": {
-
-  }
+  "license_url": "https://github.com/paviliondev/layouts-tag-list-widget/blob/master/LICENSE.txt"
 }
diff --git a/common/common.scss b/common/common.scss
@@ -1,66 +1,80 @@
-a.l-tags-header {
-  color: var(--primary);
-  font-size: 1.25rem;
-  display: inline-block;
-  margin-bottom: 0.5rem;
-  font-weight: bold;
-  transition: color 0.25s ease;
+.layouts-tag-list {
+  a.layouts-tag-list-header {
+    color: var(--primary);
+    font-size: 1.25rem;
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    transition: color 0.25s ease;
 
-  &:hover,
-  &:focus {
-    color: var(--primary-low-mid);
+    &:hover,
+    &:focus {
+      color: var(--primary-low-mid);
+    }
   }
-}
 
-.l-tag-items {
-  list-style: none;
-  margin-left: 0;
+  .layouts-tag-items {
+    list-style: none;
+    margin-left: 0;
+    margin-top: 0;
 
-  display: flex;
-  flex-flow: $display_style wrap;
+    display: flex;
+    flex-flow: $display-style wrap;
 
-  h4 {
-    margin-top: 1rem;
-    flex-basis: 100%;
-  }
+    h4 {
+      margin-top: 1rem;
+      flex-basis: 100%;
+    }
 
-  .l-tag-link {
-    cursor: pointer;
-    margin: 0.15rem;
+    .layouts-tag-link {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0.15rem;
 
-    .box {
-      transition: background-color 0.25s ease;
-      &:hover,
-      &:focus {
-        background-color: var(--primary-low-mid);
+      .tag-count {
+        font-size: var(--font-down-1);
+        vertical-align: middle;
+        line-height: var(--line-height-small);
+        margin-left: 0.25rem;
       }
-    }
 
-    .bullet {
-      transition: color 0.25s ease;
-      &::before {
+      .box {
         transition: background-color 0.25s ease;
+        &:hover,
+        &:focus {
+          background-color: var(--primary-low-mid);
+        }
       }
-      &:hover,
-      &:focus {
-        color: var(--primary-high);
+
+      .bullet {
+        transition: color 0.25s ease;
         &::before {
-          background-color: var(--primary-medium);
+          transition: background-color 0.25s ease;
+        }
+        &:hover,
+        &:focus {
+          color: var(--primary-high);
+          &::before {
+            background-color: var(--primary-medium);
+          }
         }
       }
-    }
 
-    &:not(:last-child) {
-      .simple::after {
-        content: ","; // todo make only if site setting is on row wrap instead of column wrap
+      &:not(:last-child) {
+        .simple::after {
+          @if $display-style == row {
+            content: ',';
+          }
+        }
       }
-    }
-    .simple {
-      transition: color 0.25s ease;
+      .simple {
+        transition: color 0.25s ease;
 
-      &:hover,
-      &:focus {
-        color: var(--primary-low-mid);
+        &:hover,
+        &:focus {
+          color: var(--primary-low-mid);
+        }
       }
     }
   }

diff --git a/javascripts/discourse/initializers/layouts-tag-list.js.es6 b/javascripts/discourse/initializers/layouts-tag-list.js.es6
@@ -1,17 +1,17 @@
-import { ajax } from "discourse/lib/ajax";
+import { ajax } from 'discourse/lib/ajax';
 
 export default {
-  name: "layouts-tag-list",
+  name: 'layouts-tag-list',
 
   initialize(container) {
-    const siteSettings = container.lookup("site-settings:main");
+    const siteSettings = container.lookup('site-settings:main');
     let layouts;
     let layoutsError;
 
     // Import layouts plugin with safegaurd for when widget exists without plugin:
     try {
       layouts = requirejs(
-        "discourse/plugins/discourse-layouts/discourse/lib/layouts"
+        'discourse/plugins/discourse-layouts/discourse/lib/layouts'
       );
     } catch (error) {
       layoutsError = error;
@@ -20,14 +20,25 @@ export default {
 
     if (layoutsError) return;
 
+    if (!siteSettings.tagging_enabled) {
+      console.warn(
+        'To use this widget, please enable the site setting: tagging_enabled'
+      );
+    }
+
     ajax(`/tags.json`).then((tagList) => {
       const tags = tagList.tags;
-      const tagGroups = tagList.extras.tag_groups;
+      let tagGroups;
+      if (siteSettings.tags_listed_by_group) {
+        tagGroups = tagList.extras.tag_groups;
+      } else {
+        tagGroups = null;
+      }
 
       const props = {
         tags,
-        siteSettings,
         tagGroups,
+        siteSettings,
       };
       layouts.addSidebarProps(props);
     });

diff --git a/javascripts/discourse/widgets/layouts-tag-list.js.es6 b/javascripts/discourse/widgets/layouts-tag-list.js.es6
@@ -17,13 +17,14 @@ try {
 export default layouts.createLayoutsWidget('tag-list', {
   html(attrs) {
     const { tags, tagGroups } = attrs;
+
     if (tags == null || tags == undefined) return;
 
     const tagListItems = [];
     const tagList = [];
     tagList.push(
       h(
-        'a.l-tags-header',
+        'a.layouts-tag-list-header',
         {
           attributes: {
             href: '/tags',
@@ -34,7 +35,7 @@ export default layouts.createLayoutsWidget('tag-list', {
     );
 
     if (tags.length == 0) {
-      tagList.push(h('a.l-tag-none', I18n.t(themePrefix('no_tags'))));
+      tagList.push(h('a', I18n.t(themePrefix('no_tags'))));
       return tagList;
     }
 
@@ -45,30 +46,60 @@ export default layouts.createLayoutsWidget('tag-list', {
       }
     };
 
-    console.log(tagGroups);
-    tagGroups.forEach((tagGroup) => {
-      tagListItems.push(h('h4', tagGroup.name));
-      tagGroup.tags.forEach((tag) => {
+    if (tagGroups) {
+      tagGroups.forEach((tagGroup) => {
+        tagListItems.push(h('h4', tagGroup.name));
+        this.sortTags(tagGroup.tags);
+        tagGroup.tags.forEach((tag) => {
+          if (!tagIsHidden(tag)) {
+            tagListItems.push(this.attach('layouts-tag-link', tag));
+          }
+        });
+      });
+
+      tagListItems.push(h('h4', I18n.t(themePrefix('other_tags'))));
+      tags.forEach((tag) => {
         if (!tagIsHidden(tag)) {
           tagListItems.push(this.attach('layouts-tag-link', tag));
         }
       });
-    });
-
-    tagListItems.push(h('h4', I18n.t(themePrefix('other_tags'))));
-    tags.forEach((tag) => {
-      if (!tagIsHidden(tag)) {
-        tagListItems.push(this.attach('layouts-tag-link', tag));
-      }
-    });
+    } else {
+      this.sortTags(tags);
+      tags.forEach((tag) => {
+        if (!tagIsHidden(tag)) {
+          tagListItems.push(this.attach('layouts-tag-link', tag));
+        }
+      });
+    }
 
-    tagList.push(h('ul.l-tag-items', tagListItems));
+    tagList.push(h('ul.layouts-tag-items', tagListItems));
     return tagList;
   },
+
+  sortTags(tags) {
+    const sortType = settings.sort_type;
+
+    switch (sortType) {
+      case 'Count Ascending':
+        return tags.sort((a, b) => (a.count > b.count ? 1 : -1));
+        break;
+      case 'Count Descending':
+        return tags.sort((a, b) => (b.count > a.count ? 1 : -1));
+        break;
+      case 'Alphabetical Ascending':
+        return tags.sort((a, b) => (a.text > b.text ? 1 : -1));
+        break;
+      case 'Alphabetical Descending':
+        return tags.sort((a, b) => (b.text > a.text ? 1 : -1));
+        break;
+      default:
+        return tags.sort((a, b) => (b.count > a.count ? 1 : -1));
+    }
+  },
 });
 
 createWidget('layouts-tag-link', {
-  tagName: 'li.l-tag-link',
+  tagName: 'li.layouts-tag-link',
   buildKey: (attrs) => `layouts-tag-link-${attrs.id}`,
 
   getTagTitle(tag) {
@@ -78,16 +109,18 @@ createWidget('layouts-tag-link', {
   },
 
   getTagCount(tag) {
-    // todo show count by setting
-    // const html = h("span", toString(tag.count));
-    // return html;
+    const showCount = settings.show_count;
+
+    if (showCount) {
+      const html = h('span.tag-count', `x ${tag.count.toString()}`);
+      return html;
+    }
   },
 
   html(attrs) {
     const contents = [];
-    console.log(attrs);
     contents.push(this.getTagTitle(attrs));
-    // contents.push(this.getTagCount(attrs));
+    contents.push(this.getTagCount(attrs));
     return contents;
   },
 

diff --git a/readme.md b/readme.md
@@ -1,37 +1,54 @@
 # 🏷️ Layouts Tag List Widget
 
-> ⚠️ **Note: This widget is unfinished and still in development. An alpha version has been released, but please wait for a stable release to use this widget in production.**
-
 ## 🔍 Overview
 
 The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's [Custom Layouts Plugin](https://meta.discourse.org/t/custom-layouts-plugin/55208). See the [installation guide](https://thepavilion.io/t/installation-and-setup/3200) to learn how to install and administer this widget.
 
+![Banner Image](screenshots/cover.png)
+
+> ⚠️ **Please ensure that you have tagging enabled in your Discourse settings for this widget to work.**
+
 ## 🔗 Info &amp; Links
 
 | Title                 | Link                                                                              |
 | --------------------- | --------------------------------------------------------------------------------- |
 | ⚙️ **Widget**         | [Layouts Tag List Widget](https://github.com/paviliondev/layouts-tag-list-widget) |
 | 🔌 **Base Plugin**    | [Custom Layouts Widget](https://meta.discourse.org/t/custom-layouts-plugin/55208) |
 | 👨‍💻 **Author**         | [Keegan George](https://github.com/keegangeorge/)                                 |
-| #️⃣ **Version**        | `0.1.0`                                                                           |
+| #️⃣ **Version**        | `1.0.0`                                                                           |
 | ❓ **How to Install** | [Installation Guide](https://thepavilion.io/t/installation-and-setup/3200)        |
 | 🐛 **Found a bug?**   | [Submit a bug report](https://thepavilion.io/w/bug-report/steps/intro)            |
 | ✋ **Have an idea?**  | [Submit a feature request](https://thepavilion.io/w/bug-report/steps/intro)       |
 
-## 📝 To Do:
+## ⚙️ Settings
+
+There are a couple settings that you can configure to customize how the event list widget appears in the layout.
+
+### 🙈 Hidden Tags
+
+Select tags from the dropdown you wish to have hidden from the sidebar.
+
+### 📄 Display Style
+
+Select between a column or row style layout to display your tags.
+
+| Column                            | Row                         |
+| --------------------------------- | --------------------------- |
+| ![Column](screenshots/column.png) | ![Row](screenshots/row.png) |
+
+### #️⃣ Show Count
+
+Toggling this setting will display the number of topics for each tag beside the tag item.
+
+<img src="screenshots/count.png" width="215">
 
-Version 1:
+### 📶 Sort Type
 
-- [x] Output tags in widget
-- [x] Clicking on tag links to filtering topics by tag
-- [x] Make tag appearance same as style set in admin settings
-- [x] Allow user to hide certain tags
-- [ ] Polish style and appearance of widget
+Select the manner in which tags should be sorted.
 
-Version 2:
+Options include:
 
-- [x] Display tags via tag group categorization
-  - [ ] Move to setting/optional
-- [ ] List tags by x most popular tags
-- [ ] Custom theme styles
-- [x] Add settings for customizing display order
+- Count Ascending
+- Count Descending
+- Alphabetical Ascending
+- Alphabetical Descending
diff --git a/screenshots/column.png b/screenshots/column.png
diff --git a/screenshots/count.png b/screenshots/count.png
diff --git a/screenshots/cover.png b/screenshots/cover.png
diff --git a/screenshots/row.png b/screenshots/row.png