Fix issue with custom category ordering

Fix issue with custom category ordering

Move code to separate js/hbs files

diff --git a/common/header.html b/common/header.html
deleted file mode 100644
index a85e49c..0000000
--- a/common/header.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<script type="text/discourse-plugin" version="0.8.26">
-  const Category = require("discourse/models/category").default;
-  let categoryThemeList = settings.category_icon_list.split('|');
-  let lockIcon = settings.category_lock_icon || 'lock';
-
-  const { iconHTML, iconNode } = require("discourse-common/lib/icon-library");
-  const { isRTL } = require("discourse/lib/text-direction");
-  const { h } = require("virtual-dom");
-  const getURL = require('discourse-common/lib/get-url').default;
-
-  var get = Em.get,
-    escapeExpression = Handlebars.Utils.escapeExpression;
-
-  function categoryStripe(color, classes) {
-    var style = color ? "style='background-color: #" + color + ";'" : "";
-    return "<span class='" + classes + "' " + style + "></span>";
-  }
-
-  function getIconItem(categorySlug) {
-  	// return nothing if categorySlug not specified
-  	if (!categorySlug) return;
-    let categoryThemeItem = categoryThemeList.find((str) =>
-    	str.indexOf(",") > -1 ? categorySlug.indexOf(str.substr(0,str.indexOf(","))) > -1 : '');
-    if (categoryThemeItem) {
-    	let iconItem = categoryThemeItem.split(',');
-    	// Test partial/exact match
-        if(iconItem[3]=='partial') {
-            return iconItem;
-        } else if(iconItem[0] === categorySlug) {
-            return iconItem;
-        }
-	}
-  }
-
-  function categoryIconsRenderer(category, opts) {
-    let description = get(category, "description_text");
-    let restricted = get(category, "read_restricted");
-    let url = opts.url
-      ? opts.url
-      : getURL("/c/") + Category.slugFor(category);
-    let href = opts.link === false ? "" : url;
-    let tagName = opts.link === false || opts.link === "false" ? "span" : "a";
-    let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
-    let color = get(category, "color");
-    let html = "";
-    let parentCat = null;
-    let categoryDir = "";
-
-    if (!opts.hideParent) {
-      parentCat = Category.findById(
-        get(category, "parent_category_id")
-      );
-    }
-
-    const categoryStyle =
-      opts.categoryStyle || Discourse.SiteSettings.category_style;
-    if (categoryStyle !== "none") {
-      if (parentCat && parentCat !== category) {
-        html += categoryStripe(
-          get(parentCat, "color"),
-          "badge-category-parent-bg"
-        );
-      }
-      html += categoryStripe(color, "badge-category-bg");
-    }
-
-    let classNames = "badge-category clear-badge";
-    if (restricted) {
-      classNames += " restricted";
-    }
-
-    let style = "";
-    if (categoryStyle === "box") {
-      style = `style="color: #${get(category, "text_color")};"`;
-    }
-
-    html +=
-      `<span ${style} ` +
-      'data-drop-close="true" class="' +
-      classNames +
-      '"' +
-      (description ? 'title="' + escapeExpression(description) + '" ' : "") +
-      ">";
-
-    /// Add custom category icon from theme settings
-    let iconItem = getIconItem(category.slug);
-    if(iconItem) {
-      let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : "";
-      let itemIcon = iconItem[1] != '' ? iconHTML(iconItem[1]) : "";
-      html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
-    }
-    /// End custom category icon
-
-    let categoryName = escapeExpression(get(category, "name"));
-
-    if (Discourse.SiteSettings.support_mixed_text_direction) {
-      categoryDir = isRTL(categoryName) ? 'dir="rtl"' : 'dir="ltr"';
-    }
-
-    if (restricted) {
-      html += iconHTML(lockIcon);
-    }
-    html += `<span class="category-name" ${categoryDir}>${categoryName}</span></span>`;
-
-    if (href) {
-      href = ` href="${href}" `;
-    }
-
-    extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
-    return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
-  };
-
-  api.replaceCategoryLinkRenderer(categoryIconsRenderer);
-
-  api.createWidget("category-icon", {
-    tagName: "div.category-icon-widget",
-    html(attrs) {
-      let iconItem = getIconItem(attrs.category.slug);
-      if(iconItem && !attrs.category.parent_category_id) {
-        let itemColor = iconItem[2] ? `color: ${iconItem[2]}` : "";
-        let itemIcon = iconItem[1] != '' ? iconNode(iconItem[1]) : "";
-        return h("span.category-icon", { "style": itemColor }, itemIcon);
-      }
-    }
-  });
-</script>
-
-<script type="text/x-handlebars" data-template-name="/connectors/category-title-before/category-icon-template">
-  {{mount-widget widget="category-icon" args=(hash category=category)}}
-</script>
diff --git a/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs b/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs
new file mode 100644
index 0000000..8fb8eb5
--- /dev/null
+++ b/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs
@@ -0,0 +1 @@
+{{mount-widget widget="category-icon" args=(hash category=category)}}
\ No newline at end of file
diff --git a/javascripts/discourse/initializers/category-icons.js b/javascripts/discourse/initializers/category-icons.js
new file mode 100644
index 0000000..7841953
--- /dev/null
+++ b/javascripts/discourse/initializers/category-icons.js
@@ -0,0 +1,139 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import Category from "discourse/models/category";
+
+import { iconHTML, iconNode } from "discourse-common/lib/icon-library";
+import isRTL from "discourse/lib/text-direction";
+import { h } from "virtual-dom";
+import getURL from "discourse-common/lib/get-url";
+
+export default {
+  name: "category-icons",
+
+  initialize() {
+    withPluginApi("0.8.26", (api) => {
+      let categoryThemeList = settings.category_icon_list.split("|");
+      let lockIcon = settings.category_lock_icon || "lock";
+      var get = Em.get,
+        escapeExpression = Handlebars.Utils.escapeExpression;
+
+      function categoryStripe(color, classes) {
+        var style = color ? "style='background-color: #" + color + ";'" : "";
+        return "<span class='" + classes + "' " + style + "></span>";
+      }
+
+      function getIconItem(categorySlug) {
+        if (!categorySlug) return;
+
+        let categoryThemeItem = categoryThemeList.find((str) =>
+          str.indexOf(",") > -1
+            ? categorySlug.indexOf(str.substr(0, str.indexOf(","))) > -1
+            : ""
+        );
+        if (categoryThemeItem) {
+          let iconItem = categoryThemeItem.split(",");
+          // Test partial/exact match
+          if (iconItem[3] == "partial") {
+            return iconItem;
+          } else if (iconItem[0] === categorySlug) {
+            return iconItem;
+          }
+        }
+      }
+
+      function categoryIconsRenderer(category, opts) {
+        let description = get(category, "description_text");
+        let restricted = get(category, "read_restricted");
+        let url = opts.url
+          ? opts.url
+          : getURL(`/c/${Category.slugFor(category)}/${get(category, "id")}`);
+        let href = opts.link === false ? "" : url;
+        let tagName =
+          opts.link === false || opts.link === "false" ? "span" : "a";
+        let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
+        let color = get(category, "color");
+        let html = "";
+        let parentCat = null;
+        let categoryDir = "";
+
+        if (!opts.hideParent) {
+          parentCat = Category.findById(get(category, "parent_category_id"));
+        }
+
+        const categoryStyle =
+          opts.categoryStyle || Discourse.SiteSettings.category_style;
+        if (categoryStyle !== "none") {
+          if (parentCat && parentCat !== category) {
+            html += categoryStripe(

[... diff too long, it was truncated ...]

GitHub sha: c9dd9cf4

Curious why these aren’t imported, and also why var is used?

We should remove Discourse.SiteSettings here.

Fixed. Not sure why they were vars, but now they are direct imports.

This was already handled.