poteto/ember-crumbly

Declarative breadcrumb navigation for Ember apps

ember-crumbly's Issues

Assertion Failed: [ember-crumbly] `route:loading.index` was not found

This error is shown when I move from a page with ember-crumbly to a page without it.
The next page isn't loaded, so this error totally breaks the page navigation.
I don't have a loading route, but I have a loading.hbs template.

DEBUG: -------------------------------
ember.debug.js:4888 DEBUG: Ember                    : 1.12.0
ember.debug.js:4888 DEBUG: Ember Data               : 1.0.0-beta.18
ember.debug.js:4888 DEBUG: jQuery                   : 2.1.4
ember.debug.js:4888 DEBUG: Ember Simple Auth        : 0.8.0
ember.debug.js:4888 DEBUG: Ember Simple Auth Devise : 0.8.0
ember.debug.js:4888 DEBUG: -------------------------------

[Chore] Set `currentRouteName` to readOnly

Using resetNamespace breaks crumbs

One of the great uses for crumbly is solving the navigation headache of returning to a previous route in heavily nested routes. However, Ember provides resetNamespace to prevent your actual code requiring heavy nesting. I'm not sure if others find this to be an issue, but when resetting the namespace, Crumbly's first route returns to the reset point.

This is problematic because it no longer reflects how our user navigated here. This could possibly be solved by #19, but I also think we could solve it much more easily by not using currentRouteName, and perhaps using currentURL or something similar. I'm not sure if this offers the same route lookup mechanism or not. This might be a breaking change for some users.

Thoughts?

Hide element if no crumbs

Currently the breadcrumb element still shows up and takes up space even if there are no crumbs.

[Intermittent Issue] Setting title in breadCrumb object from route, doesn't enable linkable while moving to child route.

Let us assume, the route is say foo > baz and another route xyz > baz

Steps to reproduce:

1. In routes/foo.js, pass title as "FOO doesn't hyperlink itself"
2. Don't set linkable
3. Refresh the baz page. You can see the foo with hyperlink and baz as non-linkable. [which is fine]
4. Navigate to the other route xyz and do a page refresh. Come back to baz via foo, you can see foo is not hyperlink enabled.

Please share your thoughts if it happens to others as well.

I can try for a possible fix, could take some time though.

[Feature] Set linkable on Component

Opt in or out to having links inside of the breadcrumb.

Redirect hook bypassed when clicking on breadcrumb

When I click on a breadcrumb it seems that the redirect hook in my model doesn't work.

_guessRoutePath throws error for non-nested routes.

_guessRoutePath(routeNames, name, index) {
const routes = routeNames.slice(0, index + 1);

if (routes.length === 1) {
  return `${name}.index`;
} else {
  return routes.join('.');
}
},

throws this error: Uncaught Error: Assertion Failed: [ember-crumbly]route:examples.indexwas not found when in a pod format I have the perfectly legitimate examples/route.js examples/template.hbs.

Elements of breadcrumb are not linkable (when they should)

Let's assume we've got the following route hierarchy: /admin/users and admin route has following definition:

export default Ember.Route.extend({
    breadCrumb: {
        title: 'Some title'
    }
});

When you enter the route 'admin', the admin breadcrumb is not linkable since it is the last element of the breadcrumb. Unfortunately, when you proceed to 'admin.users' that admin route is still not linkable. Reload of the page fixes the problem.

The issue here is that when you first enter the route you retrieve breadCrumb object from the route and modify it injecting linkable property. And this property value is used from this moment on.

The fix I guess is easy: use a copy of the object. Something along the lines in _lookupBreadCrumb:

const routeBreadCrumb = get(route, 'breadCrumb');
if (typeOf(routeBreadCrumb) === 'null') {
   return;
}
let breadCrumb = Ember.assign({
   title: classify(name),
   linkable: crumbLinkable,
   path
}, routeBreadCrumb);
return breadCrumb;

So far one could use workaround:

export default Ember.Route.extend({
    breadCrumb: Ember.computed(function() {
        return {
            title: 'Some title'
        };
    }).volatile()
});

[Feature Request]: Linkable false issue in child views

If the route is "foo.baz" and setting "baz" as "linkable:false", and having "edit" route as child of "baz" renders the breadcrumb as "foo > baz > edit" where
foo - linkable
baz - non linkable
edit - linkable.

Development preview site is down

