mansona / ember-body-class Goto Github PK

View Code? Open in Web Editor NEW

27.0 4.0 10.0 7.72 MB

CSS classes on the <body> for your routes, as well as loading and error states.

License: MIT License

JavaScript 89.63% HTML 9.11% Handlebars 1.26%

ember-body-class's Introduction

ember-body-class

Easily add CSS classes on the <body>, including route names as well as loading and error states.

Compatibility

Ember.js v2.16 or above
Ember CLI v2.16 or above
Node.js v10 or above

Installation

ember install ember-body-class

Usage

npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix

Route name classes

By default, all of your routes will include CSS class names. This works for the whole hierarchy, so if you have a route nested at application/dashboard/stats, then you'll end up with application, dashboard, stats, application-dashboard and application-dashboard-stats classes.

To disable this, see options below.

Loading & Error classes

Adding the loading and error classes requires you to include a mixin in your application route. Include it like this:

import Ember from 'ember';
import BodyClassMixin from 'ember-body-class/mixins/body-class';

export default Ember.Route.extend(BodyClassMixin, { });

Custom classes

All routes have a classNames attribute of type Array. If you wanted to add a class strawberry-jam to your route, it would look like this:

export default Ember.Route.extend({
  classNames: ["strawberry-jam"]
})

Options

You can disable route name classes being added in your environment.js like this.

