From 67615a7fe36d8ac3469a62e3de936bf0a06e502a Mon Sep 17 00:00:00 2001 From: did Date: Wed, 16 Nov 2011 13:42:42 +0100 Subject: [PATCH] polishing (wip) + refactor the js code (wip) --- .../views/pages/_form_view.js.coffee | 47 +++---------- .../views/shared/form_view.js.coffee | 66 +++++++++++++++++++ .../locomotive/formtastic_changes.scss | 23 +++++++ app/helpers/locomotive/base_helper.rb | 4 ++ app/views/locomotive/pages/_form.html.haml | 8 ++- .../locomotive/theme_assets/images.html.haml | 15 ----- 6 files changed, 106 insertions(+), 57 deletions(-) create mode 100644 app/assets/javascripts/locomotive/views/shared/form_view.js.coffee delete mode 100644 app/views/locomotive/theme_assets/images.html.haml diff --git a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee b/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee index 063a6643..cc8f8138 100644 --- a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee +++ b/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) - @make_title_editable() + super() # 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() - - _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') \ No newline at end of file + @$('li#page_' + exp + '_input input[type=checkbox]').checkToggle() \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee b/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee new file mode 100644 index 00000000..c75a64b6 --- /dev/null +++ b/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 ' ' + @$('.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') \ 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 fa960337..514c490f 100644 --- a/app/assets/stylesheets/locomotive/formtastic_changes.scss +++ b/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; diff --git a/app/helpers/locomotive/base_helper.rb b/app/helpers/locomotive/base_helper.rb index b599b9c9..fbb4cbe3 100644 --- a/app/helpers/locomotive/base_helper.rb +++ b/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) diff --git a/app/views/locomotive/pages/_form.html.haml b/app/views/locomotive/pages/_form.html.haml index 07fa73ac..2b738d2c 100644 --- a/app/views/locomotive/pages/_form.html.haml +++ b/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' \ No newline at end of file diff --git a/app/views/locomotive/theme_assets/images.html.haml b/app/views/locomotive/theme_assets/images.html.haml deleted file mode 100644 index 4c11fd45..00000000 --- a/app/views/locomotive/theme_assets/images.html.haml +++ /dev/null @@ -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 \ No newline at end of file