polishing (wip) + refactor the js code (wip)

app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -1,6 +1,8 @@
+#= require ../shared/form_view
+
 Locomotive.Views.Pages ||= {}
 
-class Locomotive.Views.Pages.FormView extends Backbone.View
+class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
 
   el: '#content'
 
@@ -20,8 +22,7 @@ class Locomotive.Views.Pages.FormView extends Backbone.View
       on_select:  @insert_image
 
   render: ->
-    # make title editable (if possible)
+    super()
-    @make_title_editable()
 
     # the url gets modified by different ways so reflect the changes in the UI
     @listen_for_url_changes()
@@ -33,30 +34,11 @@ class Locomotive.Views.Pages.FormView extends Backbone.View
 
     @enable_other_checkboxes()
 
-    @_hide_last_separator()
-
     # liquid code textarea
     @enable_liquid_editing()
 
     return @
 
-  save: (event) ->
-    # by default, follow the default behaviour
-
-  make_title_editable: ->
-    title = @$('h2 a.editable')
-
-    if title.size() > 0
-      target  = @$("##{title.attr('rel')}")
-      target.parent().hide()
-
-      title.click (event) =>
-        event.stopPropagation() & event.preventDefault()
-        newValue = prompt(title.attr('title'), title.html());
-        if newValue && newValue != ''
-          title.html(newValue)
-          target.val(newValue)
-
   open_image_picker: (event) ->
     event.stopPropagation() & event.preventDefault()
     @image_picker_view.editor = @editor
@@ -76,6 +58,9 @@ class Locomotive.Views.Pages.FormView extends Backbone.View
       tabMode:          'shift'
       theme:            'default'
 
+  after_inputs_fold: ->
+    @editor.refresh()
+
   fill_default_slug: (event) ->
     unless @filled_slug
       setTimeout (=> @$('#page_slug').val($(event.target).val().slugify('-')) & @touched_url = true), 30
@@ -109,20 +94,4 @@ class Locomotive.Views.Pages.FormView extends Backbone.View
 
   enable_other_checkboxes: ->
     _.each ['published', 'listed'], (exp) =>
-      @$('li#page_' + exp + '_input input[type=checkbox]').checkToggle()
+      @$('li#page_' + exp + '_input input[type=checkbox]').checkToggle()
-
-  _enable_checkbox: (name, options) ->
-    @$('li#page_' + name + '_input input[type=checkbox]').checkToggle
-      on_callback: =>
-        _.each options.features, (exp) -> @$('li#page_' + exp + '_input').hide()
-        options.on_callback() if options.on_callback?
-        @_hide_last_separator()
-      off_callback: =>
-        _.each options.features, (exp) -> @$('li#page_' + exp + '_input').show()
-        options.off_callback() if options.off_callback?
-        @_hide_last_separator()
-
-  _hide_last_separator: ->
-    _.each @$('fieldset'), (fieldset) =>
-      $(fieldset).find('li.last').removeClass('last')
-      $(_.last($(fieldset).find('li.input:visible'))).addClass('last')

app/assets/javascripts/locomotive/views/shared/form_view.js.coffee

@@ -0,0 +1,66 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.FormView extends Backbone.View
+
+  el: '#content'
+
+  render: ->
+    # make title editable (if possible)
+    @make_title_editable()
+
+    @_hide_last_separator()
+
+    # make inputs foldable (if specified)
+    @make_inputs_foldable()
+
+    return @
+
+  save: (event) ->
+    # by default, follow the default behaviour
+
+  make_title_editable: ->
+    title = @$('h2 a.editable')
+
+    if title.size() > 0
+      target  = @$("##{title.attr('rel')}")
+      target.parent().hide()
+
+      title.click (event) =>
+        event.stopPropagation() & event.preventDefault()
+        newValue = prompt(title.attr('title'), title.html());
+        if newValue && newValue != ''
+          title.html(newValue)
+          target.val(newValue)
+
+  make_inputs_foldable: ->
+    self = @
+    @$('.formtastic fieldset.foldable legend span').append '<em>&nbsp;</em>'
+    @$('.formtastic fieldset.foldable.folded ol').hide()
+    @$('.formtastic fieldset.foldable legend').click ->
+      parent  = $(@).parent()
+      content = $(@).next()
+
+      if parent.hasClass 'folded'
+        parent.removeClass 'folded'
+        content.slideDown 100, -> self.after_inputs_fold(parent)
+      else
+        content.slideUp 100, -> parent.addClass('folded')
+
+  after_inputs_fold: ->
+    # overide this method if necessary
+
+  _enable_checkbox: (name, options) ->
+    @$('li#page_' + name + '_input input[type=checkbox]').checkToggle
+      on_callback: =>
+        _.each options.features, (exp) -> @$('li#page_' + exp + '_input').hide()
+        options.on_callback() if options.on_callback?
+        @_hide_last_separator()
+      off_callback: =>
+        _.each options.features, (exp) -> @$('li#page_' + exp + '_input').show()
+        options.off_callback() if options.off_callback?
+        @_hide_last_separator()
+
+  _hide_last_separator: ->
+    _.each @$('fieldset'), (fieldset) =>
+      $(fieldset).find('li.last').removeClass('last')
+      $(_.last($(fieldset).find('li.input:visible'))).addClass('last')

