⚡️ Added per-post code injection fields to PSM (TryGhost#811)

- Remove gh-tab* components
    - The PSM was the only place where the `gh-tabs-manager`, `gh-tab`, and `gh-tab-pane` components were being used. These were very old components and did not work well with newer Ember versions and best practices.
    - 🔥 remove `gh-tab*` components
    - 💄 fix indents in `gh-post-settings-menu` template
    - 🎨 add support for named subviews ready for additional PSM panes

- Added per-post code injection fields to PSM
    - add "Code Injection" pane to the PSM
    - implement `codeinjectionHead` and `codeinjectionFoot`  attributes on `Post` model and save values from PSM
    - use CodeMirror for the PSM code injection fields

app/components/gh-cm-editor.js

@@ -23,6 +23,12 @@ const CmEditorComponent =  Component.extend(InvokeActionMixin, {
 
     lazyLoader: injectService(),
 
+    didReceiveAttrs() {
+        if (this.get('value') === null || undefined) {
+            this.set('value', '');
+        }
+    },
+
     didInsertElement() {
         this._super(...arguments);
 

app/components/gh-post-settings-menu.js

@@ -29,10 +29,13 @@ export default Component.extend(SettingsMenuMixin, {
     settings: injectService(),
 
     model: null,
-    slugValue: boundOneWay('model.slug'),
+
     customExcerptScratch: alias('model.customExcerptScratch'),
-    metaTitleScratch: alias('model.metaTitleScratch'),
+    codeinjectionFootScratch: alias('model.codeinjectionFootScratch'),
+    codeinjectionHeadScratch: alias('model.codeinjectionHeadScratch'),
     metaDescriptionScratch: alias('model.metaDescriptionScratch'),
+    metaTitleScratch: alias('model.metaTitleScratch'),
+    slugValue: boundOneWay('model.slug'),
 
     _showSettingsMenu: false,
     _showThrobbers: false,
@@ -157,9 +160,11 @@ export default Component.extend(SettingsMenuMixin, {
     },
 
     actions: {
-        showSubview() {
+        showSubview(subview) {
             this._super(...arguments);
 
+            this.set('subview', subview);
+
             // Chrome appears to have an animation bug that cancels the slide
             // transition unless there's a delay between the animation starting
             // and the throbbers being removed
@@ -170,6 +175,8 @@ export default Component.extend(SettingsMenuMixin, {
 
         closeSubview() {
             this._super(...arguments);
+
+            this.set('subview', null);
             this.get('showThrobbers').perform();
         },
 
@@ -261,6 +268,36 @@ export default Component.extend(SettingsMenuMixin, {
             });
         },
 
+        setHeaderInjection(code) {
+            let model = this.get('model');
+            let currentCode = model.get('codeinjectionHead');
+
+            if (code === currentCode) {
+                return;
+            }
+
+            model.set('codeinjectionHead', code);
+
+            return model.validate({property: 'codeinjectionHead'}).then(() => {
+                return model.save();
+            });
+        },
+
+        setFooterInjection(code) {
+            let model = this.get('model');
+            let currentCode = model.get('codeinjectionFoot');
+
+            if (code === currentCode) {
+                return;
+            }
+
+            model.set('codeinjectionFoot', code);
+
+            return model.validate({property: 'codeinjectionFoot'}).then(() => {
+                return model.save();
+            });
+        },
+
         setMetaTitle(metaTitle) {
             // Grab the model and current stored meta title
             let model = this.get('model');

app/mixins/editor-base-controller.js

@@ -159,6 +159,8 @@ export default Mixin.create({
 
         this.set('model.title', this.get('model.titleScratch'));
         this.set('model.customExcerpt', this.get('model.customExcerptScratch'));
+        this.set('model.footerInjection', this.get('model.footerExcerptScratch'));
+        this.set('model.headerInjection', this.get('model.headerExcerptScratch'));
         this.set('model.metaTitle', this.get('model.metaTitleScratch'));
         this.set('model.metaDescription', this.get('model.metaDescriptionScratch'));
 

app/models/post.js

@@ -80,6 +80,8 @@ export default Model.extend(Comparable, ValidationEngine, {
     customExcerpt: attr(),
     featured: attr('boolean', {defaultValue: false}),
     featureImage: attr('string'),
+    codeinjectionFoot: attr('string', {defaultValue: ''}),
+    codeinjectionHead: attr('string', {defaultValue: ''}),
     html: attr('string'),
     locale: attr('string'),
     metaDescription: attr('string'),
@@ -116,8 +118,10 @@ export default Model.extend(Comparable, ValidationEngine, {
     publishedAtBlogTime: '',
 
     customExcerptScratch: boundOneWay('customExcerpt'),
-    metaTitleScratch: boundOneWay('metaTitle'),
+    codeinjectionFootScratch: boundOneWay('codeinjectionFoot'),
+    codeinjectionHeadScratch: boundOneWay('codeinjectionHead'),
     metaDescriptionScratch: boundOneWay('metaDescription'),
+    metaTitleScratch: boundOneWay('metaTitle'),
 
     isPublished: equal('status', 'published'),
     isDraft: equal('status', 'draft'),

app/styles/components/settings-menu.css

@@ -111,6 +111,10 @@
     padding: 0 24px 24px;
 }
 
+.settings-menu-content label code {
+    font-weight: normal;
+}
+
 .settings-menu-content .gh-image-uploader {
     margin: 0 0 1.6rem 0;
 }
@@ -188,6 +192,15 @@
     line-height: 1.35em;
 }
 
+.settings-menu-content .CodeMirror {
+    height: 170px;
+    min-height: 170px;
+    padding: 0;
+}
+
+.settings-menu-content .CodeMirror-scroll {
+    min-height: 170px;
+}
 
 /* Background
 /* ---------------------------------------------------------- */