edit_mode 0.0.1

data/spec/integration/show_only_in_edit_mode_spec.rb

@@ -0,0 +1,24 @@
+require 'spec_helper'
+
+describe "show only in edit mode span tags", js: true do
+
+  before do
+    visit user_path( User.first )
+  end
+
+  it "should not be visible when not in edit mode" do
+    page.should_not have_selector( ".show_only_in_edit_mode", visible: true )
+  end
+
+  it "should be visible in edit mode" do
+    click_on 'edit'
+    page.should have_selector( ".show_only_in_edit_mode", visible: true )
+  end
+
+  it "should be invisible after exiting the edit mode" do
+    click_on 'edit'
+    click_on 'cancel'
+    page.should_not have_selector( ".show_only_in_edit_mode", visible: true )
+  end
+
+end

data/spec/spec_helper.rb

@@ -0,0 +1,22 @@
+
+ENV["RAILS_ENV"] = "test"
+
+require File.expand_path('../../test_app/config/environment', __FILE__)
+
+require "rspec/rails"
+require "nokogiri"
+
+# Load support files
+#Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each{|f| require f}
+
+RSpec.configure do |config|
+
+  require 'rspec/expectations'
+
+  config.include RSpec::Matchers
+#  config.include EditMode::TestHelpers
+
+  config.mock_with :rspec
+end
+
+# Capybara.default_wait_time = 5

data/test_app/.gitignore

@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile ~/.gitignore_global
+
+# Ignore bundler config
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+
+# Ignore all logfiles and tempfiles.
+/log/*.log
+/tmp

data/test_app/Gemfile

@@ -0,0 +1,56 @@
+source 'https://rubygems.org'
+
+gem 'rails', '3.2.3'
+
+# Bundle edge Rails instead:
+# gem 'rails', :git => 'git://github.com/rails/rails.git'
+
+group :development, :test do
+  gem 'sqlite3'
+end
+group :production do
+  gem 'pg'
+end
+
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+  gem 'sass-rails',   '~> 3.2.3'
+  gem 'coffee-rails', '~> 3.2.1'
+
+  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
+  gem 'therubyracer', :platform => :ruby
+
+  gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+gem 'jquery-ui-rails'
+
+group :development do
+  gem 'nifty-generators'
+end
+
+# To use ActiveModel has_secure_password
+# gem 'bcrypt-ruby', '~> 3.0.0'
+
+# To use Jbuilder templates for JSON
+# gem 'jbuilder'
+
+# Use unicorn as the app server
+# gem 'unicorn'
+
+# Deploy with Capistrano
+# gem 'capistrano'
+
+# To use debugger
+# gem 'ruby-debug19', :require => 'ruby-debug'
+
+gem "mocha", :group => :test
+
+# Edit Mode (This is the gem to demonstrate here.)
+gem 'edit_mode', git: 'git://github.com/fiedl/edit_mode.git'
+
+# In-place editing (To show that this gem integrates best_in_place out of the box.)
+gem 'best_in_place'

data/test_app/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/test_app/Rakefile

@@ -0,0 +1,7 @@
+#!/usr/bin/env rake
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+TestApp::Application.load_tasks

data/test_app/app/assets/javascripts/activate_best_in_place.js

@@ -0,0 +1,4 @@
+$(document).ready(function() {
+  /* Activating Best In Place */
+  jQuery(".best_in_place").best_in_place();
+});

data/test_app/app/assets/javascripts/application.js

@@ -0,0 +1,18 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery-ui
+//= require jquery_ujs
+//= require best_in_place
+//= require edit_mode
+//= require_tree .

data/test_app/app/assets/stylesheets/#application.css#

@@ -0,0 +1,14 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+*/
+

data/test_app/app/assets/stylesheets/application.css

@@ -0,0 +1,14 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require edit_mode
+ *= require_self
+ *= require_tree .
+*/

data/test_app/app/assets/stylesheets/modifications.css.sass

@@ -0,0 +1,9 @@
+.edit_mode_group
+  margin-top: 40px
+  background: white
+  padding: 10px
+  .edit_mode_tools
+    float: right
+
+p.global_tools
+  margin-top: 70px

data/test_app/app/assets/stylesheets/nifty.css