As an FYI, the demo url link (https://github.com/poteto/ember-crumbly/blob/master/package.json#L57) is down, as divshot was bought by Firebase in the last year.

Appreciate your work on this!

Autohide crumb container when empty

if you use breadCrumb: null on the first couple (sub)routes, you can end up with an empty crumb container.

it might be nice to autohide it in that case

---

edit:
having just one crumb is kind of annoying too. it might be nice to have:

• a crumbThreshold
• a firstCrumbRoute
• or something else

breadCrumb override is ignored on a root route

Consider the following routes.

When navigating to http://localhost:4200/customers the breadcrumbs generated is

1. Customers

However when navigating to http://localhost:4200/customers/1 the breadcrumbs generated is

1. OverrideMe!
2. Profile.

router.js

  this.route('customers', function () {
    this.route('profile', {path: '/:id'});
  });

routes/customers.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'OverrideMe!'
  },
});

[Chore] Create demo app

Ignore loading/error routes

I am getting errors when crumbly can't find a loading route. This is similar to #60, but the twist is these routes, although they don't exist, should not be included in the crumb ( unlike index or other routes that don't explicitly exist but are still breadcrumbable routes. )
Anyway .. I can submit PR, but wanted to wait till the master branch is updated. Is that going to happen anytime soon?

Custom Block Param Causes Infinite Rerender in [email protected]+

Tests are failing for #27 because the click test helper promise is never fulfilled in the release, beta, and canary channels. After a bit of investigation, I found that transitioning to a different route in the dummy app causes an infinite re-render (and infinite deprecations).

To reproduce (on the develop branch), run:

ember try ember-release serve

Then open 127.0.0.1:4200/foo/bar/baz and your developer console. Once loaded, in any component, click on a crumb that will transition to another route. You should see an infinite stream of deprecations in the console, and the tab will likely become unresponsive.

If you remove the Custom Block component from the dummy app and repeat this test, all should work.

manually set link

I have a use case that doesn't seem to be covered in the docs.

I have a resource that has several sub-routes (details, relatedobjects, morerelatedobjects) and I use bootstrap tabs to keep a consistent interface. This means that when I link to a particular resource, I link directly to /details, which provides data related to the resource itself (as opposed to the other tabs, which show arrays of the related objects.)

However, when I use crumbly it links directly to the resource without the details, meaning that it renders an empty page. I've tried using a redirect on the 'naked' resource to transition to the details sub-route, but either I'm using that method incorrectly or it simply isn't working.

I see how to overwrite the text in the breadcrumb but how do I overwrite the linked route itself?

Thanks...

Remove outputStyle property support

Hi,

I found that bread-crumb addon very useful, but I think not everyone use Bootstrap or Foundation for layout. Currently it's not possible to fully customize addon's classNames, because breadcrumb class is a default one and cannot be overwritten. It can cause some problems, as it is in my case.

Regards

breadCrumb can be a computed property, but no documentation/tests

I ran into a situation where the breadCrumb title was stale by the time the page was rendered. Long story short, afterModel on the new route may wind up being called before deactivate on the old route, but model changes are rolled back on deactivate. As a result, the breadcrumb was showing the unsaved title that was eventually rolled back.

One method for resolving this situation is to define breadCrumb as a computed property. The good news is that it works:

breadCrumb: Ember.computed('controller.model.name', {
  get() {
    return { title: this.get('controller.model.name') };
  }
})

The trouble is that I did not see any documentation or tests accordingly. I'm wondering if this is a supported feature, and if not, should it be?

[Feature] Set default route title for routes with breadCrumb undefined

Classify the string

Breadcrumb title i18n issue

import { translationMacro as t } from "ember-i18n";

breadCrumb: {
title: t('settings.language'),
}

Error: Uncaught Error: Assertion Failed: Cannot translate settings.language. [object Object] does not have an i18n.

Demo site

DivShot has ceased ops, becoming part of Firebase.

Henceforth, the demo site is no longer available, FYI.

Project still active?

This project has a great rating on ember observer, but has a few bugs, broken demo page, and broken CI. Also looks like the PRs are fairly active, wanted to see if you were still working on this.

If the original author has moved on, does someone from the PR thread want to step up and take over? npm still sees this package getting a fair amount of use, but without a maintainer I'll probably switch us to something else.

[Chore] Add ember-suave

Enforce all the styleguides!

Make active breadcrumb not be an anchor tag

It would be great if there was an option to make the active breadcrumb not be an anchor tag. I'm using the breadcrumb with Bootstrap and their examples show the active breadcrumb to just have text within the list item (no anchor tag).

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Currently, I'm adding my own custom styles to make the active breadcrumb look like normal text instead of a link, but I'm still able to click on it, which just goes to the same page I'm on.

[Feature] Check for `hasBlock`

Might need to polyfill.

Route file ignored when both file and directory present.

Crumbly doesn’t honor Ember convention: authors/Index.js route isn’t parent of authors/posts.js, it’s actually the default route. Loading /authors/1/posts will not load index model, so can’t compute properties to make a “Jack > Posts” type of crumbs. User gonna see “Authors > Posts” then navigate away and back again to see “Jack > Posts” and get confused.

There’s an authors.js route adjacent to authors directory which will load model and compute its properties but it gets ignored. Most people use index, ok, but no excuse to ignore the right file.

PS: It may be related to #99 (but with less commas)

[Feature] Set outputStyle on Component

Generate different HTML / class names for out of the box Bootstrap and Foundation support.

Could not find module 'ember-new-computed'

After upgrading to 1.0.0 this error pops up:

Uncaught Error: Could not find module `ember-new-computed` imported from `ember-crumbly/components/bread-crumbs` : loader.js:110

Already removed node_modules and cleared cache, npm installed again and everything but error still remains ... what could cause this issue?

DEBUG: Ember      : 2.1.0
DEBUG: Ember Data : 2.1.0
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------

Ember CLI ^2.10.x fails to set route breadCrumb value to a Model

Previously, in a route I would simply use this line to set the breadCrumb to a model after the model for that route is loaded. It was a nice one-step way to get ember-crumbly to create a named link directly to that record's URL. Like this:

afterModel(model) {
  Ember.set(this, 'breadCrumb', model);
}

However, as of Ember ^2.10.x this throws Assertion Failed: Cannot clone an Ember.Object that does not implement Ember.Copyable

Thoughts? I've implemented a workaround:

afterModel(model) {
  Ember.set(this, 'breadCrumb', {
    title: model.get("name")
  });
}

But.... whain.

Thanks!

Demo site is down :(

The demo site is currently down due to divshot shutting down.
I'd be happy to open a github pages PR if someone can point me in the direction of the demo app's source code?

Failure with missing `index` route

Steps to reproduce:

1. {{bread-crumbs tagName="ol" outputStyle="bootstrap" linkable=true}} in application.hbs
2. Define a loading.hbs template in app/templates/ (This is the minimum requirement for presenting a default loading template)
3. Uncaught Error: Assertion Failed: [ember-crumbly] route:loading.index was not found

This can be remedied by generating the required index route (ember g route loading/index).
(It also happens with other auto-generated index routes)

Expected behaviour

Should work without explicitly generating an index route.

Problems with */* and */index routes

I have a situation when i want to show breadcrumbs when user visits
routeWithBreadcrumbsProperty/* route and dont what to show it when user visits
routeWithBreadcrumbsProperty/index route
and i in the first case it make sense to use routeWithBreadcrumbsProperty route to get breadCrumb title and in the second case it make sense to use routeWithBreadcrumbsProperty/index route
unfortunately addon always wants to use routeWithBreadcrumbsProperty/index property but if route level is > 0 eg. 'foo.bar' foor.bar route is using
the workaround that i use right now is:
routeWithBreadcrumbsProperty checks if transition target is not equal to routeWithBreadcrumbsProperty/index and then sets correct breadcrumb to routeWithBreadcrumbsProperty/index route also i use routeWithBreadcrumbsProperty/index activate/deactivate hooks to populate or clear breadCrumb object

Set link classes

G'day,

Would you be open to adding a linkClass attribute to the component? Basically just like crumbClass but for specifying a class on the <a> element.

What do you think? I'm happy to submit a PR if you like.

Remove `EnumerableUtils`

[Suggestion] Make the `breadCrumb` optional by default (or make this configurable).

This would help a lot when you need to integrate that into existing product but want to only show the breadcrumbs for specific pages and avoid the need to set breadCrumb: null all over every route (there might be tons of routes).

Aside from that, there might be a route that is not index (e.g., top-level about route) and the guessed name is incorrect (there is no about.index but there is about). In a bigger project this all just breaks apart but with breadCrumb route attribute being optional by default (or configured to be optional) these checks can be just silently bypassed.

How get current bread-crumb in template?

I define my breadCrumb ..

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Login',
    description: 'I want to show this descrition'
  }
});

How to get description in current template?

{{#bread-crumb route=<current>}}
   <current>.description
{{/bread-crumb}}

Is it possible to support routable engines?

Crumb now working is same route

When transitioning to the same route with another id, the crumb is not being updated.
However, when reload, the breadCrumb will be updated.
Please find the video here to illustrate the problem.

Add image to breadcrumb

Hello!

Is it possible to add an image to one or more breadcrumb items such that the html looks something like this?

`

Cow

`

or

`

Cow

`

Many thanks!

Julie

Proposal: Multiple crumbs per route

TL;DR - I have a use case where it would be nice to have a certain route provide more than one "crumb" in the breadcrumb trail.

The Use Case

Here's the practical use case (being verbose for clarity's sake)

Let's say I have my routes set up as follows:

app/router.js

this.route('companies', {path: '/companies'}, function () {
    // companies
    this.route('index', {path: '/'} );
});

this.route('company', {path: '/company/:id'}, function () {
    // company/:id/departments
    this.route('departments', {path: '/departments'});
});

this.route('department', {path: '/department/:id'}, function () {
    // department/:id/employees
    this.route('employees', {path: '/employees'});
});

this.route('employee', {path: '/employee/:id'}, function () {
    // employee/:id/documents
    this.route('documents', {path: '/documents'});
});

I'd argue that this is not an unconventional way to set things up. The principle that I'm sticking to here is that, with the exception of the companies.index route, each leaf level route is a list of items under an addressable resource. That being said, conceptually, the hierarchy is clearly still

Company
    Department
          Employee
               Document

What I want to be able to do

On the page I land on for URL /employee/poteto/documents, I would like to be able to build the breadcrumb trail like this (all potentially linkable)

Clients  >  Dockyard  >  Engineering  >  Lauren  >  Documents

Despite the active routes being

application
    employee
        employee.documents

A proposed solution

a route can provide multiple 'crumbs' to the breadcrumb trail

• application - No breadcrumbs provided
  • employee - Clients > Dockyard > Engineering > Lauren
    • employee.documents - > Documents

I'm not sure how to best add this to the API surface you already have defined (I really like it for the use cases that this add-on is designed for), but if we consider that an implementation detail, I think that decoupling model relationship hierarchies from route hierarchies would make the addon a bit more flexible.

Thoughts?

First element in route with null title still creates forward slash

When I create a route where the first part of the route is given a null titled breadcrumb, the forward slash still appears.

Route is defined as Admin / Profiles / Profile.

Admin's breadCrumb title is set to null, and appears as:

/ Profiles / Profile

Is there a way to get it to display as: Profiles / Profile

Error: Assertion Failed: [ember-crumbly] `route:some-route.index` was not found

Happens, when there is no 'route'/index route setup in the project. Dunno if the pull request I created would work with 1.0.1 ? #34

DEPRECATION: Overriding init without calling this._super is deprecated. Please call `this._super.init && this._super.init.apply(this, arguments);` addon: `ember-cli-htmlbars`

I'm using [email protected] and I get this waring all the time, when I type npm ls ember-cli-htmlbars I get this:

├── [email protected]
└─┬ [email protected]
  └── [email protected]

It will be great to use [email protected]. to fix this waring

[Chore] Improve warning messages to include addon name

Makes for easier debugging in consuming apps.

addon broken in ember-cli 0.2.7

I read your post in ember weekly and want to use your component - but I can't get it working in my ember cli project. See terminal output. I also tried again after npm run clean:all (see below), same issue.

node v0.12.4
ember-data v1.0.0-beta.18

    "clean": "rm -rf ./node_modules ./bower_components ./dist ./tmp",
    "clean:all": "npm run clean && npm cache clean && bower cache clean"

Integration testing fails when crumbly is defined in a component

I'm refactoring my application and moved crumbly from a route to a component template. Now my component integration test fails with an error below:

Assertion Failed: [ember-crumbly] Could not find a curent route

Eventually I want to add testing and ensure proper path and links have been rendered but stuck here. I've tried many suggestions like using qunit "visit" method, StartApp helper and could not get test to pass. Any help is greatly appreciated.

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('main-user', 'Integration | Component | main user', {
  integration: true,
});

test('it renders', function (assert) {
  this.render(hbs`{{my-new-component-with-crumbly}}`);
  assert.ok(true);
});

Home link prefix any route

How can to add Home link before any breadcrumb , for example :
Home/Users ( routes/users/index)
Home/Users/new (routes/users/new)
Thanks

using with ember generate route fails

Thanks for publishing this addon; it looks helpful but I ran into an issue using it.
ember-cli 0.2.5
ember 1.13.0-beta.2

1. ember new crumbly-bugfix
2. ember generate route somewhere
3. ember serve
   Upon navigating to localhost:4200/somewhere the browser console says

Uncaught Error: Assertion Failed: [ember-crumbly] `route:somewhere.index` was not found

bower.json

{
  "name": "crumbly-bugfix",
  "dependencies": {
    "ember": "1.13.0-beta.2",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-data": "1.0.0-beta.18",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.15",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1"
  }
}

My app/templates/application.hbs has

<h2 id="title">Welcome to Ember.js</h2>
{{bread-crumbs tagName="ul" outputStyle="foundation" linkable=false}}
{{outlet}}

[Feature] Add template logic