it becomes possible to add options for the select type

app/assets/javascripts/locomotive/models/custom_field.js.coffee

@@ -13,7 +13,8 @@ class Locomotive.Models.CustomField extends Backbone.Model
   toJSONForSave: ->
     _.tap {}, (hash) =>
       for key, value of @.toJSON()
-        hash[key] = value unless _.include(['type_text', 'created_at', 'updated_at'], key)
+        hash[key] = value unless _.include(['select_options', 'type_text', 'created_at', 'updated_at'], key)
+      hash.select_options_attributes = @get('select_options').toJSONForSave() if @get('select_options')
 
 class Locomotive.Models.CustomFieldsCollection extends Backbone.Collection
 

app/assets/javascripts/locomotive/views/content_types/custom_field_entry_view.js.coffee

@@ -10,15 +10,45 @@ class Locomotive.Views.ContentTypes.CustomFieldEntryView extends Backbone.View
     'click a.toggle': 'toggle'
     'click a.remove': 'remove'
 
+  initialize: ->
+    @model.bind 'change', (custom_field) =>
+      @switch_to_type() if @model.hasChanged('type')
+
   render: ->
     $(@el).html(ich.custom_field_entry(@model.toJSON()))
 
     Backbone.ModelBinding.bind @, all: 'class'
 
-    @$('span.label-input input[type=text], span.type-input select').editableField()
+    @make_fields_editable()
+
+    @enable_behaviours()
+
+    @switch_to_type()
 
     return @
 
+  enable_behaviours: ->
+    @render_select_options_view()
+
+  switch_to_type: ->
+    @$('li.input.extra').hide() # reset
+
+    switch @model.get('type')
+      when 'select'
+        @$('li.input.select-options').show()
+      when 'text'
+        @$('li.input.text-formatting').show()
+
+  render_select_options_view: ->
+    @select_options_view = new Locomotive.Views.ContentTypes.SelectOptionsView
+      model:      @model
+      collection: @model.get('select_options')
+
+    @$('#content_type_contents_custom_field_select_options_input').append(@select_options_view.render().el)
+
+  make_fields_editable: ->
+    @$('span.label-input input[type=text], span.type-input select').editableField()
+
   toggle: (event) ->
     event.stopPropagation() & event.preventDefault()
     form = @$('ol')

app/assets/javascripts/locomotive/views/content_types/custom_fields_view.coffee

@@ -38,19 +38,17 @@ class Locomotive.Views.ContentTypes.CustomFieldsView extends Backbone.View
   add_entry: (event) ->
     event.stopPropagation() & event.preventDefault()
 
-    labelInput  = @$('.new-entry input[name=label]')
+    labelInput  = @$('> .new-entry input[name=label]')
-    typeInput   = @$('.new-entry select')
+    typeInput   = @$('> .new-entry select')
 
     if labelInput.val() != ''
       custom_field = new Locomotive.Models.CustomField label: labelInput.val(), type: typeInput.val()
 
-      window.bar = custom_field
-
       @model.get('contents_custom_fields').add(custom_field)
 
       @_insert_entry(custom_field)
 
-      @$('.empty').hide()
+      @$('> .empty').hide()
 
       @sortable_list.sortable('refresh')
 
@@ -66,11 +64,11 @@ class Locomotive.Views.ContentTypes.CustomFieldsView extends Backbone.View
 
     @refresh_position_entries()
 
-    @$('.empty').show() if @model.get('contents_custom_fields').length == 0
+    @$('> .empty').show() if @model.get('contents_custom_fields').length == 0
 
   render_entries: ->
     if @model.get('contents_custom_fields').length == 0
-      @$('.empty').show()
+      @$('> .empty').show()
     else
       @model.get('contents_custom_fields').each (custom_field) =>
         @_insert_entry(custom_field)
@@ -80,18 +78,6 @@ class Locomotive.Views.ContentTypes.CustomFieldsView extends Backbone.View
 
     (@_entry_views ||= []).push(view)
 
