Head and Footer Content / Tailwind Configuration (#286)

jonsgreen · web-flow · commit 65af3d5d1c50 · 2022-05-09T12:22:50.000-04:00
- adds Tailwind js copied from cdn as a webpack - adds ability to add head and footer html content to website pages [What's the impact of the "Play CDN" version of Tailwind?](https://miro.com/app/board/uXjVO6C1LxA=/?moveToWidget=3458764523961411101&cot=14)
diff --git a/app/assets/stylesheets/modules/_code-mirror.scss b/app/assets/stylesheets/modules/_code-mirror.scss
@@ -33,3 +33,14 @@
   box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); /* Bootstrap 4 */
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
+
+#staff_websites_edit, #staff_websites_new {
+  .CodeMirror {
+    height: 15vh;
+    min-height: 15vh;
+  }
+  .CodeMirror-focused {
+    height: 60vh;
+    min-height: 60vh;
+  }
+}
diff --git a/app/controllers/staff/websites_controller.rb b/app/controllers/staff/websites_controller.rb
@@ -47,13 +47,17 @@ def website_params
         :twitter_handle,
         :facebook_url,
         :instagram_url,
+        :head_content,
         footer_categories: [],
         navigation_links: [],
         session_format_configs_attributes: [
           :id, :name, :display, :position, :session_format_id
         ],
         fonts_attributes: [
-          :id, :name, :file, :_destroy, :primary, :secondary
+          :id, :name, :file, :primary, :secondary, :_destroy
+        ],
+        contents_attributes: [
+          :id, :name, :html, :placement, :_destroy
         ],
     )
   end
diff --git a/app/decorators/website_decorator.rb b/app/decorators/website_decorator.rb
@@ -135,4 +135,12 @@ def font_root_css
       }
     CSS
   end
+
+  def head_content
+    object.contents.for(Website::Content::HEAD).pluck(:html).join.html_safe
+  end
+
+  def footer_content
+    object.contents.for(Website::Content::FOOTER).pluck(:html).join.html_safe
+  end
 end
diff --git a/app/javascript/controllers/content_controller.js b/app/javascript/controllers/content_controller.js
@@ -0,0 +1,45 @@
+import { Controller } from 'stimulus'
+import CodeMirror from 'codemirror/lib/codemirror.js'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
+
+export default class extends Controller {
+  static targets = ['textArea']
+
+  initializeCodeMirror() {
+    var editor = CodeMirror.fromTextArea(this.textAreaTarget, {
+      mode: "htmlmixed",
+      lineWrapping: true,
+    });
+    editor.on('drop', (e, event) => {
+      event.preventDefault();
+      this.uploadFile(event.dataTransfer.files[0], event, e)
+    })
+    return editor;
+  }
+
+  uploadFile(file, event, editor) {
+    let url = '/image_uploads'
+    let formData = new FormData()
+
+    formData.append('file', file)
+
+    fetch(url, {
+      method: 'POST',
+      body: formData
+    }).then(response => response.json())
+      .then(data => {
+        let newline = `url('${data.location}')`
+        let doc= editor.getDoc()
+        editor.focus()
+        let x = event.pageX
+        let y = event.pageY
+        editor.setCursor(editor.coordsChar({left:x,top:y}))
+        let newpos = editor.getCursor()
+        doc.replaceRange(newline, newpos)
+      })
+  }
+
+  connect () {
+    this.initializeCodeMirror();
+  }
+}
diff --git a/app/javascript/packs/tailwind.js b/app/javascript/packs/tailwind.js
diff --git a/app/models/website.rb b/app/models/website.rb
@@ -2,11 +2,13 @@ class Website < ApplicationRecord
   belongs_to :event
   has_many :pages, dependent: :destroy
   has_many :fonts, class_name: 'Website::Font', dependent: :destroy
+  has_many :contents, class_name: 'Website::Content', dependent: :destroy
 
   has_many :session_formats, through: :event
   has_many :session_format_configs
 
   accepts_nested_attributes_for :fonts, reject_if: :all_blank, allow_destroy: true
+  accepts_nested_attributes_for :contents, reject_if: :all_blank, allow_destroy: true
   accepts_nested_attributes_for :session_format_configs
 
   has_one_attached :logo
diff --git a/app/models/website/content.rb b/app/models/website/content.rb
@@ -0,0 +1,27 @@
+class Website::Content < ApplicationRecord
+  PLACEMENTS = [
+    HEAD = "head",
+    FOOTER = "footer",
+  ].freeze
+
+  belongs_to :website
+
+  scope :for, -> (placement) { where(placement: placement) }
+end
+
+# == Schema Information
+#
+# Table name: website_contents
+#
+#  id         :bigint(8)        not null, primary key
+#  html       :text
+#  placement  :string           default("head"), not null
+#  name       :string
+#  website_id :bigint(8)
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
+# Indexes
+#
+#  index_website_contents_on_website_id  (website_id)
+#
diff --git a/app/views/layouts/themes/default.html.haml b/app/views/layouts/themes/default.html.haml
@@ -8,7 +8,9 @@
     :css
       #{current_website.font_faces_css}
       #{current_website.font_root_css}
