From 2068fe060d6e909ffcd7be5f78cdd5aa6c9a25a8 Mon Sep 17 00:00:00 2001 From: did Date: Thu, 22 Dec 2011 07:45:42 -0800 Subject: [PATCH] it becomes possible to add options for the select type --- .../locomotive/models/custom_field.js.coffee | 3 +- .../custom_field_entry_view.js.coffee | 32 ++++++- .../content_types/custom_fields_view.coffee | 28 ++---- .../views/content_types/new_view.js.coffee | 5 +- .../select_options_view.js.coffee | 85 +++++++++++++++++++ .../locomotive/formtastic_changes.scss | 55 +++++++++++- .../locomotive/custom_fields/_form.html.haml | 24 +++++- config/locales/admin_ui.en.yml | 2 + doc/TODO | 8 +- 9 files changed, 209 insertions(+), 33 deletions(-) create mode 100644 app/assets/javascripts/locomotive/views/content_types/select_options_view.js.coffee diff --git a/app/assets/javascripts/locomotive/models/custom_field.js.coffee b/app/assets/javascripts/locomotive/models/custom_field.js.coffee index 0d5226bf..ffa8f96c 100644 --- a/app/assets/javascripts/locomotive/models/custom_field.js.coffee +++ b/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 diff --git a/app/assets/javascripts/locomotive/views/content_types/custom_field_entry_view.js.coffee b/app/assets/javascripts/locomotive/views/content_types/custom_field_entry_view.js.coffee index e7b6194e..888d9efc 100644 --- a/app/assets/javascripts/locomotive/views/content_types/custom_field_entry_view.js.coffee +++ b/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') diff --git a/app/assets/javascripts/locomotive/views/content_types/custom_fields_view.coffee b/app/assets/javascripts/locomotive/views/content_types/custom_fields_view.coffee index 022a2f48..c1237849 100644 --- a/app/assets/javascripts/locomotive/views/content_types/custom_fields_view.coffee +++ b/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]') - typeInput = @$('.new-entry select') + labelInput = @$('> .new-entry input[name=label]') + 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) - - @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 = $('').addClass('inline-errors').html(message) - # view.$('input[type=text].path').after(html) - + @$('> ul').append(view.render().el) + @refresh_position_entries() \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/views/content_types/new_view.js.coffee b/app/assets/javascripts/locomotive/views/content_types/new_view.js.coffee index 7189a3c3..f1f6ea37 100644 --- a/app/assets/javascripts/locomotive/views/content_types/new_view.js.coffee +++ b/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') \ No newline at end of file + window.location.href = xhr.getResponseHeader('location') + + enable_liquid_editing: -> + true # do nothing \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/views/content_types/select_options_view.js.coffee b/app/assets/javascripts/locomotive/views/content_types/select_options_view.js.coffee new file mode 100644 index 00000000..dbe0bcc0 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/assets/stylesheets/locomotive/formtastic_changes.scss b/app/assets/stylesheets/locomotive/formtastic_changes.scss index 1f20b4be..ffec8d16 100644 --- a/app/assets/stylesheets/locomotive/formtastic_changes.scss +++ b/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 { diff --git a/app/views/locomotive/custom_fields/_form.html.haml b/app/views/locomotive/custom_fields/_form.html.haml index da34be16..31c551dc 100644 --- a/app/views/locomotive/custom_fields/_form.html.haml +++ b/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') \ No newline at end of file + = 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') diff --git a/config/locales/admin_ui.en.yml b/config/locales/admin_ui.en.yml index b26ca10d..1942f870 100644 --- a/config/locales/admin_ui.en.yml +++ b/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: diff --git a/doc/TODO b/doc/TODO index 591dd374..05953459 100644 --- a/doc/TODO +++ b/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 - - text: formatting - - select: add/edit/remove options + x show / hide options of a field based on its type + x 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 ?)