edit_mode 0.0.1

data/.gitignore

@@ -0,0 +1,23 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+
+Gemfile.lock
+test_app/.bundle
+test_app/db/*.sqlite3
+test_app/log/*.log
+test_app/tmp/**/*

data/.rspec

@@ -0,0 +1 @@
+--colour

data/Gemfile

@@ -0,0 +1,29 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in edit_mode.gemspec
+gemspec
+
+group :test, :development do
+  gem 'rspec'
+  gem 'rspec-core'
+  gem 'rspec-expectations'
+  gem 'rspec-mocks'
+  gem 'nokogiri'
+  gem 'capybara'
+  gem 'execjs'
+  gem 'therubyracer', :platform => :ruby
+
+  gem 'guard', '1.0.1'
+  gem 'rspec-rails', '2.10.0'
+  gem 'guard-rspec', '0.5.5'
+
+end
+
+group :test do
+  gem 'best_in_place'
+  gem 'sass-rails'
+end
+
+gem 'jquery-rails'
+gem 'coffee-rails'
+gem 'sqlite3'

data/Guardfile

@@ -0,0 +1,19 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+require 'active_support/core_ext'
+
+guard 'rspec', :version => 2, :all_after_pass => false do
+  watch(%r{^spec/.+_spec\.rb$})
+  watch(%r{^lib/(.+)\.rb$})     { |m| "spec/lib/#{m[1]}_spec.rb" }
+  watch('spec/spec_helper.rb')  { "spec" }
+
+  # Rails example
+#  watch(%r{^app/(.+)\.rb$})                           { |m| "spec/#{m[1]}_spec.rb" }
+#  watch(%r{^app/(.*)(\.erb|\.haml)$})                 { |m| "spec/#{m[1]}#{m[2]}_spec.rb" }
+#  watch(%r{^app/controllers/(.+)_(controller)\.rb$})  { |m| ["spec/routing/#{m[1]}_routing_spec.rb", "spec/#{m[2]}s/#{m[1]}_#{m[2]}_spec.rb", "spec/acceptance/#{m[1]}_spec.rb"] }
+
+  # Capybara request specs
+#  watch(%r{^app/views/(.+)/.*\.(erb|haml)$})          { |m| "spec/requests/#{m[1]}_spec.rb" }
+end
+

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Sebastian Fiedlschuster
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,135 @@
+# EditMode
+
+<img src="https://github.com/fiedl/edit_mode/raw/master/test_app/app/assets/images/screenshot.png" height="300" align="right" vspace="20" hspace="20" />
+
+*edit_mode* is a *ruby on rails gem* that allows you to toggle an edit mode on a normal show view. 
+Think of it as a grouped in-place editing. 
+This also toggles [best_in_place](https://github.com/bernat/best_in_place) fields.
+
+The edit mode is activated by pressing an 'edit' button on a show view. This shows additional editing tools 
+and switches on the best_in_place form fields. When editing is finished, use 'save' or 'cancel' buttons to 
+quit the edit mode and return to a normal show view. 
+Several editing groups per page are supported. Thus, you can have several 'boxes' to edit on a page.
+
+## Demo
+
+You might want to have a look at [this demo app at heroku](http://edit-mode-test-app.herokuapp.com/).
+
+The [code of this demo app can be found here](https://github.com/fiedl/edit_mode/tree/master/test_app).
+
+## Installation
+
+THIS IS NOT READY, YET.
+
+Add this line to your application's Gemfile:
+
+    gem 'edit_mode'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install edit_mode
+
+TODO: Include css and js.
+
+### Include Assets
+
+In `app/assets/javascripts/application.js`, add:
+
+```javascript
+//= require edit_mode
+```
+	
+In `app/assets/stylesheets/application.css`, add:
+
+```css
+/*
+ *...
+ *= require edit_mode
+ */
+```
+
+## Usage
+
+### Basic View
+
+For a basic example, see: https://github.com/fiedl/edit_mode/blob/master/test_app/app/views/users/show.html.erb
+
+### edit_mode_group
+
+The edit mode is toggled within a `<span class="edit_mode_group"></span>`. The buttons to 'edit', 'save' and 'cancel' should also be placed inside this span.
+
+You can also have several edit_mode_group spans on a page, as shown in the demo app.
+
+### Tool Buttons
+
+To enter and exit the edit mode, use buttons 'edit', 'save' and 'cancel'. These can be anchors, images, et cetera. They only have to have the correct css classes: 
+
+```html
+<span class="edit_mode_group">
+  <a class="edit_button" href="#">edit</a>
+  <a class="save_button" href="#">save</a>
+  <a class="cancel_button" href="#">cancel</a>
+  ...
+</span>
+```
+
+### show_only_in_edit_mode
+
+Within the edit_mode_group span, you may place certain elements that should only be shown when in edit mode. You can use this for 'add' buttons or 'destroy' buttons.
+
+```html
+<span class="edit_mode_group">
+  ...
+  <span class="show_only_in_edit_mode">
+    <a href="#">add</a>
+  </span>
+</span>
+```
+
+The same, the other way round:
+
+```html
+<span class="edit_mode_group">
+  ...
+  <span class="do_not_show_in_edit_mode">
+    <img src="..." alt="This picture is not shown in edit mode." />
+  </span>
+</span>
+```
+
+### best_in_place
+
+In the edit_mode_group span, all [best_in_place](https://github.com/bernat/best_in_place) elements are toggled as well.
+
+### '.editable' Triggers
+
+If you need custom behaviour inside the edit_mode_group span, you can use these triggers: For all elements of the class `.editable`, the events `edit`, `save` and `cancel` are triggered, when entering or exiting edit mode.
+
+```html
+<span class="edit_mode_group">
+  ...
+  <span class="editable custom_element">Test</span>
+</span>
+```
+
+Bind the event via JavaScript, e.g. with jQuery:
+
+```coffee
+jQuery ->
+  $( ".custom_element" ).bind( "edit", ->
+    alert( "This element has just entered edit mode." )
+  )
+```
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+

data/Rakefile

@@ -0,0 +1,8 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core'
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/edit_mode.gemspec

@@ -0,0 +1,31 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "edit_mode/version"
+#require File.expand_path('../lib/edit_mode/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.name          = "edit_mode"
+  gem.authors       = ["Sebastian Fiedlschuster"]
+  gem.email         = ["sebastian@fiedlschuster.de"]
+  gem.description   = %q{The edit mode is activated by pressing an 'edit' button on a show view. This shows additional editing tools and switches on the best_in_place form fields. When editing is finished, use 'save' or 'cancel' buttons to quit the edit mode and return to a normal show view. Several editing groups per page are supported. Thus, you can have several 'boxes' to edit on a page.}
+  gem.summary       = %q{Toggle an edit mode on a show view. Think of it as a grouped in-place editing.}
+  gem.homepage      = "https://github.com/fiedl/edit_mode"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "edit_mode"
+  gem.require_paths = ["lib"]
+  gem.version       = EditMode::VERSION
+
+  
+#  gem.add_dependency "railties"
+
+  gem.add_dependency "rails", ">= 3.2"
+  gem.add_dependency "jquery-rails"
+  
+  gem.add_development_dependency "rspec-rails", ">= 2.8.0"
+  gem.add_development_dependency "nokogiri", ">= 1.5.0"
+  gem.add_development_dependency "capybara"
+  
+end

data/lib/assets/javascripts/edit_mode/best_in_place.js.coffee

@@ -0,0 +1,25 @@
+
+jQuery ->
+  $( ".best_in_place" ).best_in_place()
+                       .addClass( "editable ")
+                       .bind( "edit", ->
+                         $( this ).data( 'bestInPlaceEditor' ).activate()
+                         $( this ).find( "*" ).unbind( 'blur' )
+                                              .unbind( 'click' )
+                                              .unbind( 'keyup' )
+                                              .unbind( 'submit' )
+                                              .bind( 'keyup', keyUpHandler )
+                       )
+                       .bind( "cancel", ->
+                         $( this ).data( 'bestInPlaceEditor' ).abort()
+                       )
+                       .bind( "save", ->
+                         $( this ).data( 'bestInPlaceEditor' ).update()
+                       )
+
+  keyUpHandler = (event) ->
+    if event.keyCode == 27
+      $( this ).closest( ".edit_mode_group" ).trigger( "cancel" )
+    if event.keyCode == 13
+      unless $( event.target ).is( "textarea" )
+        $( this ).closest( ".edit_mode_group" ).trigger( "save" )

data/lib/assets/javascripts/edit_mode/best_in_place.js.coffee~

@@ -0,0 +1,26 @@
+
+jQuery ->
+  $( ".best_in_place" ).best_in_place()
+                       .addClass( "editable ")
+                       .bind( "edit", ->
+                         alert( "activated" )
+                         $( this ).data( 'bestInPlaceEditor' ).activate()
+                         $( this ).find( "*" ).unbind( 'blur' )
+                                              .unbind( 'click' )
+                                              .unbind( 'keyup' )
+                                              .unbind( 'submit' )
+                                              .bind( 'keyup', keyUpHandler )
+                       )
+                       .bind( "cancel", ->
+                         $( this ).data( 'bestInPlaceEditor' ).abort()
+                       )
+                       .bind( "save", ->
+                         $( this ).data( 'bestInPlaceEditor' ).update()
+                       )
+
+  keyUpHandler = (event) ->
+    if event.keyCode == 27
+      $( this ).closest( ".edit_mode_group" ).trigger( "cancel" )
+    if event.keyCode == 13
+      unless $( event.target ).is( "textarea" )
+        $( this ).closest( ".edit_mode_group" ).trigger( "save" )

data/lib/assets/javascripts/edit_mode/edit_mode_group.js.coffee

@@ -0,0 +1,43 @@
+
+jQuery ->
+
+  # The <span class="edit_mode_group"></span> elements receive 'edit', 'save' and 'cancel' events,
+  # when the user clicks the corresponding buttons '.edit_button', '.save_button' or '.cancel_button'.
+  # The edit_mode_group has to pass these events down to the contained .editable elements.
+  $( ".edit_mode_group" ).bind( "edit", ->
+
+    unless $( this ).hasClass( "currently_in_edit_mode" )
+      $( this ).addClass( "currently_in_edit_mode" )
+
+      $( $( this ).find( ".editable" ).get().reverse() ).each ->
+        $( this ).trigger( "edit" )
+  )
+
+  $( ".edit_mode_group" ).bind( "save", ->
+
+    if $( this ).hasClass( "currently_in_edit_mode" )
+      $( this ).removeClass( "currently_in_edit_mode" )
+
+      edit_mode_group = $( this )
+      button_effect( $( this ).find( ".save_button" ), ->
+        edit_mode_group.find( ".editable" ).trigger( "save" )
+      )
+
+  )
+
+  $( ".edit_mode_group" ).bind( "cancel", ->
+
+    if $( this ).hasClass( "currently_in_edit_mode" )
+      $( this ).removeClass( "currently_in_edit_mode" )
+
+      edit_mode_group = $( this )
+      button_effect( $( this ).find( ".cancel_button" ), ->
+        edit_mode_group.find( ".editable" ).trigger( "cancel" )
+      )
+
+  )
+
+
+
+  button_effect = ( button, callback ) ->
+    button.effect( "pulsate", { times: 2 }, "fast", callback )

data/lib/assets/javascripts/edit_mode/initial_auto_hide.js.coffee

@@ -0,0 +1,8 @@
+
+jQuery ->
+
+  # The tool buttons and the .show_only_in_edit_mode elements first are hidden via css (in case JavaScript does not work).
+  # In order to use .hide() and .show() of jQuery, we need to restore the display css property
+  # and hide the elements via jQuery.
+  $( ".save_button,.cancel_button,.show_only_in_edit_mode" ).css( "display", "inline-block" ).hide()
+

data/lib/assets/javascripts/edit_mode/make_modal.js.coffee

@@ -0,0 +1,28 @@
+
+jQuery ->
+
+  # The <span class="edit_mode_group"></span> elements should be modal when in edit mode.
+  # That means that everything else should be greyed out.
+  # If the user clicks on the shaded (grey) area outside, the edit_mode_group is saved.
+
+  $( ".edit_mode_group" ).bind( "edit", ->
+    unless $( this ).hasClass( "modal" )
+      modal_edit_mode_group = $( this )
+      $( this ).addClass( "modal" )
+      $( "body" ).append( "<div class='modal_bg'></div>" )
+      $( "div.modal_bg" ).hide().fadeIn().click( ->
+        modal_edit_mode_group.trigger( "save" )
+      )
+  )
+
+  $( ".edit_mode_group" ).bind( "save cancel", ->
+    if $( this ).hasClass( "modal" )
+      unless $( this ).hasClass( "animating" )
+        $( this ).addClass( "animating" )
+        setTimeout( ->
+          $( "div.modal_bg" ).fadeOut( ->
+            $( this ).remove()
+            $( ".modal" ).removeClass( "modal animating" )
+          )
+        , 300 )
+  )

data/lib/assets/javascripts/edit_mode/show_only_in_edit_mode.js.coffee

@@ -0,0 +1,22 @@
+
+jQuery ->
+
+  # When edit mode is entered, on all included '.editable' elements the 'edit' event is triggered.
+  # When edit mode is left, the events 'save' or 'cancel' are triggered.
+  # For <span class="show_only_in_edit_mode"></span> tags, these events are rather simple:
+  # Just show or hide these spans!
+  $( ".show_only_in_edit_mode" ).live( "edit", ->
+    $( this ).show()
+  ).live( "save cancel", ->
+    $( this ).hide()
+  )
+
+  # And just the opposite for <span class="do_not_show_in_edit_mode"></span>.
+  $( ".do_not_show_in_edit_mode" ).live( "edit", ->
+    $( this ).hide()
+  ).live( "save cancel", ->
+    $( this ).show()
+  )
+
+  # In order to receive these events, the .show_only_in_edit_mode elements have to be .editable as well.
+  $( ".show_only_in_edit_mode,.do_not_show_in_edit_mode" ).addClass( "editable" )

data/lib/assets/javascripts/edit_mode/tool_buttons.js.coffee

@@ -0,0 +1,21 @@
+
+jQuery ->
+
+  # The 'save' and the 'cancel' button are only to be shown in edit mode.
+  # In order to receive the proper 'edit', 'save', 'cancel' events, they also have to be .editable.
+  $( ".save_button,.cancel_button" ).addClass( "show_only_in_edit_mode editable" )
+
+  # The 'edit' button is only to be shown when not in edit mode.
+  $( ".edit_button" ).addClass( "do_not_show_in_edit_mode editable" )
+
+  # The buttons trigger the correspondig events of the surrounding edit_mode_group.
+  $( ".edit_button" ).click ( ->
+    $( this ).closest( ".edit_mode_group" ).trigger( "edit" )
+  )
+  $( ".save_button" ).click( ->
+    $( this ).closest( ".edit_mode_group" ).trigger( "save" )
+  )
+  $( ".cancel_button" ).click( ->
+    $( this ).closest( ".edit_mode_group" ).trigger( "cancel" )
+  )
+

data/lib/assets/javascripts/edit_mode.js

@@ -0,0 +1,2 @@
+//
+//= require_tree ./edit_mode

data/lib/assets/stylesheets/edit_mode/initial_auto_hide.css.sass

@@ -0,0 +1,3 @@
+
+.show_only_in_edit_mode, .save_button, .cancel_button
+  display: none

data/lib/assets/stylesheets/edit_mode/modal.css.sass

@@ -0,0 +1,17 @@
+.modal
+  position: relative
+  z-index: 3005
+
+.modal_bg
+  top: 0px
+  left: 0px
+  position: fixed
+  width: 100%
+  height: 100%
+  background-color: #000000
+  filter: alpha(opacity = 60)
+  opacity: 0.6
+  -moz-opacity: 0.6
+  z-index: 3000
+  text-align: center
+  vertical-align: middle

data/lib/assets/stylesheets/edit_mode.css

@@ -0,0 +1,4 @@
+
+/*
+ *= require_tree ./edit_mode
+ */

data/lib/assets/stylesheets/edit_mode.css~

@@ -0,0 +1,4 @@
+
+/*
+ *= require_tree .
+ */

data/lib/edit_mode/engine.rb

@@ -0,0 +1,7 @@
+module EditMode
+  class Engine < Rails::Engine
+    initializer "setup for rails" do
+      ActionView::Base.send( :include, EditMode::EditModeHelpers )
+    end
+  end
+end

data/lib/edit_mode/helper.rb

@@ -0,0 +1,19 @@
+module EditMode
+  module EditModeHelpers
+    
+    # Returns a span tag which is only shown in edit mode.
+    def show_only_in_edit_mode_span( &block )
+      content_tag :span, :class => 'show_only_in_edit_mode' do
+        yield 
+      end
+    end
+
+    # Returns a span tag which is only shown when *not* in edit mode.
+    def do_not_show_in_edit_mode_span( &block )
+      content_tag :span, :class => 'do_not_show_in_edit_mode' do
+        yield
+      end
+    end
+
+  end
+end

data/lib/edit_mode/railtie.rb

@@ -0,0 +1,7 @@
+module EditMode
+  class Railtie < Rails::Railtie
+    initializer "set view helpers" do
+      EditMode::ViewHelpers = ActionView::Base.new
+    end
+  end
+end

data/lib/edit_mode/version.rb

@@ -0,0 +1,3 @@
+module EditMode
+  VERSION = "0.0.1"
+end

data/lib/edit_mode.rb

@@ -0,0 +1,9 @@
+require "edit_mode/version"
+require "edit_mode/helper"
+require "edit_mode/engine"
+require "edit_mode/railtie"
+require "action_view"
+
+module EditMode
+  # Your code goes here...
+end

data/spec/helpers/edit_mode_helpers_spec.rb

@@ -0,0 +1,26 @@
+require "spec_helper"
+
+describe EditMode::EditModeHelpers do
+  
+  describe "#show_only_in_edit_mode_span" do
+   
+    it "should generate the corresponding span" do
+      nokogiri = Nokogiri::HTML.parse( show_only_in_edit_mode_span { "<p>This text is shown only in edit mode.</p>" } )
+      span = nokogiri.css( "span" )
+      span.text.should == "<p>This text is shown only in edit mode.</p>"
+    end
+
+  end
+
+  describe "#do_not_show_in_edit_mode_span" do
+   
+    it "should generate the corresponding span" do
+      nokogiri = Nokogiri::HTML.parse( do_not_show_in_edit_mode_span { "<p>This text is shown only when not in edit mode.</p>" } )
+      span = nokogiri.css( "span" )
+      span.text.should == "<p>This text is shown only when not in edit mode.</p>"
+    end
+
+  end
+
+
+end

data/spec/integration/buttons_spec.rb

@@ -0,0 +1,69 @@
+require 'spec_helper'
+
+describe "button behaviour", js: true do
+
+  before do
+    @user = User.new( first_name: "John", last_name: "Doe", date_of_birth: "1995-12-21" )
+    @user.save
+    visit user_path( @user )
+  end
+
+  describe "edit button" do
+
+    it "should be visible outside and invisible in edit mode" do
+      page.should have_selector( ".edit_button", visible: true, count: 2 )
+      click_on 'edit'
+      page.should have_selector( ".edit_button", visible: true, count: 1 )
+      page.should_not have_selector( ".edit_button", visible: true, count: 2 )
+      click_on 'cancel'
+      page.should have_selector( ".edit_button", visible: true, count: 2 )
+    end
+
+    it "should activate the edit mode" do
+      page.should_not have_selector( ".edit_mode_group.currently_in_edit_mode" )
+      click_on 'edit'
+      page.should have_selector( ".edit_mode_group.currently_in_edit_mode" )
+    end
+
+    it "should activate the edit mode only for the own edit_mode_group" do
+      click_on 'edit'
+      page.should have_field( 'first_name' )
+      page.should_not have_field( 'date_of_birth' )
+    end
+
+  end
+
+  describe "save button" do
+    it "should be visible only in edit mode" do
+      page.should_not have_selector( ".save_button", visible: true )
+      click_on 'edit'
+      page.should have_selector( ".save_button", visible: true )
+    end
+
+    it "should save the best_in_place fields" do
+      click_on 'edit'
+      fill_in 'first_name', with: 'Jane'
+      click_on 'save'
+      page.should_not have_content( "First Name: John" )
+      page.should have_content( "First Name: Jane" )
+    end
+  end
+
+  describe "cancel button" do
+    it "should be visible only in edit mode" do
+      page.should_not have_selector( ".cancel_button", visible: true )
+      click_on 'edit'
+      page.should have_selector( ".cancel_button", visible: true )
+    end
+
+    it "should *not* save the best_in_place fields" do
+      click_on 'edit'
+      fill_in 'first_name', with: 'Jane'
+      click_on 'cancel'
+      page.should have_content( "First Name: John" )
+      page.should_not have_content( "First Name: Jane" )
+    end
+  end
+ 
+
+end