app/assets/stylesheets/locomotive/formtastic_changes.scss

@@ -29,8 +29,31 @@ form.formtastic {
         font-weight: bold;
         @include single-text-shadow(#fff, 1px, 1px, 1px);
       }
+
+      em {
+        display: inline-block;
+        width: 9px;
+        height: 6px;
+        position: relative;
+        top: 0px;
+        left: 10px;
+        background: transparent image-url("locomotive/form/folded-arrow-on.png") no-repeat 0 0px;
+      }
     } // legend
 
+    &.foldable {
+      span {
+        cursor: pointer;
+      }
+
+      &.folded legend span em {
+        width: 6px;
+        height: 9px;
+        top: 0px;
+        background-image: image-url("locomotive/form/folded-arrow-off.png");
+      }
+    } // .foldable
+
     ol {
       margin-bottom: 0px;
       padding: 0px;

app/helpers/locomotive/base_helper.rb

@@ -9,6 +9,10 @@ module Locomotive::BaseHelper
     end
   end
 
+  def inputs_folded?(resource)
+    resource.persisted? || !resource.errors.empty?
+  end
+
   def admin_content_menu_item(name, url, options = {}, &block) # TODO: rename method name (remove admin)
     default_options = { :i18n => true, :css => name.dasherize.downcase }
     default_options.merge!(options)

app/views/locomotive/pages/_form.html.haml

@@ -14,15 +14,17 @@
 
 = render 'editable_elements', :page => @page
 
-= f.inputs :name => :seo do
+= f.inputs :name => :seo, :class => "inputs foldable #{'folded' if inputs_folded?(@page)}" do
 
   = f.input :seo_title
+
   = f.input :meta_keywords
+
   = f.input :meta_description
 
 - if can?(:manage, @page)
 
-  = f.inputs :name => :advanced_options, :id => 'advanced-options', :class => 'inputs foldable' do
+  = f.inputs :name => :advanced_options, :id => 'advanced-options', :class => "inputs foldable #{'folded' if inputs_folded?(@page)}" do
 
     = f.input :content_type_id, :as => :select, :collection => current_site.content_types.all.to_a, :include_blank => false, :wrapper_html => { :style => "#{'display: none' unless @page.templatized?}" }
 
@@ -38,6 +40,6 @@
 
     = f.input :redirect_url, :required => true, :wrapper_html => { :style => "#{'display: none' unless @page.redirect?}" }
 
-  = f.inputs :name => :raw_template, :class => 'inputs foldable' do
+  = f.inputs :name => :raw_template, :class => "inputs foldable #{'folded' if inputs_folded?(@page)}" do
 
     = f.input :raw_template, :as => :'Locomotive::Code'

app/views/locomotive/theme_assets/images.html.haml

@@ -1,15 +0,0 @@
-#theme-images.asset-picker
-  %h2!= t('.title')
-
-  .actions
-    = local_action_button t('locomotive.theme_assets.index.new'), theme_assets_url(:json), :class => 'button small add', :id => 'upload-link'
-
-  - if @images.empty?
-    %p.no-items!= t('.no_items')
-
-  %ul.list.theme-assets
-    = render 'asset', :asset => current_site.theme_assets.build(:updated_at => Time.now, :local_path => 'images/new.jpg', :content_type => 'image'), :edit => false
-
-    = render :partial => 'asset', :collection => @images, :locals => { :edit => false }
-
-    %li.clear