Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add conditionalVisibility(), bump version to 0.1.0

  • Loading branch information...
commit eb20e20cf46828c096b8431e5f657e25630e56d8 1 parent bc8a295
@noniq noniq authored
View
4 CHANGELOG.md
@@ -1,3 +1,7 @@
+## Version 0.1.0
+* Add conditionalVisibility().
+* Now requires CoffeeScript.
+
## Version 0.0.2
* Now supports forms generated by Formtastic.
* Return 'this' from formChangeTracker() to make it chainable.
View
4 da-js.gemspec
@@ -20,12 +20,12 @@ Gem::Specification.new do |s|
s.add_dependency "railties", ">= 3.1.0"
s.add_dependency "sprockets", "~> 2.0"
+ s.add_dependency "coffee-script", "~> 2.2"
s.add_development_dependency "cucumber", ">= 1.1.4"
s.add_development_dependency "rspec-expectations", ">= 2.7.0"
s.add_development_dependency "sinatra"
s.add_development_dependency "sinatra-contrib"
- s.add_development_dependency "capybara", ">= 1.1.2"
- s.add_development_dependency "capybara-webkit", ">= 0.8.0"
+ s.add_development_dependency "capybara-webkit", ">= 0.11.0"
s.add_development_dependency "launchy"
end
View
29 features/conditional_visibility.feature
@@ -0,0 +1,29 @@
+@javascript
+Feature: Conditional visibility for elements
+
+ Background:
+ Given I visit the test page for "conditional visibility"
+
+ Scenario: Basic functionality
+ Then the "Other Country" input should be hidden
+ But the "Message" input should be visible
+
+ When I select "Other …" from the "Country" select
+ Then the "Other Country" input should be visible
+
+ When I uncheck the "I want to leave a message" checkbox
+ Then the "Message" input should be hidden
+
+ When I select "Austria" from the "Country" select
+ Then the "Other Country" input should be hidden
+
+ When I check the "I want to leave a message" checkbox
+ Then the "Message" input should be visible
+
+ Scenario: Changing a field value via javascript and triggering the event manually
+ When I set the "I want to leave a message" checkbox to unchecked using JavaScript
+ Then the "Message" input should be visible
+
+ When I trigger the "updateVisibilities" event on the form
+ Then the "Message" input should be hidden
+
View
30 features/step_definitions/conditional_visibility_steps.rb
@@ -0,0 +1,30 @@
+Then /^the "([^"]*)" input should be hidden$/ do |input|
+ find_field(input).should_not be_visible
+end
+
+Then /^the "([^"]*)" input should be visible$/ do |input|
+ find_field(input).should be_visible
+end
+
+When /^I select "([^"]*)" from the "([^"]*)" select$/ do |option, input|
+ select option, :from => input
+end
+
+When /^I uncheck the "([^"]*)" checkbox$/ do |input|
+ uncheck input
+end
+
+When /^I check the "([^"]*)" checkbox$/ do |input|
+ check input
+end
+
+When /^I set the "([^"]*)" checkbox to unchecked using JavaScript$/ do |input|
+ id = find_field(input)["id"]
+ page.execute_script "$('##{id}')[0].checked = false"
+end
+
+When /^I trigger the "([^"]*)" event on the form$/ do |event|
+ page.execute_script "$('form').trigger('#{event}')"
+end
+
+
View
5 features/step_definitions/shared_steps.rb
@@ -0,0 +1,5 @@
+require "active_support/inflector"
+
+When /^I visit the test page for "([^"]*)"$/ do |feature|
+ visit "/#{feature.parameterize '_'}"
+end
View
1  features/support/testapp/testapp.rb
@@ -1,5 +1,6 @@
require "sinatra"
require "sinatra/reloader" if development?
+require "coffee_script"
set :app_file, __FILE__
View
41 features/support/testapp/views/conditional_visibility.erb
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test</title>
+ <%= "<script src='../vendor/jquery-#{@jquery_version}.js'></script>" %>
+ <script src="/assets/javascripts/da-js.js"></script>
+ <script>$.fx.off = true;</script>
+ </head>
+ <body>
+ <h1>Test: Conditional Visibility</h1>
+ <form id="simple_form" action="">
+ <div class="field">
+ <label for="country">Country</label>
+ <select id="country">
+ <option></option>
+ <option>Austria</option>
+ <option>Other …</option>
+ </select>
+ </div>
+ <div class="field" data-visible-if="$('#country option:last').is(':selected')">
+ <label for="country_other">Other Country</label>
+ <input id="country_other">
+ </div>
+ <div class="field">
+ <label for="message_checkbox">I want to leave a message</label>
+ <input type="checkbox" id="message_checkbox" checked>
+ </div>
+ <div class="field" data-visible-if="$('#message_checkbox')[0].checked">
+ <label for="message">Message</label>
+ <textarea id="message"></textarea>
+ </div>
+
+ </form>
+
+ <script>
+ $("form").conditionalVisibility();
+ </script>
+
+
+ </body>
+</html>
View
40 lib/assets/javascripts/da-js/conditional_visibility.js.coffee
@@ -0,0 +1,40 @@
+# Hide/show elements dynamically according to their data-visible-if attribute.
+#
+# All elements with a data-visible-if attribute are checked on each change/focusout/click event:
+# For each element, the content of its data-visible-if attribute is eval'd. If the eval'd code returns true, the element is shown – otherwise it is hidden.
+# (The data-visible-if attributes must contain valid JavaScript code.)
+#
+# Calling conditionalVisibility() also sets up the correct initial state (shown/hidden) of each element (again according to the result of the eval'd code in its dava-visible-if attribute).
+#
+# Use $("body").conditionalVisibility() to enable the functionality for the whole document, or use a more specific selector to enable it only for some elements.
+#
+# If you want to force an update of the visibilites, use $(…).trigger("updateVisibilites").
+#
+# Example:
+#
+# <form id="myform">
+# <input id="checkbox" type="checkbox" >
+# <input id="text" data-visible-if="$('#checkbox')[0].checked">
+# </form>
+# <script>
+# $("#myform").conditionalVisibility()
+# </script>
+
+$.fn.conditionalVisibility = ->
+
+ updateVisibilities = (event, options) ->
+ $(this).find("[data-visible-if]").each ->
+ if eval($(this).data("visible-if"))
+ if options?.skipAnimations
+ $(this).show()
+ else
+ $(this).slideDown(100)
+ else
+ if options?.skipAnimations
+ $(this).hide()
+ else
+ $(this).slideUp(100)
+
+ this.on("change focusout click updateVisibilities", updateVisibilities).trigger("updateVisibilities", {skipAnimations: true})
+
+
View
2  lib/da-js/version.rb
@@ -1,5 +1,5 @@
module Da
module Js
- VERSION = "0.0.2"
+ VERSION = "0.1.0"
end
end
Please sign in to comment.
Something went wrong with that request. Please try again.