From da92eadecda252f950c0642a026098626839a13b Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 20 May 2019 15:33:12 +0100
Subject: [PATCH] Added ability to set `<main>` class using route metadata

no issue
- modified `ui` service's `routeDidChange` handler to update it's `mainClass` property based on the new route's metadata
- used in the future for switching screen background colours

To use the feature, modify or add a `buildRouteInfoMetadata` hook in the route which you'd like to change, eg:

```js
export default AuthenticatedRoute.extend({
    ...

    buildRouteInfoMetadata() {
        return {
            bodyClasses: ['my-body-class'],
            mainClasses: ['grey-bg'] // <--------
        };
    }
});

```

The route hierarchy is taken into consideration with classes being added for all currently shown routes. For example if you wanted to add an `editor` class to all editor routes you could use the hook in `routes/editor.js` then if you added an `editor-new` class in `routes/editor/new.js` the resulting HTML output on the "New story" screen would be:

```html
<main class="gh-main editor editor-new">
```
---
 ghost/admin/app/services/ui.js            | 17 ++++++++++++++---
 ghost/admin/app/templates/application.hbs |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/services/ui.js b/ghost/admin/app/services/ui.js
index d23544904a..e3dff74988 100644
--- a/ghost/admin/app/services/ui.js
+++ b/ghost/admin/app/services/ui.js
@@ -2,22 +2,28 @@ import Service, {inject as service} from '@ember/service';
 import {get} from '@ember/object';
 import {not, or, reads} from '@ember/object/computed';
 
-function updateBodyClasses(transition) {
+function collectMetadataClasses(transition, prop) {
     let oldClasses = [];
     let newClasses = [];
     let {from, to} = transition;
 
     while (from) {
-        oldClasses = oldClasses.concat(get(from, 'metadata.bodyClasses') || []);
+        oldClasses = oldClasses.concat(get(from, `metadata.${prop}`) || []);
         from = from.parent;
     }
 
     while (to) {
-        newClasses = newClasses.concat(get(to, 'metadata.bodyClasses') || []);
+        newClasses = newClasses.concat(get(to, `metadata.${prop}`) || []);
         to = to.parent;
     }
 
+    return {oldClasses, newClasses};
+}
+
+function updateBodyClasses(transition) {
     let {body} = document;
+    let {oldClasses, newClasses} = collectMetadataClasses(transition, 'bodyClasses');
+
     oldClasses.forEach((oldClass) => {
         body.classList.remove(oldClass);
     });
@@ -34,6 +40,7 @@ export default Service.extend({
     isFullScreen: false,
     showMobileMenu: false,
     showSettingsMenu: false,
+    mainClass: '',
 
     hasSideNav: not('isSideNavHidden'),
     isMobile: reads('mediaQueries.isMobile'),
@@ -41,8 +48,12 @@ export default Service.extend({
 
     init() {
         this._super(...arguments);
+
         this.router.on('routeDidChange', (transition) => {
             updateBodyClasses(transition);
+
+            let {newClasses: mainClasses} = collectMetadataClasses(transition, 'mainClasses');
+            this.set('mainClass', mainClasses.join(' '));
         });
     },
 
diff --git a/ghost/admin/app/templates/application.hbs b/ghost/admin/app/templates/application.hbs
index 8e07a1ef85..6afa48379a 100644
--- a/ghost/admin/app/templates/application.hbs
+++ b/ghost/admin/app/templates/application.hbs
@@ -10,7 +10,7 @@
             }}
         {{/if}}
 
-        <main class="gh-main" role="main">
+        <main class="gh-main {{this.ui.mainClass}}" role="main">
             {{outlet}}
         </main>