new file input behaviour (for now just on editable_file)

Gemfile

@@ -61,9 +61,9 @@ group :development do
 end
 
 group :test, :development do
-  gem 'linecache', '0.43', :platforms => :mri_18
-  gem 'ruby-debug', :platforms => :mri_18
-  gem 'ruby-debug19', :platforms => :mri_19, :require => 'ruby-debug'
+  # gem 'linecache', '0.43', :platforms => :mri_18
+  # gem 'ruby-debug', :platforms => :mri_18
+  # gem 'ruby-debug19', :platforms => :mri_19, :require => 'ruby-debug'
   gem 'cucumber-rails'
 end
 

Gemfile.lock

@@ -82,7 +82,6 @@ GEM
     activesupport (3.1.1)
       multi_json (~> 1.0)
     addressable (2.2.6)
-    archive-tar-minitar (0.5.2)
     arel (2.2.1)
     autotest (4.4.6)
       ZenTest (>= 4.4.1)
@@ -119,7 +118,6 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.1.3)
-    columnize (0.3.4)
     cucumber (1.1.1)
       builder (>= 2.1.2)
       diff-lcs (>= 1.1.2)
@@ -188,9 +186,6 @@ GEM
     kgio (2.6.0)
     launchy (2.0.5)
       addressable (~> 2.2.6)
-    linecache (0.43)
-    linecache19 (0.5.12)
-      ruby_core_source (>= 0.1.4)
     locomotive_liquid (2.2.2)
     mail (2.3.0)
       i18n (>= 0.4.0)
@@ -268,22 +263,7 @@ GEM
       activesupport (~> 3.0)
       railties (~> 3.0)
       rspec (~> 2.6.0)
-    ruby-debug (0.10.4)
-      columnize (>= 0.1)
-      ruby-debug-base (~> 0.10.4.0)
-    ruby-debug-base (0.10.4)
-      linecache (>= 0.3)
-    ruby-debug-base19 (0.11.25)
-      columnize (>= 0.3.1)
-      linecache19 (>= 0.5.11)
-      ruby_core_source (>= 0.1.4)
-    ruby-debug19 (0.11.6)
-      columnize (>= 0.3.1)
-      linecache19 (>= 0.5.11)
-      ruby-debug-base19 (>= 0.11.19)
     ruby-hmac (0.4.0)
-    ruby_core_source (0.1.5)
-      archive-tar-minitar (>= 0.5.2)
     rubyzip (0.9.4)
     sanitize (2.0.3)
       nokogiri (>= 1.4.4, < 1.6)
@@ -361,7 +341,6 @@ DEPENDENCIES
   jquery-rails (~> 1.0.16)
   kaminari
   launchy
-  linecache (= 0.43)
   locomotive_liquid (= 2.2.2)
   locomotive_mongoid_acts_as_tree!
   mimetype-fu (~> 0.1.2)
@@ -376,8 +355,6 @@ DEPENDENCIES
   rmagick (= 2.12.2)
   rspec-cells
   rspec-rails (= 2.6.1)
-  ruby-debug
-  ruby-debug19
   rubyzip
   sanitize (~> 2.0.3)
   sass-rails (~> 3.1.4)

app/assets/javascripts/locomotive/views/editable_elements/edit_all_view.js.coffee

@@ -9,15 +9,16 @@ class Locomotive.Views.EditableElements.EditAllView extends Backbone.View
   _editable_elements_views: []
 
   render: ->
-    window.foo = @collection
+    if @collection.isEmpty()
+      $(@el).hide()
+    else
+      @blocks = @collection.blocks()
 
-    @blocks = @collection.blocks()
+      $(@el).html(ich.editable_elements_edit(blocks: @blocks))
 
-    $(@el).html(ich.editable_elements_edit(blocks: @blocks))
+      @render_elements()
 
-    @render_elements()
-
-    @enable_nav()
+      @enable_nav()
 
     return @
 

app/assets/javascripts/locomotive/views/editable_elements/file_view.js.coffee

@@ -6,7 +6,66 @@ class Locomotive.Views.EditableElements.FileView extends Backbone.View
 
   className: 'file input'
 
+  states:
+    change: false
+    delete: false
+
+  events:
+    'click a.change': 'toggle_change'
+    'click a.delete': 'toggle_delete'
+
   render: ->
     $(@el).html(ich.editable_file_input(@model.toJSON()))
 
     return @
+
+  toggle_change: (event) ->
+    @_toggle event, 'change',
+      on_change: =>
+        @$('a:first').hide() & @$('input[type=file]').show() & @$('a.delete').hide()
+      on_cancel: =>
+        @$('a:first').show() & @$('input[type=file]').hide() & @$('a.delete').show()
+
+  toggle_delete: (event) ->
+    @_toggle event, 'delete',
+      on_change: =>
+        @$('a:first').addClass('deleted') & @$('a.change').hide()
+        @$('input[type=hidden].remove-flag').val('1')
+      on_cancel: =>
+        @$('a:first').removeClass('deleted') & @$('a.change').show()
+        @$('input[type=hidden].remove-flag').val('0')
+
+  _toggle: (event, state, options) ->
+    event.stopPropagation() & event.preventDefault()
+
+    button  = $(event.target)
+    label   = button.attr('data-alt-label')
+
+    unless @states[state]
+      options.on_change()
+    else
+      options.on_cancel()
+
+    button.attr('data-alt-label', button.html())
+
+    button.html(label)
+
+    @states[state] = !@states[state]
+
+
+# toggle_change: (event) ->
+#   event.stopPropagation() & event.preventDefault()
+#
+#   button  = $(event.target)
+#   label   = button.attr('data-cancel-label')
+#
+#   unless @changing
+#     @$('a:first').hide() & @$('input[type=file]').show() & @$('a.delete').hide()
+#   else
+#     @$('a:first').show() & @$('input[type=file]').hide() & @$('a.delete').show()
+#
+#   button.attr('data-alt-label', button.html())
+#
+#   button.html(label)
+#
+#   @changing = !@changing

