├── test └── dummy │ ├── log │ └── .keep │ ├── app │ ├── mailers │ │ └── .keep │ ├── models │ │ ├── .keep │ │ └── concerns │ │ │ └── .keep │ ├── assets │ │ ├── images │ │ │ └── .keep │ │ ├── stylesheets │ │ │ └── application.css │ │ └── javascripts │ │ │ └── application.js │ ├── controllers │ │ ├── concerns │ │ │ └── .keep │ │ ├── welcome_controller.rb │ │ └── application_controller.rb │ ├── views │ │ ├── welcome │ │ │ └── index.html.erb │ │ └── layouts │ │ │ └── application.html.erb │ └── helpers │ │ └── application_helper.rb │ ├── lib │ ├── assets │ │ └── .keep │ └── tasks │ │ └── .keep │ ├── test │ ├── models │ │ └── .keep │ ├── controllers │ │ └── .keep │ ├── fixtures │ │ └── .keep │ ├── helpers │ │ └── .keep │ ├── integration │ │ └── .keep │ ├── mailers │ │ └── .keep │ └── test_helper.rb │ ├── public │ ├── favicon.ico │ ├── robots.txt │ ├── 500.html │ ├── 422.html │ └── 404.html │ ├── vendor │ └── assets │ │ ├── javascripts │ │ └── .keep │ │ └── stylesheets │ │ └── .keep │ ├── bin │ ├── rake │ ├── bundle │ └── rails │ ├── config.ru │ ├── config │ ├── initializers │ │ ├── session_store.rb │ │ ├── filter_parameter_logging.rb │ │ ├── mime_types.rb │ │ ├── backtrace_silencers.rb │ │ ├── wrap_parameters.rb │ │ ├── secret_token.rb │ │ └── inflections.rb │ ├── environment.rb │ ├── boot.rb │ ├── database.yml │ ├── locales │ │ └── en.yml │ ├── application.rb │ ├── environments │ │ ├── development.rb │ │ ├── test.rb │ │ └── production.rb │ └── routes.rb │ ├── Rakefile │ ├── db │ └── seeds.rb │ ├── .gitignore │ ├── README.rdoc │ └── Gemfile ├── Rakefile ├── lib ├── abracadabra.rb └── abracadabra │ ├── version.rb │ └── engine.rb ├── Gemfile ├── .gitignore ├── app ├── assets │ ├── stylesheets │ │ ├── abracadabra.css │ │ └── abracadabra-scss.css.scss │ └── javascripts │ │ └── abracadabra.js └── helpers │ └── abracadabra │ └── rails │ └── view_helper.rb ├── LICENSE.txt ├── abracadabra.gemspec └── README.md /test/dummy/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/fixtures/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" -------------------------------------------------------------------------------- /test/dummy/app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/views/welcome/index.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/vendor/assets/javascripts/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/vendor/assets/stylesheets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /lib/abracadabra.rb: -------------------------------------------------------------------------------- 1 | require "abracadabra/version" 2 | require "abracadabra/engine" if defined?(::Rails) -------------------------------------------------------------------------------- /lib/abracadabra/version.rb: -------------------------------------------------------------------------------- 1 | module Abracadabra 2 | module Rails 3 | VERSION = "1.2.0" 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in abracadabra.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /test/dummy/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative '../config/boot' 3 | require 'rake' 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /lib/abracadabra/engine.rb: -------------------------------------------------------------------------------- 1 | module Abracadabra 2 | module Rails 3 | class Engine < ::Rails::Engine 4 | end 5 | end 6 | end -------------------------------------------------------------------------------- /test/dummy/app/controllers/welcome_controller.rb: -------------------------------------------------------------------------------- 1 | class WelcomeController < ApplicationController 2 | def index 3 | end 4 | end -------------------------------------------------------------------------------- /test/dummy/bin/bundle: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) 3 | load Gem.bin_path('bundler', 'bundle') 4 | -------------------------------------------------------------------------------- /test/dummy/bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | APP_PATH = File.expand_path('../../config/application', __FILE__) 3 | require_relative '../config/boot' 4 | require 'rails/commands' 5 | -------------------------------------------------------------------------------- /test/dummy/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require ::File.expand_path('../config/environment', __FILE__) 4 | run Rails.application 5 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/session_store.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | Dummy::Application.config.session_store :cookie_store, key: '_dummy_session' 4 | -------------------------------------------------------------------------------- /test/dummy/config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require File.expand_path('../application', __FILE__) 3 | 4 | # Initialize the Rails application. 5 | Dummy::Application.initialize! 6 | -------------------------------------------------------------------------------- /test/dummy/config/boot.rb: -------------------------------------------------------------------------------- 1 | # Set up gems listed in the Gemfile. 2 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) 3 | 4 | require 'bundler/setup' if File.exists?(ENV['BUNDLE_GEMFILE']) 5 | -------------------------------------------------------------------------------- /test/dummy/config/database.yml: -------------------------------------------------------------------------------- 1 | development: 2 | host: localhost 3 | adapter: postgresql 4 | database: abracadabra_development 5 | 6 | test: 7 | host: localhost 8 | adapter: postgresql 9 | database: abracadabra_test -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | .bundle 4 | .config 5 | .yardoc 6 | Gemfile.lock 7 | InstalledFiles 8 | _yardoc 9 | coverage 10 | doc/ 11 | lib/bundler/man 12 | pkg 13 | rdoc 14 | spec/reports 15 | test/tmp 16 | test/version_tmp 17 | tmp 18 | -------------------------------------------------------------------------------- /test/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/wc/norobots.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/filter_parameter_logging.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Configure sensitive parameters which will be filtered from the log file. 4 | Rails.application.config.filter_parameters += [:password] 5 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/mime_types.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new mime types for use in respond_to blocks: 4 | # Mime::Type.register "text/richtext", :rtf 5 | # Mime::Type.register_alias "text/html", :iphone 6 | -------------------------------------------------------------------------------- /test/dummy/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | # Prevent CSRF attacks by raising an exception. 3 | # For APIs, you may want to use :null_session instead. 4 | protect_from_forgery with: :exception 5 | end 6 | -------------------------------------------------------------------------------- /test/dummy/Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require File.expand_path('../config/application', __FILE__) 5 | 6 | Dummy::Application.load_tasks 7 | -------------------------------------------------------------------------------- /test/dummy/app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |If you are the application owner check the logs for more information.
56 | 57 | 58 | -------------------------------------------------------------------------------- /test/dummy/public/422.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |Maybe you tried to change something you didn't have access to.
55 |If you are the application owner check the logs for more information.
57 | 58 | 59 | -------------------------------------------------------------------------------- /test/dummy/public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |You may have mistyped the address or the page may have moved.
55 |If you are the application owner check the logs for more information.
57 | 58 | 59 | -------------------------------------------------------------------------------- /test/dummy/config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # The test environment is used exclusively to run your application's 5 | # test suite. You never need to work with it otherwise. Remember that 6 | # your test database is "scratch space" for the test suite and is wiped 7 | # and recreated between test runs. Don't rely on the data there! 8 | config.cache_classes = true 9 | 10 | # Do not eager load code on boot. This avoids loading your whole application 11 | # just for the purpose of running a single test. If you are using a tool that 12 | # preloads Rails for running tests, you may have to set it to true. 13 | config.eager_load = false 14 | 15 | # Configure static asset server for tests with Cache-Control for performance. 16 | config.serve_static_assets = true 17 | config.static_cache_control = "public, max-age=3600" 18 | 19 | # Show full error reports and disable caching. 20 | config.consider_all_requests_local = true 21 | config.action_controller.perform_caching = false 22 | 23 | # Raise exceptions instead of rendering exception templates. 24 | config.action_dispatch.show_exceptions = false 25 | 26 | # Disable request forgery protection in test environment. 27 | config.action_controller.allow_forgery_protection = false 28 | 29 | # Tell Action Mailer not to deliver emails to the real world. 30 | # The :test delivery method accumulates sent emails in the 31 | # ActionMailer::Base.deliveries array. 32 | config.action_mailer.delivery_method = :test 33 | 34 | # Print deprecation notices to the stderr. 35 | config.active_support.deprecation = :stderr 36 | end 37 | -------------------------------------------------------------------------------- /test/dummy/config/routes.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.routes.draw do 2 | # The priority is based upon order of creation: first created -> highest priority. 3 | # See how all your routes lay out with "rake routes". 4 | 5 | # You can have the root of your site routed with "root" 6 | root 'welcome#index' 7 | 8 | # Example of regular route: 9 | # get 'products/:id' => 'catalog#view' 10 | 11 | # Example of named route that can be invoked with purchase_url(id: product.id) 12 | # get 'products/:id/purchase' => 'catalog#purchase', as: :purchase 13 | 14 | # Example resource route (maps HTTP verbs to controller actions automatically): 15 | # resources :products 16 | 17 | # Example resource route with options: 18 | # resources :products do 19 | # member do 20 | # get 'short' 21 | # post 'toggle' 22 | # end 23 | # 24 | # collection do 25 | # get 'sold' 26 | # end 27 | # end 28 | 29 | # Example resource route with sub-resources: 30 | # resources :products do 31 | # resources :comments, :sales 32 | # resource :seller 33 | # end 34 | 35 | # Example resource route with more complex sub-resources: 36 | # resources :products do 37 | # resources :comments 38 | # resources :sales do 39 | # get 'recent', on: :collection 40 | # end 41 | # end 42 | 43 | # Example resource route with concerns: 44 | # concern :toggleable do 45 | # post 'toggle' 46 | # end 47 | # resources :posts, concerns: :toggleable 48 | # resources :photos, concerns: :toggleable 49 | 50 | # Example resource route within a namespace: 51 | # namespace :admin do 52 | # # Directs /admin/products/* to Admin::ProductsController 53 | # # (app/controllers/admin/products_controller.rb) 54 | # resources :products 55 | # end 56 | end 57 | -------------------------------------------------------------------------------- /app/helpers/abracadabra/rails/view_helper.rb: -------------------------------------------------------------------------------- 1 | module Abracadabra 2 | module Rails 3 | module ViewHelper 4 | def click_to_edit(instance, options) 5 | instance_class = instance.class.to_s.underscore 6 | link_class = "#{options[:class]} abracadabra".strip 7 | link_id = options[:id] || nil 8 | value = options[:value] || instance.send(options[:attribute]) 9 | method = options[:method] || "patch" 10 | path = options[:path] 11 | buttonless = options[:buttonless] || false 12 | deletable = options[:deletable] || false 13 | deletable_path = options[:deletable_path] || path 14 | submit_on_blur = options[:submit_on_blur] || false 15 | 16 | if options[:tab_to_next] || options[:tab_to_next] != false 17 | if options[:tab_to_next] == true 18 | tab_to_next = ".abracadabra" 19 | else 20 | tab_to_next = options[:tab_to_next] 21 | end 22 | else 23 | tab_to_next = false 24 | end 25 | 26 | if !options[:remote].nil? && options[:remote] == false 27 | remote = false 28 | else 29 | remote = true 30 | end 31 | 32 | data_type = options[:type].to_s.gsub(/^j+s+$/, "script") || "script" 33 | deletable_type = options[:deletable_type].to_s.gsub(/^j+s+$/, "script") || "script" 34 | 35 | link_to( 36 | value, 37 | "javascript:void(0)", 38 | class: link_class, 39 | id: link_id, 40 | method: method.to_sym, 41 | data: { 42 | path: path, 43 | attribute: options[:attribute], 44 | class: instance_class, 45 | type: data_type.to_sym, 46 | buttonless: buttonless, 47 | deletable: deletable, 48 | deletable_path: deletable_path, 49 | deletable_type: deletable_type.to_sym, 50 | tab_to_next: tab_to_next, 51 | submit_on_blur: submit_on_blur 52 | }, 53 | remote: remote 54 | ) 55 | end 56 | end 57 | end 58 | end -------------------------------------------------------------------------------- /test/dummy/config/environments/production.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # Code is not reloaded between requests. 5 | config.cache_classes = true 6 | 7 | # Eager load code on boot. This eager loads most of Rails and 8 | # your application in memory, allowing both thread web servers 9 | # and those relying on copy on write to perform better. 10 | # Rake tasks automatically ignore this option for performance. 11 | config.eager_load = true 12 | 13 | # Full error reports are disabled and caching is turned on. 14 | config.consider_all_requests_local = false 15 | config.action_controller.perform_caching = true 16 | 17 | # Enable Rack::Cache to put a simple HTTP cache in front of your application 18 | # Add `rack-cache` to your Gemfile before enabling this. 19 | # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid. 20 | # config.action_dispatch.rack_cache = true 21 | 22 | # Disable Rails's static asset server (Apache or nginx will already do this). 23 | config.serve_static_assets = false 24 | 25 | # Compress JavaScripts and CSS. 26 | config.assets.js_compressor = :uglifier 27 | # config.assets.css_compressor = :sass 28 | 29 | # Do not fallback to assets pipeline if a precompiled asset is missed. 30 | config.assets.compile = false 31 | 32 | # Generate digests for assets URLs. 33 | config.assets.digest = true 34 | 35 | # Version of your assets, change this if you want to expire all your assets. 36 | config.assets.version = '1.0' 37 | 38 | # Specifies the header that your server uses for sending files. 39 | # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache 40 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx 41 | 42 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. 43 | # config.force_ssl = true 44 | 45 | # Set to :debug to see everything in the log. 46 | config.log_level = :info 47 | 48 | # Prepend all log lines with the following tags. 49 | # config.log_tags = [ :subdomain, :uuid ] 50 | 51 | # Use a different logger for distributed setups. 52 | # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new) 53 | 54 | # Use a different cache store in production. 55 | # config.cache_store = :mem_cache_store 56 | 57 | # Enable serving of images, stylesheets, and JavaScripts from an asset server. 58 | # config.action_controller.asset_host = "http://assets.example.com" 59 | 60 | # Precompile additional assets. 61 | # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. 62 | # config.assets.precompile += %w( search.js ) 63 | 64 | # Ignore bad email addresses and do not raise email delivery errors. 65 | # Set this to true and configure the email server for immediate delivery to raise delivery errors. 66 | # config.action_mailer.raise_delivery_errors = false 67 | 68 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to 69 | # the I18n.default_locale when a translation can not be found). 70 | config.i18n.fallbacks = true 71 | 72 | # Send deprecation notices to registered listeners. 73 | config.active_support.deprecation = :notify 74 | 75 | # Disable automatic flushing of the log to improve performance. 76 | # config.autoflush_log = false 77 | 78 | # Use default logging formatter so that PID and timestamp are not suppressed. 79 | config.log_formatter = ::Logger::Formatter.new 80 | end 81 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [](http://badge.fury.io/rb/abracadabra) 2 | 3 | # Abracadabra 4 | 5 | The gem that swaps out text with a fully-compliant Rails form in one click. 6 | 7 | Much of the concepts and html mark-up were taken from the awesome [x-editable](http://vitalets.github.io/x-editable/) plugin and the Rails version of this, [x-editable-rails](https://github.com/werein/x-editable-rails). However, this was written from the ground up and uses fully Rails-compliant forms without hacking into x-editable's core files or overriding them. 8 | 9 | ## Installation 10 | 11 | Add this line to your application's Gemfile: 12 | 13 | gem 'abracadabra' 14 | 15 | And then execute: 16 | 17 | $ bundle 18 | 19 | Or install it yourself as: 20 | 21 | $ gem install abracadabra 22 | 23 | ## Usage 24 | 25 | * Requires jQuery and jQuery-UJS (rails.js). 26 | * Bootstrap and Font-Awesome are the default, but are not required. You can override the CSS and/or customize the icon classes (see [Configuration](#configuration)). 27 | 28 | In your `application.css`, AFTER Bootstrap, include the css file: 29 | 30 | ```css 31 | *= require abracadabra 32 | ``` 33 | 34 | OR if you're using SASS/SCSS: 35 | 36 | ```sass 37 | @import "abracadabra-scss"; 38 | ``` 39 | 40 | In your `application.js`, AFTER jQuery and jQuery-UJS (required), include the javascript file: 41 | 42 | ```js 43 | //= require abracadabra 44 | ``` 45 | 46 | ## Helpers 47 | 48 | The bread and butter of abracadabra is its helper, `click_to_edit`. It's pretty much as readable as it gets: 49 | 50 | ```ruby 51 | <%= click_to_edit @user, path: user_path(@user), attribute: :name %> 52 | ``` 53 | 54 | When a user clicks the link generated by this helper, a form with a text field input will replace the link. It's fully Rails compliant, and the form markup that is generated is identical to a `form_for` with `remote: true`. Here's what it looks like: 55 | 56 |  57 | 58 | The first parameter of `click_to_edit` is the object to be edited, and the only other required parameters are `path` and `attribute`. `path` specifies where the form will be submitted, and `attribute` specifies the column being updated. 59 | 60 | It accepts the following parameters: 61 | 62 | #### REQUIRED 63 | - `path: user_path(@user)` - Specifies where the form will be submitted. 64 | 65 | - `attribute: :name` - Specifies what attribute your text field will be updating. 66 | 67 | #### OPTIONAL 68 | - `class: "my-class"` - Class(es) to be added to the abracadabra link. The class "abracadabra" is added either way. [*Default:* `"abracadabra"`] 69 | 70 | - `id: "my-id"` - ID to be added to the abracadabra link. [*Default:* `nil`] 71 | 72 | - `value: "blah"` - An alternate value, other than what object.attribute would return. [*Default:* `object.attribute`] 73 | 74 | - `method: "patch"` - HTTP REST method to use. Use anything but "get". [*Default:* `"patch"`] 75 | 76 | - `buttonless: true` - Removes submit and cancel buttons. Submission and cancellation is then done through the Enter/Tab and Escape keys, respectively. [*Default:* `false`] 77 | 78 | - `remote: true` - Same as `link_to`'s `remote: true`, form submits via AJAX. [*Default:* `true`] 79 | 80 | - `type: :js` - Content type -- responds to any content type (`:js` and `:script` are interchangeable). [*Default:* `:script`] ***IMPORTANT: `type` will be ignored if `remote = false` is used. HTML is the default in Rails for standard form submissions.*** 81 | 82 | - `deletable: true` OR `deletable: "Are you sure?"` - Puts a link to DELETE the object (obviously, it always uses DELETE as the HTTP verb). If a boolean is used, it is submitted upon clicking. If a string is used, a confirmation dialog will prompt them using the string before submitting. [*Default:* `false`] ***IMPORTANT: On `ajax:success`, this will remove the specific abracadabra instance from the DOM entirely. ALSO, this will be remote if the main form is remote.*** 83 | 84 | - `deletable_path: user_path(@user)` - Specifies where the form will be submitted. [*Default:* `path` (uses the same path as the main form)] 85 | 86 | - `deletable_type: :js` - Deletable content type -- responds to any content type (:js and :script can both be used to respond with Javascript). [*Default:* `:script`] 87 | 88 | - `tab_to_next: true` OR `tab_to_next: ".my-class"` - Opens the next abracadabra instance after successful form submission (main form, not the DELETE link's submission). If a boolean is used, `.abracadabra` is the selector used to find the next instance to open. If a string is used, that will be the selector, so be sure to use standard jQuery selector syntax (i.e. `.class` and `#id`). [*Default:* `false`] ***IMPORTANT: If you use a string, and it's a class, this abracadabra instance MUST have the same class as well.*** 89 | 90 | - `submit_on_blur: true` - Submit form when focus leaves the input, rather than simply closing it out. [*Default:* `false`] 91 | 92 | #### EXAMPLES 93 | ##### *SIMPLE* 94 | ```ruby 95 | click_to_edit @friend, path: friend_path(@friend), attribute: :name, deletable: true 96 | ``` 97 | 98 | ##### *COMPLEX* 99 | ```ruby 100 | click_to_edit @friend, 101 | path: friend_path(@friend), 102 | attribute: :name, 103 | class: "my-abracadabra", 104 | id: "my-abracadabra-#{index}", 105 | value: @friend.name.titleize, 106 | method: :put, 107 | buttonless: true, 108 | type: :json, 109 | deletable: "Are you sure?", 110 | deletable_path: user_friend_path(@friend), 111 | deletable_type: :json, 112 | tab_to_next: "#my-abracadabra-#{index+1}", 113 | submit_on_blur: true 114 | ``` 115 | 116 | #### REBINDING 117 | 118 | If you add `abracadabra` elements to the page dynamically, you will need to rebind. 119 | 120 | Simply call abracadabra's jQuery function: 121 | 122 | ```javascript 123 | $.abracadabra(); 124 | ``` 125 | 126 | ## Configuration 127 | 128 | Abracadabra allows some customization. If you would like to change what icon classes are used for the `submit`, `cancel`, and `delete` icons, you can change them globally. 129 | 130 | In any Javascript file that loads **BEFORE** abracadabra's Javascript file that you required above, change any/all of the following variables to suit your project's needs: 131 | 132 | ```javascript 133 | abracadabraSubmitIcon = "fa fa-check"; // default 134 | 135 | abracadabraCancelIcon = "fa fa-times"; // default 136 | 137 | abracadabraDeleteIcon = "fa fa-times-circle-o"; // default 138 | ``` 139 | 140 | ## Integration Testing 141 | 142 | The most reliable way I've found to test abracadabra is by using the following helper (works with Rspec+Capybara using Capybara Webkit, Selenium Webdriver, or Poltergeist/PhantomJS): 143 | 144 | ```ruby 145 | def execute_abracadabra value, selector = ".abracadabra" 146 | page.execute_script("$(\"#{selector}\").click();") 147 | page.execute_script("$(\".abracadabra-input\").val(\"#{value}\");") 148 | page.execute_script("$(\".abracadabra-submit\").click();") 149 | end 150 | ``` 151 | 152 | You can place that in a helper file, include it in your integration spec, and call it like so: 153 | 154 | ```ruby 155 | execute_abracadabra "new value", "#editable-name" 156 | ``` 157 | 158 | This will click the abracadabra instance that has an ID of `#editable-name`, input `new value`, and submit it. Obviously, you can use any valid jQuery selector, not just IDs. 159 | 160 | If no selector is passed, `.abracadabra` is used. It's highly recommended to pass a specific selector, because as soon as more than one abracadabra instance makes its way on to your page, the default selector (not suprisingly) won't play well. 161 | 162 | ## Future & Contributing 163 | 164 | 1. I would love anyone to add date pickers and other alternate field types to this. 165 | 166 | 2. I would love the different Bootstrap classes to be overridable with an initializer (config/initializers/abracadabra.rb), rather than Javascript (not sure if this is even possible), so that any framework could be used. Same with the Font-Awesome button classes. 167 | 168 | Any other ideas, feel free to contribute! 169 | 170 | 1. Fork it ( http://github.com/TrevorHinesley/abracadabra/fork ) 171 | 2. Create your feature branch (`git checkout -b my-new-feature`) 172 | 3. Commit your changes (`git commit -am 'Add some feature'`) 173 | 4. Push to the branch (`git push origin my-new-feature`) 174 | 5. Create new Pull Request 175 | -------------------------------------------------------------------------------- /app/assets/javascripts/abracadabra.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $.extend({ 4 | abracadabra: function() { 5 | abracadabraSubmissionInProgress = false; 6 | abracadabraButtonMousedown = false; 7 | abracadabraEscapeKeydown = false; 8 | 9 | function closeAbracadabra(element, destroy, valueChanged) { 10 | $element = $(element); 11 | if($element.hasClass("abracadabra-container")) { 12 | container = $element; 13 | } else { 14 | container = $element.parents(".abracadabra-container"); 15 | } 16 | 17 | if(destroy) { 18 | container.siblings(".abracadabra").remove(); 19 | } else { 20 | if(valueChanged == true) { 21 | value = container.find(".abracadabra-input").val(); 22 | } else { 23 | value = container.find(".abracadabra-input").data("original-value"); 24 | } 25 | container.siblings(".abracadabra").text(value).show(); 26 | } 27 | 28 | try { 29 | container.remove(); 30 | } catch (error) {} 31 | } 32 | 33 | function tabToNextAbracadabra(element, selector) { 34 | if(selector != undefined) { 35 | nextAbracadabra = $(selector); 36 | 37 | /* If selector isn't an ID, find the element with the class AFTER the current element */ 38 | if (selector.indexOf("#") == -1) { 39 | abracadabra = $(element).parents(".abracadabra-container").siblings(".abracadabra"); 40 | indexOfAbracadabra = $(selector).index(abracadabra); 41 | nextAbracadabra = $($(selector)[indexOfAbracadabra + 1]); 42 | } 43 | /* /If selector isn't an ID, find the element with the class AFTER the current element */ 44 | 45 | closeAbracadabra(element, false, true); 46 | nextAbracadabra.click(); 47 | } else { 48 | closeAbracadabra(element, false, true); 49 | } 50 | } 51 | 52 | $("body").unbind(".abracadabra-binding") 53 | 54 | $("body").on("submit.abracadabra-binding", ".abracadabra-form", function(e) { 55 | if(abracadabraSubmissionInProgress == true || abracadabraEscapeKeydown == true) { 56 | e.preventDefault(); 57 | return false; 58 | } 59 | abracadabraSubmissionInProgress = true; 60 | }); 61 | 62 | $("body").on("ajax:before.abracadabra-binding", ".abracadabra-delete", function() { 63 | if(abracadabraSubmissionInProgress == true) { 64 | e.preventDefault(); 65 | return false; 66 | } 67 | abracadabraSubmissionInProgress = true; 68 | }); 69 | 70 | $("body").on("mousedown.abracadabra-binding", ".abracadabra-delete, .abracadabra-submit, .abracadabra-cancel", function() { 71 | abracadabraButtonMousedown = true; 72 | }); 73 | 74 | $("body").on("ajax:success.abracadabra-binding", ".abracadabra-form", function(e) { 75 | target = $(e.target); 76 | abracadabraButtonMousedown = false; 77 | 78 | /* If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */ 79 | if(target.hasClass("abracadabra-delete")) { 80 | closeAbracadabra(target, true, true); 81 | } else { 82 | input = $(target).find(".abracadabra-input"); 83 | tabToNextSelector = input.data("tab-to-next-selector"); 84 | tabToNextAbracadabra(target, tabToNextSelector); 85 | } 86 | /* /If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */ 87 | 88 | abracadabraSubmissionInProgress = false; 89 | }); 90 | 91 | $("body").on("ajax:error.abracadabra-binding", ".abracadabra-form", function() { 92 | closeAbracadabra(this, false, false); 93 | $.abracadabra(); 94 | }); 95 | 96 | $("body").on("click.abracadabra-binding", ".abracadabra-cancel", function() { 97 | if(abracadabraSubmissionInProgress == false) { 98 | closeAbracadabra(this, false, false); 99 | } 100 | }); 101 | 102 | $("body").on("blur.abracadabra-binding", ".abracadabra-input", function() { 103 | if(abracadabraSubmissionInProgress == false && abracadabraButtonMousedown == false) { 104 | if($(this).data("submit-on-blur") == true) { 105 | $(this.form).submit(); 106 | } else { 107 | closeAbracadabra(this, false, false); 108 | } 109 | } 110 | }); 111 | 112 | $("body").on("keydown.abracadabra-binding", ".abracadabra-input", function(e) { 113 | /* Press Tab to submit (same function as Enter key) */ 114 | if (e.keyCode == 9) 115 | { 116 | e.preventDefault(); 117 | if(abracadabraSubmissionInProgress == false) { 118 | $(this.form).submit(); 119 | } 120 | } 121 | /* /Press Tab to submit (same function as Enter key) */ 122 | 123 | /* Press Escape to cancel */ 124 | if (e.keyCode == 27) 125 | { 126 | abracadabraEscapeKeydown = true; 127 | e.preventDefault(); 128 | if(abracadabraSubmissionInProgress == false) { 129 | closeAbracadabra(this, false, false); 130 | abracadabraEscapeKeydown = false; 131 | } 132 | } 133 | /* /Press Escape to cancel */ 134 | }); 135 | 136 | 137 | $("body").on("confirm:complete.abracadabra-binding", ".abracadabra-delete", function(e, response) { 138 | /* If cancel is clicked in the deletable_confirm dialog, focus on the input */ 139 | if(response == false) { 140 | input = $(this).parents(".abracadabra-delete-container").siblings(); 141 | inputValue = input.val(); 142 | input.focus().val("").val(inputValue); 143 | } 144 | /* /If cancel is clicked in the deletable_confirm dialog, focus on the input */ 145 | }); 146 | 147 | $(".abracadabra").on("click", function() { 148 | if($(".abracadabra-container:visible").length) { 149 | return false; 150 | } 151 | 152 | link = $(this); 153 | link.hide(); 154 | path = link.data("path"); 155 | attribute = link.data("attribute"); 156 | formMethod = link.data("method"); 157 | remote = ((link.data("remote") == true) ? " data-remote=\"true\"" : ""); 158 | 159 | /* Check if button classes have been manually overridden elsewhere */ 160 | if(typeof abracadabraSubmitIcon == "undefined") { 161 | abracadabraSubmitIcon = "fa fa-check"; 162 | } 163 | 164 | if(typeof abracadabraCancelIcon == "undefined") { 165 | abracadabraCancelIcon = "fa fa-times"; 166 | } 167 | 168 | if(typeof abracadabraDeleteIcon == "undefined") { 169 | abracadabraDeleteIcon = "fa fa-times-circle-o"; 170 | } 171 | /* /Check if button classes have been manually overridden elsewhere */ 172 | 173 | /* AJAX? */ 174 | if(remote == "") { 175 | authToken = ""; 176 | type = ""; 177 | deletableType = ""; 178 | } else { 179 | authToken = ""; 180 | type = " data-type=\"" + link.data("type") + "\""; 181 | deletableType = " data-type=\"" + link.data("deletable-type") + "\""; 182 | } 183 | /* /AJAX? */ 184 | 185 | /* Deletable? */ 186 | if(link.data("deletable") !== false) { 187 | deletablePath = link.data("deletable-path"); 188 | deletableConfirm = link.data("deletable"); 189 | if(deletableConfirm === true) { 190 | deletableConfirm = ""; 191 | } else { 192 | deletableConfirm = " data-confirm=\"" + deletableConfirm + "\""; 193 | } 194 | deletable = ""; 195 | } else { 196 | deletable = ""; 197 | } 198 | /* /Deletable? */ 199 | 200 | /* Tab to next? */ 201 | tabToNextSelector = link.data("tab-to-next"); 202 | if(tabToNextSelector !== false) { 203 | tabToNextSelector = link.data("tab-to-next"); 204 | tabToNextSelector = " data-tab-to-next-selector=\"" + tabToNextSelector + "\""; 205 | } else { 206 | tabToNextSelector = ""; 207 | } 208 | /* /Tab to next? */ 209 | 210 | /* Submit on blur? */ 211 | submitOnBlur = link.data("submit-on-blur"); 212 | if(submitOnBlur == true) { 213 | submitOnBlur = " data-submit-on-blur=\"true\""; 214 | } else { 215 | submitOnBlur = ""; 216 | } 217 | /* /Submit on blur? */ 218 | 219 | /* Show buttons? */ 220 | if(link.data("buttonless") == true) { 221 | buttons = ""; 222 | } else { 223 | buttons = ""; 224 | } 225 | /* /Show buttons? */ 226 | 227 | instanceClass = link.data("class"); 228 | inputValue = link.text().replace(/"|\\"/g, """); 229 | inputId = instanceClass + "_" + attribute; 230 | inputName = instanceClass + "[" + attribute + "]"; 231 | 232 | openFormTag = "