Use ace to edit pages, and ass yml_files and preview setup

app/assets/javascripts/cmtool/application.js.coffee

@@ -1,9 +1,28 @@
 #= require jquery
 #= require jquery_ujs
 #= require foundation
+#= require ace/ace
+#= require ace/theme-monokai
+#= require ace/mode-coffee
+#= require ace/mode-handlebars
+#= require ace/mode-yaml
 #= require tinymce-jquery
 #= require_directory .
 #= require_self
 
 $ ->
   $(document).foundation()
+  collapsible.setup()
+  html_edit.setup()
+  yml_edit.setup()
+  $('.preview-page').click (ev)->
+    ev.preventDefault()
+    url = $(@).attr('href')
+    params =
+      body: $('#page_body').val()
+      layout: $('#page_layout').val()
+    $.post url, page: params, (response)->
+      iframe = $('#preview-modal iframe').get(0)
+      iframe.src = "data:text/html;charset=utf-8,#{escape(response)}"
+      $('#preview-modal').foundation('reveal', 'open')
+    false

app/assets/javascripts/cmtool/collapsible.js.coffee

@@ -0,0 +1,12 @@
+class Collapsible
+  setup: ->
+    $('.collapsible-container').each (i, el) ->
+      $(el).find('.collapsible-title').click -> $(el).toggleClass('collapsed')
+
+    #FIXME this is a hack for expanding on load for migration comments
+    $('.migration-comments .thread a').click()
+
+
+
+
+@collapsible = new Collapsible()

app/assets/javascripts/cmtool/html_edit.js.coffee

@@ -0,0 +1,20 @@
+class HtmlEdit
+  setup: ->
+    #ACE
+    $('.html-content').each (i, el)->
+      text_field = $(el)
+      ace_div = $('<div></div>').addClass('ace-div').html(text_field.val())
+      text_field.after ace_div
+      ace_div.css
+        width: '100%'
+        height: '600px'
+      editor = ace.edit(ace_div.get(0))
+      editor.setTheme 'ace/theme/monokai'
+      editor.getSession().setMode 'ace/mode/handlebars'
+      editor.getSession().setTabSize(2)
+      editor.getSession().setUseSoftTabs(true)
+      editor.getSession().on 'change', (e)->
+        text_field.val(editor.getValue()).change()
+      text_field.hide()
+    #ace_div.hide()
+@html_edit = new HtmlEdit()

app/assets/javascripts/cmtool/yml_edit.js.coffee

@@ -0,0 +1,20 @@
+class YmlEdit
+  setup: ->
+    #ACE
+    $('.yml-content').each (i, el)->
+      text_field = $(el)
+      ace_div = $('<div></div>').addClass('ace-div').html(text_field.val())
+      text_field.after ace_div
+      ace_div.css
+        width: '100%'
+        height: '600px'
+      editor = ace.edit(ace_div.get(0))
+      editor.setTheme 'ace/theme/monokai'
+      editor.getSession().setMode 'ace/mode/yaml'
+      editor.getSession().setTabSize(2)
+      editor.getSession().setUseSoftTabs(true)
+      editor.getSession().on 'change', (e)->
+        text_field.val(editor.getValue()).change()
+      text_field.hide()
+    #ace_div.hide()
+@yml_edit = new YmlEdit()

app/assets/stylesheets/cmtool/components/_collapsible.css.sass

@@ -0,0 +1,13 @@
+.collapsible-container
+  .collapsible-title
+    font-size: 1.4em
+    font-weight: bold
+    cursor: pointer
+    span
+      @extend .fa, .fa-arrow-down
+  &.collapsed
+    .collapsible-title
+      span
+        @extend .fa, .fa-arrow-right
+    .collapsible-content
+      display: none

app/controllers/cmtool/pages_controller.rb

@@ -93,7 +93,8 @@ module Cmtool
     end
 
     def preview
-
+      @page = ::Page.new params.require(:page).permit!
+      render "pages/show", layout: @page.layout
     end
 
     private

app/controllers/cmtool/svg_files_controller.rb

