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', 'originals',
-  }.property('enabled', 'name', 'stylesheet', 'header', 'footer', 'mobile_stylesheet', 'mobile_header', 'mobile_footer', '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>
+          {{#if view.mobile}}
-          <li><a {{bind-attr class="view.headerActive:active"}} {{action "selectHeader" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
+            <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.footerActive:active"}} {{action "selectFooter" target="view"}}>{{i18n 'admin.customize.footer'}}</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.mobileStylesheetActive:active"}} {{action "selectMobileStylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</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.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 "select" "mobile_footer" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
-          <li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "selectMobileFooter" 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,9 +46,13 @@
       <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'>

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'),
+  headerActive:           Em.computed.equal('selected', 'header'),
-  mobileFooterActive:     Em.computed.equal('selected', 'mobileFooter'),
+  topActive:              Em.computed.equal('selected', 'top'),
-  mobileStylesheetActive: Em.computed.equal('selected', 'mobileStylesheet'),
+  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'); },
+    toggleMobile: function() {
-    selectFooter:           function() { this.set('selected', 'footer'); },
+      // auto-select best tab
-    selectStylesheet:       function() { this.set('selected', 'stylesheet'); },
+      var tab = this.get("selected");
-    selectMobileHeader:     function() { this.set('selected', 'mobileHeader'); },
+      if (/_tag$/.test(tab)) { tab = "stylesheet"; }
-    selectMobileFooter:     function() { this.set('selected', 'mobileFooter'); },
+      if (this.get("mobile")) { tab = tab.replace("mobile_", ""); }
-    selectMobileStylesheet: function() { this.set('selected', 'mobileStylesheet'); },
+      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")
 
 });

app/assets/stylesheets/common/admin/admin_base.scss

@@ -516,6 +516,11 @@ section.details {
     .nav.nav-pills{
       position: relative;
     }
+    .toggle-mobile {
+      position: absolute;
+      right: 35px;
+      font-size: 20px;
+    }
     .toggle-maximize {
       position: absolute;
       right: -5px;

app/controllers/admin/site_customizations_controller.rb

@@ -52,8 +52,9 @@ class Admin::SiteCustomizationsController < Admin::AdminController
 
     def site_customization_params
       params.require(:site_customization)
-            .permit(:name, :stylesheet, :header, :footer,
+            .permit(:name, :stylesheet, :header, :top, :footer,
-                    :mobile_stylesheet, :mobile_header, :mobile_footer,
+                    :mobile_stylesheet, :mobile_header, :mobile_top, :mobile_footer,
+                    :head_tag, :body_tag,
                     :position, :enabled, :key,
                     :stylesheet_baked)
     end

app/controllers/application_controller.rb

@@ -275,7 +275,7 @@ class ApplicationController < ActionController::Base
 
     def custom_html_json
       data = {
-        top: SiteText.text_for(:top),
+        top: SiteCustomization.custom_top(session[:preview_style]),
         footer: SiteCustomization.custom_footer(session[:preview_style])
       }
 

app/models/site_customization.rb

@@ -77,14 +77,11 @@ class SiteCustomization < ActiveRecord::Base
     end
   end
 
-  def self.custom_header(preview_style=nil, target=:desktop)
+  %i{header top footer head_tag body_tag}.each do |name|
+    define_singleton_method("custom_#{name}") do |preview_style=nil, target=:desktop|
       preview_style ||= ENABLED_KEY
-    lookup_field(preview_style, target, :header)
+      lookup_field(preview_style, target, name)
     end
-
-  def self.custom_footer(preview_style=nil, target=:dekstop)
-    preview_style ||= ENABLED_KEY
-    lookup_field(preview_style,target,:footer)
   end
 
   def self.lookup_field(key, target, field)
@@ -95,15 +92,13 @@ class SiteCustomization < ActiveRecord::Base
     lookup = @cache[cache_key]
     return lookup.html_safe if lookup
 
-    styles =
+    styles = if key == ENABLED_KEY
-      if key == ENABLED_KEY
       order(:name).where(enabled:true).to_a
     else
       [find_by(key: key)].compact
     end
 
-    val =
+    val = if styles.present?
-      if styles.present?
       styles.map do |style|
         lookup = target == :mobile ? "mobile_#{field}" : field
         style.send(lookup)

app/models/site_text.rb

@@ -25,9 +25,6 @@ class SiteText < ActiveRecord::Base
   add_text_type :education_new_topic, default_18n_key: 'education.new-topic'
   add_text_type :education_new_reply, default_18n_key: 'education.new-reply'
   add_text_type :login_required_welcome_message, default_18n_key: 'login_required.welcome_message'
-  add_text_type :top, allow_blank: true, format: :html
-  add_text_type :bottom, allow_blank: true, format: :html
-  add_text_type :head, allow_blank: true, format: :html
 
   def site_text_type
     @site_text_type ||= SiteText.find_text_type(text_type)

app/views/layouts/application.html.erb

@@ -22,7 +22,9 @@
       <%= script "admin"%>
     <%- end %>
 
-    <%= raw SiteText.text_for(:head) %>
+    <%- unless customization_disabled? %>
+      <%= raw SiteCustomization.custom_head_tag(session[:preview_style]) %>
+    <%- end %>
 
     <%= render_google_universal_analytics_code %>
 
@@ -87,6 +89,8 @@
 
     <%= render_google_analytics_code %>
 
-    <%= raw SiteText.text_for(:bottom) %>
+    <%- unless customization_disabled? %>
+      <%= raw SiteCustomization.custom_body_tag(session[:preview_style]) %>
+    <%- end %>
   </body>
 </html>

app/views/layouts/crawler.html.erb

@@ -5,7 +5,9 @@
     <title><%= content_for?(:title) ? yield(:title) + ' - ' + SiteSetting.title : SiteSetting.title %></title>
     <meta name="description" content="<%= @description_meta || SiteSetting.site_description %>">
     <%= render partial: "layouts/head" %>
-    <%= raw SiteText.text_for(:head) %>
+    <%- unless customization_disabled? %>
+      <%= raw SiteCustomization.custom_head_tag(session[:preview_style]) %>
+    <%- end %>
     <%= yield :head %>
   </head>
   <body>

app/views/layouts/no_js.html.erb

@@ -5,7 +5,9 @@
     <title><%=SiteSetting.title%></title>
     <meta name="description" content="">
     <%= render partial: "layouts/head" %>
-    <%= raw SiteText.text_for(:head) %>
+    <%- unless customization_disabled? %>
+      <%= raw SiteCustomization.custom_head_tag(session[:preview_style]) %>
+    <%- end %>
     <%= yield(:no_js_head) %>
   </head>
   <body>

config/locales/client.en.yml

@@ -1715,7 +1715,14 @@ en:
         long_title: "Site Customizations"
         css: "CSS"
         header: "Header"
+        top: "Top"
         footer: "Footer"
+        head_tag:
+          text: "</head>"
+          title: "HTML that will be inserted before the </head> tag"
+        body_tag:
+          text: "</body>"
+          title: "HTML that will be inserted before the </body> tag"
         override_default: "Do not include standard style sheet"
         enabled: "Enabled?"
         preview: "preview"

db/migrate/20150112172259_migrate_site_text_to_site_customization.rb

@@ -11,7 +11,7 @@ class MigrateSiteTextToSiteCustomization < ActiveRecord::Migration
         '#{SecureRandom.uuid}',
         now(),
         now(),
-        (SELECT value FROM site_texts WHERE text_type = 'top' LIMIT 1),
+        (SELECT value FROM site_texts WHERE text_type = 'head' LIMIT 1),
         (SELECT value FROM site_texts WHERE text_type = 'bottom' LIMIT 1)
       )
     SQL

db/migrate/20150114093325_add_top_to_site_customization.rb

@@ -0,0 +1,20 @@
+class AddTopToSiteCustomization < ActiveRecord::Migration
+  def up
+    add_column :site_customizations, :top, :text
+    add_column :site_customizations, :mobile_top, :text
+
+    execute <<-SQL
+      UPDATE site_customizations
+         SET top = (SELECT value FROM site_texts WHERE text_type = 'top' LIMIT 1),
+             mobile_top = (SELECT value FROM site_texts WHERE text_type = 'top' LIMIT 1),
+             head_tag = (SELECT value FROM site_texts WHERE text_type = 'head' LIMIT 1),
+             body_tag = (SELECT value FROM site_texts WHERE text_type = 'bottom' LIMIT 1)
+       WHERE name = 'Migrated from Site Text'
+    SQL
+  end
+
+  def down
+    remove_column :site_customizations, :top
+    remove_column :site_customizations, :mobile_top
+  end
+end