app/assets/stylesheets/locomotive/_buttons.scss

@@ -106,3 +106,34 @@
     top: 1px;
   }
 }
+
+@mixin blue-button {
+  display: inline-block;
+
+  position: relative;
+
+  cursor: pointer;
+
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  @include border-radius(5px);
+
+  line-height: 19px !important;
+
+  padding: 0px 7px;
+
+  @include background-image(linear-gradient(top, #2abaf1, #228dda));
+  @include box-shadow(rgba(0, 0, 0, 0.3) 1px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset);
+
+  font-size: 12px;
+  color: #fff;
+  text-decoration: none;
+  @include text-shadow(rgba(0, 0, 0, 0.8), 0px, 1px, 0px);
+
+  &:hover {
+    @include background-image(linear-gradient(top, #26a1e9, #0d6893));
+  }
+
+  &:active {
+    top: 1px;
+  }
+}

app/assets/stylesheets/locomotive/editable_elements.scss

@@ -2,6 +2,8 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/text-shadow";
 @import "compass/css3/box-shadow";
+@import "buttons";
+@import "helpers";
 
 #editable-elements {
 
@@ -12,8 +14,6 @@
 
     border-bottom: 1px solid #ccced7;
 
-    // padding: 5px 0px;
-
     @include border-top-radius(8px);
     @include background-image(linear-gradient(#ebedf4, #d7dbe7));
 
@@ -21,8 +21,6 @@
       float: left;
       display: block;
 
-      // margin-left: 20px;
-
       line-height: 31px;
       padding: 0px 20px 0 20px;
 
@@ -61,6 +59,28 @@
   fieldset {
     ol {
       border-top: none;
+
+      li.file {
+        span.file {
+          a:first-child {
+            @include hover-link;
+
+            margin-right: 20px;
+
+            color: #1F82BC;
+
+            &.deleted {
+              text-decoration: line-through;
+            }
+          }
+
+          a.change, a.delete {
+            @include blue-button;
+
+            margin-left: 5px;
+          }
+        }
+      }
     }
   } // fieldset
 

app/presenters/locomotive/editable_file_presenter.rb

@@ -1,14 +1,14 @@
 module Locomotive
   class EditableFilePresenter < EditableElementPresenter
 
-    delegate :url, :to => :source
+    delegate :content, :to => :source
 
     def filename
-      File.basename(self.source.url)
+      File.basename(self.content)
     end
 
     def included_methods
-      super + %w(filename url)
+      super + %w(filename content url)
     end
 
   end

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

@@ -30,7 +30,20 @@
 
   %label{ :for => 'page_editable_elements_attributes_{{index}}_content' } {{label}}
 
-  = file_field_tag 'page[editable_elements_attributes][{{index}}][source]', :id => 'page_editable_elements_attributes_{{index}}_source'
+  %span.file
+    {{#if content}}
+    = link_to '{{filename}}', '{{content}}', :target => '_blank'
+
+    = file_field_tag 'page[editable_elements_attributes][{{index}}][source]', :id => 'page_editable_elements_attributes_{{index}}_source', :style => 'display: none'
+
+    = link_to t('locomotive.pages.form.change_file'), '#', :class => 'change', :'data-alt-label' => t('locomotive.pages.form.cancel')
+    = link_to t('locomotive.pages.form.delete_file'), '#', :class => 'delete', :'data-alt-label' => t('locomotive.pages.form.cancel')
+
+    = hidden_field_tag 'page[editable_elements_attributes][{{index}}][remove_source]', '0', :class => 'remove-flag'
+
+    {{else}}
+    = file_field_tag 'page[editable_elements_attributes][{{index}}][source]', :id => 'page_editable_elements_attributes_{{index}}_source'
+    {{/if}}
 
   {{#if hint}}
   %p.inline-hints {{hint}}

config/locales/admin_ui.en.yml

@@ -113,7 +113,9 @@ en:
         help: "The page title can be updated by clicking it. To apply your changes, click on the \"Save\" button."
         ask_for_title: "Please type the new page title"
       form:
-        delete_file: Delete file
+        change_file: change
+        delete_file: delete
+        cancel: cancel
         default_block: Default
         cache_strategy:
           none: None

config/locales/admin_ui.fr.yml

@@ -112,7 +112,9 @@ fr:
         help: "Le titre de la page est modifiable en cliquant dessus. Pour appliquer votre modification, cliquez après sur le bouton \"Modifier\""
         ask_for_title: "Veuillez entrer le nouveau titre"
       form:
-        delete_file: Supprimer fichier
+        change_file: changer
+        delete_file: supprimer
+        cancel: annuler
         default_block: Défaut
         cache_strategy:
           none: Aucun