@@ -0,0 +1,91 @@
+module Cmtool
+  class Cmtool::SvgFilesController < Cmtool::ApplicationController
+    # GET /svg_files
+    # GET /svg_files.xml
+    def index
+      @svg_files = Cmtool::SvgFile.all
+
+      respond_to do |format|
+        format.html # index.html.erb
+        format.xml  { render :xml => @svg_files }
+      end
+    end
+
+    # GET /svg_files/1
+    # GET /svg_files/1.xml
+    def show
+      @svg_file = Cmtool::SvgFile.find(params[:id])
+
+      respond_to do |format|
+        format.html # show.html.erb
+        format.xml  { render :xml => @svg_file }
+      end
+    end
+
+    # GET /svg_files/new
+    # GET /svg_files/new.xml
+    def new
+      @svg_file = Cmtool::SvgFile.new
+
+      respond_to do |format|
+        format.html # new.html.erb
+        format.xml  { render :xml => @svg_file }
+      end
+    end
+
+    # GET /svg_files/1/edit
+    def edit
+      @svg_file = Cmtool::SvgFile.find(params[:id])
+    end
+
+    # POST /svg_files
+    # POST /svg_files.xml
+    def create
+      @svg_file = Cmtool::SvgFile.new(svg_file_params)
+
+      respond_to do |format|
+        if @svg_file.save
+          format.html { redirect_to(cmtool.svg_files_path, :notice => I18n.t('cmtool.action.create.successful', :model => Cmtool::SvgFile.model_name.human)) }
+          format.xml  { render :xml => @svg_file, :status => :created, :location => @svg_file }
+        else
+          format.html { render :action => "new" }
+          format.xml  { render :xml => @svg_file.errors, :status => :unprocessable_entity }
+        end
+      end
+    end
+
+    # PUT /svg_files/1
+    # PUT /svg_files/1.xml
+    def update
+      @svg_file = Cmtool::SvgFile.find(params[:id])
+
+      respond_to do |format|
+        if @svg_file.update_attributes(svg_file_params)
+          format.html { redirect_to(cmtool.svg_files_path, :notice => I18n.t('cmtool.action.update.successful', :model => Cmtool::SvgFile.model_name.human)) }
+          format.xml  { head :ok }
+        else
+          format.html { render :action => "edit" }
+          format.xml  { render :xml => @svg_file.errors, :status => :unprocessable_entity }
+        end
+      end
+    end
+
+    # DELETE /svg_files/1
+    # DELETE /svg_files/1.xml
+    def destroy
+      @svg_file = Cmtool::SvgFile.find(params[:id])
+      @svg_file.destroy
+
+      respond_to do |format|
+        format.html { redirect_to(cmtool.svg_files_url, notice: I18n.t('cmtool.action.destroy.successful', model: Cmtool::SvgFile.model_name.human)) }
+        format.xml  { head :ok }
+      end
+    end
+
+    private
+
+    def svg_file_params
+      params.require(:svg_file).permit(:name)
+    end
+  end
+end

app/controllers/cmtool/yml_files_controller.rb

