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

Gemfile

@@ -13,6 +13,7 @@ group :assets do
   #gem 'therubyracer', :platforms => :ruby
   #gem 'less-rails'
   gem 'foundation-rails'
+  gem 'ace-rails-ap'
 end
 
 gem 'couch_potato' , github: 'bterkuile/couch_potato'

Gemfile.lock

@@ -43,6 +43,7 @@ PATH
 GEM
   remote: http://rubygems.org/
   specs:
+    ace-rails-ap (3.0.2)
     actionmailer (4.2.0)
       actionpack (= 4.2.0)
       actionview (= 4.2.0)
@@ -264,6 +265,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  ace-rails-ap
   actionpack-page_caching
   bourbon
   cmtool!

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'

config/locales/cmtool.en.yml

@@ -73,6 +73,7 @@ en:
         newsletter_subscription: Newsletter subscription
         image: Image
         directory: Directory
+        yml_file: Yml file
       plural:
         page: Pages
         user: Users
@@ -85,3 +86,4 @@ en:
           newsletter_subscription: Newsletter subscriptions
           image: Images
           directory: Directories
+          yml_file: Yml files

config/locales/cmtool.nl.yml

@@ -0,0 +1,87 @@
+nl:
+  cmtool:
+    general:
+      yes: "Ja"
+      no: "Nee"
+      are_you_sure: 'Are you sure?'
+      are_you_sure_with_name: 'Are you sure you want to delete %{model} %{name}?'
+      empty_result: No %{models} found
+    menu:
+      site:
+        title: Site
+      forms:
+        title: Forms
+      publications:
+        title: Publications
+      files:
+        title: Files
+    action:
+      index:
+        title: List %{models}
+      new:
+        title: New %{model}
+      create:
+        label: Create
+        successful: '%{model} successfully created'
+      edit:
+        title: Edit %{model}
+      update:
+        label: Save
+        successful: '%{model} successfully updated'
+      show:
+        title: Show %{model}
+      destroy:
+        title: Delete %{model}
+        successful: '%{model} successfully deleted'
+    directory:
+      add_file: Add file
+      add_image:
+        label: Add %{image}
+    table:
+      index:
+        edit: ''
+        destroy: ''
+    news:
+      remove_image: Remove image
+    newsletter_subscription:
+      subscribed: You subscribed successfully to the newsletter
+      subscription_failed: 'There was a problem with your subscription<br/>%{reason}'
+    contact_form:
+      submitted: You successfully submitted the contact form
+      submission_failed: 'There was a problem with the contact form submission<br/>%{reason}'
+    quote:
+      remove_image: Remove image
+    sessions:
+      new:
+        label: Login
+        title: Acces the administration section
+    errors:
+      form:
+        title: 'The action could not be completed because of %{count} reasons'
+    warnings:
+      no_host_specified: 'You did not specify a host in config/environments/:env (config.action_mailer.default_url_options = { :host => "example.com" })'
+  activemodel:
+    models:
+      page: Page
+      user: User
+      cmtool:
+        quote: Quote
+        news: News
+        keyword: Keyword
+        faq: Faq
+        contact_form: Contact request
+        newsletter_subscription: Newsletter subscription
+        image: Image
+        directory: Directory
+      plural:
+        page: Pages
+        user: Users
+        cmtool:
+          quote: Quotes
+          news: News
+          keyword: Keywords
+          faq: Faqs
+          contact_form: Contact requests
+          newsletter_subscription: Newsletter subscriptions
+          image: Images
+          directory: Directories

config/routes.rb

@@ -7,6 +7,7 @@ Cmtool::Engine.routes.draw do
   resources :pages do
     member do
       get :generate_name
+      post :preview
     end
     collection do
       get :generate_name
@@ -18,6 +19,7 @@ Cmtool::Engine.routes.draw do
       delete :remove_image
     end
   end
+  resources :yml_files
   resources :keywords
   resources :faqs
   resources :quotes do

lib/cmtool/engine.rb

@@ -26,6 +26,7 @@ module Cmtool
         group label: :site do
           title t('cmtool.menu.site.title')
           resource_link Page, scope: Cmtool
+          resource_link Cmtool::YmlFile
           resource_link Cmtool::Keyword
         end
         group label: :publications do

lib/cmtool/includes/page.rb

@@ -13,12 +13,13 @@ module Cmtool
         klass.property :body
         klass.property :footer
         klass.property :sidebar
+        klass.property :wysiwyg, type: :boolean, default: false
         klass.property :priority, type: Float, default: 0.5
         klass.property :active, type: :boolean, default: true
         klass.property :layout
         klass.property :in_menu, type: :boolean, default: true
 
-        klass.has_ancestry :by_property => :locale
+        klass.has_ancestry by_property: :locale
 
         klass.validates :name, presence: true
         klass.validates :locale, presence: true

lib/cmtool/includes/pages_controller.rb

@@ -4,7 +4,7 @@ module Cmtool
        extend ActiveSupport::Concern
         def home
           page_name = "home"
-          @page = ::Page.find_by_name_and_locale(page_name, I18n.locale.to_s) || ::Page.new(:name => page_name, locale: I18n.locale.to_s)
+          @page = find_page(page_name)
           @sub_pages = @page.children.select{|child| child.in_menu.present? }
           render :template => "pages/#{page_name}", :layout => @page.layout.presence || ::Page.layouts.first.to_s
         end
@@ -45,6 +45,12 @@ module Cmtool
             end
           end
         end
+
+        private
+
+        def find_page(name)
+          ::Page.find_by_name_and_locale(page_name, I18n.locale.to_s) || ::Page.new(:name => page_name, locale: I18n.locale.to_s)
+        end
      end
    end
 end