-    @$('ul').append(view.render().el)
+    @$('> ul').append(view.render().el)
-
-    @refresh_position_entries()
-
-  #
-  # show_errors: ->
-  #   _.each @options.errors.domain || [], (message) => @show_error(message)
-  #
-  # show_error: (message) ->
-  #   _.each (@_entry_views || []), (view) ->
-  #     if new RegExp("^#{view.model.get('name')}").test message
-  #       html = $('<span></span>').addClass('inline-errors').html(message)
-  #       view.$('input[type=text].path').after(html)
-
 
+    @refresh_position_entries()

app/assets/javascripts/locomotive/views/content_types/new_view.js.coffee

@@ -5,4 +5,7 @@ class Locomotive.Views.ContentTypes.NewView extends Locomotive.Views.ContentType
   save: (event) ->
     @save_in_ajax event,
       on_success: (response, xhr) ->
-        window.location.href = xhr.getResponseHeader('location')
+        window.location.href = xhr.getResponseHeader('location')
+
+  enable_liquid_editing: ->
+    true # do nothing

app/assets/javascripts/locomotive/views/content_types/select_options_view.js.coffee

@@ -0,0 +1,85 @@
+Locomotive.Views.ContentTypes ||= {}
+
+class Locomotive.Views.ContentTypes.SelectOptionsView extends Backbone.View
+
+  tagName: 'div'
+
+  className: 'list'
+
+  events:
+    'click a.add':      'add_entry'
+    'click span.name':  'edit_entry'
+    'click a.remove':   'remove_entry'
+
+  initialize: ->
+    _.bindAll(@, 'refresh_position_entries', '_insert_entry')
+
+    @collection.bind 'add', @_insert_entry
+
+  render: ->
+    $(@el).html(ich.select_options_list())
+
+    @prompt_message = @$('> ul').attr('data-prompt')
+
+    @render_entries()
+
+    @make_list_sortable()
+
+    return @
+
+  render_entries: ->
+    @collection.each @_insert_entry
+
+  make_list_sortable: ->
+    @sortable_list = @$('> ul').sortable
+      handle: 'a.drag'
+      items:  'li.entry'
+      update: @refresh_position_entries
+
+  refresh_position_entries: ->
+    @$('> ul li.entry').each (index, view_dom) =>
+      select_option = @collection.getByCid($(view_dom).attr('data-cid'))
+      select_option.set position: index
+
+  add_entry: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    name = prompt(@prompt_message)
+
+    if name != ''
+      @collection.add [{ name: name }]
+
+  edit_entry: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    span          = $(event.target)
+    view_dom      = span.closest('li')
+    select_option = @collection.getByCid(view_dom.attr('data-cid'))
+
+    if (name = prompt(@prompt_message, select_option.get('name'))) != ''
+      select_option.set(name: name)
+      span.html(name)
+
+  remove_entry: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    link          = $(event.target)
+    view_dom      = link.closest('li')
+    select_option = @collection.getByCid(view_dom.attr('data-cid'))
+
+    if confirm(link.attr('date-confirm'))
+      if select_option.isNew()
+        @collection.remove(select_option)
+      else
+        select_option.set _destroy: true
+
+      view_dom.remove()
+
+  _insert_entry: (select_option) ->
+    view_dom = ich.select_option_entry(select_option.toJSON())
+
+    view_dom.attr('data-cid', select_option.cid)
+
+    @$('> ul').append(view_dom)
+
+    @refresh_position_entries

app/assets/stylesheets/locomotive/formtastic_changes.scss

@@ -122,7 +122,7 @@ form.formtastic {
             padding-left: 10px;
           }
 
