move SiteText.{head,top,bottom} to SiteCustomization

app/assets/javascripts/admin/models/site_customization.js

@@ -7,7 +7,12 @@
   @module Discourse
 **/
 Discourse.SiteCustomization = Discourse.Model.extend({
-  trackedProperties: ['enabled', 'name', 'stylesheet', 'header', 'footer', 'mobile_stylesheet', 'mobile_header', 'mobile_footer'],
+  trackedProperties: [
+    'enabled', 'name',
+    'stylesheet', 'header', 'top', 'footer',
+    'mobile_stylesheet', 'mobile_header', 'mobile_top', 'mobile_footer',
+    'head_tag', 'body_tag'
+  ],
 
   description: function() {
     return "" + this.name + (this.enabled ? ' (*)' : '');
@@ -25,8 +30,10 @@ Discourse.SiteCustomization = Discourse.Model.extend({
     if (changed) { this.set('savingStatus', ''); }
 
     return changed;
-
-  }.property('enabled', 'name', 'stylesheet', 'header', 'footer', 'mobile_stylesheet', 'mobile_header', 'mobile_footer', 'originals'),
+  }.property('enabled', 'name', 'originals',
+    'stylesheet', 'header', 'top', 'footer',
+    'mobile_stylesheet', 'mobile_header', 'mobile_top', 'mobile_footer',
+    'head_tag', 'body_tag'),
 
   startTrackingChanges: function() {
     var self = this;
@@ -43,15 +50,20 @@ Discourse.SiteCustomization = Discourse.Model.extend({
   save: function() {
     this.set('savingStatus', I18n.t('saving'));
     this.set('saving',true);
+
     var data = {
       name: this.name,
       enabled: this.enabled,
       stylesheet: this.stylesheet,
       header: this.header,
+      top: this.top,
       footer: this.footer,
       mobile_stylesheet: this.mobile_stylesheet,
       mobile_header: this.mobile_header,
-      mobile_footer: this.mobile_footer
+      mobile_top: this.mobile_top,
+      mobile_footer: this.mobile_footer,
+      head_tag: this.head_tag,
+      body_tag: this.body_tag
     };
 
     var siteCustomization = this;

app/assets/javascripts/admin/templates/customize_css_html.hbs

@@ -17,12 +17,22 @@
 
       <div class='admin-controls'>
         <ul class="nav nav-pills">
-          <li><a {{bind-attr class="view.stylesheetActive:active"}} {{action "selectStylesheet" target="view"}}>{{i18n 'admin.customize.css'}}</a></li>
-          <li><a {{bind-attr class="view.headerActive:active"}} {{action "selectHeader" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
-          <li><a {{bind-attr class="view.footerActive:active"}} {{action "selectFooter" target="view"}}>{{i18n 'admin.customize.footer'}}</a></li>
-          <li><a {{bind-attr class="view.mobileStylesheetActive:active"}} {{action "selectMobileStylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</a></li>
-          <li><a {{bind-attr class="view.mobileHeaderActive:active"}} {{action "selectMobileHeader" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.header'}}</a></li>
-          <li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "selectMobileFooter" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
+          {{#if view.mobile}}
+            <li><a {{bind-attr class="view.mobileStylesheetActive:active"}} {{action "select" "mobile_stylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</a></li>
+            <li><a {{bind-attr class="view.mobileHeaderActive:active"}} {{action "select" "mobile_header" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.header'}}</a></li>
+            <li><a {{bind-attr class="view.mobileTopActive:active"}} {{action "select" "mobile_top" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.top'}}</a></li>
+            <li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "select" "mobile_footer" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
+          {{else}}
+            <li><a {{bind-attr class="view.stylesheetActive:active"}} {{action "select" "stylesheet" target="view"}}>{{i18n 'admin.customize.css'}}</a></li>
+            <li><a {{bind-attr class="view.headerActive:active"}} {{action "select" "header" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
+            <li><a {{bind-attr class="view.topActive:active"}} {{action "select" "top" target="view"}}>{{i18n 'admin.customize.top'}}</a></li>
+            <li><a {{bind-attr class="view.footerActive:active"}} {{action "select" "footer" target="view"}}>{{i18n 'admin.customize.footer'}}</a></li>
+            <li><a {{bind-attr class="view.headTagActive:active"}} {{action "select" "head_tag" target="view"}} title="{{i18n 'admin.customize.head_tag.title'}}">{{fa-icon "file-text-o"}}&nbsp;{{i18n 'admin.customize.head_tag.text'}}</a></li>
+            <li><a {{bind-attr class="view.bodyTagActive:active"}} {{action "select" "body_tag" target="view"}} title="{{i18n 'admin.customize.body_tag.title'}}">{{fa-icon "file-text-o"}}&nbsp;{{i18n 'admin.customize.body_tag.text'}}</a></li>
+          {{/if}}
+          <li class='toggle-mobile'>
+            <a {{bind-attr class="view.mobile:active"}} {{action "toggleMobile" target="view"}}>{{fa-icon "mobile"}}</a>
+          </li>
           <li class='toggle-maximize'><a {{action "toggleMaximize" target="view"}}>
             {{#if view.maximized}}
               {{fa-icon "compress"}}
@@ -36,14 +46,18 @@
       <div class="admin-container">
         {{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
         {{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
+        {{#if view.topActive}}{{aceEditor content=selectedItem.top mode="html"}}{{/if}}
         {{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
+        {{#if view.headTagActive}}{{aceEditor content=selectedItem.head_tag mode="html"}}{{/if}}
+        {{#if view.bodyTagActive}}{{aceEditor content=selectedItem.body_tag mode="html"}}{{/if}}
         {{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
         {{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
+        {{#if view.mobileTopActive}}{{aceEditor content=selectedItem.mobile_top mode="html"}}{{/if}}
         {{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
       </div>
       <div class='admin-footer'>
         <div class='status-actions'>
-          <span>{{i18n 'admin.customize.enabled'}}  {{input type="checkbox" checked=selectedItem.enabled}}</span>
+          <span>{{i18n 'admin.customize.enabled'}} {{input type="checkbox" checked=selectedItem.enabled}}</span>
           {{#unless selectedItem.changed}}
           <a class='preview-link' {{bind-attr href="selectedItem.previewUrl"}} target='_blank' title="{{i18n 'admin.customize.explain_preview'}}">{{i18n 'admin.customize.preview'}}</a>
           |

app/assets/javascripts/admin/views/admin_customize_view.js

@@ -12,21 +12,36 @@ Discourse.AdminCustomizeView = Discourse.View.extend({
   templateName: 'admin/templates/customize',
   classNames: ['customize'],
   selected: 'stylesheet',
+  mobile: false,
 
-  headerActive:           Em.computed.equal('selected', 'header'),
-  footerActive:           Em.computed.equal('selected', 'footer'),
   stylesheetActive:       Em.computed.equal('selected', 'stylesheet'),
-  mobileHeaderActive:     Em.computed.equal('selected', 'mobileHeader'),
-  mobileFooterActive:     Em.computed.equal('selected', 'mobileFooter'),
-  mobileStylesheetActive: Em.computed.equal('selected', 'mobileStylesheet'),
+  headerActive:           Em.computed.equal('selected', 'header'),
+  topActive:              Em.computed.equal('selected', 'top'),
+  footerActive:           Em.computed.equal('selected', 'footer'),
+  headTagActive:          Em.computed.equal('selected', 'head_tag'),
+  bodyTagActive:          Em.computed.equal('selected', 'body_tag'),
+
+  mobileStylesheetActive: Em.computed.equal('selected', 'mobile_stylesheet'),
+  mobileHeaderActive:     Em.computed.equal('selected', 'mobile_header'),
+  mobileTopActive:        Em.computed.equal('selected', 'mobile_top'),
+  mobileFooterActive:     Em.computed.equal('selected', 'mobile_footer'),
 
   actions: {
-    selectHeader:           function() { this.set('selected', 'header'); },
-    selectFooter:           function() { this.set('selected', 'footer'); },
-    selectStylesheet:       function() { this.set('selected', 'stylesheet'); },
-    selectMobileHeader:     function() { this.set('selected', 'mobileHeader'); },
-    selectMobileFooter:     function() { this.set('selected', 'mobileFooter'); },
-    selectMobileStylesheet: function() { this.set('selected', 'mobileStylesheet'); },
+    toggleMobile: function() {
+      // auto-select best tab
+      var tab = this.get("selected");
+      if (/_tag$/.test(tab)) { tab = "stylesheet"; }
+      if (this.get("mobile")) { tab = tab.replace("mobile_", ""); }
+      else { tab = "mobile_" + tab; }
+      this.set("selected", tab);
+      // toggle mobile
+      this.toggleProperty("mobile");
+    },
+
+    select: function(tab) {
+      this.set('selected', tab);
+    },
+
     toggleMaximize: function() {
       this.set("maximized", !this.get("maximized"));
 
@@ -35,20 +50,19 @@ Discourse.AdminCustomizeView = Discourse.View.extend({
           $(this).data("editor").resize();
         });
       });
-
     },
   },
 
-  didInsertElement: function() {
+  _init: function() {
     var controller = this.get('controller');
     Mousetrap.bindGlobal('mod+s', function() {
       controller.send("save");
       return false;
     });
-  },
+  }.on("didInsertElement"),
 
-  willDestroyElement: function() {
+  _cleanUp: function() {
     Mousetrap.unbindGlobal('mod+s');
-  }
+  }.on("willDestroyElement")
 
 });