ENV['ember-body-class'] = {
  includeRouteName: false
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-body-class's People

Contributors

Stargazers

Watchers

Forkers

sgmurphy cesarizu ashrafhasson aklkv nathanhammond crixx mpanic harrylafranc esbanarango

ember-body-class's Issues

Option to Not Add "Route Parts" as Class Names

I want to specifically target the main "index" route. However, if I have another index route (e.g. home/index), the _getRouteDepthClasses() will add "home", "index", and "home-index" to the body. This means I can't specifically target "index" in my SCSS files. I only want it to add "home-index".

In my opinion, this should be the default functionality. At the very least, an environment config option should be added to allow for this.

Dynamic custom class name for the same route?

I have a very specific use case, but I am not sure if it's possible to achieve with the current implementation, so I was wondering if anyone had ideas on this.

The need is to have the classNames declaration in the route (as mentioned in the documentation) not as a fixed value/string but variable depending on some conditions (and updated across model updates for the same route).
More specifically, if you consider the field-guide implementation, every page under the show route will render with the show class attached to the body, but actually would be better if the show.js added an extra class name using the normalized path of the markdown file, so that it's possible to use the (unique) class name to target specific pages in CSS.

I have tried in different ways and even used a tracked variable and assigned it to the classNames property in the route, but it uses the value at the first render and then it doesn't update when the page content (and model) changes (but the route remains the same, of course).

Any idea if that's even possible to achieve what I'm thinking?

Classes not applied in FastBoot when environment=production

Running on ember 3.1.2, the addon works fine, except for when I build/serve my app with --environment=production, I noticed that route classes are not applied to the body tag on the fastboot rendered version of the page. Once the page is re-rendered on the clientside, the classes are added correctly.

Full fastboot compatibility

In fastboot apps, since the body classes are not applied when rendered on the server, any CSS styles dependent on those classes are not applied until after the client-side app boots up and takes over, which results in a undesirable FOUC-like affect, where elements are styled one way on initial page load, then change in style when the ember app loads.

The ember-cli-document-title addon achieves full rendering parity between fastboot/client by checking to see if fastboot's dom renderer is available, and if it is, it uses that, otherwise it falls back to the normal DOM environment implementation. (https://github.com/kimroen/ember-cli-document-title/blob/master/vendor/document-title/document-title.js#L85)

Would it be possible to do the same thing here?

Issues when used with Ember 3.1

When using the body-class mixin from the latest version (1.0.1) with Ember 3.1, I'm getting the
following error:

Cannot read property 'lookup' of undefined

It's thrown from this line:

https://github.com/stonecircle/ember-body-class/blob/1c7f1235fca2c1e03cc38fef89201a2c54f93b03/addon/mixins/body-class.js#L8

When using the previous version (0.4.0) instead, it works. But then I'm seeing the following deprecation warning:

Route#router is an intimate API that has been renamed to Route#_router. However you might want to consider using the router service [deprecation id: ember-routing.route-router] See https://emberjs.com/deprecations/v3.x#toc_ember-routing-route-router for more details.

Ability to toggle and bind classnames after the route is loaded?

Application rootElement?

Instead of slapping the classes on <body> shouldn't it be put onto rootElement?

Doesn't work with ember-simple-auth logout/invalidate

Expected:
When logging out using ember-simple-auth session.invalidate(), I expect that the body classes are cleaned up and the current route body class is removed.

Actual:
The current body class is not removed (deactivate is not triggered) and ember-simple-auth redirects to the login route with the old class still in place.

In some controllers it works in some it doesn't.

Example:

import Ember from 'ember';
import BodyClassMixin from 'ember-body-class/mixins/body-class';

export default Ember.Controller.extend(BodyClassMixin,{
  classNames: ["login"],
... }

Shows up in HTML:
<body class="ember-application application login">

dashboard.js controller:

import Ember from 'ember';
import BodyClassMixin from 'ember-body-class/mixins/body-class';

export default Ember.Controller.extend(BodyClassMixin,{
    classNames: ["nav-md"],
.. }

Doesn't show up in HTML:
<body class="ember-application application dashboard">

I've tested the controller with an action to make sure those 2 are wired properly and it is. There are no errors in console.log . Any ideas?

addon not compatible with fastboot

trying to use it with https://github.com/tildeio/ember-cli-fastboot i've got the error (stacktrace below).
If I understand correctly it is because we cannot use JQuery in fastboot - maybe it is possible to do it without jquery?

Error while processing route: index _ember.default.$ is not a function TypeError: _ember.default.$ is not a function
    at null.addClasses (<anonymous>:67470:39)
    at Object.applyStr (<anonymous>:34003:18)
    at Object.sendEvent (<anonymous>:27568:28)
    at exports.default._emberMetalMixin.Mixin.create.trigger (<anonymous>:45149:25)
    at _emberRuntimeSystemObject.default.extend.enter (<anonymous>:36584:12)
    at Object.callHook (<anonymous>:63765:38)
    at handlerEnteredOrUpdated (<anonymous>:62536:20)
    at setupContexts (<anonymous>:62513:9)
    at finalizeTransition (<anonymous>:62691:7)
    at <anonymous>:62126:14
TypeError: _ember.default.$ is not a function
    at null.addClasses (<anonymous>:67470:39)
    at Object.applyStr (<anonymous>:34003:18)
    at Object.sendEvent (<anonymous>:27568:28)
    at exports.default._emberMetalMixin.Mixin.create.trigger (<anonymous>:45149:25)
    at _emberRuntimeSystemObject.default.extend.enter (<anonymous>:36584:12)
    at Object.callHook (<anonymous>:63765:38)
    at handlerEnteredOrUpdated (<anonymous>:62536:20)
    at setupContexts (<anonymous>:62513:9)
    at finalizeTransition (<anonymous>:62691:7)
    at <anonymous>:62126:14
500 Unknown Error: TypeError: _ember.default.$ is not a function

Doesn't work in fastboot version 3.2.0-beta.2

In the latest version of fastboot the body classes no longer render while in fastboot mode.

Not exactly sure what's causing it or if it's something to change in this library or in fastboot but discovered it and thought I'd create this.

Add Dasherized Version

First off I love this addon. I used to do something similar to this in Rails and it was a tremendous help for styling.

I have a small request. In addition to the separate route component classes (let's say example.com/blog/1/post/1/comments) creating class="blog post comments", I'd love it if the individual component pieces were also combined in a dasherized way. In certain URL paths, a CSS selector of .blog .post could be ambiguous.

I'd rather if the above created (at the very least)

class="blog post comments blog-post-comments"

And I'd prefer a dasherized version of all paths leading up to it, so:

class="blog post comments blog-post blog-post-comments"

This allows us to be laser focused in our styles on which page the styles apply to.

Thanks for this great addon!

Object.freeze issue on IE11

Hi,

In this commit 1df34bb you defined bodyClasses with Object.freeze.

This cause issue in our app for IE11 like so:

And IE11 refuse to boot the app.

If I remove the Object.freeze constraint, the app boot normally.

Why this constraint has been introduced in the first place?
Will you accept a PR for removing it?

Presence of ember-body-class leading to memory leak

Hi there!
Our build server is running out of memory since we switched to the new ember test style (where initializers also run for unit tests). I guess the memory leak is in the ember-body-class initializer, namely in body-class.js:59. Anyone an idea how to fix this?

A repo with a freshly generated ember 3.4 app ready to start debugging is here: https://github.com/crixx/bodyclassplayground

Steps to reproduce without using the repo above:

ember new app
ember install ember-body-class
write an unit test with just an assert BUT with the module and setupTest() hooks
ember t -s
in DevTools go to Memory: take heap snapshot
filter for container (Screenshot 1)
find the leaking peace of code (Screenshot2)

Any help highly appreciated!

Cheers
Crixx