@@ -0,0 +1,79 @@
+body {
+  background-color: #4B7399;
+  font-family: Verdana, Helvetica, Arial;
+  font-size: 14px;
+}
+
+a img {
+  border: none;
+}
+
+a {
+  color: #0000FF;
+}
+
+.clear {
+  clear: both;
+  height: 0;
+  overflow: hidden;
+}
+
+#container {
+  width: 75%;
+  margin: 0 auto;
+  background-color: #FFF;
+  padding: 20px 40px;
+  border: solid 1px black;
+  margin-top: 20px;
+}
+
+#flash_notice, #flash_error, #flash_alert {
+  padding: 5px 8px;
+  margin: 10px 0;
+}
+
+#flash_notice {
+  background-color: #CFC;
+  border: solid 1px #6C6;
+}
+
+#flash_error, #flash_alert {
+  background-color: #FCC;
+  border: solid 1px #C66;
+}
+
+.field_with_errors {
+  display: inline;
+}
+
+.error_messages {
+  width: 400px;
+  border: 2px solid #CF0000;
+  padding: 0px;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  font-size: 12px;
+}
+
+.error_messages h2 {
+  text-align: left;
+  font-weight: bold;
+  padding: 5px 10px;
+  font-size: 12px;
+  margin: 0;
+  background-color: #c00;
+  color: #fff;
+}
+
+.error_messages p {
+  margin: 8px 10px;
+}
+
+.error_messages ul {
+  margin-bottom: 0;
+}
+
+form .field, form .actions {
+  margin: 12px 0;
+}

data/test_app/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+end

data/test_app/app/controllers/root_controller.rb

@@ -0,0 +1,11 @@
+class RootController < ApplicationController
+
+  def index
+    if User.first
+      redirect_to User.first
+    else
+      redirect_to controller: 'users', action: 'index'
+    end
+  end
+
+end

data/test_app/app/controllers/users_controller.rb

@@ -0,0 +1,44 @@
+class UsersController < ApplicationController
+  def index
+    @users = User.all
+  end
+
+  def show
+    @user = User.find(params[:id])
+  end
+
+  def new
+    @user = User.new
+  end
+
+  def create
+    @user = User.new(params[:user])
+    if @user.save
+      redirect_to @user, :notice => "Successfully created user."
+    else
+      render :action => 'new'
+    end
+  end
+
+  def edit
+    @user = User.find(params[:id])
+  end
+
+  def update
+    @user = User.find(params[:id])
+    if @user.update_attributes(params[:user])
+      respond_to do |format|
+        format.json { respond_with_bip( @user ) }
+        format.html { redirect_to @user, :notice  => "Successfully updated user." }
+      end
+    else
+      render :action => 'edit'
+    end
+  end
+
+  def destroy
+    @user = User.find(params[:id])
+    @user.destroy
+    redirect_to users_url, :notice => "Successfully destroyed user."
+  end
+end

data/test_app/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test_app/app/helpers/error_messages_helper.rb

@@ -0,0 +1,23 @@
+module ErrorMessagesHelper
+  # Render error messages for the given objects. The :message and :header_message options are allowed.
+  def error_messages_for(*objects)
+    options = objects.extract_options!
+    options[:header_message] ||= I18n.t(:"activerecord.errors.header", :default => "Invalid Fields")
+    options[:message] ||= I18n.t(:"activerecord.errors.message", :default => "Correct the following errors and try again.")
+    messages = objects.compact.map { |o| o.errors.full_messages }.flatten
+    unless messages.empty?
+      content_tag(:div, :class => "error_messages") do
+        list_items = messages.map { |msg| content_tag(:li, msg) }
+        content_tag(:h2, options[:header_message]) + content_tag(:p, options[:message]) + content_tag(:ul, list_items.join.html_safe)
+      end
+    end
+  end
+
+  module FormBuilderAdditions
+    def error_messages(options = {})
+      @template.error_messages_for(@object, options)
+    end
+  end
+end
+
+ActionView::Helpers::FormBuilder.send(:include, ErrorMessagesHelper::FormBuilderAdditions)

data/test_app/app/helpers/layout_helper.rb

