Redesign breadcrumbs into Integrated Faceted Breadcrumb (IFB) design and put them into template

[eaquigley]

---

Author Name: Philip Durbin (@pdurbin)
Original Redmine Issue: 3537, https://redmine.hmdc.harvard.edu/issues/3537
Original Date: 2014-02-07
Original Assignee: Kevin Condon

---

We want to put breadcrumbs into the template.

We also want to to change the design of the breadcrumbs into an Integrated Faceted Breadcrumb (IFB) design as show in the image below from http://boxesandarrows.com/faceted-finding-with-super-powered-breadcrumbs/

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-12T21:44:16Z

---

Dropdown functionality has been added to the breadcrumbs, based on the mockup from the Boxes and Arrows article, to display the tree component within a panel that is displayed by clicking the triangle dropdown icon, next to the breadcrumb dataverse names. This is still in a development stage, and will need some improving, but we'll be testing the concept in the next round of user testing.

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-13T15:48:33Z

---

We are using the Overlay Panel (http://www.primefaces.org/showcase/ui/overlayPanel.jsf) from the Primefaces components showcase, and this might not be the best solution going forward, so we'll have to investigate other options. Currently, you can not click the breacdcrumb and navigate to that page. It only opens the tree node content panel below it, and the user must again click the page link from the tree node. Also, Elda has identified a bug with the overlay panel closing immediately after opening, which only seems to happen after you've done a search, or clicked a facet.

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-20T18:34:24Z

---

After Bootstrap was added to the app, it required some revisions to the breadcrumbs, and we are using the Bootstrap dropdown compenent (http://getbootstrap.com/javascript/#dropdowns) now, rather than the Primefaces version.

Two issues still exist that need to be addressed:

• If you are on a dataverse, that has child dataverse, there should be a dropdown menu displayed, with bold text, rather than a link, for the dataverse name you are currently on. Right now, only the bold text is being displayed.
• The tree in the dropdown is displaying the name of the dataverse you are viewing the child items, which is redundant, because that dataverse name is already displayed up in the breadcrumbs.

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-20T18:38:31Z

---

Additional issue with the breadcrumbs:

• The link of dataverse name displayed in the breadcrumbs does not navigate to that page, because it is tied to the dropdown functionality.

[eaquigley]

---

Original Redmine Comment
Author Name: Gustavo Durand (@scolapasta)
Original Date: 2014-02-20T23:45:26Z

---

Fixed issue where the current dataverse is not a dropdown for a tree, if it has children.
Fixed issue where it is displaying the dataverse you are on and children (now only children)
Fixed issue where the name is not a link to the dataverse (now it is, and caret opens dropdown).

Remaining issue is that clicking on tree closes dropdown: But I think this is an inherent flaw with using dropdowns here.

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-24T16:34:16Z

---

Added some javascript (reference: http://stackoverflow.com/questions/18306433/twitter-bootstrap-cant-stop-a-dropdown-from-closing-on-click) to disable the close dropdown functionality of the Bootstrap dropdown component, so that you can open and close the Primefaces tree component inside the dropdown.

[eaquigley]

---

Original Redmine Comment
Author Name: Mike Heppler (@mheppler)
Original Date: 2014-02-24T19:11:57Z

---

New issue:

• A dropdown caret is appearing for the last breadcrumb, when there shouldn't be, which results in an empty dropdown getting displayed. Not sure when or how this issue appeared. Most likely due to new logic in the render.

[eaquigley]

---

Original Redmine Comment
Author Name: Gustavo Durand (@scolapasta)
Original Date: 2014-02-26T22:53:49Z

---

Dropdown caret issue fixed. I think this is all set, except for making trees dynamic, if we decide to keep this after usability. Passing to QA and opening a new ticket for the trees.

[eaquigley]

---

Original Redmine Comment
Author Name: Gustavo Durand (@scolapasta)
Original Date: 2014-03-10T22:45:32Z

---

Why was this passed back to dev?

[eaquigley]

---

Original Redmine Comment
Author Name: Kevin Condon (@kcondon)
Original Date: 2014-03-13T00:17:02Z

---

Tested on 3/12

Breadcrumb drop downs appear to be working: displays child dv's, carets for additional levels. Leaf node is bold but not path to leaf node.

Closing ticket