@@ -0,0 +1,91 @@
+module Cmtool
+  class Cmtool::YmlFilesController < Cmtool::ApplicationController
+    # GET /yml_files
+    # GET /yml_files.xml
+    def index
+      @yml_files = Cmtool::YmlFile.all
+
+      respond_to do |format|
+        format.html # index.html.erb
+        format.xml  { render :xml => @yml_files }
+      end
+    end
+
+    # GET /yml_files/1
+    # GET /yml_files/1.xml
+    def show
+      @yml_file = Cmtool::YmlFile.find(params[:id])
+
+      respond_to do |format|
+        format.html # show.html.erb
+        format.xml  { render :xml => @yml_file }
+      end
+    end
+
+    # GET /yml_files/new
+    # GET /yml_files/new.xml
+    def new
+      @yml_file = Cmtool::YmlFile.new
+
+      respond_to do |format|
+        format.html # new.html.erb
+        format.xml  { render :xml => @yml_file }
+      end
+    end
+
+    # GET /yml_files/1/edit
+    def edit
+      @yml_file = Cmtool::YmlFile.find(params[:id])
+    end
+
+    # POST /yml_files
+    # POST /yml_files.xml
+    def create
+      @yml_file = Cmtool::YmlFile.new(yml_file_params)
+
+      respond_to do |format|
+        if @yml_file.save
+          format.html { redirect_to(cmtool.yml_files_path, :notice => I18n.t('cmtool.action.create.successful', :model => Cmtool::YmlFile.model_name.human)) }
+          format.xml  { render :xml => @yml_file, :status => :created, :location => @yml_file }
+        else
+          format.html { render :action => "new" }
+          format.xml  { render :xml => @yml_file.errors, :status => :unprocessable_entity }
+        end
+      end
+    end
+
+    # PUT /yml_files/1
+    # PUT /yml_files/1.xml
+    def update
+      @yml_file = Cmtool::YmlFile.find(params[:id])
+
+      respond_to do |format|
+        if @yml_file.update_attributes(yml_file_params)
+          format.html { redirect_to(cmtool.yml_files_path, :notice => I18n.t('cmtool.action.update.successful', :model => Cmtool::YmlFile.model_name.human)) }
+          format.xml  { head :ok }
+        else
+          format.html { render :action => "edit" }
+          format.xml  { render :xml => @yml_file.errors, :status => :unprocessable_entity }
+        end
+      end
+    end
+
+    # DELETE /yml_files/1
+    # DELETE /yml_files/1.xml
+    def destroy
+      @yml_file = Cmtool::YmlFile.find(params[:id])
+      @yml_file.destroy
+
+      respond_to do |format|
+        format.html { redirect_to(cmtool.yml_files_url, notice: I18n.t('cmtool.action.destroy.successful', model: Cmtool::YmlFile.model_name.human)) }
+        format.xml  { head :ok }
+      end
+    end
+
+    private
+
+    def yml_file_params
+      params.require(:yml_file).permit!
+    end
+  end
+end

app/helpers/cmtool/application_helper.rb

@@ -102,6 +102,18 @@ module Cmtool
       iterator.call(options_ary, roots)
       options_for_select(options_ary, options[:selected])
     end
+
+    # This is a wrapper to create collapsible content. 
+    def collapsible_content(options = {}, &blk)
+      options = {title: options} if options.is_a?(String) # Single argument is title
+      content = capture(&blk) if blk.present?
+      content ||= options[:content]
+      options[:collapsed] = true unless options.has_key?(:collapsed)
+      classes = Array.wrap(options[:class]) | ["collapsible-container", options[:collapsed] ? 'collapsed' : nil]
+      title_tag = content_tag(:div, "<span></span>#{options[:title]}".html_safe, class: 'collapsible-title')
+      content_tag(:div, title_tag + content_tag(:div, content, class: 'collapsible-content'), class: classes)
+    end
+
     def human_size(n)
       return '0 MB' unless n
       n = n.to_i

app/models/cmtool/yml_file.rb

@@ -0,0 +1,16 @@
+module Cmtool
+  class YmlFile
+    include SimplyStored::Couch
+
+    property :name
+    property :body
+    property :position
+
+    def self.all_as_object
+      all.each.with_object Hash.new do |yml_file, obj|
+        yml_obj = YAML.load(yml_file.body) rescue nil
+        obj.merge!( yml_obj ) if yml_obj
+      end
+    end
+  end
+end

app/views/cmtool/pages/_form.html.slim

@@ -1,3 +1,8 @@
+javascript:
+  page_vars = #{Cmtool::YmlFile.all_as_object.to_json.html_safe};
+#preview-modal.reveal-modal.large data-reveal=""
+  iframe allowfullscreen="" frameborder="0" height="720" src="about:blank" width="900"
+  a.close-reveal-modal ×
 = form_for [cmtool, @page] do |f|
   = render 'error_messages', target: @page
   .form-row
@@ -22,13 +27,16 @@
     .form-field= f.select :locale, Page.locales
   .form-row
     = f.label :body
-    = f.text_area :body, rows: 30, cols: 80, class: 'editor_full'
-  .field
-    = f.label :footer
-    = f.text_area :footer, rows: 15, cols: 80, class: 'editor_full'
-  .field
-    = f.label :sidebar
-    = f.text_area :sidebar, rows: 15, cols: 80, class: 'editor_full'
+    br
+    = f.text_area :body, rows: 30, cols: 80, class: 'html-content'
+  = collapsible_content 'Sidebar' do
+    .field
+      = f.label :sidebar
+      = f.text_area :sidebar, rows: 15, cols: 80, class: 'html-content'
+  = collapsible_content 'Footer' do
+    .field
+      = f.label :footer
+      = f.text_area :footer, rows: 15, cols: 80, class: 'html-content'
   .form-row
     .form-label= f.label :parent_id
     .form-field= f.select :parent_id, tree_options_for_select(Page.full_tree(@page.locale || Page.locales.first), exclude: @page.id, selected: @page.parent_id), include_blank: ' -- '

