Merge pull request #552 from topcoder-platform/issues-519_2

Issues-487: Home page redesign (frixed breadcrumbs and scrolling)

Author: jmgasper

vanilla/applications/vanilla/controllers/class.vanillacontroller.php

@@ -75,6 +75,7 @@ protected function checkPageRange(int $offset, int $totalCount) {
     protected function buildBreadcrumbs($CategoryID) {
         $Category = CategoryModel::categories($CategoryID);
         $ancestors = CategoryModel::getAncestors($CategoryID);
+        $parentCategoryID = val('ParentCategoryID', $Category);
         if(val('GroupID', $Category) > 0) {
             $temp = [];
             foreach ($ancestors as $id => $ancestor) {
@@ -102,6 +103,14 @@ protected function buildBreadcrumbs($CategoryID) {
                 }
             }
 
+            // FIX https://github.com/topcoder-platform/forums/issues/487
+            // Go to a parent category at a home page
+            foreach ($ancestors as $id => $ancestor) {
+                if ($ancestor['ParentCategoryID'] == -1) {
+                     $ancestors[$id]['Url'] = url('/categories/#Category_'.$parentCategoryID, true);
+                }
+            }
+
             return $ancestors;
         }
     }

vanilla/applications/vanilla/js/home.js

@@ -1,8 +1,45 @@
-jQuery(document).ready(function($) {
-  $(".CategoryAccordion").accordion({ header: ".CategoryAccordionHeader",
-    animate:false,
-    collapsible: true,
-    active: 0,  heightStyle: "content" ,
-    icons: { "header": "icon icon-chevron-down", "activeHeader": "icon icon-chevron-up" }});
-
- });
+jQuery(document).ready(function ($) {
+  // $(".CategoryAccordion").accordion({ header: ".CategoryAccordionHeader",
+  //   animate:false,
+  //   collapsible: true,
+  //  active: 0,  heightStyle: "content" ,
+  //  icons: { "header": "icon icon-chevron-down", "activeHeader": "icon icon-chevron-up" }});
+
+  var headers = $('.CategoryAccordion .accordion-header')
+
+  // add the accordion functionality
+  headers.click(function () {
+    var panel = $(this).next()
+    var isOpen = panel.is(':visible')
+    if (isOpen) {
+      $(panel).parent().find('.ui-accordion-header-icon').removeClass('icon-chevron-up').addClass('icon-chevron-down')
+      $(panel).parent().find('.CategoryAccordionHeader').removeClass('ui-state-active')
+    } else {
+      $(panel).parent().find('.ui-accordion-header-icon').addClass('icon-chevron-up').removeClass('icon-chevron-down')
+      $(panel).parent().find('.CategoryAccordionHeader').addClass('ui-state-active')
+    }
+
+    //panel[isOpen? 'slideUp': 'slideDown']()
+    panel[isOpen ? 'hide' : 'show']().trigger(isOpen ? 'hide' : 'show')
+
+    return false
+  })
+
+  // hook up the expand/collapse
+  var hash = window.location.hash.substr(1)
+  if (hash) {
+    // Collapse other categories
+    $('.CategoryAccordionHeader').removeClass('ui-state-active')
+    $('.CategoryAccordionHeader').find('.ui-accordion-header-icon').removeClass('icon-chevron-up').addClass('icon-chevron-down')
+    $('.ui-accordion-content').hide()
+
+    $('#' + hash).find('.CategoryAccordionHeader').addClass('ui-state-active')
+    $('#' + hash).find('.ui-accordion-header-icon').removeClass('icon-chevron-down').addClass('icon-chevron-up');
+    $('#' + hash).find('.ui-accordion-content').show()
+  } else {
+    // Expand all categories
+    $('.CategoryAccordionHeader').addClass('ui-state-active')
+    $('.CategoryAccordionHeader').find('.ui-accordion-header-icon').removeClass('icon-chevron-down').addClass('icon-chevron-up');
+    $('.ui-accordion-content').show()
+  }
+})

vanilla/applications/vanilla/views/categories/helper_functions.php

@@ -378,7 +378,7 @@ function writeCategoryAccordion($categories, $depth = 1) {
 
         ?>
         <div class="DataListWrap DataAccordionWrap">
-            <div id="CategoryAccordion" class="CategoryAccordion">
+            <div id="CategoryAccordion" class="CategoryAccordion ui-accordion ui-widget ui-helper-reset">
                 <?php
                 foreach ($categories as $category) {
                     writeAccordionItem($category, $depth);
@@ -408,11 +408,12 @@ function writeAccordionItem($category, $depth) {
         $categoryID = val('CategoryID', $category);
         $cssClass = cssClass($category, true);
 ?>
-        <div id="Category_<?php echo $categoryID; ?>" class="CategoryAccordionItem">
-            <div class="<?php echo $cssClass; ?> CategoryAccordionHeader">
+        <div id="Category_<?php echo $categoryID; ?>" class="CategoryAccordionItem ">
+            <div class="<?php echo $cssClass; ?> CategoryAccordionHeader accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
                 <a class="toggle" href="javascript:void(0);"><?php echo Gdn_Format::text(val('Name', $category)); ?></a>
+                <span class="ui-accordion-header-icon ui-icon icon icon-chevron-up"></span>
             </div>
-            <ul id="Category_<?php echo $categoryID; ?>_child" class="DataList CategoryList CategoryAccordionCollapse">
+            <ul id="Category_<?php echo $categoryID; ?>_child" class="DataList CategoryList ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
                <?php
                  foreach ($children as $child) {
                     writeListItem($child, $depth + 1);