-    %script{src: "https://cdn.tailwindcss.com" }
+    = javascript_pack_tag "tailwind"
+    = current_website.head_content
+
   %body
     - unless @page&.hide_header?
       = render 'layouts/themes/default/header'
@@ -37,3 +39,4 @@
         document.getElementById("main-nav").addEventListener('click', function(e) {
           toggleNav()
         })
+    = current_website.footer_content
diff --git a/app/views/staff/websites/_content_fields.html.haml b/app/views/staff/websites/_content_fields.html.haml
@@ -0,0 +1,13 @@
+= content_tag :div,
+  class: 'nested-fields',
+  data: { new_record: form.object.new_record? } do
+  .inline-form
+    = form.input :name
+    = form.input :placement, collection: Website::Content::PLACEMENTS
+  = form.input :html,
+    as: :text,
+    input_html: { data: { "content-target": :textArea } },
+    wrapper_html: { data: { "controller": "content" } }
+
+  = link_to "Remove", "#", data: { action: "click->nested-form#remove_association" }
+  = form.hidden_field :_destroy
diff --git a/app/views/staff/websites/_form.html.haml b/app/views/staff/websites/_form.html.haml
@@ -58,6 +58,19 @@
           = link_to "Add Font", "#", class: 'btn btn-success',
             data: { action: "click->nested-form#add_association" }
 
+      %div{"data-controller": "nested-form"}
+        %h4 Head and Footer Content
+        %template{"data-nested-form-target": "template"}
+          = f.simple_fields_for :contents,
+            Website::Content.new,
+            child_index: 'NEW_RECORD' do |content|
+            = render 'content_fields', form: content
+        = f.simple_fields_for :contents do |content|
+          = render 'content_fields', form: content
+        %div{"data-nested-form-target": "links"}
+          = link_to "Add Content", "#", class: 'btn btn-success',
+            data: { action: "click->nested-form#add_association" }
+
   .row
     .col-sm-12
       = submit_tag("Save", class: "pull-right btn btn-success", type: "submit")
diff --git a/db/migrate/20220507081350_create_website_contents.rb b/db/migrate/20220507081350_create_website_contents.rb
@@ -0,0 +1,12 @@
+class CreateWebsiteContents < ActiveRecord::Migration[6.1]
+  def change
+    create_table :website_contents do |t|
+      t.text :html
+      t.string :placement, default: "head", null: false
+      t.string :name
+      t.belongs_to :website
+
+      t.timestamps
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_05_06_044703) do
+ActiveRecord::Schema.define(version: 2022_05_07_081350) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -337,6 +337,16 @@
     t.index ["item_type", "item_id"], name: "index_versions_on_item_type_and_item_id"
   end
 
+  create_table "website_contents", force: :cascade do |t|
+    t.text "html"
+    t.string "placement", default: "head", null: false
+    t.string "name"
+    t.bigint "website_id"
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["website_id"], name: "index_website_contents_on_website_id"
+  end
+
   create_table "website_fonts", force: :cascade do |t|
     t.string "name"
     t.boolean "primary"
diff --git a/spec/features/website/configuration_spec.rb b/spec/features/website/configuration_spec.rb
@@ -46,4 +46,38 @@
 
     expect(current_path).to eq('/home')
   end
+
+  scenario "Organizer configures tailwind with head content", :js do
+    website = create(:website, event: event)
+    home_page = create(:page, website: website)
+
+    login_as(organizer)
+    visit edit_event_staff_website_path(event)
+    click_on("Add Content")
+    fill_in_codemirror(<<~HTML
+      <script>
+        tailwind.config = {
+          theme: {
+            extend: {
+              colors: {
+                clifford: '#da373d',
+              }
+            }
+          }
+        }
+      </script>
+      HTML
+    )
+    click_on("Save")
+
+    visit edit_event_staff_page_path(event, home_page)
+    fill_in_codemirror(
+      '<div class="text-clifford" id="red-dog">Clifford The Big Red Dog</div>'
+    )
+    click_on("Save")
+    accept_confirm { click_on("Publish") }
+    click_on("View")
+
+    expect(computed_style("#red-dog", "color")).to eq("rgb(218, 55, 61)")
+  end
 end
diff --git a/spec/support/helpers/form_helpers.rb b/spec/support/helpers/form_helpers.rb
@@ -7,5 +7,21 @@ def fill_in_tinymce(resource, field, content)
         editor.native.send_keys(content)
       end if page.has_css?("##{iframe_id}")
     end
+
+    def fill_in_codemirror(text)
+      within ".CodeMirror" do
+        current_scope.click
+        field = current_scope.find("textarea", visible: false)
+        field.send_keys text
+      end
+    end
+
+    def computed_style(selector, prop, pseudo: nil)
+      page.evaluate_script(<<~SCRIPT
+        window.getComputedStyle(document.querySelector('#{selector}'), '#{pseudo}')
+              .getPropertyValue('#{prop}')
+        SCRIPT
+      )
+    end
   end
 end
