Added categories full tree support

Author: webdevstar

package.json

@@ -57,7 +57,7 @@
     "cookie-parser": "^1.4.3",
     "css-loader": "^0.28.0",
     "express": "^4.15.1",
-    "express-jwt": "^5.1.0",
+    "express-jwt": "^5.3.0",
     "extract-text-webpack-plugin": "^2.1.0",
     "formidable": "^1.1.1",
     "fs-extra": "^2.1.2",
@@ -69,7 +69,7 @@
     "lru-cache": "^4.0.2",
     "material-ui": "^0.17.4",
     "moment": "^2.18.1",
-    "mongodb": "^2.2.25",
+    "mongodb": "^2.2.26",
     "nodemailer": "^4.0.1",
     "nodemailer-smtp-transport": "^2.7.4",
     "react": "^15.5.4",

themes/current/assets/css/theme.css

@@ -183,29 +183,23 @@ hr.separator {
 .categories-tree ul ul {
   display: none;
 }
-.categories-tree a.active + ul {
-  display: block;
-}
 .categories-tree li {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 .75em;
   list-style: none;
+  position: relative;
 }
 .categories-tree li a {
   color: #7a7a7a;
   margin: 0;
-  padding: 0 0 0 .75em;
-  line-height: 1.9;
+  padding: 0;
+  line-height: 2.2;
   display: block;
+  position: relative;
+  text-indent: 20px;
 }
-.categories-tree li li a {
-  padding: 0 0 0 1.5em;
-}
-.categories-tree li li li a {
-  padding: 0 0 0 2.25em;
-}
-.categories-tree li li li li a {
-  padding: 0 0 0 3em;
+.categories-tree li a:hover {
+  color: #000;
 }
 .categories-tree li a.active {
   color: #000;
@@ -215,6 +209,23 @@ hr.separator {
   display: block;
 }
 
+.categories-tree li.has-child > a:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: 0;
+  width: 16px;
+  height: 19px;
+  background-position: -7px -2px;
+  background-image: url(/assets/images/arrow_right.svg);
+}
+
+.categories-tree li.active.has-child > a:after {
+  background-position: -4px -2px;
+  background-image: url(/assets/images/arrow_down.svg);
+}
+
 .sidebar {
   z-index: 1000;
   background: #fff;

themes/current/assets/images/arrow_down.svg

@@ -5,14 +5,25 @@ import config from '../lib/config'
 import * as helper from '../lib/helper'
 
 const TreeItem = ({ categories, categoryDetails, activeCategory, onClick }) => {
-  const childs = categories.filter(category => category.parent_id === categoryDetails.id).map((category, index) => <TreeItem key={index} categories={categories} categoryDetails={category} activeCategory={activeCategory} />)
-  const currentCategoryIsActive = activeCategory && activeCategory.id === categoryDetails.id;
-  const parentCategoryIsActive = activeCategory && activeCategory.parent_id === categoryDetails.id;
+  const childs = categories
+    .filter(category => category.parent_id === categoryDetails.id)
+    .map((category, index) =>
+      <TreeItem key={index} categories={categories} categoryDetails={category} activeCategory={activeCategory} />
+    );
+
+  const parentIds = helper.getParentIds(categories, activeCategory.id);
+  const isActive = parentIds.includes(categoryDetails.id) || activeCategory.id === categoryDetails.id;
+  const hasChild = childs && childs.length > 0;
+
+  let classNames = isActive ? 'active' : '';
+  if(hasChild){
+    classNames += classNames === '' ? 'has-child' : ' has-child';
+  }
 
   return (
-    <li className={currentCategoryIsActive || parentCategoryIsActive ? 'active' : ''}>
+    <li className={classNames}>
       <Link to={categoryDetails.path} activeClassName="active" onClick={onClick}>{categoryDetails.name}</Link>
-      {childs && childs.length > 0 &&
+      {hasChild &&
         <ul>
           {childs}
         </ul>
@@ -23,7 +34,12 @@ const TreeItem = ({ categories, categoryDetails, activeCategory, onClick }) => {
 
 const CategoryTree = ({ categories, activeCategory, onClick }) => {
   if(categories) {
-    const elements = categories.filter(category => category.parent_id === null).map((category, index) => <TreeItem key={index} categories={categories} categoryDetails={category} activeCategory={activeCategory} onClick={onClick} />)
+    const elements = categories
+      .filter(category => category.parent_id === null)
+      .map((category, index) =>
+        <TreeItem key={index} categories={categories} categoryDetails={category} activeCategory={activeCategory} onClick={onClick} />
+      );
+
     return (
       <div className="categories-tree">
         <ul>

themes/current/assets/images/arrow_right.svg

@@ -26,3 +26,19 @@ export const getThumbnailUrl = (originalUrl, width) => {
     return '';
   }
 }
+
+export const getParentIds = (categories, categoryId) => {
+  let parentIds = [];
+  let parentExists = false;
+
+  do {
+    const category = categories.find(item => item.id === categoryId);
+    parentExists = category && category.parent_id;
+    if(parentExists){
+      parentIds.push(category.parent_id)
+      categoryId = category.parent_id;
+    }
+  } while(parentExists)
+
+  return parentIds;
+}