working on hierarchical categories

History.md

@@ -12,6 +12,10 @@
 * Added new `facebookPage` setting.
 * Added category description to category menu, when it exists.
 * Fixed post category and post thumbnail CSS classes. 
+* Switched back to `aldeed:autoform` instead of `sacha:autoform`.
+* Updated to Meteor 1.1.0.3.
+* Added support for menu hierarchies.
+* Added hierarchical categories. 
 
 ## v0.22.2
 

packages/telescope-core/i18n/en.i18n.json

@@ -73,5 +73,6 @@
   "follow_on_twitter": "Follow on Twitter",
   "like_on_facebook": "Like on Facebook",
   "share_on_twitter": "Share on Twitter",
-  "share_on_facebook": "Share on Facebook"
+  "share_on_facebook": "Share on Facebook",
+  "powered_by_telescope": "Powered by Telescope"
 }

packages/telescope-core/lib/client/templates/menu/menu.scss

@@ -50,7 +50,15 @@ $text: #444444;
 .menu-top-label{
   cursor: pointer;
 }
-
+.menu-child-items{
+  margin-top: 5px;
+  margin-left: 5px;
+  padding-left: 5px;
+  border-left: 1px solid rgba(0,0,0,0.3);
+  .dark-bg & {
+    border-color: rgba(255,255,255,0.3);
+  }
+}
 // ------------------------------------ List ------------------------------------ //
 
 .menu-list{

packages/telescope-core/lib/client/templates/menu/menu_component.html

@@ -43,14 +43,10 @@
       {{/if}}
     </div>
     <div class="menu-menu">
-      {{#with getMenuItems}}
+      {{#with rootMenuItems}}
         <ul class="menu-contents" role="menu" aria-labelledby="dLabel">
           {{#each this}}
-            {{#if hasTemplate}}
-              {{> Template.dynamic template=template data=data}}
-            {{else}}
-              {{> menuItem}}
-            {{/if}}
+            {{> menuItem}}
           {{/each}}
         </ul>
       {{/with}}
@@ -64,9 +60,20 @@
 
 <template name="menuItem">
   <li class="menu-item {{itemClass}}">
-    <a class="menu-sub-level" href="{{itemRoute}}">
-      <span class="menu-label">{{itemLabel}}</span>
-      {{#if description}}<span class="menu-description">{{_ description}}</span>{{/if}}
-    </a>
+    {{#if hasTemplate}}
+      {{> Template.dynamic template=template data=data}}
+    {{else}}
+      <a class="menu-sub-level" href="{{itemRoute}}">
+        <span class="menu-label">{{itemLabel}}</span>
+        {{#if description}}<span class="menu-description">{{_ description}}</span>{{/if}}
+      </a>
+    {{/if}}
+    {{#with childMenuItems}}
+      <ul class="menu-child-items">
+        {{#each this}}
+          {{> menuItem}}
+        {{/each}}
+      </ul>
+    {{/with}}
   </li>
 </template>

packages/telescope-core/lib/client/templates/menu/menu_component.js

@@ -3,27 +3,44 @@ getRoute = function (item) {
   return typeof item.route === "function" ? item.route() : Router.path(item.route);
 };
 
-// filter out admin-only items if needed
-getMenuItems = function (menu) {
-  var menuItems = menu.menuItems;
 
+filterMenuItems = function (menuItems, level, parentId) {
+  var childLevel = level + 1; 
+
+  // filter out admin-only items if needed
   if (!Users.is.admin(Meteor.user())) {
     menuItems = _.reject(menuItems, function (item) {
       return item.adminOnly;
     });
   }
 
+  menuItems = _.filter(menuItems, function (item) {
+    if (level === 0) {
+      // if this is the root level, return elements with no parentId
+      return typeof item.parentId === "undefined";
+    } else {
+      // else, return elements with the correct parentId
+      return item.parentId === parentId;
+    }
+  });
+
+  // decorate child item with their level
+  menuItems = _.map(menuItems, function (item) {
+    item.level = childLevel;
+    return item;
+  });
+
   return menuItems;
 };
 
 Template.menuComponent.helpers({
-  getMenuItems: function () {
-    return getMenuItems(this);
+  rootMenuItems: function () {
+    return filterMenuItems(this.menuItems, 0);
   },
   menuClass: function () {
     var classes = [this.menuName+"-menu"];
     var mode = (typeof this.menuMode === "undefined") ? "list" : this.menuMode;
-    var count = getMenuItems(this).length;
+    var count = filterMenuItems(this.menuItems, 0).length;
 
     classes.push("menu-"+mode);
 
@@ -53,9 +70,6 @@ Template.menuComponent.helpers({
   menuLabel: function () {
     // if label is defined, use this. Else default to menu name
     return !!this.menuLabel ? this.menuLabel : i18n.t(this.menuName);
-  },
-  hasTemplate: function () {
-    return !!this.template;
   }
 });
 
@@ -68,6 +82,9 @@ Template.menuComponent.events({
 });
 
 Template.menuItem.helpers({
+  hasTemplate: function () {
+    return !!this.template;
+  },
   itemClass: function () {
     var itemClass = "";
     var currentPath = Router.current().location.get().path ;
@@ -91,5 +108,19 @@ Template.menuItem.helpers({
   },
   itemRoute: function () {
     return getRoute(this);
+  },
+  childMenuItems: function () {
+    console.log(this)
+    var currentLevel = this.level;
+
+    // note: for some reason, we need to go back one level to go from child to root, but 
+    // two levels to go from grandchild to child
+    var levelIncrement = this.level === 1 ? 1 : 2;
+
+    var allMenuItems = Template.parentData(currentLevel+levelIncrement).menuItems;
+
+    if (this._id) { // don't try to find child menu items if current element doesn't have an id
+      return filterMenuItems(allMenuItems, currentLevel, this._id);
+    }
   }
 });

packages/telescope-notifications/lib/client/templates/notification_item.html

@@ -1,8 +1,8 @@
 <template name="notification_item">
-  <li class="dropdown-item notification-item {{#if read}}read{{/if}}">
+  <div class="{{#if read}}read{{/if}}">
     <span class="notification-timestamp">{{timeAgo timestamp}}</span>
     <div class="notification-html">
       {{{notificationHTML}}}
     </div>
-  </li>
+  </div>
 </template>

packages/telescope-notifications/lib/client/templates/notifications_mark_as_read.html

@@ -1,3 +1,3 @@
 <template name="notifications_mark_as_read">
-  <li class="dropdown-item"><a href="#" class="button mark-as-read btn btn-primary">{{_ "mark_as_read"}}</a></li> 
+  <a href="#" class="button mark-as-read btn btn-primary">{{_ "mark_as_read"}}</a>
 </template>

packages/telescope-tags/lib/categories.js

@@ -28,6 +28,22 @@ Categories.schema = new SimpleSchema({
     type: String,
     optional: true,
     editableBy: ["admin"]
+  },
+  parentId: {
+    type: String,
+    optional: true,
+    editableBy: ["admin"],
+    autoform: {
+      options: function () {
+        var categories = Categories.find().map(function (category) {
+          return {
+            value: category._id,
+            label: category.name
+          };
+        });
+        return categories;
+      }
+    }
   }
 });
 

packages/telescope-tags/lib/client/templates/categories_menu.html

@@ -1,7 +1,7 @@
 <template name="categories_menu">
   <div class="categories-menu {{moduleClass}}">
     {{#if hasCategories}}
-      {{> menuComponent menuName="categories" menuItems=menuItems menuMode=menuMode}}
+      {{> menuComponent menuName="categories" menuItems=menuItems menuMode=menuMode menuHierarchyKey="parentId"}}
     {{/if}}
   </div>
 </template>

packages/telescope-tags/lib/client/templates/categories_menu.js

@@ -15,7 +15,9 @@ Meteor.startup(function () {
             return Categories.getUrl(category.slug);
           },
           label: category.name,
-          description: category.description
+          description: category.description,
+          _id: category._id,
+          parentId: category.parentId
         };
       });
       return defaultItem.concat(menuItems);