-          a.remove, a.toggle {
+          a.remove, a.toggle, a.drag {
             display: inline-block;
             width: 16px;
             height: 16px;
@@ -146,6 +146,14 @@ form.formtastic {
                 background-image: image-url("locomotive/list/icons/toggle.png");
               }
             }
+
+            &.drag {
+              cursor: move;
+              background: transparent image-url("locomotive/list/icons/toggle_off.png") repeat 0 0;
+              &:hover {
+                background-image: image-url("locomotive/list/icons/toggle.png");
+              }
+            }
           }
         }
 
@@ -362,7 +370,7 @@ form.formtastic {
         &.no-label {
           padding-top: 6px;
 
-          .list {
+          > .list {
             margin-left: 0;
 
             .entry {
@@ -384,6 +392,49 @@ form.formtastic {
           }
         } // li.no-label
 
+        &.select-options {
+          .list {
+            line-height: auto;
+
+            ul, li, > span.actions {
+              float: left;
+            }
+
+            ul {
+              width: 558px;
+              min-height: 34px;
+
+              li.entry {
+                background: #c2e0f0;
+                @include border-radius(2px);
+
+                padding: 0 55px 0 8px;
+                margin: 2px 10px 8px 0;
+                height: auto;
+
+                color: #29739b;
+                line-height: 24px;
+
+                span.name {
+                  cursor: pointer;
+                  @include text-shadow(#fff 0px 1px 1px);
+                }
+
+                span.actions {
+                  line-height: 20px;
+                  right: 8px;
+                }
+              }
+            } // .list ul
+
+            > span.actions {
+              position: static;
+              margin-left: 15px;
+              line-height: 24px;
+            } // .list .actions
+          }
+        } // li.select-options
+
         &#site_memberships_input {
           .entry {
             em.email {

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

@@ -40,10 +40,28 @@
 
       = g.input :hint, :input_html => { :class => 'hint' }
 
-      = g.input :select_options, :as => :'Locomotive::Empty', :wrapper_html => { :style => 'display: none' }
+      = g.input :select_options, :as => :'Locomotive::Empty', :wrapper_html => { :class => 'extra select-options', :style => 'display: none' }
 
-      = g.input :text_formatting, :as => :select, :collection => options_for_text_formatting, :include_blank => false, :wrapper_html => { :style => 'display: none' }
+      = g.input :text_formatting, :as => :select, :collection => options_for_text_formatting, :include_blank => false, :wrapper_html => { :class => 'extra text-formatting', :style => 'display: none' }
 
     %span.actions
       = link_to 'toggle', '#', :class => 'toggle'
-      = link_to 'x', '#', :class => 'remove', :confirm => t('locomotive.messages.confirm')
+      = link_to 'x', '#', :class => 'remove', :confirm => t('locomotive.messages.confirm')
+
+
+%script{ :type => 'text/html', :id => 'select_options_list' }
+
+  %ul{ :'data-prompt' => t('.select_options.ask_name') }
+
+  %span.actions
+    = link_to t('locomotive.buttons.new_item'), '#', :class => 'add'
+
+
+%script{ :type => 'text/html', :id => 'select_option_entry' }
+
+  %li.entry
+    %span.name {{name}}
+
+    %span.actions
+      = link_to 'drag', '#', :class => 'drag'
+      = link_to 'x', '#', :class => 'remove', :confirm => t('locomotive.messages.confirm')

config/locales/admin_ui.en.yml

@@ -77,6 +77,8 @@ en:
       form:
         is_required: is required
         default_label: Field name
+        select_options:
+          ask_name: "Type the label of the option"
 
     sessions:
       new:

doc/TODO

@@ -46,12 +46,12 @@ x edit my site
       x slugify
       x refactor highlighted_field (field id instead of name)
       x other content type options
-      - show / hide options of a field based on its type
+      x show / hide options of a field based on its type
-        - text: formatting
+        x select: add/edit/remove options
-        - select: add/edit/remove options
+        x text: formatting
     - change in main menu
     - manage contents
-      - list
+      - list (highlighted field)
       - crud
 
 - disallow to click twice on the submit form button (spinner ?)