app/views/cmtool/pages/edit.html.slim

@@ -4,6 +4,6 @@
 - content_for :page_links do
   ul
     li= link_to link_to_index_content(Page), cmtool.pages_path, class: 'to-index-button'
-    li= link_to link_to_show_content(@page), cmtool.page_path(@page), class: 'record-show-button'
+    li= link_to link_to_show_content(@page), cmtool.preview_page_path(@page), class: 'record-show-button preview-page'
     li= link_to link_to_edit_content(@page), cmtool.edit_page_path(@page), class: 'record-edit-button'
     li= link_to link_to_destroy_content(@page), cmtool.page_path(@page), data: {confirm: are_you_sure?(@page)}, :method => :delete, class: 'record-destroy-button'

app/views/cmtool/pages/show.html.slim

@@ -26,9 +26,9 @@
 .show_field
   strong= Page.human_attribute_name(:layout)
   = @page.layout
-.show_field
+/.show_field
   strong= Page.human_attribute_name(:has_view)
-  =# boolean_text template_exist?("pages/#{@page.name}")
+  = boolean_text template_exist?("pages/#{@page.name}")
 .show_field
   strong= Page.human_attribute_name(:in_menu)
   = boolean_text @page.in_menu?

app/views/cmtool/yml_files/_form.html.slim

@@ -0,0 +1,9 @@
+= form_for [cmtool, @yml_file] do |f|
+  = render 'error_messages', :target => @yml_file
+  .form-row
+    .form-label= f.label :name
+    .form-field= f.text_field :name
+  .form-row
+    = f.text_area :body, class: 'yml-content'
+  .form-row: .form-actions
+    = f.submit @submit || update_button_text(@yml_file), class: 'form-submit-button'

app/views/cmtool/yml_files/edit.html.slim

@@ -0,0 +1,7 @@
+- title :edit, Cmtool::YmlFile
+= render 'form', submit: update_button_text(@yml_file)
+
+- content_for :page_links do
+  ul
+    li= link_to link_to_index_content(Cmtool::YmlFile), cmtool.yml_files_path, class: 'to-index-button'
+    li= link_to link_to_show_content(@yml_file), cmtool.yml_file_path(@yml_file), class: 'record-show-button'

app/views/cmtool/yml_files/index.html.slim

@@ -0,0 +1,20 @@
+- title :index, Cmtool::YmlFile
+- if @yml_files.any?
+  table.index-table.table.table-striped.table-hover
+    thead
+      tr
+        th= Cmtool::YmlFile.human_attribute_name(:name)
+        th
+        th
+    tbody
+      - @yml_files.each do |yml_file|
+        tr
+          td= link_to yml_file.name, cmtool.yml_file_path(yml_file)
+          = edit_td yml_file
+          = destroy_td yml_file
+- else
+  = empty_result(Cmtool::YmlFile)
+
+- content_for :page_links do
+  ul
+    li= link_to link_to_new_content(Cmtool::YmlFile), cmtool.new_yml_file_path, class: 'record-new-button'

app/views/cmtool/yml_files/new.html.slim

@@ -0,0 +1,7 @@
+- title :new, Cmtool::YmlFile
+
+= render 'form', :submit => create_button_text(@yml_file)
+
+- content_for :page_links do
+  ul
+    li= link_to link_to_index_content(Cmtool::YmlFile), cmtool.yml_files_path, class: 'to-index-button'

app/views/cmtool/yml_files/show.html.slim

@@ -0,0 +1,9 @@
+- title :show, Cmtool::YmlFile
+.show_field
+  strong= Cmtool::YmlFile.human_attribute_name(:name)
+  = @yml_file.name
+
+- content_for :page_links do
+  ul
+    li= link_to link_to_index_content(Cmtool::YmlFile), cmtool.yml_files_path, class: 'to-index-button'
+    li= link_to link_to_edit_content(@yml_file), cmtool.edit_yml_file_path(@yml_file), class: 'record-edit-button'