@@ -0,0 +1,22 @@
+# These helper methods can be called in your template to set variables to be used in the layout
+# This module should be included in all views globally,
+# to do so you may need to add this line to your ApplicationController
+#   helper :layout
+module LayoutHelper
+  def title(page_title, show_title = true)
+    content_for(:title) { h(page_title.to_s) }
+    @show_title = show_title
+  end
+
+  def show_title?
+    @show_title
+  end
+
+  def stylesheet(*args)
+    content_for(:head) { stylesheet_link_tag(*args) }
+  end
+
+  def javascript(*args)
+    content_for(:head) { javascript_include_tag(*args) }
+  end
+end

data/test_app/app/helpers/users_helper.rb

@@ -0,0 +1,2 @@
+module UsersHelper
+end

data/test_app/app/models/user.rb

@@ -0,0 +1,3 @@
+class User < ActiveRecord::Base
+  attr_accessible :first_name, :last_name, :date_of_birth
+end

data/test_app/app/views/layouts/application.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
+    <%= stylesheet_link_tag "application" %>
+    <%= javascript_include_tag :application %>
+    <%= csrf_meta_tag %>
+    <%= yield(:head) %>
+  </head>
+  <body>
+    <div id="container">
+      <% flash.each do |name, msg| %>
+        <%= content_tag :div, msg, :id => "flash_#{name}" %>
+      <% end %>
+      <%= content_tag :h1, yield(:title) if show_title? %>
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/test_app/app/views/users/_form.html.erb

@@ -0,0 +1,16 @@
+<%= form_for @user do |f| %>
+  <%= f.error_messages %>
+  <p>
+    <%= f.label :first_name %><br />
+    <%= f.text_field :first_name %>
+  </p>
+  <p>
+    <%= f.label :last_name %><br />
+    <%= f.text_field :last_name %>
+  </p>
+  <p>
+    <%= f.label :date_of_birth %><br />
+    <%= f.date_select :date_of_birth %>
+  </p>
+  <p><%= f.submit %></p>
+<% end %>

data/test_app/app/views/users/edit.html.erb

@@ -0,0 +1,8 @@
+<% title "Edit User" %>
+
+<%= render 'form' %>
+
+<p>
+  <%= link_to "Show", @user %> |
+  <%= link_to "View All", users_path %>
+</p>

data/test_app/app/views/users/index.html.erb

@@ -0,0 +1,29 @@
+<% title "Users" %>
+
+<p>
+  This demo app shows how <a href="https://github.com/fiedl/edit_mode" target="_blank">edit_mode</a> looks like.
+</p>
+<p>
+  Just go to the 'show' page of a user and edit his profile there. (If no user exists, you will have to create one first.)
+</p>
+
+
+<table>
+  <tr>
+    <th>First Name</th>
+    <th>Last Name</th>
+    <th>Date Of Birth</th>
+  </tr>
+  <% for user in @users %>
+    <tr>
+      <td><%= user.first_name %></td>
+      <td><%= user.last_name %></td>
+      <td><%= user.date_of_birth %></td>
+      <td><%= link_to "Show", user %></td>
+      <td><%= link_to "Edit", edit_user_path(user) %></td>
+      <td><%= link_to "Destroy", user, :confirm => 'Are you sure?', :method => :delete %></td>
+    </tr>
+  <% end %>
+</table>
+
+<p><%= link_to "New User", new_user_path %></p>

data/test_app/app/views/users/index.html.erb~

@@ -0,0 +1,21 @@
+<% title "Users" %>
+
+<table>
+  <tr>
+    <th>First Name</th>
+    <th>Last Name</th>
+    <th>Date Of Birth</th>
+  </tr>
+  <% for user in @users %>
+    <tr>
+      <td><%= user.first_name %></td>
+      <td><%= user.last_name %></td>
+      <td><%= user.date_of_birth %></td>
+      <td><%= link_to "Show", user %></td>
+      <td><%= link_to "Edit", edit_user_path(user) %></td>
+      <td><%= link_to "Destroy", user, :confirm => 'Are you sure?', :method => :delete %></td>
+    </tr>
+  <% end %>
+</table>
+
+<p><%= link_to "New User", new_user_path %></p>

data/test_app/app/views/users/new.html.erb

@@ -0,0 +1,5 @@
+<% title "New User" %>
+
+<%= render 'form' %>
+
+<p><%= link_to "Back to List", users_path %></p>