From e094bd1492eefcc21d0e638f2f93d38a3b9a1741 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Fri, 15 Jul 2016 16:57:24 -0500 Subject: [PATCH 01/25] Adding react_rails --- Gemfile | 1 + Gemfile.lock | 12 ++++++++++++ app/assets/javascripts/application.js | 3 +++ app/assets/javascripts/components.js | 1 + app/assets/javascripts/components/.gitkeep | 0 config/application.rb | 5 +++++ config/environments/development.rb | 5 +++++ config/environments/production.rb | 5 +++++ config/environments/stage.rb | 5 +++++ config/environments/test.rb | 5 +++++ 10 files changed, 42 insertions(+) create mode 100644 app/assets/javascripts/components.js create mode 100644 app/assets/javascripts/components/.gitkeep diff --git a/Gemfile b/Gemfile index 607c4fe4..b0cd86ca 100644 --- a/Gemfile +++ b/Gemfile @@ -15,6 +15,7 @@ gem 'pg' gem 'puma' gem 'rails_admin' gem 'rails_admin_enum4' +gem 'react-rails' gem 'sass-rails' gem 'validates_formatting_of' diff --git a/Gemfile.lock b/Gemfile.lock index c467a712..fcb9d82d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -37,6 +37,10 @@ GEM arel (5.0.1.20140414130214) autoprefixer-rails (6.5.3.1) execjs + babel-source (5.8.35) + babel-transpiler (0.7.0) + babel-source (>= 4.0, < 6) + execjs (~> 2.0) bcrypt (3.1.11) bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) @@ -238,6 +242,13 @@ GEM rb-fsevent (0.9.8) rb-inotify (0.9.7) ffi (>= 0.5.0) + react-rails (1.8.0) + babel-transpiler (>= 0.7.0) + coffee-script-source (~> 1.8) + connection_pool + execjs + railties (>= 3.2) + tilt remotipart (1.3.1) responders (1.1.2) railties (>= 3.2, < 4.2) @@ -355,6 +366,7 @@ DEPENDENCIES rails_12factor rails_admin rails_admin_enum4 + react-rails rspec-rails sandi_meter sass-rails diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 5bc2e1c8..e60db41a 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -10,4 +10,7 @@ // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // +//= require react +//= require react_ujs +//= require components //= require_tree . diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js new file mode 100644 index 00000000..9ce7a4f3 --- /dev/null +++ b/app/assets/javascripts/components.js @@ -0,0 +1 @@ +//= require_tree ./components diff --git a/app/assets/javascripts/components/.gitkeep b/app/assets/javascripts/components/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/config/application.rb b/config/application.rb index 55377b81..69f9beb8 100644 --- a/config/application.rb +++ b/config/application.rb @@ -28,5 +28,10 @@ class Application < Rails::Application # config.i18n.default_locale = :de ::AppConfig = Hashie::Mash.new(YAML.load(ERB.new(File.read(Rails.root.join('config/config.yml'))).result)) + + ####################### + # React Configuraiton + ####################### + config.react.addons = true end end diff --git a/config/environments/development.rb b/config/environments/development.rb index 3bdffc5b..b38dabd9 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -29,4 +29,9 @@ # From http://mailcatcher.me/ config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { address: 'localhost', port: 1025 } + + ####################### + # React Configuraiton + ####################### + config.react.variant = :development end diff --git a/config/environments/production.rb b/config/environments/production.rb index 89862429..06afc5d2 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -76,4 +76,9 @@ # Do not dump schema after migrations. config.active_record.dump_schema_after_migration = false + + ####################### + # React Configuraiton + ####################### + config.react.variant = :production end diff --git a/config/environments/stage.rb b/config/environments/stage.rb index 960d4b38..bf016dd5 100644 --- a/config/environments/stage.rb +++ b/config/environments/stage.rb @@ -76,4 +76,9 @@ # Do not dump schema after migrations. config.active_record.dump_schema_after_migration = false + + ####################### + # React Configuraiton + ####################### + config.react.variant = :development end diff --git a/config/environments/test.rb b/config/environments/test.rb index 053f5b66..7b9198b2 100644 --- a/config/environments/test.rb +++ b/config/environments/test.rb @@ -36,4 +36,9 @@ # Raises error for missing translations # config.action_view.raise_on_missing_translations = true + + ####################### + # React Configuraiton + ####################### + config.react.variant = :production end From 0f70e8f67f1f70ba3dbb2665831bc46488483f6f Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Fri, 15 Jul 2016 17:10:38 -0500 Subject: [PATCH 02/25] First React component --- .../javascripts/components/field.es6.jsx | 21 +++++++++++++++++++ app/views/sidebar/edit_profile.html.haml | 2 ++ 2 files changed, 23 insertions(+) create mode 100644 app/assets/javascripts/components/field.es6.jsx diff --git a/app/assets/javascripts/components/field.es6.jsx b/app/assets/javascripts/components/field.es6.jsx new file mode 100644 index 00000000..8f62d9b7 --- /dev/null +++ b/app/assets/javascripts/components/field.es6.jsx @@ -0,0 +1,21 @@ +class Field extends React.Component { + render () { + return ( +
+
Name: {this.props.name}
+
Type: {this.props.type}
+
Label: {this.props.label}
+
Required: {this.props.required}
+
Private: {this.props.private}
+
+ ); + } +} + +Field.propTypes = { + name: React.PropTypes.string, + type: React.PropTypes.oneOf(['text', 'password', 'checkbox', 'radio', 'select']), + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool +}; diff --git a/app/views/sidebar/edit_profile.html.haml b/app/views/sidebar/edit_profile.html.haml index 537d8496..2adb6109 100644 --- a/app/views/sidebar/edit_profile.html.haml +++ b/app/views/sidebar/edit_profile.html.haml @@ -2,6 +2,7 @@ = f.hidden_field "id" = render :partial => "user_email", locals: {f: f} = render :partial => "user_username", locals: {f: f} + = react_component 'Field', name: 'foobar', type: 'text', label: 'Hi' %h2 = t("labels.shipping_info_heading") = render :partial => "user_realnames", locals: {f: f} @@ -26,5 +27,6 @@ = t("buttons.back") :javascript $(function() { + ReactRailsUJS.mountComponents(); $('#user_email').focus(); }); From f32d4b75a9903559fd87c0d1e4a54084555c02dd Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 16 Jul 2016 17:34:41 -0500 Subject: [PATCH 03/25] Added Jasmine, and first React spec --- Gemfile | 1 + Gemfile.lock | 10 ++++ app/assets/javascripts/application.js | 2 +- config/environments/test.rb | 2 +- config/initializers/jasmine_rails.rb | 15 ++++++ config/routes.rb | 1 + spec/javascripts/components/field_spec.js.jsx | 11 ++++ spec/javascripts/helpers/react_helper.js | 1 + spec/javascripts/support/jasmine.yml | 52 +++++++++++++++++++ 9 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 config/initializers/jasmine_rails.rb create mode 100644 spec/javascripts/components/field_spec.js.jsx create mode 100644 spec/javascripts/helpers/react_helper.js create mode 100644 spec/javascripts/support/jasmine.yml diff --git a/Gemfile b/Gemfile index b0cd86ca..ce8982cd 100644 --- a/Gemfile +++ b/Gemfile @@ -38,6 +38,7 @@ group :development, :test do gem 'capistrano3-puma' gem 'dotenv-rails' gem 'factory_girl_rails' + gem 'jasmine-rails' gem 'pry-rails' gem 'rspec-rails' end diff --git a/Gemfile.lock b/Gemfile.lock index fcb9d82d..e29837c6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -145,7 +145,15 @@ GEM haml (4.0.7) tilt hashie (3.4.6) + hike (1.2.3) + hitimes (1.2.2) i18n (0.7.0) + jasmine-core (2.4.1) + jasmine-rails (0.12.6) + jasmine-core (>= 1.3, < 3.0) + phantomjs (>= 1.9) + railties (>= 3.2.0) + sprockets-rails jquery-rails (3.1.4) railties (>= 3.0, < 5.0) thor (>= 0.14, < 2.0) @@ -185,6 +193,7 @@ GEM shellany (~> 0.0) orm_adapter (0.5.0) pg (0.19.0) + phantomjs (2.1.1.0) poltergeist (1.12.0) capybara (~> 2.1) cliver (~> 0.3.1) @@ -355,6 +364,7 @@ DEPENDENCIES guard-rspec haml hashie + jasmine-rails jquery-rails launchy libnotify diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e60db41a..f7e79b38 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -9,7 +9,7 @@ // // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. -// +//= require jquery //= require react //= require react_ujs //= require components diff --git a/config/environments/test.rb b/config/environments/test.rb index 7b9198b2..4260349c 100644 --- a/config/environments/test.rb +++ b/config/environments/test.rb @@ -40,5 +40,5 @@ ####################### # React Configuraiton ####################### - config.react.variant = :production + config.react.variant = :development end diff --git a/config/initializers/jasmine_rails.rb b/config/initializers/jasmine_rails.rb new file mode 100644 index 00000000..f6540c9b --- /dev/null +++ b/config/initializers/jasmine_rails.rb @@ -0,0 +1,15 @@ +#if Rails.env.in? %w(test development) +# require 'jasmine_rails/runner' +# +# module JasmineRails +# module Runner +# class << self +# private +# def run_cmd(cmd) +# puts "Running `#{cmd}`" +# system(cmd) +# end +# end +# end +# end +#end diff --git a/config/routes.rb b/config/routes.rb index 5698d6be..0ad36a67 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,4 +1,5 @@ Rails.application.routes.draw do + mount JasmineRails::Engine => '/specs' if defined?(JasmineRails) devise_for :users, controllers: { passwords: 'passwords', registrations: 'users', diff --git a/spec/javascripts/components/field_spec.js.jsx b/spec/javascripts/components/field_spec.js.jsx new file mode 100644 index 00000000..6a81cfe3 --- /dev/null +++ b/spec/javascripts/components/field_spec.js.jsx @@ -0,0 +1,11 @@ +describe('Field', function(){ + it('Has a name', function(){ + var field = TestUtils.renderIntoDocument( + + ); + + var fieldNode = ReactDOM.findDOMNode(field); + + expect(fieldNode.textContent).toContain('foobar'); + }); +}); diff --git a/spec/javascripts/helpers/react_helper.js b/spec/javascripts/helpers/react_helper.js new file mode 100644 index 00000000..edd7f453 --- /dev/null +++ b/spec/javascripts/helpers/react_helper.js @@ -0,0 +1 @@ +window.TestUtils = React.addons.TestUtils; diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml new file mode 100644 index 00000000..87f06de8 --- /dev/null +++ b/spec/javascripts/support/jasmine.yml @@ -0,0 +1,52 @@ +# path to parent directory of src_files +# relative path from Rails.root +# defaults to app/assets/javascripts +src_dir: "app/assets/javascripts" + +# path to additional directory of source file that are not part of assets pipeline and need to be included +# relative path from Rails.root +# defaults to [] +# include_dir: +# - ../mobile_app/public/js + +# path to parent directory of css_files +# relative path from Rails.root +# defaults to app/assets/stylesheets +css_dir: "app/assets/stylesheets" + +# list of file expressions to include as source files +# relative path from src_dir +src_files: + - "application.{js.coffee,js,coffee}" + +# list of file expressions to include as css files +# relative path from css_dir +css_files: + +# path to parent directory of spec_files +# relative path from Rails.root +# +# Alternatively accept an array of directory to include external spec files +# spec_dir: +# - spec/javascripts +# - ../engine/spec/javascripts +# +# defaults to spec/javascripts +spec_dir: spec/javascripts + +# list of file expressions to include as helpers into spec runner +# relative path from spec_dir +helpers: + - "helpers/**/*.{js.coffee,js,coffee}" + +# list of file expressions to include as specs into spec runner +# relative path from spec_dir +spec_files: + - "**/*[Ss]pec.{js.jsx,js,jsx}" + +# path to directory of temporary files +# (spec runner and asset cache) +# defaults to tmp/jasmine +tmp_dir: "tmp/jasmine" + +use_phantom_gem: false From c4549047b0769f4df1dfbadde14761733ed01e6a Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 16 Jul 2016 20:06:11 -0500 Subject: [PATCH 04/25] Using jquery-rails version of jQuery Using jquery-ui-rails --- Gemfile | 1 + Gemfile.lock | 1 + app/assets/javascripts/application.js | 1 + app/assets/stylesheets/application.css | 1 + app/views/layouts/application.html.haml | 2 -- 5 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Gemfile b/Gemfile index ce8982cd..30d6007d 100644 --- a/Gemfile +++ b/Gemfile @@ -11,6 +11,7 @@ gem 'geokit' gem 'haml' gem 'hashie' gem 'jquery-rails' +gem 'jquery-ui-rails' gem 'pg' gem 'puma' gem 'rails_admin' diff --git a/Gemfile.lock b/Gemfile.lock index e29837c6..7cb34b47 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -366,6 +366,7 @@ DEPENDENCIES hashie jasmine-rails jquery-rails + jquery-ui-rails launchy libnotify pg diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index f7e79b38..e35b96b3 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -10,6 +10,7 @@ // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. //= require jquery +//= require jquery-ui //= require react //= require react_ujs //= require components diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index dfe7fecd..42beb9c6 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,6 +10,7 @@ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * + *= require jquery-ui *= require_self *= require_tree . */ diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index fd0ebb6c..44aadcc8 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,8 +9,6 @@ /[if lt IE 9] = javascript_include_tag "//html5shim.googlecode.com/svn/trunk/html5.js" = javascript_include_tag "//maps.googleapis.com/maps/api/js?key=#{AppConfig.google_maps.api_key}" - = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" - = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" = javascript_include_tag "application" - if (Rails.env.production? || Rails.env.stage?) && AppConfig.google_analytics.id.present? %script{:type => "text/javascript"} From 0cf5d40e2f86e98a40d1102969b08813b5a1c957 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 16 Jul 2016 20:11:49 -0500 Subject: [PATCH 05/25] Upgrading bootstrap.js to 2.3.2 --- app/assets/javascripts/bootstrap.js | 1512 ++++++++++++++++++--------- 1 file changed, 1033 insertions(+), 479 deletions(-) diff --git a/app/assets/javascripts/bootstrap.js b/app/assets/javascripts/bootstrap.js index ca868671..44109f62 100644 --- a/app/assets/javascripts/bootstrap.js +++ b/app/assets/javascripts/bootstrap.js @@ -1,8 +1,8 @@ /* =================================================== - * bootstrap-transition.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#transitions + * bootstrap-transition.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#transitions * =================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -17,42 +17,51 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - $(function () { +!function ($) { + + "use strict"; // jshint ;_; - "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ + /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) + * ======================================================= */ + + $(function () { $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - - return support && { - end: (function () { - var transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" + + var transitionEnd = (function () { + + var el = document.createElement('bootstrap') + , transEndEventNames = { + 'WebkitTransition' : 'webkitTransitionEnd' + , 'MozTransition' : 'transitionend' + , 'OTransition' : 'oTransitionEnd otransitionend' + , 'transition' : 'transitionend' + } + , name + + for (name in transEndEventNames){ + if (el.style[name] !== undefined) { + return transEndEventNames[name] } - return transitionEnd - }()) + } + + }()) + + return transitionEnd && { + end: transitionEnd } + })() }) -}( window.jQuery );/* ========================================================== - * bootstrap-alert.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#alerts +}(window.jQuery);/* ========================================================== + * bootstrap-alert.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#alerts * ========================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -68,61 +77,59 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* ALERT CLASS DEFINITION * ====================== */ var dismiss = '[data-dismiss="alert"]' - , Alert = function ( el ) { + , Alert = function (el) { $(el).on('click', dismiss, this.close) } - Alert.prototype = { + Alert.prototype.close = function (e) { + var $this = $(this) + , selector = $this.attr('data-target') + , $parent - constructor: Alert - - , close: function ( e ) { - var $this = $(this) - , selector = $this.attr('data-target') - , $parent + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + $parent = $(selector) - $parent = $(selector) - $parent.trigger('close') + e && e.preventDefault() - e && e.preventDefault() + $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) - $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) + $parent.trigger(e = $.Event('close')) - $parent - .trigger('close') - .removeClass('in') + if (e.isDefaultPrevented()) return - function removeElement() { - $parent - .trigger('closed') - .remove() - } + $parent.removeClass('in') - $.support.transition && $parent.hasClass('fade') ? - $parent.on($.support.transition.end, removeElement) : - removeElement() + function removeElement() { + $parent + .trigger('closed') + .remove() } + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : + removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ - $.fn.alert = function ( option ) { + var old = $.fn.alert + + $.fn.alert = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('alert') @@ -134,18 +141,25 @@ $.fn.alert.Constructor = Alert + /* ALERT NO CONFLICT + * ================= */ + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + /* ALERT DATA-API * ============== */ - $(function () { - $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) - }) + $(document).on('click.alert.data-api', dismiss, Alert.prototype.close) -}( window.jQuery );/* ============================================================ - * bootstrap-button.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#buttons +}(window.jQuery);/* ============================================================ + * bootstrap-button.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#buttons * ============================================================ - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -160,58 +174,56 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ - var Button = function ( element, options ) { + var Button = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.button.defaults, options) } - Button.prototype = { - - constructor: Button - - , setState: function ( state ) { - var d = 'disabled' - , $el = this.$element - , data = $el.data() - , val = $el.is('input') ? 'val' : 'html' + Button.prototype.setState = function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' - state = state + 'Text' - data.resetText || $el.data('resetText', $el[val]()) + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) - $el[val](data[state] || this.options[state]) + $el[val](data[state] || this.options[state]) - // push to event loop to allow forms to submit - setTimeout(function () { - state == 'loadingText' ? - $el.addClass(d).attr(d, d) : - $el.removeClass(d).removeAttr(d) - }, 0) - } + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } - , toggle: function () { - var $parent = this.$element.parent('[data-toggle="buttons-radio"]') + Button.prototype.toggle = function () { + var $parent = this.$element.closest('[data-toggle="buttons-radio"]') - $parent && $parent - .find('.active') - .removeClass('active') - - this.$element.toggleClass('active') - } + $parent && $parent + .find('.active') + .removeClass('active') + this.$element.toggleClass('active') } /* BUTTON PLUGIN DEFINITION * ======================== */ - $.fn.button = function ( option ) { + var old = $.fn.button + + $.fn.button = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('button') @@ -229,22 +241,29 @@ $.fn.button.Constructor = Button + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + /* BUTTON DATA-API * =============== */ - $(function () { - $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { - var $btn = $(e.target) - if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') - $btn.button('toggle') - }) + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') }) -}( window.jQuery );/* ========================================================== - * bootstrap-carousel.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#carousel +}(window.jQuery);/* ========================================================== + * bootstrap-carousel.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#carousel * ========================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -260,17 +279,18 @@ * ========================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* CAROUSEL CLASS DEFINITION * ========================= */ var Carousel = function (element, options) { this.$element = $(element) - this.options = $.extend({}, $.fn.carousel.defaults, options) - this.options.slide && this.slide(this.options.slide) + this.$indicators = this.$element.find('.carousel-indicators') + this.options = options this.options.pause == 'hover' && this.$element .on('mouseenter', $.proxy(this.pause, this)) .on('mouseleave', $.proxy(this.cycle, this)) @@ -278,18 +298,26 @@ Carousel.prototype = { - cycle: function () { - this.interval = setInterval($.proxy(this.next, this), this.options.interval) + cycle: function (e) { + if (!e) this.paused = false + if (this.interval) clearInterval(this.interval); + this.options.interval + && !this.paused + && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) return this } + , getActiveIndex: function () { + this.$active = this.$element.find('.item.active') + this.$items = this.$active.parent().children() + return this.$items.index(this.$active) + } + , to: function (pos) { - var $active = this.$element.find('.active') - , children = $active.parent().children() - , activePos = children.index($active) + var activeIndex = this.getActiveIndex() , that = this - if (pos > (children.length - 1) || pos < 0) return + if (pos > (this.$items.length - 1) || pos < 0) return if (this.sliding) { return this.$element.one('slid', function () { @@ -297,14 +325,19 @@ }) } - if (activePos == pos) { + if (activeIndex == pos) { return this.pause().cycle() } - return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) + return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) } - , pause: function () { + , pause: function (e) { + if (!e) this.paused = true + if (this.$element.find('.next, .prev').length && $.support.transition.end) { + this.$element.trigger($.support.transition.end) + this.cycle(true) + } clearInterval(this.interval) this.interval = null return this @@ -321,12 +354,13 @@ } , slide: function (type, next) { - var $active = this.$element.find('.active') + var $active = this.$element.find('.item.active') , $next = next || $active[type]() , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this + , e this.sliding = true @@ -334,26 +368,41 @@ $next = $next.length ? $next : this.$element.find('.item')[fallback]() + e = $.Event('slide', { + relatedTarget: $next[0] + , direction: direction + }) + if ($next.hasClass('active')) return - if (!$.support.transition && this.$element.hasClass('slide')) { - this.$element.trigger('slide') - $active.removeClass('active') - $next.addClass('active') - this.sliding = false - this.$element.trigger('slid') - } else { + if (this.$indicators.length) { + this.$indicators.find('.active').removeClass('active') + this.$element.one('slid', function () { + var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]) + $nextIndicator && $nextIndicator.addClass('active') + }) + } + + if ($.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) - this.$element.trigger('slide') this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) that.sliding = false setTimeout(function () { that.$element.trigger('slid') }, 0) }) + } else { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return + $active.removeClass('active') + $next.addClass('active') + this.sliding = false + this.$element.trigger('slid') } isCycling && this.cycle() @@ -367,15 +416,18 @@ /* CAROUSEL PLUGIN DEFINITION * ========================== */ - $.fn.carousel = function ( option ) { + var old = $.fn.carousel + + $.fn.carousel = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('carousel') - , options = typeof option == 'object' && option + , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option) + , action = typeof option == 'string' ? option : options.slide if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (typeof option == 'number') data.to(option) - else if (typeof option == 'string' || (option = options.slide)) data[option]() - else data.cycle() + else if (action) data[action]() + else if (options.interval) data.pause().cycle() }) } @@ -387,24 +439,37 @@ $.fn.carousel.Constructor = Carousel + /* CAROUSEL NO CONFLICT + * ==================== */ + + $.fn.carousel.noConflict = function () { + $.fn.carousel = old + return this + } + /* CAROUSEL DATA-API * ================= */ - $(function () { - $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) - $target.carousel(options) - e.preventDefault() - }) + $(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , options = $.extend({}, $target.data(), $this.data()) + , slideIndex + + $target.carousel(options) + + if (slideIndex = $this.attr('data-slide-to')) { + $target.data('carousel').pause().to(slideIndex).cycle() + } + + e.preventDefault() }) -}( window.jQuery );/* ============================================================= - * bootstrap-collapse.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#collapse +}(window.jQuery);/* ============================================================= + * bootstrap-collapse.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#collapse * ============================================================= - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -419,16 +484,21 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + + + /* COLLAPSE PUBLIC CLASS DEFINITION + * ================================ */ - var Collapse = function ( element, options ) { - this.$element = $(element) + var Collapse = function (element, options) { + this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) - if (this.options["parent"]) { - this.$parent = $(this.options["parent"]) + if (this.options.parent) { + this.$parent = $(this.options.parent) } this.options.toggle && this.toggle() @@ -444,31 +514,39 @@ } , show: function () { - var dimension = this.dimension() - , scroll = $.camelCase(['scroll', dimension].join('-')) - , actives = this.$parent && this.$parent.find('.in') + var dimension + , scroll + , actives , hasData + if (this.transitioning || this.$element.hasClass('in')) return + + dimension = this.dimension() + scroll = $.camelCase(['scroll', dimension].join('-')) + actives = this.$parent && this.$parent.find('> .accordion-group > .in') + if (actives && actives.length) { hasData = actives.data('collapse') + if (hasData && hasData.transitioning) return actives.collapse('hide') hasData || actives.data('collapse', null) } this.$element[dimension](0) - this.transition('addClass', 'show', 'shown') - this.$element[dimension](this.$element[0][scroll]) - + this.transition('addClass', $.Event('show'), 'shown') + $.support.transition && this.$element[dimension](this.$element[0][scroll]) } , hide: function () { - var dimension = this.dimension() + var dimension + if (this.transitioning || !this.$element.hasClass('in')) return + dimension = this.dimension() this.reset(this.$element[dimension]()) - this.transition('removeClass', 'hide', 'hidden') + this.transition('removeClass', $.Event('hide'), 'hidden') this.$element[dimension](0) } - , reset: function ( size ) { + , reset: function (size) { var dimension = this.dimension() this.$element @@ -476,41 +554,49 @@ [dimension](size || 'auto') [0].offsetWidth - this.$element[size ? 'addClass' : 'removeClass']('collapse') + this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') return this } - , transition: function ( method, startEvent, completeEvent ) { + , transition: function (method, startEvent, completeEvent) { var that = this , complete = function () { - if (startEvent == 'show') that.reset() + if (startEvent.type == 'show') that.reset() + that.transitioning = 0 that.$element.trigger(completeEvent) } - this.$element - .trigger(startEvent) - [method]('in') + this.$element.trigger(startEvent) + + if (startEvent.isDefaultPrevented()) return + + this.transitioning = 1 + + this.$element[method]('in') $.support.transition && this.$element.hasClass('collapse') ? this.$element.one($.support.transition.end, complete) : complete() - } + } , toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']() - } + } } - /* COLLAPSIBLE PLUGIN DEFINITION - * ============================== */ - $.fn.collapse = function ( option ) { + /* COLLAPSE PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.collapse + + $.fn.collapse = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') - , options = typeof option == 'object' && option + , options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option) if (!data) $this.data('collapse', (data = new Collapse(this, options))) if (typeof option == 'string') data[option]() }) @@ -523,25 +609,33 @@ $.fn.collapse.Constructor = Collapse - /* COLLAPSIBLE DATA-API + /* COLLAPSE NO CONFLICT * ==================== */ - $(function () { - $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) { - var $this = $(this), href - , target = $this.attr('data-target') - || e.preventDefault() - || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 - , option = $(target).data('collapse') ? 'toggle' : $this.data() - $(target).collapse(option) - }) + $.fn.collapse.noConflict = function () { + $.fn.collapse = old + return this + } + + + /* COLLAPSE DATA-API + * ================= */ + + $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { + var $this = $(this), href + , target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + , option = $(target).data('collapse') ? 'toggle' : $this.data() + $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') + $(target).collapse(option) }) -}( window.jQuery );/* ============================================================ - * bootstrap-dropdown.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#dropdowns +}(window.jQuery);/* ============================================================ + * bootstrap-dropdown.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#dropdowns * ============================================================ - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -557,15 +651,16 @@ * ============================================================ */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* DROPDOWN CLASS DEFINITION * ========================= */ - var toggle = '[data-toggle="dropdown"]' - , Dropdown = function ( element ) { + var toggle = '[data-toggle=dropdown]' + , Dropdown = function (element) { var $el = $(element).on('click.dropdown.data-api', this.toggle) $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') @@ -576,39 +671,105 @@ constructor: Dropdown - , toggle: function ( e ) { + , toggle: function (e) { var $this = $(this) - , selector = $this.attr('data-target') , $parent , isActive - if (!selector) { - selector = $this.attr('href') - selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } + if ($this.is('.disabled, :disabled')) return - $parent = $(selector) - $parent.length || ($parent = $this.parent()) + $parent = getParent($this) isActive = $parent.hasClass('open') clearMenus() - !isActive && $parent.toggleClass('open') + + if (!isActive) { + if ('ontouchstart' in document.documentElement) { + // if mobile we we use a backdrop because click events don't delegate + $('
').insertBefore($(this)).on('click', clearMenus) + } + $parent.toggleClass('open') + } + + $this.focus() return false } + , keydown: function (e) { + var $this + , $items + , $active + , $parent + , isActive + , index + + if (!/(38|40|27)/.test(e.keyCode)) return + + $this = $(this) + + e.preventDefault() + e.stopPropagation() + + if ($this.is('.disabled, :disabled')) return + + $parent = getParent($this) + + isActive = $parent.hasClass('open') + + if (!isActive || (isActive && e.keyCode == 27)) { + if (e.which == 27) $parent.find(toggle).focus() + return $this.click() + } + + $items = $('[role=menu] li:not(.divider):visible a', $parent) + + if (!$items.length) return + + index = $items.index($items.filter(':focus')) + + if (e.keyCode == 38 && index > 0) index-- // up + if (e.keyCode == 40 && index < $items.length - 1) index++ // down + if (!~index) index = 0 + + $items + .eq(index) + .focus() + } + } function clearMenus() { - $(toggle).parent().removeClass('open') + $('.dropdown-backdrop').remove() + $(toggle).each(function () { + getParent($(this)).removeClass('open') + }) + } + + function getParent($this) { + var selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = selector && $(selector) + + if (!$parent || !$parent.length) $parent = $this.parent() + + return $parent } /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( option ) { + var old = $.fn.dropdown + + $.fn.dropdown = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('dropdown') @@ -620,19 +781,30 @@ $.fn.dropdown.Constructor = Dropdown + /* DROPDOWN NO CONFLICT + * ==================== */ + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - $(function () { - $('html').on('click.dropdown.data-api', clearMenus) - $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) - }) + $(document) + .on('click.dropdown.data-api', clearMenus) + .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) -}( window.jQuery );/* ========================================================= - * bootstrap-modal.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#modals +}(window.jQuery); +/* ========================================================= + * bootstrap-modal.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#modals * ========================================================= - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -648,17 +820,19 @@ * ========================================================= */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function ( content, options ) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } Modal.prototype = { @@ -671,139 +845,161 @@ , show: function () { var that = this + , e = $.Event('show') - if (this.isShown) return + this.$element.trigger(e) - $('body').addClass('modal-open') + if (this.isShown || e.isDefaultPrevented()) return this.isShown = true - this.$element.trigger('show') - escape.call(this) - backdrop.call(this, function () { + this.escape() + + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') - !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position + if (!that.$element.parent().length) { + that.$element.appendTo(document.body) //don't move modals dom position + } - that.$element - .show() + that.$element.show() if (transition) { that.$element[0].offsetWidth // force reflow } - that.$element.addClass('in') + that.$element + .addClass('in') + .attr('aria-hidden', false) + + that.enforceFocus() transition ? - that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : - that.$element.trigger('shown') + that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : + that.$element.focus().trigger('shown') }) } - , hide: function ( e ) { + , hide: function (e) { e && e.preventDefault() - if (!this.isShown) return - var that = this + + e = $.Event('hide') + + this.$element.trigger(e) + + if (!this.isShown || e.isDefaultPrevented()) return + this.isShown = false - $('body').removeClass('modal-open') + this.escape() - escape.call(this) + $(document).off('focusin.modal') this.$element - .trigger('hide') .removeClass('in') + .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? - hideWithTransition.call(this) : - hideModal.call(this) + this.hideWithTransition() : + this.hideModal() } - } - - - /* MODAL PRIVATE METHODS - * ===================== */ + , enforceFocus: function () { + var that = this + $(document).on('focusin.modal', function (e) { + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) + } - function hideWithTransition() { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - hideModal.call(that) - }, 500) + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + this.$element.on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.modal') + } + } - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - hideModal.call(that) - }) - } + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) - function hideModal( that ) { - this.$element - .hide() - .trigger('hidden') + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } - backdrop.call(this) - } + , hideModal: function () { + var that = this + this.$element.hide() + this.backdrop(function () { + that.removeBackdrop() + that.$element.trigger('hidden') + }) + } - function backdrop( callback ) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' + , removeBackdrop: function () { + this.$backdrop && this.$backdrop.remove() + this.$backdrop = null + } - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' - this.$backdrop = $('
') - .appendTo(document.body) + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) - } + this.$backdrop = $('
') + .appendTo(document.body) - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + this.$backdrop.click( + this.options.backdrop == 'static' ? + $.proxy(this.$element[0].focus, this.$element[0]) + : $.proxy(this.hide, this) + ) - this.$backdrop.addClass('in') + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow - doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : - callback() + this.$backdrop.addClass('in') - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') + if (!callback) return - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : - removeBackdrop.call(this) + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() - } else if (callback) { - callback() - } - } + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') - function removeBackdrop() { - this.$backdrop.remove() - this.$backdrop = null - } + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, callback) : + callback() - function escape() { - var that = this - if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') - } + } else if (callback) { + callback() + } + } } /* MODAL PLUGIN DEFINITION * ======================= */ - $.fn.modal = function ( option ) { + var old = $.fn.modal + + $.fn.modal = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('modal') @@ -823,26 +1019,40 @@ $.fn.modal.Constructor = Modal + /* MODAL NO CONFLICT + * ================= */ + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + /* MODAL DATA-API * ============== */ - $(function () { - $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) + $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + , href = $this.attr('href') + , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) - e.preventDefault() - $target.modal(option) - }) + e.preventDefault() + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) -}( window.jQuery );/* =========================================================== - * bootstrap-tooltip.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#tooltips +}(window.jQuery); +/* =========================================================== + * bootstrap-tooltip.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#tooltips * Inspired by the original jQuery.tipsy by Jason Frame * =========================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -857,14 +1067,16 @@ * limitations under the License. * ========================================================== */ -!function( $ ) { - "use strict" +!function ($) { + + "use strict"; // jshint ;_; + /* TOOLTIP PUBLIC CLASS DEFINITION * =============================== */ - var Tooltip = function ( element, options ) { + var Tooltip = function (element, options) { this.init('tooltip', element, options) } @@ -872,20 +1084,30 @@ constructor: Tooltip - , init: function ( type, element, options ) { + , init: function (type, element, options) { var eventIn , eventOut + , triggers + , trigger + , i this.type = type this.$element = $(element) this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' - eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + triggers = this.options.trigger.split(' ') + + for (i = triggers.length; i--;) { + trigger = triggers[i] + if (trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (trigger != 'manual') { + eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) + } } this.options.selector ? @@ -893,8 +1115,8 @@ this.fixTitle() } - , getOptions: function ( options ) { - options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) + , getOptions: function (options) { + options = $.extend({}, $.fn[this.type].defaults, this.$element.data(), options) if (options.delay && typeof options.delay == 'number') { options.delay = { @@ -906,46 +1128,50 @@ return options } - , enter: function ( e ) { - var self = $(e.currentTarget)[this.type](this._options).data(this.type) + , enter: function (e) { + var defaults = $.fn[this.type].defaults + , options = {} + , self - if (!self.options.delay || !self.options.delay.show) { - self.show() - } else { - self.hoverState = 'in' - setTimeout(function() { - if (self.hoverState == 'in') { - self.show() - } - }, self.options.delay.show) - } + this._options && $.each(this._options, function (key, value) { + if (defaults[key] != value) options[key] = value + }, this) + + self = $(e.currentTarget)[this.type](options).data(this.type) + + if (!self.options.delay || !self.options.delay.show) return self.show() + + clearTimeout(this.timeout) + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) } - , leave: function ( e ) { + , leave: function (e) { var self = $(e.currentTarget)[this.type](this._options).data(this.type) - if (!self.options.delay || !self.options.delay.hide) { - self.hide() - } else { - self.hoverState = 'out' - setTimeout(function() { - if (self.hoverState == 'out') { - self.hide() - } - }, self.options.delay.hide) - } + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) } , show: function () { var $tip - , inside , pos , actualWidth , actualHeight , placement , tp + , e = $.Event('show') if (this.hasContent() && this.enabled) { + this.$element.trigger(e) + if (e.isDefaultPrevented()) return $tip = this.tip() this.setContent() @@ -957,19 +1183,18 @@ this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement - inside = /in/.test(placement) - $tip - .remove() + .detach() .css({ top: 0, left: 0, display: 'block' }) - .appendTo(inside ? this.$element : document.body) - pos = this.getPosition(inside) + this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) + + pos = this.getPosition() actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight - switch (inside ? placement.split(' ')[1] : placement) { + switch (placement) { case 'bottom': tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} break @@ -984,45 +1209,100 @@ break } - $tip - .css(tp) - .addClass(placement) - .addClass('in') + this.applyPlacement(tp, placement) + this.$element.trigger('shown') } } + , applyPlacement: function(offset, placement){ + var $tip = this.tip() + , width = $tip[0].offsetWidth + , height = $tip[0].offsetHeight + , actualWidth + , actualHeight + , delta + , replace + + $tip + .offset(offset) + .addClass(placement) + .addClass('in') + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + + if (placement == 'top' && actualHeight != height) { + offset.top = offset.top + height - actualHeight + replace = true + } + + if (placement == 'bottom' || placement == 'top') { + delta = 0 + + if (offset.left < 0){ + delta = offset.left * -2 + offset.left = 0 + $tip.offset(offset) + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + } + + this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') + } else { + this.replaceArrow(actualHeight - height, actualHeight, 'top') + } + + if (replace) $tip.offset(offset) + } + + , replaceArrow: function(delta, dimension, position){ + this + .arrow() + .css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') + } + , setContent: function () { var $tip = this.tip() - $tip.find('.tooltip-inner').html(this.getTitle()) + , title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) $tip.removeClass('fade in top bottom left right') } , hide: function () { var that = this , $tip = this.tip() + , e = $.Event('hide') + + this.$element.trigger(e) + if (e.isDefaultPrevented()) return $tip.removeClass('in') function removeWithAnimation() { var timeout = setTimeout(function () { - $tip.off($.support.transition.end).remove() + $tip.off($.support.transition.end).detach() }, 500) $tip.one($.support.transition.end, function () { clearTimeout(timeout) - $tip.remove() + $tip.detach() }) } $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : - $tip.remove() + $tip.detach() + + this.$element.trigger('hidden') + + return this } , fixTitle: function () { var $e = this.$element if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { - $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') } } @@ -1030,11 +1310,12 @@ return this.getTitle() } - , getPosition: function (inside) { - return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { - width: this.$element[0].offsetWidth - , height: this.$element[0].offsetHeight - }) + , getPosition: function () { + var el = this.$element[0] + return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { + width: el.offsetWidth + , height: el.offsetHeight + }, this.$element.offset()) } , getTitle: function () { @@ -1045,8 +1326,6 @@ title = $e.attr('data-original-title') || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) - title = (title || '').toString().replace(/(^\s*|\s*$)/, "") - return title } @@ -1054,6 +1333,10 @@ return this.$tip = this.$tip || $(this.options.template) } + , arrow: function(){ + return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow") + } + , validate: function () { if (!this.$element[0].parentNode) { this.hide() @@ -1074,8 +1357,13 @@ this.enabled = !this.enabled } - , toggle: function () { - this[this.tip().hasClass('in') ? 'hide' : 'show']() + , toggle: function (e) { + var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this + self.tip().hasClass('in') ? self.hide() : self.show() + } + + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) } } @@ -1084,6 +1372,8 @@ /* TOOLTIP PLUGIN DEFINITION * ========================= */ + var old = $.fn.tooltip + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) @@ -1098,19 +1388,31 @@ $.fn.tooltip.defaults = { animation: true - , delay: 0 - , selector: false , placement: 'top' - , trigger: 'hover' - , title: '' + , selector: false , template: '
' + , trigger: 'hover focus' + , title: '' + , delay: 0 + , html: false + , container: false + } + + + /* TOOLTIP NO CONFLICT + * =================== */ + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this } -}( window.jQuery );/* =========================================================== - * bootstrap-popover.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#popovers +}(window.jQuery); +/* =========================================================== + * bootstrap-popover.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#popovers * =========================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -1126,14 +1428,19 @@ * =========================================================== */ -!function( $ ) { +!function ($) { + + "use strict"; // jshint ;_; - "use strict" - var Popover = function ( element, options ) { + /* POPOVER PUBLIC CLASS DEFINITION + * =============================== */ + + var Popover = function (element, options) { this.init('popover', element, options) } + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js ========================================== */ @@ -1146,8 +1453,8 @@ , title = this.getTitle() , content = this.getContent() - $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title) - $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content) + $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) + $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') } @@ -1161,28 +1468,32 @@ , $e = this.$element , o = this.options - content = $e.attr('data-content') - || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) - - content = content.toString().replace(/(^\s*|\s*$)/, "") + content = (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) + || $e.attr('data-content') return content } - , tip: function() { + , tip: function () { if (!this.$tip) { this.$tip = $(this.options.template) } return this.$tip } + , destroy: function () { + this.hide().$element.off('.' + this.type).removeData(this.type) + } + }) /* POPOVER PLUGIN DEFINITION * ======================= */ - $.fn.popover = function ( option ) { + var old = $.fn.popover + + $.fn.popover = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('popover') @@ -1196,15 +1507,26 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' - , template: '

' + , template: '

' }) -}( window.jQuery );/* ============================================================= - * bootstrap-scrollspy.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#scrollspy + + /* POPOVER NO CONFLICT + * =================== */ + + $.fn.popover.noConflict = function () { + $.fn.popover = old + return this + } + +}(window.jQuery); +/* ============================================================= + * bootstrap-scrollspy.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#scrollspy * ============================================================= - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -1219,23 +1541,25 @@ * limitations under the License. * ============================================================== */ -!function ( $ ) { - "use strict" +!function ($) { - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + "use strict"; // jshint ;_; + + + /* SCROLLSPY CLASS DEFINITION + * ========================== */ - function ScrollSpy( element, options) { + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' - this.$body = $('body').on('click.scroll.data-api', this.selector, process) + this.$body = $('body') this.refresh() this.process() } @@ -1245,25 +1569,43 @@ constructor: ScrollSpy , refresh: function () { - this.targets = this.$body + var self = this + , $targets + + this.offsets = $([]) + this.targets = $([]) + + $targets = this.$body .find(this.selector) .map(function () { - var href = $(this).attr('href') - return /^#\w/.test(href) && $(href).length ? href : null + var $el = $(this) + , href = $el.data('target') || $el.attr('href') + , $href = /^#\w/.test(href) && $(href) + return ( $href + && $href.length + && [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null + }) + .sort(function (a, b) { return a[0] - b[0] }) + .each(function () { + self.offsets.push(this[0]) + self.targets.push(this[1]) }) - - this.offsets = $.map(this.targets, function (id) { - return $(id).position().top - }) } , process: function () { var scrollTop = this.$scrollElement.scrollTop() + this.options.offset + , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight + , maxScroll = scrollHeight - this.$scrollElement.height() , offsets = this.offsets , targets = this.targets , activeTarget = this.activeTarget , i + if (scrollTop >= maxScroll) { + return activeTarget != (i = targets.last()[0]) + && this.activate ( i ) + } + for (i = offsets.length; i--;) { activeTarget != targets[i] && scrollTop >= offsets[i] @@ -1274,21 +1616,27 @@ , activate: function (target) { var active + , selector this.activeTarget = target - this.$body - .find(this.selector).parent('.active') + $(this.selector) + .parent('.active') .removeClass('active') - active = this.$body - .find(this.selector + '[href="' + target + '"]') + selector = this.selector + + '[data-target="' + target + '"],' + + this.selector + '[href="' + target + '"]' + + active = $(selector) .parent('li') .addClass('active') - if ( active.parent('.dropdown-menu') ) { - active.closest('li.dropdown').addClass('active') + if (active.parent('.dropdown-menu').length) { + active = active.closest('li.dropdown').addClass('active') } + + active.trigger('activate') } } @@ -1297,7 +1645,9 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + var old = $.fn.scrollspy + + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -1314,21 +1664,30 @@ } + /* SCROLLSPY NO CONFLICT + * ===================== */ + + $.fn.scrollspy.noConflict = function () { + $.fn.scrollspy = old + return this + } + + /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) }) }) -}( window.jQuery );/* ======================================================== - * bootstrap-tab.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#tabs +}(window.jQuery);/* ======================================================== + * bootstrap-tab.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#tabs * ======================================================== - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -1344,14 +1703,15 @@ * ======================================================== */ -!function( $ ){ +!function ($) { + + "use strict"; // jshint ;_; - "use strict" /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } @@ -1365,6 +1725,7 @@ , selector = $this.attr('data-target') , previous , $target + , e if (!selector) { selector = $this.attr('href') @@ -1373,13 +1734,16 @@ if ( $this.parent('li').hasClass('active') ) return - previous = $ul.find('.active a').last()[0] + previous = $ul.find('.active:last a')[0] - $this.trigger({ - type: 'show' - , relatedTarget: previous + e = $.Event('show', { + relatedTarget: previous }) + $this.trigger(e) + + if (e.isDefaultPrevented()) return + $target = $(selector) this.activate($this.parent('li'), $ul) @@ -1431,6 +1795,8 @@ /* TAB PLUGIN DEFINITION * ===================== */ + var old = $.fn.tab + $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) @@ -1443,21 +1809,28 @@ $.fn.tab.Constructor = Tab + /* TAB NO CONFLICT + * =============== */ + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + /* TAB DATA-API * ============ */ - $(function () { - $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { - e.preventDefault() - $(this).tab('show') - }) + $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') }) -}( window.jQuery );/* ============================================================= - * bootstrap-typeahead.js v2.0.2 - * http://twitter.github.com/bootstrap/javascript.html#typeahead +}(window.jQuery);/* ============================================================= + * bootstrap-typeahead.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#typeahead * ============================================================= - * Copyright 2012 Twitter, Inc. + * Copyright 2013 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -1472,18 +1845,24 @@ * limitations under the License. * ============================================================ */ -!function( $ ){ - "use strict" +!function($){ + + "use strict"; // jshint ;_; - var Typeahead = function ( element, options ) { + + /* TYPEAHEAD PUBLIC CLASS DEFINITION + * ================================= */ + + var Typeahead = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter - this.$menu = $(this.options.menu).appendTo('body') + this.updater = this.options.updater || this.updater this.source = this.options.source + this.$menu = $(this.options.menu) this.shown = false this.listen() } @@ -1494,22 +1873,29 @@ , select: function () { var val = this.$menu.find('.active').attr('data-value') - this.$element.val(val) - this.$element.change(); + this.$element + .val(this.updater(val)) + .change() return this.hide() } + , updater: function (item) { + return item + } + , show: function () { - var pos = $.extend({}, this.$element.offset(), { + var pos = $.extend({}, this.$element.position(), { height: this.$element[0].offsetHeight }) - this.$menu.css({ - top: pos.top + pos.height - , left: pos.left - }) + this.$menu + .insertAfter(this.$element) + .css({ + top: pos.top + pos.height + , left: pos.left + }) + .show() - this.$menu.show() this.shown = true return this } @@ -1521,18 +1907,24 @@ } , lookup: function (event) { - var that = this - , items - , q + var items this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } - items = $.grep(this.source, function (item) { - if (that.matcher(item)) return item + items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source + + return items ? this.process(items) : this + } + + , process: function (items) { + var that = this + + items = $.grep(items, function (item) { + return that.matcher(item) }) items = this.sorter(items) @@ -1564,7 +1956,8 @@ } , highlighter: function (item) { - return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) { + var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') + return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '' + match + '' }) } @@ -1607,23 +2000,71 @@ , listen: function () { this.$element + .on('focus', $.proxy(this.focus, this)) .on('blur', $.proxy(this.blur, this)) .on('keypress', $.proxy(this.keypress, this)) .on('keyup', $.proxy(this.keyup, this)) - if ($.browser.webkit || $.browser.msie) { - this.$element.on('keydown', $.proxy(this.keypress, this)) + if (this.eventSupported('keydown')) { + this.$element.on('keydown', $.proxy(this.keydown, this)) } this.$menu .on('click', $.proxy(this.click, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) + .on('mouseleave', 'li', $.proxy(this.mouseleave, this)) + } + + , eventSupported: function(eventName) { + var isSupported = eventName in this.$element + if (!isSupported) { + this.$element.setAttribute(eventName, 'return;') + isSupported = typeof this.$element[eventName] === 'function' + } + return isSupported + } + + , move: function (e) { + if (!this.shown) return + + switch(e.keyCode) { + case 9: // tab + case 13: // enter + case 27: // escape + e.preventDefault() + break + + case 38: // up arrow + e.preventDefault() + this.prev() + break + + case 40: // down arrow + e.preventDefault() + this.next() + break + } + + e.stopPropagation() + } + + , keydown: function (e) { + this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) + this.move(e) + } + + , keypress: function (e) { + if (this.suppressKeyPressRepeat) return + this.move(e) } , keyup: function (e) { switch(e.keyCode) { case 40: // down arrow case 38: // up arrow + case 16: // shift + case 17: // ctrl + case 18: // alt break case 9: // tab @@ -1645,53 +2086,42 @@ e.preventDefault() } - , keypress: function (e) { - if (!this.shown) return - - switch(e.keyCode) { - case 9: // tab - case 13: // enter - case 27: // escape - e.preventDefault() - break - - case 38: // up arrow - e.preventDefault() - this.prev() - break - - case 40: // down arrow - e.preventDefault() - this.next() - break - } - - e.stopPropagation() + , focus: function (e) { + this.focused = true } , blur: function (e) { - var that = this - setTimeout(function () { that.hide() }, 150) + this.focused = false + if (!this.mousedover && this.shown) this.hide() } , click: function (e) { e.stopPropagation() e.preventDefault() this.select() + this.$element.focus() } , mouseenter: function (e) { + this.mousedover = true this.$menu.find('.active').removeClass('active') $(e.currentTarget).addClass('active') } + , mouseleave: function (e) { + this.mousedover = false + if (!this.focused && this.shown) this.hide() + } + } /* TYPEAHEAD PLUGIN DEFINITION * =========================== */ - $.fn.typeahead = function ( option ) { + var old = $.fn.typeahead + + $.fn.typeahead = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('typeahead') @@ -1706,21 +2136,145 @@ , items: 8 , menu: '
    ' , item: '
    • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead + /* TYPEAHEAD NO CONFLICT + * =================== */ + + $.fn.typeahead.noConflict = function () { + $.fn.typeahead = old + return this + } + + /* TYPEAHEAD DATA-API * ================== */ - $(function () { - $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + $this.typeahead($this.data()) + }) + +}(window.jQuery); +/* ========================================================== + * bootstrap-affix.js v2.3.2 + * http://getbootstrap.com/2.3.2/javascript.html#affix + * ========================================================== + * Copyright 2013 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) + this.$element = $(element) + this.checkPosition() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollHeight = $(document).height() + , scrollTop = this.$window.scrollTop() + , position = this.$element.offset() + , offset = this.options.offset + , offsetBottom = offset.bottom + , offsetTop = offset.top + , reset = 'affix affix-top affix-bottom' + , affix + + if (typeof offset != 'object') offsetBottom = offsetTop = offset + if (typeof offsetTop == 'function') offsetTop = offset.top() + if (typeof offsetBottom == 'function') offsetBottom = offset.bottom() + + affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? + false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? + 'bottom' : offsetTop != null && scrollTop <= offsetTop ? + 'top' : false + + if (this.affixed === affix) return + + this.affixed = affix + this.unpin = affix == 'bottom' ? position.top - scrollTop : null + + this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')) + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + var old = $.fn.affix + + $.fn.affix = function (option) { + return this.each(function () { var $this = $(this) - if ($this.data('typeahead')) return - e.preventDefault() - $this.typeahead($this.data()) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + /* AFFIX NO CONFLICT + * ================= */ + + $.fn.affix.noConflict = function () { + $.fn.affix = old + return this + } + + + /* AFFIX DATA-API + * ============== */ + + $(window).on('load', function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetBottom && (data.offset.bottom = data.offsetBottom) + data.offsetTop && (data.offset.top = data.offsetTop) + + $spy.affix(data) }) }) -}( window.jQuery ); \ No newline at end of file + +}(window.jQuery); \ No newline at end of file From 63a4c3bec3fa06a4539082bab332897374a1a9a6 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 16 Jul 2016 20:15:33 -0500 Subject: [PATCH 06/25] jQuery 1.8 -> 1.11: live -> on --- app/assets/javascripts/main.js.erb | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/main.js.erb b/app/assets/javascripts/main.js.erb index 25850fde..5dc56e01 100644 --- a/app/assets/javascripts/main.js.erb +++ b/app/assets/javascripts/main.js.erb @@ -172,7 +172,7 @@ $(function() { addMarkersAround(center.lat(), center.lng()); }); - $('#address_form').live('submit', function() { + $('#address_form').on('submit', function() { var submitButton = $("#address_form input[type='submit']"); $(submitButton).attr("disabled", true); if($('#address').val() === '') { @@ -260,7 +260,7 @@ $(function() { } - $('#combo-form input[type="radio"]').live('click', function() { + $('#combo-form input[type="radio"]').on('click', function() { var radioInput = $(this); if('new' === radioInput.val()) { $('#combo-form').data('state', 'user_sign_up'); @@ -292,7 +292,7 @@ $(function() { } }); - $('#combo-form').live('submit', function() { + $('#combo-form').on('submit', function() { var submitButton = $("#combo-form input[type='submit']"); $(submitButton).attr("disabled", true); $('#combo-form .errormsg').remove(); @@ -441,7 +441,7 @@ $(function() { return false; }); - $('#adoption_form').live('submit', function() { + $('#adoption_form').on('submit', function() { var submitButton = $("#adoption_form input[type='submit']"); $(submitButton).attr("disabled", true); $.ajax({ @@ -472,7 +472,7 @@ $(function() { return false; }); - $('#token_code_no').live('click', function(e){ + $('#token_code_no').on('click', function(e){ e.preventDefault(); active_things = { activeThingId: activeThingId, @@ -482,7 +482,7 @@ $(function() { congratulateAdopter(active_things); }); - $('#token_code_yes').live('click', function(e){ + $('#token_code_yes').on('click', function(e){ e.preventDefault(); ask_for_token_content.find("#token_container").html(token_input_container.html()) activeInfoWindow.close(); @@ -490,7 +490,7 @@ $(function() { activeInfoWindow.open(map, activeMarker); }); - $("#promo_code_form").live('submit', function(e){ + $("#promo_code_form").on('submit', function(e){ e.preventDefault(); $.ajax({ type: 'POST', @@ -527,7 +527,7 @@ $(function() { }); }); - $('#abandon_form').live('submit', function() { + $('#abandon_form').on('submit', function() { var answer = window.confirm("Are you sure you want to abandon this <%= I18n.t("defaults.thing") %>?") if(answer) { var submitButton = $("#abandon_form input[type='submit']"); @@ -572,7 +572,7 @@ $(function() { return false; }); - $('#edit_profile_link').live('click', function() { + $('#edit_profile_link').on('click', function() { var link = $(this); $(link).addClass('disabled'); $.ajax({ @@ -588,7 +588,7 @@ $(function() { return false; }); - $('#edit_form').live('submit', function() { + $('#edit_form').on('submit', function() { var submitButton = $("#edit_form input[type='submit']"); $(submitButton).attr("disabled", true); $('#edit_form .errormsg').remove(); @@ -678,7 +678,7 @@ $(function() { return false; }); - $('#sign_out_link').live('click', function() { + $('#sign_out_link').on('click', function() { var link = $(this); $(link).addClass('disabled'); $.ajax({ @@ -705,7 +705,7 @@ $(function() { return false; }); - $('#sign_in_form').live('submit', function() { + $('#sign_in_form').on('submit', function() { var submitButton = $("#sign_in_form input[type='submit']"); $(submitButton).attr("disabled", true); $.ajax({ @@ -723,7 +723,7 @@ $(function() { return false; }); - $('#back_link').live('click', function() { + $('#back_link').on('click', function() { var link = $(this); $(link).addClass('disabled'); $.ajax({ From 34a554e8e1869998eab5fbf56558dbb8fd8b4bbb Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Mon, 18 Jul 2016 08:37:57 -0500 Subject: [PATCH 07/25] More development of the Field component Finished display of Field --- .gitignore | 3 + Gemfile | 1 + Gemfile.lock | 4 + app/assets/javascripts/application.js | 2 + .../javascripts/components/field.es6.jsx | 70 ++++++- app/assets/stylesheets/screen.css | 11 ++ app/views/sidebar/edit_profile.html.haml | 1 - spec/javascripts/components/field_spec.js.jsx | 185 +++++++++++++++++- 8 files changed, 263 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index b3a86b50..06b4cb10 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,9 @@ log/* # Ignore dotenv .env +# Ignore generated javascript translations +/public/javascripts/translations.js + # Ignore other things *swp *~ diff --git a/Gemfile b/Gemfile index 30d6007d..8fee7b9f 100644 --- a/Gemfile +++ b/Gemfile @@ -10,6 +10,7 @@ gem 'devise' gem 'geokit' gem 'haml' gem 'hashie' +gem 'i18n-js', '>= 3.0.0.rc13' gem 'jquery-rails' gem 'jquery-ui-rails' gem 'pg' diff --git a/Gemfile.lock b/Gemfile.lock index 7cb34b47..da124422 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -148,6 +148,9 @@ GEM hike (1.2.3) hitimes (1.2.2) i18n (0.7.0) + i18n (0.6.11) + i18n-js (3.0.0.rc13) + i18n (~> 0.6, >= 0.6.6) jasmine-core (2.4.1) jasmine-rails (0.12.6) jasmine-core (>= 1.3, < 3.0) @@ -364,6 +367,7 @@ DEPENDENCIES guard-rspec haml hashie + i18n-js (>= 3.0.0.rc13) jasmine-rails jquery-rails jquery-ui-rails diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e35b96b3..1650691e 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,5 +13,7 @@ //= require jquery-ui //= require react //= require react_ujs +//= require i18n +//= require i18n/translations //= require components //= require_tree . diff --git a/app/assets/javascripts/components/field.es6.jsx b/app/assets/javascripts/components/field.es6.jsx index 8f62d9b7..3fda27a4 100644 --- a/app/assets/javascripts/components/field.es6.jsx +++ b/app/assets/javascripts/components/field.es6.jsx @@ -1,13 +1,66 @@ class Field extends React.Component { + id(){ + return this.props.name; + } + + name(){ + if (['checkbox'].indexOf(this.props.type) != -1){ + return this.props.name + '[]'; + } else { + return this.props.name; + } + } + + optionId(option){ + return this.props.name + '_' + option['value']; + } + + requiredMarkup(){ + if (this.props.required === true){ + return + } + } + + privateMarkup(){ + if (this.props.private === true){ + return {I18n.t('captions.private')}/ + } + } + + labelMarkup() { + return + } + + inputMarkup () { + var self = this; + switch (this.props.type){ + case 'text': + return + case 'password': + return + case 'checkbox': + return this.props.options.map(function(option){ + return + }); + case 'radio': + return this.props.options.map(function(option){ + return + }); + case 'select': + return + } + } + render () { return ( -
    -
    Name: {this.props.name}
    -
    Type: {this.props.type}
    -
    Label: {this.props.label}
    -
    Required: {this.props.required}
    -
    Private: {this.props.private}
    -
    +
    + {this.labelMarkup()} + {this.inputMarkup()} +
    ); } } @@ -17,5 +70,6 @@ Field.propTypes = { type: React.PropTypes.oneOf(['text', 'password', 'checkbox', 'radio', 'select']), label: React.PropTypes.string, required: React.PropTypes.bool, - private: React.PropTypes.bool + private: React.PropTypes.bool, + options: React.PropTypes.array }; diff --git a/app/assets/stylesheets/screen.css b/app/assets/stylesheets/screen.css index eeae00e7..dc2e9672 100644 --- a/app/assets/stylesheets/screen.css +++ b/app/assets/stylesheets/screen.css @@ -178,9 +178,20 @@ a.btn { list-style-type: lower-roman; } +/* Field indicators */ + img.lock { height: 9px; width: 7px; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ } + +span.required::after { + content: "*"; + color: red; + vertical-align: bottom; + font-size: 20px; + font-weight: bolder; + padding: .2em .3em; +} diff --git a/app/views/sidebar/edit_profile.html.haml b/app/views/sidebar/edit_profile.html.haml index 2adb6109..4e8dddc4 100644 --- a/app/views/sidebar/edit_profile.html.haml +++ b/app/views/sidebar/edit_profile.html.haml @@ -2,7 +2,6 @@ = f.hidden_field "id" = render :partial => "user_email", locals: {f: f} = render :partial => "user_username", locals: {f: f} - = react_component 'Field', name: 'foobar', type: 'text', label: 'Hi' %h2 = t("labels.shipping_info_heading") = render :partial => "user_realnames", locals: {f: f} diff --git a/spec/javascripts/components/field_spec.js.jsx b/spec/javascripts/components/field_spec.js.jsx index 6a81cfe3..9ba5919d 100644 --- a/spec/javascripts/components/field_spec.js.jsx +++ b/spec/javascripts/components/field_spec.js.jsx @@ -1,11 +1,186 @@ describe('Field', function(){ - it('Has a name', function(){ - var field = TestUtils.renderIntoDocument( - + var field; + var fieldNode; + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has an appropriate label', function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + expect(label.text()).toContain('Useful Label'); + }); + + + it('Displays an indication of being a private field', function(){ + var privateIndicator = $(fieldNode).find('img.lock'); + expect(privateIndicator.length).toEqual(1); + expect(privateIndicator.attr('alt')).toEqual('(private)'); + + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + privateIndicator = $(fieldNode).find('img.lock'); + expect(privateIndicator.length).toEqual(0); + }); + + it('Displays an indication of being a required field', function(){ + var requiredIndicator = $(fieldNode).find('span.required'); + expect(requiredIndicator.length).toEqual(1); + expect(requiredIndicator.attr('title')).toEqual('(required)'); + + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + requiredIndicator = $(fieldNode).find('span.required'); + expect(requiredIndicator.length).toEqual(0); + }); + + describe('of type "text"', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has an input element of type text with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('text'); + expect(input.attr('id')).toEqual('myField'); + expect(input.attr('name')).toEqual('myField'); + }); + }); + + describe('of type "password"', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has an input element of type password with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('password'); + expect(input.attr('id')).toEqual('myField'); + expect(input.attr('name')).toEqual('myField'); + }); + }); + + describe('of type "checkbox"', function(){ + var options; + beforeEach(function(){ + options = [ + {'value': 'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has input elements of type checkbox with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('checkbox'); + expect(input.attr('name')).toEqual('myField[]'); + }); + + it('Has input elements with specified labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.length).toEqual(1); + expect(optionInput.closest('label').text()).toEqual(option['label']); + }); + }); + + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('label').text()).toContain('foobar'); + }); + }); + + describe('of type "radio"', function(){ + var options; + beforeEach(function(){ + options = [ + {'value':'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has input elements of type radio with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('radio'); + expect(input.attr('name')).toEqual('myField'); + }); + + it('Has input elements with specified labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.length).toEqual(1); + expect(optionInput.closest('label').text()).toEqual(option['label']); + }); + }); + + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('label').text()).toContain('foobar'); + }); + }); + + describe('of type "select"', function(){ + var options; + beforeEach(function(){ + options = [ + {'value':'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has select element with the provided name', function(){ + var input = $(fieldNode).find('select'); + expect(input.attr('name')).toEqual('myField'); + }); - var fieldNode = ReactDOM.findDOMNode(field); + it('Select element has options with specific labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.is('option')).toBeTruthy(); + expect(optionInput.length).toEqual(1); + expect(optionInput.text()).toEqual(option['label']); + }); + }); - expect(fieldNode.textContent).toContain('foobar'); + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('option').text()).toEqual('foobar'); + }); }); }); From 59c6ee4b6b50f9432fb618be62433bd5073a072f Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Mon, 25 Jul 2016 21:46:07 -0500 Subject: [PATCH 08/25] Text fields update their values --- .../javascripts/components/field.es6.jsx | 22 ++++++++++++++++++- spec/javascripts/components/field_spec.js.jsx | 22 ++++++++++++++----- 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/components/field.es6.jsx b/app/assets/javascripts/components/field.es6.jsx index 3fda27a4..d33e6b4f 100644 --- a/app/assets/javascripts/components/field.es6.jsx +++ b/app/assets/javascripts/components/field.es6.jsx @@ -1,4 +1,13 @@ class Field extends React.Component { + + constructor(props) { + super(props); + this.state = {value: null}; + this.handleChange = this.handleChange.bind(this); + } + + /* Properties */ + id(){ return this.props.name; } @@ -11,10 +20,16 @@ class Field extends React.Component { } } + value(){ + return this.state.value; + } + optionId(option){ return this.props.name + '_' + option['value']; } + /* Markup Methods */ + requiredMarkup(){ if (this.props.required === true){ return @@ -35,7 +50,7 @@ class Field extends React.Component { var self = this; switch (this.props.type){ case 'text': - return + return case 'password': return case 'checkbox': @@ -55,6 +70,11 @@ class Field extends React.Component { } } + handleChange(){ + var input = $(this.refs.input); + this.setState({value: input.val()}); + } + render () { return (
    diff --git a/spec/javascripts/components/field_spec.js.jsx b/spec/javascripts/components/field_spec.js.jsx index 9ba5919d..17cc434a 100644 --- a/spec/javascripts/components/field_spec.js.jsx +++ b/spec/javascripts/components/field_spec.js.jsx @@ -1,6 +1,5 @@ describe('Field', function(){ - var field; - var fieldNode; + var field, fieldNode, input, $input; beforeEach(function(){ field = TestUtils.renderIntoDocument( @@ -8,6 +7,10 @@ describe('Field', function(){ fieldNode = ReactDOM.findDOMNode(field); }); + it('Has a default value of null', function(){ + expect(field.value()).toEqual(null); + }); + it('Has an appropriate label', function(){ var label = $(fieldNode).find('label'); expect(label.attr('for')).toEqual('myField'); @@ -47,13 +50,20 @@ describe('Field', function(){ ); fieldNode = ReactDOM.findDOMNode(field); + input = field.refs.input; + $input = $(input); }); it('Has an input element of type text with the provided name', function(){ - var input = $(fieldNode).find('input'); - expect(input.attr('type')).toEqual('text'); - expect(input.attr('id')).toEqual('myField'); - expect(input.attr('name')).toEqual('myField'); + expect($input.attr('type')).toEqual('text'); + expect($input.attr('id')).toEqual('myField'); + expect($input.attr('name')).toEqual('myField'); + }); + + it("It updates it's value when text is entered", function(){ + $input.val('foo'); + TestUtils.Simulate.keyUp(input); + expect(field.value()).toEqual('foo'); }); }); From 41b11a68eb0207bb1bf8caa7d9eab0687718599a Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Tue, 26 Jul 2016 21:29:27 -0500 Subject: [PATCH 09/25] Refactored Field into several focused components --- .../components/checkbox_field.es6.jsx | 42 ++++ .../javascripts/components/field.es6.jsx | 95 --------- .../components/labeled_field.es6.jsx | 35 ++++ .../components/password_field.es6.jsx | 32 +++ .../components/radio_field.es6.jsx | 37 ++++ .../components/select_field.es6.jsx | 38 ++++ .../javascripts/components/text_field.es6.jsx | 32 +++ .../components/checkbox_field_spec.js.jsx | 45 ++++ spec/javascripts/components/field_spec.js.jsx | 196 ------------------ .../components/labeled_field_spec.js.jsx | 58 ++++++ .../components/password_field_spec.js.jsx | 32 +++ .../components/radio_field_spec.js.jsx | 45 ++++ .../components/select_field_spec.js.jsx | 45 ++++ .../components/text_field_spec.js.jsx | 32 +++ 14 files changed, 473 insertions(+), 291 deletions(-) create mode 100644 app/assets/javascripts/components/checkbox_field.es6.jsx delete mode 100644 app/assets/javascripts/components/field.es6.jsx create mode 100644 app/assets/javascripts/components/labeled_field.es6.jsx create mode 100644 app/assets/javascripts/components/password_field.es6.jsx create mode 100644 app/assets/javascripts/components/radio_field.es6.jsx create mode 100644 app/assets/javascripts/components/select_field.es6.jsx create mode 100644 app/assets/javascripts/components/text_field.es6.jsx create mode 100644 spec/javascripts/components/checkbox_field_spec.js.jsx delete mode 100644 spec/javascripts/components/field_spec.js.jsx create mode 100644 spec/javascripts/components/labeled_field_spec.js.jsx create mode 100644 spec/javascripts/components/password_field_spec.js.jsx create mode 100644 spec/javascripts/components/radio_field_spec.js.jsx create mode 100644 spec/javascripts/components/select_field_spec.js.jsx create mode 100644 spec/javascripts/components/text_field_spec.js.jsx diff --git a/app/assets/javascripts/components/checkbox_field.es6.jsx b/app/assets/javascripts/components/checkbox_field.es6.jsx new file mode 100644 index 00000000..b06a669c --- /dev/null +++ b/app/assets/javascripts/components/checkbox_field.es6.jsx @@ -0,0 +1,42 @@ +class CheckboxField extends React.Component{ + + constructor(props) { + super(props); + this.state = {value: []}; + } + + optionId(option){ + return this.props.name + '_' + option['value']; + } + + name(){ + return this.props.name + '[]'; + } + + value(){ + return this.state.value; + } + + optionsMarkup(){ + var self = this; + return this.props.options.map(function(option){ + return + }); + } + + render(){ + return ( + + {this.optionsMarkup()} + + ); + } +} + +CheckboxField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool, + options: React.PropTypes.array +}; diff --git a/app/assets/javascripts/components/field.es6.jsx b/app/assets/javascripts/components/field.es6.jsx deleted file mode 100644 index d33e6b4f..00000000 --- a/app/assets/javascripts/components/field.es6.jsx +++ /dev/null @@ -1,95 +0,0 @@ -class Field extends React.Component { - - constructor(props) { - super(props); - this.state = {value: null}; - this.handleChange = this.handleChange.bind(this); - } - - /* Properties */ - - id(){ - return this.props.name; - } - - name(){ - if (['checkbox'].indexOf(this.props.type) != -1){ - return this.props.name + '[]'; - } else { - return this.props.name; - } - } - - value(){ - return this.state.value; - } - - optionId(option){ - return this.props.name + '_' + option['value']; - } - - /* Markup Methods */ - - requiredMarkup(){ - if (this.props.required === true){ - return - } - } - - privateMarkup(){ - if (this.props.private === true){ - return {I18n.t('captions.private')}/ - } - } - - labelMarkup() { - return - } - - inputMarkup () { - var self = this; - switch (this.props.type){ - case 'text': - return - case 'password': - return - case 'checkbox': - return this.props.options.map(function(option){ - return - }); - case 'radio': - return this.props.options.map(function(option){ - return - }); - case 'select': - return - } - } - - handleChange(){ - var input = $(this.refs.input); - this.setState({value: input.val()}); - } - - render () { - return ( -
    - {this.labelMarkup()} - {this.inputMarkup()} -
    - ); - } -} - -Field.propTypes = { - name: React.PropTypes.string, - type: React.PropTypes.oneOf(['text', 'password', 'checkbox', 'radio', 'select']), - label: React.PropTypes.string, - required: React.PropTypes.bool, - private: React.PropTypes.bool, - options: React.PropTypes.array -}; diff --git a/app/assets/javascripts/components/labeled_field.es6.jsx b/app/assets/javascripts/components/labeled_field.es6.jsx new file mode 100644 index 00000000..7bacc2ca --- /dev/null +++ b/app/assets/javascripts/components/labeled_field.es6.jsx @@ -0,0 +1,35 @@ +class LabeledField extends React.Component { + + /* Markup Methods */ + requiredMarkup(){ + if (this.props.required === true){ + return + } + } + + privateMarkup(){ + if (this.props.private === true){ + return {I18n.t('captions.private')}/ + } + } + + labelMarkup() { + return + } + + render () { + return ( +
    + {this.labelMarkup()} + {this.props.children} +
    + ); + } +} + +LabeledField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool +}; diff --git a/app/assets/javascripts/components/password_field.es6.jsx b/app/assets/javascripts/components/password_field.es6.jsx new file mode 100644 index 00000000..baed3910 --- /dev/null +++ b/app/assets/javascripts/components/password_field.es6.jsx @@ -0,0 +1,32 @@ +class PasswordField extends React.Component{ + + constructor(props) { + super(props); + this.state = {value: null}; + this.handleChange = this.handleChange.bind(this); + } + + value(){ + return this.state.value; + } + + handleChange(){ + var input = $(this.refs.input); + this.setState({value: input.val()}); + } + + render(){ + return ( + + + + ); + } +} + +PasswordField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool +}; diff --git a/app/assets/javascripts/components/radio_field.es6.jsx b/app/assets/javascripts/components/radio_field.es6.jsx new file mode 100644 index 00000000..ff2986a9 --- /dev/null +++ b/app/assets/javascripts/components/radio_field.es6.jsx @@ -0,0 +1,37 @@ +class RadioField extends React.Component { + + constructor(props) { + super(props); + this.state = {value: null}; + } + + value(){ + return this.state.value; + } + + optionId(option){ + return this.props.name + '_' + option['value']; + } + + render(){ + var self = this; + return( + + { + this.props.options.map(function(option){ + return + }) + } + + + ); + } +} + +RadioField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool, + options: React.PropTypes.array +}; diff --git a/app/assets/javascripts/components/select_field.es6.jsx b/app/assets/javascripts/components/select_field.es6.jsx new file mode 100644 index 00000000..fee8969d --- /dev/null +++ b/app/assets/javascripts/components/select_field.es6.jsx @@ -0,0 +1,38 @@ +class SelectField extends React.Component { + + constructor(props) { + super(props); + this.state = {value: null}; + } + + value(){ + return this.state.value; + } + + optionId(option){ + return this.props.name + '_' + option['value']; + } + + render(){ + var self = this; + return ( + + + + ); + } +} + +SelectField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool, + options: React.PropTypes.array +}; diff --git a/app/assets/javascripts/components/text_field.es6.jsx b/app/assets/javascripts/components/text_field.es6.jsx new file mode 100644 index 00000000..81c11dd3 --- /dev/null +++ b/app/assets/javascripts/components/text_field.es6.jsx @@ -0,0 +1,32 @@ +class TextField extends React.Component{ + + constructor(props) { + super(props); + this.state = {value: null}; + this.handleChange = this.handleChange.bind(this); + } + + value(){ + return this.state.value; + } + + handleChange(){ + var input = $(this.refs.input); + this.setState({value: input.val()}); + } + + render(){ + return ( + + + + ); + } +} + +TextField.propTypes = { + name: React.PropTypes.string, + label: React.PropTypes.string, + required: React.PropTypes.bool, + private: React.PropTypes.bool +}; diff --git a/spec/javascripts/components/checkbox_field_spec.js.jsx b/spec/javascripts/components/checkbox_field_spec.js.jsx new file mode 100644 index 00000000..92c8b5eb --- /dev/null +++ b/spec/javascripts/components/checkbox_field_spec.js.jsx @@ -0,0 +1,45 @@ +describe('CheckboxField', function(){ + var options; + beforeEach(function(){ + options = [ + {'value': 'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it("has a label", function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + }); + + it('Has a default value of an empty array', function(){ + expect(field.value()).toEqual([]); + }); + + it('Has input elements of type checkbox with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('checkbox'); + expect(input.attr('name')).toEqual('myField[]'); + }); + + it('Has input elements with specified labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.length).toEqual(1); + expect(optionInput.closest('label').text()).toEqual(option['label']); + }); + }); + + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('label').text()).toContain('foobar'); + }); +}); diff --git a/spec/javascripts/components/field_spec.js.jsx b/spec/javascripts/components/field_spec.js.jsx deleted file mode 100644 index 17cc434a..00000000 --- a/spec/javascripts/components/field_spec.js.jsx +++ /dev/null @@ -1,196 +0,0 @@ -describe('Field', function(){ - var field, fieldNode, input, $input; - beforeEach(function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - }); - - it('Has a default value of null', function(){ - expect(field.value()).toEqual(null); - }); - - it('Has an appropriate label', function(){ - var label = $(fieldNode).find('label'); - expect(label.attr('for')).toEqual('myField'); - expect(label.text()).toContain('Useful Label'); - }); - - - it('Displays an indication of being a private field', function(){ - var privateIndicator = $(fieldNode).find('img.lock'); - expect(privateIndicator.length).toEqual(1); - expect(privateIndicator.attr('alt')).toEqual('(private)'); - - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - privateIndicator = $(fieldNode).find('img.lock'); - expect(privateIndicator.length).toEqual(0); - }); - - it('Displays an indication of being a required field', function(){ - var requiredIndicator = $(fieldNode).find('span.required'); - expect(requiredIndicator.length).toEqual(1); - expect(requiredIndicator.attr('title')).toEqual('(required)'); - - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - requiredIndicator = $(fieldNode).find('span.required'); - expect(requiredIndicator.length).toEqual(0); - }); - - describe('of type "text"', function(){ - beforeEach(function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - input = field.refs.input; - $input = $(input); - }); - - it('Has an input element of type text with the provided name', function(){ - expect($input.attr('type')).toEqual('text'); - expect($input.attr('id')).toEqual('myField'); - expect($input.attr('name')).toEqual('myField'); - }); - - it("It updates it's value when text is entered", function(){ - $input.val('foo'); - TestUtils.Simulate.keyUp(input); - expect(field.value()).toEqual('foo'); - }); - }); - - describe('of type "password"', function(){ - beforeEach(function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - }); - - it('Has an input element of type password with the provided name', function(){ - var input = $(fieldNode).find('input'); - expect(input.attr('type')).toEqual('password'); - expect(input.attr('id')).toEqual('myField'); - expect(input.attr('name')).toEqual('myField'); - }); - }); - - describe('of type "checkbox"', function(){ - var options; - beforeEach(function(){ - options = [ - {'value': 'one', 'label':'One'}, - {'value':'two', 'label':'2'}, - {'value':'three', 'label':'III'} - ] - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - }); - - it('Has input elements of type checkbox with the provided name', function(){ - var input = $(fieldNode).find('input'); - expect(input.attr('type')).toEqual('checkbox'); - expect(input.attr('name')).toEqual('myField[]'); - }); - - it('Has input elements with specified labels and properly derived ids', function(){ - options.forEach(function(option){ - var optionInput = $(fieldNode).find('#myField_' + option['value']); - expect(optionInput.length).toEqual(1); - expect(optionInput.closest('label').text()).toEqual(option['label']); - }); - }); - - it('Derives labels for options that do not specify labels', function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - expect($(fieldNode).find('label').text()).toContain('foobar'); - }); - }); - - describe('of type "radio"', function(){ - var options; - beforeEach(function(){ - options = [ - {'value':'one', 'label':'One'}, - {'value':'two', 'label':'2'}, - {'value':'three', 'label':'III'} - ] - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - }); - - it('Has input elements of type radio with the provided name', function(){ - var input = $(fieldNode).find('input'); - expect(input.attr('type')).toEqual('radio'); - expect(input.attr('name')).toEqual('myField'); - }); - - it('Has input elements with specified labels and properly derived ids', function(){ - options.forEach(function(option){ - var optionInput = $(fieldNode).find('#myField_' + option['value']); - expect(optionInput.length).toEqual(1); - expect(optionInput.closest('label').text()).toEqual(option['label']); - }); - }); - - it('Derives labels for options that do not specify labels', function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - expect($(fieldNode).find('label').text()).toContain('foobar'); - }); - }); - - describe('of type "select"', function(){ - var options; - beforeEach(function(){ - options = [ - {'value':'one', 'label':'One'}, - {'value':'two', 'label':'2'}, - {'value':'three', 'label':'III'} - ] - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - }); - - it('Has select element with the provided name', function(){ - var input = $(fieldNode).find('select'); - expect(input.attr('name')).toEqual('myField'); - }); - - it('Select element has options with specific labels and properly derived ids', function(){ - options.forEach(function(option){ - var optionInput = $(fieldNode).find('#myField_' + option['value']); - expect(optionInput.is('option')).toBeTruthy(); - expect(optionInput.length).toEqual(1); - expect(optionInput.text()).toEqual(option['label']); - }); - }); - - it('Derives labels for options that do not specify labels', function(){ - field = TestUtils.renderIntoDocument( - - ); - fieldNode = ReactDOM.findDOMNode(field); - expect($(fieldNode).find('option').text()).toEqual('foobar'); - }); - }); -}); diff --git a/spec/javascripts/components/labeled_field_spec.js.jsx b/spec/javascripts/components/labeled_field_spec.js.jsx new file mode 100644 index 00000000..88db3dae --- /dev/null +++ b/spec/javascripts/components/labeled_field_spec.js.jsx @@ -0,0 +1,58 @@ +describe('LabeledField', function(){ + var field, fieldNode, input, $input; + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('Has an appropriate label', function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + expect(label.text()).toContain('Useful Label'); + }); + + + it('Displays an indication of being a private field', function(){ + var privateIndicator = $(fieldNode).find('img.lock'); + expect(privateIndicator.length).toEqual(1); + expect(privateIndicator.attr('alt')).toEqual('(private)'); + + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + privateIndicator = $(fieldNode).find('img.lock'); + expect(privateIndicator.length).toEqual(0); + }); + + it('Displays an indication of being a required field', function(){ + var requiredIndicator = $(fieldNode).find('span.required'); + expect(requiredIndicator.length).toEqual(1); + expect(requiredIndicator.attr('title')).toEqual('(required)'); + + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + requiredIndicator = $(fieldNode).find('span.required'); + expect(requiredIndicator.length).toEqual(0); + }); + + describe('with children', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('renders children', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('id')).toEqual('myInput'); + }); + }) +}); diff --git a/spec/javascripts/components/password_field_spec.js.jsx b/spec/javascripts/components/password_field_spec.js.jsx new file mode 100644 index 00000000..ecad2423 --- /dev/null +++ b/spec/javascripts/components/password_field_spec.js.jsx @@ -0,0 +1,32 @@ +describe('PasswordField', function(){ + var field, fieldNode, input, $input; + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + input = field.refs.input; + $input = $(input); + }); + + it("has a label", function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + }); + + it('Has a default value of null', function(){ + expect(field.value()).toEqual(null); + }); + + it('Has an input element of type text with the provided name', function(){ + expect($input.attr('type')).toEqual('password'); + expect($input.attr('id')).toEqual('myField'); + expect($input.attr('name')).toEqual('myField'); + }); + + it("updates it's value when text is entered", function(){ + $input.val('foo'); + TestUtils.Simulate.keyUp(input); + expect(field.value()).toEqual('foo'); + }); +}); diff --git a/spec/javascripts/components/radio_field_spec.js.jsx b/spec/javascripts/components/radio_field_spec.js.jsx new file mode 100644 index 00000000..43b16561 --- /dev/null +++ b/spec/javascripts/components/radio_field_spec.js.jsx @@ -0,0 +1,45 @@ +describe('RadioField', function(){ + var options, field, fieldNode; + beforeEach(function(){ + options = [ + {'value':'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it("has a label", function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + }); + + it('Has a default value of null', function(){ + expect(field.value()).toEqual(null); + }); + + it('Has input elements of type radio with the provided name', function(){ + var input = $(fieldNode).find('input'); + expect(input.attr('type')).toEqual('radio'); + expect(input.attr('name')).toEqual('myField'); + }); + + it('Has input elements with specified labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.length).toEqual(1); + expect(optionInput.closest('label').text()).toEqual(option['label']); + }); + }); + + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('label').text()).toContain('foobar'); + }); +}); diff --git a/spec/javascripts/components/select_field_spec.js.jsx b/spec/javascripts/components/select_field_spec.js.jsx new file mode 100644 index 00000000..f6e6a395 --- /dev/null +++ b/spec/javascripts/components/select_field_spec.js.jsx @@ -0,0 +1,45 @@ +describe('SelectField', function(){ + var options; + beforeEach(function(){ + options = [ + {'value':'one', 'label':'One'}, + {'value':'two', 'label':'2'}, + {'value':'three', 'label':'III'} + ] + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it("has a label", function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + }); + + it('Has a default value of null', function(){ + expect(field.value()).toEqual(null); + }); + + it('Has select element with the provided name', function(){ + var input = $(fieldNode).find('select'); + expect(input.attr('name')).toEqual('myField'); + }); + + it('Select element has options with specific labels and properly derived ids', function(){ + options.forEach(function(option){ + var optionInput = $(fieldNode).find('#myField_' + option['value']); + expect(optionInput.is('option')).toBeTruthy(); + expect(optionInput.length).toEqual(1); + expect(optionInput.text()).toEqual(option['label']); + }); + }); + + it('Derives labels for options that do not specify labels', function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + expect($(fieldNode).find('option').text()).toEqual('foobar'); + }); +}); diff --git a/spec/javascripts/components/text_field_spec.js.jsx b/spec/javascripts/components/text_field_spec.js.jsx new file mode 100644 index 00000000..97f35762 --- /dev/null +++ b/spec/javascripts/components/text_field_spec.js.jsx @@ -0,0 +1,32 @@ +describe('TextField', function(){ + var field, fieldNode, input, $input; + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + input = field.refs.input; + $input = $(input); + }); + + it("has a label", function(){ + var label = $(fieldNode).find('label'); + expect(label.attr('for')).toEqual('myField'); + }); + + it('Has a default value of null', function(){ + expect(field.value()).toEqual(null); + }); + + it('Has an input element of type text with the provided name', function(){ + expect($input.attr('type')).toEqual('text'); + expect($input.attr('id')).toEqual('myField'); + expect($input.attr('name')).toEqual('myField'); + }); + + it("updates it's value when text is entered", function(){ + $input.val('foo'); + TestUtils.Simulate.keyUp(input); + expect(field.value()).toEqual('foo'); + }); +}); From 9e6111160266f0d96ce2e534b27347392ec8d63d Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Thu, 28 Jul 2016 17:09:52 -0500 Subject: [PATCH 10/25] All components can receive input --- .../components/checkbox_field.es6.jsx | 17 ++++++++++++-- .../components/labeled_field.es6.jsx | 2 +- .../components/password_field.es6.jsx | 7 +++--- .../components/radio_field.es6.jsx | 20 +++++++++++------ .../components/select_field.es6.jsx | 8 ++++++- .../javascripts/components/text_field.es6.jsx | 7 +++--- .../components/checkbox_field_spec.js.jsx | 22 +++++++++++++++---- .../components/password_field_spec.js.jsx | 3 +-- .../components/radio_field_spec.js.jsx | 7 ++++++ .../components/select_field_spec.js.jsx | 8 ++++++- .../components/text_field_spec.js.jsx | 3 +-- 11 files changed, 76 insertions(+), 28 deletions(-) diff --git a/app/assets/javascripts/components/checkbox_field.es6.jsx b/app/assets/javascripts/components/checkbox_field.es6.jsx index b06a669c..39d07c0e 100644 --- a/app/assets/javascripts/components/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/checkbox_field.es6.jsx @@ -3,6 +3,7 @@ class CheckboxField extends React.Component{ constructor(props) { super(props); this.state = {value: []}; + this.handleChange = this.handleChange.bind(this); } optionId(option){ @@ -17,16 +18,28 @@ class CheckboxField extends React.Component{ return this.state.value; } + handleChange(e){ + var value = this.state.value; + var index = $.inArray(e.target.value, value); + if (e.target.checked){ + if (index === -1){ + value.push(e.target.value); + } + } else { + value.splice(index, 1) + } + } + optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return }); } render(){ return ( - + {this.optionsMarkup()} ); diff --git a/app/assets/javascripts/components/labeled_field.es6.jsx b/app/assets/javascripts/components/labeled_field.es6.jsx index 7bacc2ca..0b567155 100644 --- a/app/assets/javascripts/components/labeled_field.es6.jsx +++ b/app/assets/javascripts/components/labeled_field.es6.jsx @@ -14,7 +14,7 @@ class LabeledField extends React.Component { } labelMarkup() { - return + return } render () { diff --git a/app/assets/javascripts/components/password_field.es6.jsx b/app/assets/javascripts/components/password_field.es6.jsx index baed3910..649d0947 100644 --- a/app/assets/javascripts/components/password_field.es6.jsx +++ b/app/assets/javascripts/components/password_field.es6.jsx @@ -10,15 +10,14 @@ class PasswordField extends React.Component{ return this.state.value; } - handleChange(){ - var input = $(this.refs.input); - this.setState({value: input.val()}); + handleChange(e){ + this.setState({value: e.target.value}); } render(){ return ( - + ); } diff --git a/app/assets/javascripts/components/radio_field.es6.jsx b/app/assets/javascripts/components/radio_field.es6.jsx index ff2986a9..c1745864 100644 --- a/app/assets/javascripts/components/radio_field.es6.jsx +++ b/app/assets/javascripts/components/radio_field.es6.jsx @@ -3,6 +3,7 @@ class RadioField extends React.Component { constructor(props) { super(props); this.state = {value: null}; + this.handleChange = this.handleChange.bind(this); } value(){ @@ -13,17 +14,22 @@ class RadioField extends React.Component { return this.props.name + '_' + option['value']; } - render(){ + handleChange(e){ + this.setState({value: e.target.value}) + } + + optionsMarkup(){ var self = this; + return this.props.options.map(function(option){ + return + }); + } + + render(){ return( - { - this.props.options.map(function(option){ - return - }) - } + {this.optionsMarkup()} - ); } } diff --git a/app/assets/javascripts/components/select_field.es6.jsx b/app/assets/javascripts/components/select_field.es6.jsx index fee8969d..8c9881b4 100644 --- a/app/assets/javascripts/components/select_field.es6.jsx +++ b/app/assets/javascripts/components/select_field.es6.jsx @@ -3,6 +3,7 @@ class SelectField extends React.Component { constructor(props) { super(props); this.state = {value: null}; + this.handleChange = this.handleChange.bind(this); } value(){ @@ -13,11 +14,16 @@ class SelectField extends React.Component { return this.props.name + '_' + option['value']; } + + handleChange(e){ + this.setState({value: e.target.value}); + } + render(){ var self = this; return ( - { this.props.options.map(function(option){ return diff --git a/app/assets/javascripts/components/text_field.es6.jsx b/app/assets/javascripts/components/text_field.es6.jsx index 81c11dd3..8f52823c 100644 --- a/app/assets/javascripts/components/text_field.es6.jsx +++ b/app/assets/javascripts/components/text_field.es6.jsx @@ -10,15 +10,14 @@ class TextField extends React.Component{ return this.state.value; } - handleChange(){ - var input = $(this.refs.input); - this.setState({value: input.val()}); + handleChange(e){ + this.setState({value: e.target.value}); } render(){ return ( - + ); } diff --git a/spec/javascripts/components/checkbox_field_spec.js.jsx b/spec/javascripts/components/checkbox_field_spec.js.jsx index 92c8b5eb..ef04a1d8 100644 --- a/spec/javascripts/components/checkbox_field_spec.js.jsx +++ b/spec/javascripts/components/checkbox_field_spec.js.jsx @@ -2,9 +2,9 @@ describe('CheckboxField', function(){ var options; beforeEach(function(){ options = [ - {'value': 'one', 'label':'One'}, - {'value':'two', 'label':'2'}, - {'value':'three', 'label':'III'} + {'value': 'one', 'label':'One'}, + {'value': 'two', 'label':'2'}, + {'value': 'three', 'label':'III'} ] field = TestUtils.renderIntoDocument( @@ -14,7 +14,7 @@ describe('CheckboxField', function(){ it("has a label", function(){ var label = $(fieldNode).find('label'); - expect(label.attr('for')).toEqual('myField'); + expect(label.attr('for')).toEqual('myField[]'); }); it('Has a default value of an empty array', function(){ @@ -27,6 +27,13 @@ describe('CheckboxField', function(){ expect(input.attr('name')).toEqual('myField[]'); }); + it('Has input elements with appropriate values', function(){ + options.forEach(function(option){ + var results = $(fieldNode).find('input[value="' + option['value'] +'"]'); + expect(results.length).toEqual(1); + }); + }); + it('Has input elements with specified labels and properly derived ids', function(){ options.forEach(function(option){ var optionInput = $(fieldNode).find('#myField_' + option['value']); @@ -42,4 +49,11 @@ describe('CheckboxField', function(){ fieldNode = ReactDOM.findDOMNode(field); expect($(fieldNode).find('label').text()).toContain('foobar'); }); + + it("updates it's value when a box is checked", function(){ + var $input = $(fieldNode).find('input').first(); + var input = $input[0]; + TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); + expect(field.value()).toContain($input.val()); + }); }); diff --git a/spec/javascripts/components/password_field_spec.js.jsx b/spec/javascripts/components/password_field_spec.js.jsx index ecad2423..8e337cea 100644 --- a/spec/javascripts/components/password_field_spec.js.jsx +++ b/spec/javascripts/components/password_field_spec.js.jsx @@ -25,8 +25,7 @@ describe('PasswordField', function(){ }); it("updates it's value when text is entered", function(){ - $input.val('foo'); - TestUtils.Simulate.keyUp(input); + TestUtils.Simulate.change(input, {target: {value: 'foo'}}); expect(field.value()).toEqual('foo'); }); }); diff --git a/spec/javascripts/components/radio_field_spec.js.jsx b/spec/javascripts/components/radio_field_spec.js.jsx index 43b16561..203d7d7a 100644 --- a/spec/javascripts/components/radio_field_spec.js.jsx +++ b/spec/javascripts/components/radio_field_spec.js.jsx @@ -42,4 +42,11 @@ describe('RadioField', function(){ fieldNode = ReactDOM.findDOMNode(field); expect($(fieldNode).find('label').text()).toContain('foobar'); }); + + it("updates it's value when radio is selected", function(){ + var $input = $(fieldNode).find('input').first(); + var input = $input[0]; + TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); + expect(field.value()).toContain($input.val()); + }); }); diff --git a/spec/javascripts/components/select_field_spec.js.jsx b/spec/javascripts/components/select_field_spec.js.jsx index f6e6a395..d8c1ee5e 100644 --- a/spec/javascripts/components/select_field_spec.js.jsx +++ b/spec/javascripts/components/select_field_spec.js.jsx @@ -1,5 +1,5 @@ describe('SelectField', function(){ - var options; + var options, field, fieldNode, select; beforeEach(function(){ options = [ {'value':'one', 'label':'One'}, @@ -10,6 +10,7 @@ describe('SelectField', function(){ ); fieldNode = ReactDOM.findDOMNode(field); + select = field.refs.input; }); it("has a label", function(){ @@ -42,4 +43,9 @@ describe('SelectField', function(){ fieldNode = ReactDOM.findDOMNode(field); expect($(fieldNode).find('option').text()).toEqual('foobar'); }); + + it("updates it's value when a selection occurs", function(){ + TestUtils.Simulate.change(select, {'target': {'value': 'two'}}); + expect(field.value()).toContain('two'); + }); }); diff --git a/spec/javascripts/components/text_field_spec.js.jsx b/spec/javascripts/components/text_field_spec.js.jsx index 97f35762..f85fd73f 100644 --- a/spec/javascripts/components/text_field_spec.js.jsx +++ b/spec/javascripts/components/text_field_spec.js.jsx @@ -25,8 +25,7 @@ describe('TextField', function(){ }); it("updates it's value when text is entered", function(){ - $input.val('foo'); - TestUtils.Simulate.keyUp(input); + TestUtils.Simulate.change(input, {target: {value: 'foo'}}); expect(field.value()).toEqual('foo'); }); }); From 244c7aed673be6838b5e63493c1b179cba322132 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sun, 31 Jul 2016 16:45:34 -0500 Subject: [PATCH 11/25] Fields can have initial values set --- .../components/checkbox_field.es6.jsx | 4 +-- .../components/radio_field.es6.jsx | 4 +-- .../components/select_field.es6.jsx | 6 ++-- .../javascripts/components/text_field.es6.jsx | 4 +-- .../components/checkbox_field_spec.js.jsx | 29 +++++++++++++++++++ .../components/password_field_spec.js.jsx | 15 ++++++++++ .../components/radio_field_spec.js.jsx | 27 +++++++++++++++++ .../components/select_field_spec.js.jsx | 28 +++++++++++++++++- .../components/text_field_spec.js.jsx | 24 +++++++++++++++ 9 files changed, 131 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/components/checkbox_field.es6.jsx b/app/assets/javascripts/components/checkbox_field.es6.jsx index 39d07c0e..c0bc9467 100644 --- a/app/assets/javascripts/components/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/checkbox_field.es6.jsx @@ -2,7 +2,7 @@ class CheckboxField extends React.Component{ constructor(props) { super(props); - this.state = {value: []}; + this.state = {value: (props.value ? props.value.slice(0) : [])}; this.handleChange = this.handleChange.bind(this); } @@ -33,7 +33,7 @@ class CheckboxField extends React.Component{ optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return }); } diff --git a/app/assets/javascripts/components/radio_field.es6.jsx b/app/assets/javascripts/components/radio_field.es6.jsx index c1745864..6e599103 100644 --- a/app/assets/javascripts/components/radio_field.es6.jsx +++ b/app/assets/javascripts/components/radio_field.es6.jsx @@ -2,7 +2,7 @@ class RadioField extends React.Component { constructor(props) { super(props); - this.state = {value: null}; + this.state = {value: (props.value || null)}; this.handleChange = this.handleChange.bind(this); } @@ -21,7 +21,7 @@ class RadioField extends React.Component { optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return }); } diff --git a/app/assets/javascripts/components/select_field.es6.jsx b/app/assets/javascripts/components/select_field.es6.jsx index 8c9881b4..23a8945d 100644 --- a/app/assets/javascripts/components/select_field.es6.jsx +++ b/app/assets/javascripts/components/select_field.es6.jsx @@ -2,7 +2,7 @@ class SelectField extends React.Component { constructor(props) { super(props); - this.state = {value: null}; + this.state = {value: (props.value || null)}; this.handleChange = this.handleChange.bind(this); } @@ -23,10 +23,10 @@ class SelectField extends React.Component { var self = this; return ( - { this.props.options.map(function(option){ - return + return }) } diff --git a/app/assets/javascripts/components/text_field.es6.jsx b/app/assets/javascripts/components/text_field.es6.jsx index 8f52823c..10db42e8 100644 --- a/app/assets/javascripts/components/text_field.es6.jsx +++ b/app/assets/javascripts/components/text_field.es6.jsx @@ -2,7 +2,7 @@ class TextField extends React.Component{ constructor(props) { super(props); - this.state = {value: null}; + this.state = {value: (props.value || null)} this.handleChange = this.handleChange.bind(this); } @@ -17,7 +17,7 @@ class TextField extends React.Component{ render(){ return ( - + ); } diff --git a/spec/javascripts/components/checkbox_field_spec.js.jsx b/spec/javascripts/components/checkbox_field_spec.js.jsx index ef04a1d8..80a0b96a 100644 --- a/spec/javascripts/components/checkbox_field_spec.js.jsx +++ b/spec/javascripts/components/checkbox_field_spec.js.jsx @@ -56,4 +56,33 @@ describe('CheckboxField', function(){ TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); expect(field.value()).toContain($input.val()); }); + + describe('with a provided value', function(){ + var checked_values = ['one', 'two'] + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it("sets it's value", function(){ + expect(field.value()).toEqual(checked_values); + }); + + it('sets the appropriate inputs as checked', function(){ + var $checked = $(fieldNode).find('input:checked'); + expect($checked.length).toEqual(checked_values.length); + checked_values.forEach(function(checked_value){ + expect($checked.filter('[value="' + checked_value+'"]').length).toEqual(1); + }); + }); + + it("can have it's value change", function(){ + var $input = $(fieldNode).find('input[value="' + checked_values[0] + '"]').first(); + var input = $input[0]; + TestUtils.Simulate.change(input, {target: {checked: false, value: $input.val()}}); + expect(field.value()).toEqual(checked_values.slice(1)); + }); + }); }); diff --git a/spec/javascripts/components/password_field_spec.js.jsx b/spec/javascripts/components/password_field_spec.js.jsx index 8e337cea..a823a67b 100644 --- a/spec/javascripts/components/password_field_spec.js.jsx +++ b/spec/javascripts/components/password_field_spec.js.jsx @@ -28,4 +28,19 @@ describe('PasswordField', function(){ TestUtils.Simulate.change(input, {target: {value: 'foo'}}); expect(field.value()).toEqual('foo'); }); + + describe('with a provided value', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + input = field.refs.input; + $input = $(input); + }); + + it("does not set it's value", function(){ + expect(field.value()).toEqual(null); + }); + }); }); diff --git a/spec/javascripts/components/radio_field_spec.js.jsx b/spec/javascripts/components/radio_field_spec.js.jsx index 203d7d7a..6ff6024b 100644 --- a/spec/javascripts/components/radio_field_spec.js.jsx +++ b/spec/javascripts/components/radio_field_spec.js.jsx @@ -49,4 +49,31 @@ describe('RadioField', function(){ TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); expect(field.value()).toContain($input.val()); }); + + describe('with a provided value', function(){ + var checked_value = 'one' + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it("sets it's value", function(){ + expect(field.value()).toEqual(checked_value); + }); + + it('sets the appropriate input as checked', function(){ + var $checked = $(fieldNode).find('input:checked'); + expect($checked.length).toEqual(1); + expect($checked.val()).toEqual(checked_value); + }); + + it("can have it's value change", function(){ + var $input = $(fieldNode).find('input[value="three"]').first(); + var input = $input[0]; + TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); + expect(field.value()).toEqual('three'); + }); + }); }); diff --git a/spec/javascripts/components/select_field_spec.js.jsx b/spec/javascripts/components/select_field_spec.js.jsx index d8c1ee5e..cf652100 100644 --- a/spec/javascripts/components/select_field_spec.js.jsx +++ b/spec/javascripts/components/select_field_spec.js.jsx @@ -7,7 +7,7 @@ describe('SelectField', function(){ {'value':'three', 'label':'III'} ] field = TestUtils.renderIntoDocument( - + ); fieldNode = ReactDOM.findDOMNode(field); select = field.refs.input; @@ -48,4 +48,30 @@ describe('SelectField', function(){ TestUtils.Simulate.change(select, {'target': {'value': 'two'}}); expect(field.value()).toContain('two'); }); + + describe('with a provided value', function(){ + var selected_value = 'two'; + var $select; + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + select = field.refs.input; + $select = $(select); + }); + + it("sets it's value", function(){ + expect(field.value()).toEqual(selected_value); + }); + + it('sets the value of the select field', function(){ + expect($select.find(':selected').val()).toEqual(selected_value); + }); + + it("can have it's value change", function(){ + TestUtils.Simulate.change(select, {'target': {'value': 'two'}}); + expect(field.value()).toContain('two'); + }); + }); }); diff --git a/spec/javascripts/components/text_field_spec.js.jsx b/spec/javascripts/components/text_field_spec.js.jsx index f85fd73f..fb4f823e 100644 --- a/spec/javascripts/components/text_field_spec.js.jsx +++ b/spec/javascripts/components/text_field_spec.js.jsx @@ -28,4 +28,28 @@ describe('TextField', function(){ TestUtils.Simulate.change(input, {target: {value: 'foo'}}); expect(field.value()).toEqual('foo'); }); + + describe('with a provided value', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + input = field.refs.input; + $input = $(input); + }); + + it("sets it's value", function(){ + expect(field.value()).toEqual('Something'); + }); + + it('sets the value of the input field', function(){ + expect($input.val()).toEqual('Something'); + }); + + it("can have it's value change", function(){ + TestUtils.Simulate.change(input, {target: {value: 'foo'}}); + expect(field.value()).toEqual('foo'); + }); + }); }); From fd3b154687341f6f9f795471e2c33b8a84fbcfe3 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sun, 31 Jul 2016 20:18:34 -0500 Subject: [PATCH 12/25] Fields can display errors --- .../components/checkbox_field.es6.jsx | 5 +++-- .../components/labeled_field.es6.jsx | 18 +++++++++++++-- .../components/password_field.es6.jsx | 5 +++-- .../components/radio_field.es6.jsx | 5 +++-- .../components/select_field.es6.jsx | 5 +++-- .../javascripts/components/text_field.es6.jsx | 5 +++-- .../components/checkbox_field_spec.js.jsx | 15 +++++++++++++ .../components/labeled_field_spec.js.jsx | 22 ++++++++++++++++++- .../components/password_field_spec.js.jsx | 15 +++++++++++++ .../components/radio_field_spec.js.jsx | 15 +++++++++++++ .../components/select_field_spec.js.jsx | 15 +++++++++++++ .../components/text_field_spec.js.jsx | 15 +++++++++++++ 12 files changed, 127 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/components/checkbox_field.es6.jsx b/app/assets/javascripts/components/checkbox_field.es6.jsx index c0bc9467..accb68ad 100644 --- a/app/assets/javascripts/components/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/checkbox_field.es6.jsx @@ -39,7 +39,7 @@ class CheckboxField extends React.Component{ render(){ return ( - + {this.optionsMarkup()} ); @@ -51,5 +51,6 @@ CheckboxField.propTypes = { label: React.PropTypes.string, required: React.PropTypes.bool, private: React.PropTypes.bool, - options: React.PropTypes.array + options: React.PropTypes.array, + errors: React.PropTypes.array }; diff --git a/app/assets/javascripts/components/labeled_field.es6.jsx b/app/assets/javascripts/components/labeled_field.es6.jsx index 0b567155..e28afaac 100644 --- a/app/assets/javascripts/components/labeled_field.es6.jsx +++ b/app/assets/javascripts/components/labeled_field.es6.jsx @@ -17,10 +17,23 @@ class LabeledField extends React.Component { return } + errorsMarkup(){ + if (Array.isArray(this.props.errors)){ + return ( +
      + {this.props.errors.map(function(error){ + return
    • {error}
      • + })} +
    + ); + } + } + render () { return ( -
    +
    {this.labelMarkup()} + {this.errorsMarkup()} {this.props.children}
    ); @@ -31,5 +44,6 @@ LabeledField.propTypes = { name: React.PropTypes.string, label: React.PropTypes.string, required: React.PropTypes.bool, - private: React.PropTypes.bool + private: React.PropTypes.bool, + errors: React.PropTypes.array }; diff --git a/app/assets/javascripts/components/password_field.es6.jsx b/app/assets/javascripts/components/password_field.es6.jsx index 649d0947..2be6c445 100644 --- a/app/assets/javascripts/components/password_field.es6.jsx +++ b/app/assets/javascripts/components/password_field.es6.jsx @@ -16,7 +16,7 @@ class PasswordField extends React.Component{ render(){ return ( - + ); @@ -27,5 +27,6 @@ PasswordField.propTypes = { name: React.PropTypes.string, label: React.PropTypes.string, required: React.PropTypes.bool, - private: React.PropTypes.bool + private: React.PropTypes.bool, + errors: React.PropTypes.array }; diff --git a/app/assets/javascripts/components/radio_field.es6.jsx b/app/assets/javascripts/components/radio_field.es6.jsx index 6e599103..94151064 100644 --- a/app/assets/javascripts/components/radio_field.es6.jsx +++ b/app/assets/javascripts/components/radio_field.es6.jsx @@ -27,7 +27,7 @@ class RadioField extends React.Component { render(){ return( - + {this.optionsMarkup()} ); @@ -39,5 +39,6 @@ RadioField.propTypes = { label: React.PropTypes.string, required: React.PropTypes.bool, private: React.PropTypes.bool, - options: React.PropTypes.array + options: React.PropTypes.array, + errors: React.PropTypes.array }; diff --git a/app/assets/javascripts/components/select_field.es6.jsx b/app/assets/javascripts/components/select_field.es6.jsx index 23a8945d..dddc27f1 100644 --- a/app/assets/javascripts/components/select_field.es6.jsx +++ b/app/assets/javascripts/components/select_field.es6.jsx @@ -22,7 +22,7 @@ class SelectField extends React.Component { render(){ var self = this; return ( - + ); @@ -27,5 +27,6 @@ TextField.propTypes = { name: React.PropTypes.string, label: React.PropTypes.string, required: React.PropTypes.bool, - private: React.PropTypes.bool + private: React.PropTypes.bool, + errors: React.PropTypes.array }; diff --git a/spec/javascripts/components/checkbox_field_spec.js.jsx b/spec/javascripts/components/checkbox_field_spec.js.jsx index 80a0b96a..3d7196a3 100644 --- a/spec/javascripts/components/checkbox_field_spec.js.jsx +++ b/spec/javascripts/components/checkbox_field_spec.js.jsx @@ -85,4 +85,19 @@ describe('CheckboxField', function(){ expect(field.value()).toEqual(checked_values.slice(1)); }); }); + + describe('with errors', function(){ + var errors; + beforeEach(function(){ + errors = ['error messages']; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('prints the errors', function(){ + expect($(fieldNode).text()).toContain('error messages'); + }); + }); }); diff --git a/spec/javascripts/components/labeled_field_spec.js.jsx b/spec/javascripts/components/labeled_field_spec.js.jsx index 88db3dae..baacb828 100644 --- a/spec/javascripts/components/labeled_field_spec.js.jsx +++ b/spec/javascripts/components/labeled_field_spec.js.jsx @@ -54,5 +54,25 @@ describe('LabeledField', function(){ var input = $(fieldNode).find('input'); expect(input.attr('id')).toEqual('myInput'); }); - }) + }); + + describe('with errors', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('adds an error class', function(){ + expect($(fieldNode).filter('.error').length).toEqual(1); + }); + + it('prints out the provided errors', function(){ + expect($(fieldNode).text()).toContain('error message'); + expect($(fieldNode).text()).toContain('another message'); + }); + }); }); diff --git a/spec/javascripts/components/password_field_spec.js.jsx b/spec/javascripts/components/password_field_spec.js.jsx index a823a67b..370c397f 100644 --- a/spec/javascripts/components/password_field_spec.js.jsx +++ b/spec/javascripts/components/password_field_spec.js.jsx @@ -43,4 +43,19 @@ describe('PasswordField', function(){ expect(field.value()).toEqual(null); }); }); + + describe('with errors', function(){ + var errors; + beforeEach(function(){ + errors = ['error messages']; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('prints the errors', function(){ + expect($(fieldNode).text()).toContain('error messages'); + }); + }); }); diff --git a/spec/javascripts/components/radio_field_spec.js.jsx b/spec/javascripts/components/radio_field_spec.js.jsx index 6ff6024b..e6efc302 100644 --- a/spec/javascripts/components/radio_field_spec.js.jsx +++ b/spec/javascripts/components/radio_field_spec.js.jsx @@ -76,4 +76,19 @@ describe('RadioField', function(){ expect(field.value()).toEqual('three'); }); }); + + describe('with errors', function(){ + var errors; + beforeEach(function(){ + errors = ['error messages']; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('prints the errors', function(){ + expect($(fieldNode).text()).toContain('error messages'); + }); + }); }); diff --git a/spec/javascripts/components/select_field_spec.js.jsx b/spec/javascripts/components/select_field_spec.js.jsx index cf652100..b7064638 100644 --- a/spec/javascripts/components/select_field_spec.js.jsx +++ b/spec/javascripts/components/select_field_spec.js.jsx @@ -74,4 +74,19 @@ describe('SelectField', function(){ expect(field.value()).toContain('two'); }); }); + + describe('with errors', function(){ + var errors; + beforeEach(function(){ + errors = ['error messages']; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('prints the errors', function(){ + expect($(fieldNode).text()).toContain('error messages'); + }); + }); }); diff --git a/spec/javascripts/components/text_field_spec.js.jsx b/spec/javascripts/components/text_field_spec.js.jsx index fb4f823e..55a6c4f1 100644 --- a/spec/javascripts/components/text_field_spec.js.jsx +++ b/spec/javascripts/components/text_field_spec.js.jsx @@ -52,4 +52,19 @@ describe('TextField', function(){ expect(field.value()).toEqual('foo'); }); }); + + describe('with errors', function(){ + var errors; + beforeEach(function(){ + errors = ['error messages']; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + }); + + it('prints the errors', function(){ + expect($(fieldNode).text()).toContain('error messages'); + }); + }); }); From d60801817246ecaeb0fd6234c089fbfb93a8a261 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sun, 31 Jul 2016 21:02:20 -0500 Subject: [PATCH 13/25] Starting the Edit Profile view in React Readding connection pool dependency --- Gemfile.lock | 1 + .../{ => fields}/checkbox_field.es6.jsx | 0 .../{ => fields}/labeled_field.es6.jsx | 0 .../{ => fields}/password_field.es6.jsx | 0 .../{ => fields}/radio_field.es6.jsx | 0 .../{ => fields}/select_field.es6.jsx | 0 .../{ => fields}/text_field.es6.jsx | 0 .../components/views/edit_profile.es6.jsx | 12 ++++++ .../views/shipping_information.es6.jsx | 37 +++++++++++++++++++ 9 files changed, 50 insertions(+) rename app/assets/javascripts/components/{ => fields}/checkbox_field.es6.jsx (100%) rename app/assets/javascripts/components/{ => fields}/labeled_field.es6.jsx (100%) rename app/assets/javascripts/components/{ => fields}/password_field.es6.jsx (100%) rename app/assets/javascripts/components/{ => fields}/radio_field.es6.jsx (100%) rename app/assets/javascripts/components/{ => fields}/select_field.es6.jsx (100%) rename app/assets/javascripts/components/{ => fields}/text_field.es6.jsx (100%) create mode 100644 app/assets/javascripts/components/views/edit_profile.es6.jsx create mode 100644 app/assets/javascripts/components/views/shipping_information.es6.jsx diff --git a/Gemfile.lock b/Gemfile.lock index da124422..47ee089e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -95,6 +95,7 @@ GEM execjs coffee-script-source (1.11.1) concurrent-ruby (1.0.2) + connection_pool (2.2.0) database_cleaner (1.5.3) devise (4.2.0) bcrypt (~> 3.0) diff --git a/app/assets/javascripts/components/checkbox_field.es6.jsx b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/checkbox_field.es6.jsx rename to app/assets/javascripts/components/fields/checkbox_field.es6.jsx diff --git a/app/assets/javascripts/components/labeled_field.es6.jsx b/app/assets/javascripts/components/fields/labeled_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/labeled_field.es6.jsx rename to app/assets/javascripts/components/fields/labeled_field.es6.jsx diff --git a/app/assets/javascripts/components/password_field.es6.jsx b/app/assets/javascripts/components/fields/password_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/password_field.es6.jsx rename to app/assets/javascripts/components/fields/password_field.es6.jsx diff --git a/app/assets/javascripts/components/radio_field.es6.jsx b/app/assets/javascripts/components/fields/radio_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/radio_field.es6.jsx rename to app/assets/javascripts/components/fields/radio_field.es6.jsx diff --git a/app/assets/javascripts/components/select_field.es6.jsx b/app/assets/javascripts/components/fields/select_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/select_field.es6.jsx rename to app/assets/javascripts/components/fields/select_field.es6.jsx diff --git a/app/assets/javascripts/components/text_field.es6.jsx b/app/assets/javascripts/components/fields/text_field.es6.jsx similarity index 100% rename from app/assets/javascripts/components/text_field.es6.jsx rename to app/assets/javascripts/components/fields/text_field.es6.jsx diff --git a/app/assets/javascripts/components/views/edit_profile.es6.jsx b/app/assets/javascripts/components/views/edit_profile.es6.jsx new file mode 100644 index 00000000..fb714ca8 --- /dev/null +++ b/app/assets/javascripts/components/views/edit_profile.es6.jsx @@ -0,0 +1,12 @@ +class EditProfile extends React.Component{ + + render(){ + return ( +
    + + + +
    + ); + } +} diff --git a/app/assets/javascripts/components/views/shipping_information.es6.jsx b/app/assets/javascripts/components/views/shipping_information.es6.jsx new file mode 100644 index 00000000..48bb2791 --- /dev/null +++ b/app/assets/javascripts/components/views/shipping_information.es6.jsx @@ -0,0 +1,37 @@ +class ShippingInformation extends React.Component{ + + cityOptions: [ + {value: 'Minneapolis'} + ]; + + stateOptions: [ + {value: 'MN', label: 'Minnesota'} + ]; + + zipOptions: [ + {value: '55401'}, {value: '55402'}, {value: '55403'}, {value: '55404'}, {value: '55405'}, {value: '55406'}, {value: '55407'}, {value: '55408'}, {value: '55409'}, {value: '55410'}, + {value: '55411'}, {value: '55412'}, {value: '55413'}, {value: '55414'}, {value: '55415'}, {value: '55416'}, {value: '55417'}, {value: '55418'}, {value: '55419'}, {value: '55420'}, + {value: '55421'}, {value: '55422'}, {value: '55423'}, {value: '55424'}, {value: '55425'}, {value: '55426'}, {value: '55427'}, {value: '55428'}, {value: '55429'}, {value: '55430'}, + {value: '55431'}, {value: '55432'}, {value: '55433'}, {value: '55434'}, {value: '55435'}, {value: '55436'}, {value: '55437'}, {value: '55438'}, {value: '55439'}, {value: '55440'}, + {value: '55441'}, {value: '55442'}, {value: '55443'}, {value: '55444'}, {value: '55445'}, {value: '55446'}, {value: '55447'}, {value: '55448'}, {value: '55449'}, {value: '55450'}, + {value: '55451'}, {value: '55452'}, {value: '55453'}, {value: '55454'}, {value: '55455'}, {value: '55456'}, {value: '55457'}, {value: '55458'}, {value: '55459'}, {value: '55460'}, + {value: '55461'}, {value: '55462'}, {value: '55463'}, {value: '55464'}, {value: '55465'}, {value: '55466'}, {value: '55467'}, {value: '55468'}, {value: '55469'}, {value: '55470'}, + {value: '55471'}, {value: '55472'}, {value: '55473'}, {value: '55474'}, {value: '55475'}, {value: '55476'}, {value: '55477'}, {value: '55478'}, {value: '55479'}, {value: '55480'}, + {value: '55481'}, {value: '55482'}, {value: '55483'}, {value: '55484'}, {value: '55485'}, {value: '55486'}, {value: '55487'}, {value: '55488'} + ] + + render(){ + return ( +
    +

    Shipping Information

    + + + + + + + +
    + ); + } +} From 3b9b3225c650338918edef71de7c8cadd60fc26d Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 6 Aug 2016 10:15:58 -0500 Subject: [PATCH 14/25] Working shipping options --- .../views/shipping_information.es6.jsx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/app/assets/javascripts/components/views/shipping_information.es6.jsx b/app/assets/javascripts/components/views/shipping_information.es6.jsx index 48bb2791..69a06258 100644 --- a/app/assets/javascripts/components/views/shipping_information.es6.jsx +++ b/app/assets/javascripts/components/views/shipping_information.es6.jsx @@ -1,24 +1,16 @@ class ShippingInformation extends React.Component{ - cityOptions: [ - {value: 'Minneapolis'} - ]; + cityOptions(){ + return this.constructor.cityOptions; + } - stateOptions: [ - {value: 'MN', label: 'Minnesota'} - ]; + stateOptions(){ + return this.constructor.stateOptions; + } - zipOptions: [ - {value: '55401'}, {value: '55402'}, {value: '55403'}, {value: '55404'}, {value: '55405'}, {value: '55406'}, {value: '55407'}, {value: '55408'}, {value: '55409'}, {value: '55410'}, - {value: '55411'}, {value: '55412'}, {value: '55413'}, {value: '55414'}, {value: '55415'}, {value: '55416'}, {value: '55417'}, {value: '55418'}, {value: '55419'}, {value: '55420'}, - {value: '55421'}, {value: '55422'}, {value: '55423'}, {value: '55424'}, {value: '55425'}, {value: '55426'}, {value: '55427'}, {value: '55428'}, {value: '55429'}, {value: '55430'}, - {value: '55431'}, {value: '55432'}, {value: '55433'}, {value: '55434'}, {value: '55435'}, {value: '55436'}, {value: '55437'}, {value: '55438'}, {value: '55439'}, {value: '55440'}, - {value: '55441'}, {value: '55442'}, {value: '55443'}, {value: '55444'}, {value: '55445'}, {value: '55446'}, {value: '55447'}, {value: '55448'}, {value: '55449'}, {value: '55450'}, - {value: '55451'}, {value: '55452'}, {value: '55453'}, {value: '55454'}, {value: '55455'}, {value: '55456'}, {value: '55457'}, {value: '55458'}, {value: '55459'}, {value: '55460'}, - {value: '55461'}, {value: '55462'}, {value: '55463'}, {value: '55464'}, {value: '55465'}, {value: '55466'}, {value: '55467'}, {value: '55468'}, {value: '55469'}, {value: '55470'}, - {value: '55471'}, {value: '55472'}, {value: '55473'}, {value: '55474'}, {value: '55475'}, {value: '55476'}, {value: '55477'}, {value: '55478'}, {value: '55479'}, {value: '55480'}, - {value: '55481'}, {value: '55482'}, {value: '55483'}, {value: '55484'}, {value: '55485'}, {value: '55486'}, {value: '55487'}, {value: '55488'} - ] + zipOptions(){ + return this.constructor.zipOptions; + } render(){ return ( @@ -28,10 +20,30 @@ class ShippingInformation extends React.Component{ - - - + + +
    ); } } + +ShippingInformation.cityOptions = [ + {value: 'Minneapolis'} +]; + +ShippingInformation.stateOptions = [ + {value: 'MN', label: 'Minnesota'} +]; + +ShippingInformation.zipOptions = [ + {value: '55401'}, {value: '55402'}, {value: '55403'}, {value: '55404'}, {value: '55405'}, {value: '55406'}, {value: '55407'}, {value: '55408'}, {value: '55409'}, {value: '55410'}, + {value: '55411'}, {value: '55412'}, {value: '55413'}, {value: '55414'}, {value: '55415'}, {value: '55416'}, {value: '55417'}, {value: '55418'}, {value: '55419'}, {value: '55420'}, + {value: '55421'}, {value: '55422'}, {value: '55423'}, {value: '55424'}, {value: '55425'}, {value: '55426'}, {value: '55427'}, {value: '55428'}, {value: '55429'}, {value: '55430'}, + {value: '55431'}, {value: '55432'}, {value: '55433'}, {value: '55434'}, {value: '55435'}, {value: '55436'}, {value: '55437'}, {value: '55438'}, {value: '55439'}, {value: '55440'}, + {value: '55441'}, {value: '55442'}, {value: '55443'}, {value: '55444'}, {value: '55445'}, {value: '55446'}, {value: '55447'}, {value: '55448'}, {value: '55449'}, {value: '55450'}, + {value: '55451'}, {value: '55452'}, {value: '55453'}, {value: '55454'}, {value: '55455'}, {value: '55456'}, {value: '55457'}, {value: '55458'}, {value: '55459'}, {value: '55460'}, + {value: '55461'}, {value: '55462'}, {value: '55463'}, {value: '55464'}, {value: '55465'}, {value: '55466'}, {value: '55467'}, {value: '55468'}, {value: '55469'}, {value: '55470'}, + {value: '55471'}, {value: '55472'}, {value: '55473'}, {value: '55474'}, {value: '55475'}, {value: '55476'}, {value: '55477'}, {value: '55478'}, {value: '55479'}, {value: '55480'}, + {value: '55481'}, {value: '55482'}, {value: '55483'}, {value: '55484'}, {value: '55485'}, {value: '55486'}, {value: '55487'}, {value: '55488'} +]; From e17776d7300fc9cdd836b86bb246220045dc198b Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sun, 7 Aug 2016 16:55:58 -0500 Subject: [PATCH 15/25] Created Survey form partial DRYed up form partials Added a couple of missing translations Fields pass on required and private attributes A few display tweaks --- .../components/fields/checkbox_field.es6.jsx | 11 +++- .../components/fields/password_field.es6.jsx | 2 +- .../components/fields/radio_field.es6.jsx | 8 ++- .../components/fields/select_field.es6.jsx | 2 +- .../components/fields/text_field.es6.jsx | 2 +- .../components/views/edit_profile.es6.jsx | 5 +- .../views/partials/form_partial.es6.jsx | 11 ++++ .../shipping_information.es6.jsx | 31 +++------ .../components/views/partials/survey.es6.jsx | 65 +++++++++++++++++++ app/assets/javascripts/utils.es6.js | 5 ++ app/assets/stylesheets/screen.css | 1 + config/locales/de.yml | 3 + config/locales/en.yml | 3 + config/locales/es.yml | 3 + config/locales/fr.yml | 3 + config/locales/pt.yml | 3 + .../{ => fields}/checkbox_field_spec.js.jsx | 0 .../{ => fields}/labeled_field_spec.js.jsx | 0 .../{ => fields}/password_field_spec.js.jsx | 0 .../{ => fields}/radio_field_spec.js.jsx | 0 .../{ => fields}/select_field_spec.js.jsx | 0 .../{ => fields}/text_field_spec.js.jsx | 0 .../partials/shipping_information_spec.js.jsx | 43 ++++++++++++ .../views/partials/survey_spec.js.jsx | 52 +++++++++++++++ spec/javascripts/helpers/shared_examples.js | 36 ++++++++++ 25 files changed, 258 insertions(+), 31 deletions(-) create mode 100644 app/assets/javascripts/components/views/partials/form_partial.es6.jsx rename app/assets/javascripts/components/views/{ => partials}/shipping_information.es6.jsx (57%) create mode 100644 app/assets/javascripts/components/views/partials/survey.es6.jsx create mode 100644 app/assets/javascripts/utils.es6.js rename spec/javascripts/components/{ => fields}/checkbox_field_spec.js.jsx (100%) rename spec/javascripts/components/{ => fields}/labeled_field_spec.js.jsx (100%) rename spec/javascripts/components/{ => fields}/password_field_spec.js.jsx (100%) rename spec/javascripts/components/{ => fields}/radio_field_spec.js.jsx (100%) rename spec/javascripts/components/{ => fields}/select_field_spec.js.jsx (100%) rename spec/javascripts/components/{ => fields}/text_field_spec.js.jsx (100%) create mode 100644 spec/javascripts/components/views/partials/shipping_information_spec.js.jsx create mode 100644 spec/javascripts/components/views/partials/survey_spec.js.jsx create mode 100644 spec/javascripts/helpers/shared_examples.js diff --git a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx index accb68ad..647ca1cd 100644 --- a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx @@ -33,13 +33,20 @@ class CheckboxField extends React.Component{ optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return ( +
    + +
    + ); }); } render(){ return ( - + {this.optionsMarkup()} ); diff --git a/app/assets/javascripts/components/fields/password_field.es6.jsx b/app/assets/javascripts/components/fields/password_field.es6.jsx index 2be6c445..4ec2c393 100644 --- a/app/assets/javascripts/components/fields/password_field.es6.jsx +++ b/app/assets/javascripts/components/fields/password_field.es6.jsx @@ -16,7 +16,7 @@ class PasswordField extends React.Component{ render(){ return ( - + ); diff --git a/app/assets/javascripts/components/fields/radio_field.es6.jsx b/app/assets/javascripts/components/fields/radio_field.es6.jsx index 94151064..393dcbe4 100644 --- a/app/assets/javascripts/components/fields/radio_field.es6.jsx +++ b/app/assets/javascripts/components/fields/radio_field.es6.jsx @@ -21,14 +21,16 @@ class RadioField extends React.Component { optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return }); } render(){ return( - - {this.optionsMarkup()} + +
    + {this.optionsMarkup()} +
    ); } diff --git a/app/assets/javascripts/components/fields/select_field.es6.jsx b/app/assets/javascripts/components/fields/select_field.es6.jsx index dddc27f1..786a1cbb 100644 --- a/app/assets/javascripts/components/fields/select_field.es6.jsx +++ b/app/assets/javascripts/components/fields/select_field.es6.jsx @@ -22,7 +22,7 @@ class SelectField extends React.Component { render(){ var self = this; return ( - + ); diff --git a/app/assets/javascripts/components/views/edit_profile.es6.jsx b/app/assets/javascripts/components/views/edit_profile.es6.jsx index fb714ca8..c0345053 100644 --- a/app/assets/javascripts/components/views/edit_profile.es6.jsx +++ b/app/assets/javascripts/components/views/edit_profile.es6.jsx @@ -2,11 +2,12 @@ class EditProfile extends React.Component{ render(){ return ( -
    +
    -
    + + ); } } diff --git a/app/assets/javascripts/components/views/partials/form_partial.es6.jsx b/app/assets/javascripts/components/views/partials/form_partial.es6.jsx new file mode 100644 index 00000000..db6307f6 --- /dev/null +++ b/app/assets/javascripts/components/views/partials/form_partial.es6.jsx @@ -0,0 +1,11 @@ +class FormPartial extends React.Component{ + value(){ + var value = {}; + $.each(this.refs, function(name, field){ + value[name] = field.value(); + }); + return value; + } +} + +window.FormPartial = FormPartial; diff --git a/app/assets/javascripts/components/views/shipping_information.es6.jsx b/app/assets/javascripts/components/views/partials/shipping_information.es6.jsx similarity index 57% rename from app/assets/javascripts/components/views/shipping_information.es6.jsx rename to app/assets/javascripts/components/views/partials/shipping_information.es6.jsx index 69a06258..875ab27d 100644 --- a/app/assets/javascripts/components/views/shipping_information.es6.jsx +++ b/app/assets/javascripts/components/views/partials/shipping_information.es6.jsx @@ -1,28 +1,17 @@ -class ShippingInformation extends React.Component{ - - cityOptions(){ - return this.constructor.cityOptions; - } - - stateOptions(){ - return this.constructor.stateOptions; - } - - zipOptions(){ - return this.constructor.zipOptions; - } - +class ShippingInformation extends FormPartial{ render(){ + var fetch = AdoptAUtils.fetch; + var klass = ShippingInformation; return (

    Shipping Information

    - - - - - - - + + + + + + +
    ); } diff --git a/app/assets/javascripts/components/views/partials/survey.es6.jsx b/app/assets/javascripts/components/views/partials/survey.es6.jsx new file mode 100644 index 00000000..af34ac4a --- /dev/null +++ b/app/assets/javascripts/components/views/partials/survey.es6.jsx @@ -0,0 +1,65 @@ +class Survey extends FormPartial{ + render(){ + var fetch = AdoptAUtils.fetch; + return ( +
    +

    Survey

    + + + + + + + + + + +
    + ); + } +} + +Survey.genderOptions = [ + {value: 'female', label: I18n.t('labels.female')}, + {value: 'male', label: I18n.t('labels.male')}, + {value: 'other', label: I18n.t('labels.other')} +]; + +Survey.ethnicityOptions = [ + {value: 'african-american', label: I18n.t('labels.african_american')}, + {value: 'asian-american', label: I18n.t('labels.asian_american_pacific_islander')}, + {value: 'caucasian', label: I18n.t('labels.caucasian')}, + {value: 'hispanic-latino', label: I18n.t('labels.hispanic_latino')}, + {value: 'native-american', label: I18n.t('labels.native_american')}, + {value: 'other', label: I18n.t('labels.other')} +]; + +Survey.heardOfAdoptATreeViaOptions = [ + {value: 'brew-a-better-forest', label: I18n.t('labels.brewing_a_better_forest')}, + {value: 'minneapolis-park-board', label: I18n.t('sponsors.board')}, + {value: 'tee4trees', label: I18n.t('labels.tees4trees')}, + {value: 'other', label: I18n.t('labels.other')} +]; + +Survey.rentOrOwnOptions = [ + {value: 'rent', label: I18n.t('labels.rent')}, + {value: 'own', label: I18n.t('labels.own')} +]; + +Survey.yesNoOptions = [ + {value: true , label: I18n.t('buttons.pos')}, + {value: false, label: I18n.t('buttons.neg')} +]; + +Survey.valueForestryWorkOptions = [ + {value: 10, label: '10 - ' + I18n.t('labels.strongly_agree')}, + {value: 9}, + {value: 8}, + {value: 7}, + {value: 6}, + {value: 5}, + {value: 4}, + {value: 3}, + {value: 2}, + {value: 1, label: '1 - ' + I18n.t('labels.strongly_disagree')} +]; diff --git a/app/assets/javascripts/utils.es6.js b/app/assets/javascripts/utils.es6.js new file mode 100644 index 00000000..3ead817d --- /dev/null +++ b/app/assets/javascripts/utils.es6.js @@ -0,0 +1,5 @@ +class AdoptAUtils{ + static fetch(obj, attr, fail_value = null){ + return (obj !== undefined && obj.hasOwnProperty(attr)) ? obj[attr] : fail_value; + } +} diff --git a/app/assets/stylesheets/screen.css b/app/assets/stylesheets/screen.css index dc2e9672..b6c2d296 100644 --- a/app/assets/stylesheets/screen.css +++ b/app/assets/stylesheets/screen.css @@ -184,6 +184,7 @@ img.lock { height: 9px; width: 7px; opacity: 0.8; + margin-left: 0.25em; filter: alpha(opacity=80); /* For IE8 and earlier */ } diff --git a/config/locales/de.yml b/config/locales/de.yml index ab9c79dc..481a0b45 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -49,6 +49,7 @@ de: city_state: "Stadt" hispanic_latino: "Spanisch / Latino" email: "E-Mail-Adresse" + ethnicity: "Ethnizität" female: "Weiblich" gender: "Geschlecht" male: "Männlich" @@ -66,6 +67,8 @@ de: remember_me: "Eingeloggt bleiben" sms_number: "Handy-Nummer" state: "Zustand" + strongly_agree: "Starke Zustimmung" + strongly_disagree: "Entschieden widersprechen" user_existing: "Ich habe mich bereits registriert" user_new: "Ich habe mich noch nicht registriert" voice_number: "Startseite Telefonnummer" diff --git a/config/locales/en.yml b/config/locales/en.yml index 14554452..cdcead63 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -53,6 +53,7 @@ en: city_state: "City" door_hanger: "Door hanger" email: "Email address" + ethnicity: "Ethnicity" female: "Female" gender: "Gender" heardOfAdoptATreeVia: "How did you find out about this program?" @@ -82,6 +83,8 @@ en: social_media: "Social media" sms_number: "Mobile phone number" state: "State" + strongly_agree: "Strongly Agree" + strongly_disagree: "Strongly Disagree" survey_heading: "Survey" tees4trees: "Tees4Trees" token_intake: "What is your promo code?" diff --git a/config/locales/es.yml b/config/locales/es.yml index a516eaf2..737a25cd 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -48,6 +48,7 @@ es: city: "Ciudad" city_state: "Ciudad" email: "Dirección de correo electrónico" + ethnicity: "Etnicidad" female: "Femenino" gender: "Género" hispanic_latino: "Hispano / Latino" @@ -66,6 +67,8 @@ es: remember_me: "Mantener el" sms_number: "Número de teléfono móvil" state: "Estado" + strongly_agree: "Totalmente de acuerdo" + strongly_disagree: "Muy en desacuerdo" user_existing: "Ya he firmado" user_new: "No se ha inscrito" voice_number: "Número de teléfono" diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 50b970b8..9dc4504c 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -48,6 +48,7 @@ fr: city: "Ville" city_state: "Ville" email: "Adresse e-mail" + ethnicity: "Origine ethnique" female: "Féminin" gender: "Sexe" hispanic_latino: "Hispanique / Latino" @@ -66,6 +67,8 @@ fr: remember_me: "Rester connecté" sms_number: "Numéro de téléphone portable" state: "Etat" + strongly_agree: "Tout à fait d'accord" + strongly_disagree: "Fortement en désaccord" user_existing: "J'ai déjà signé" user_new: "Je n'ai pas encore inscrits" voice_number: "Le numéro de téléphone Accueil" diff --git a/config/locales/pt.yml b/config/locales/pt.yml index 062b23a0..12ea66f5 100644 --- a/config/locales/pt.yml +++ b/config/locales/pt.yml @@ -48,6 +48,7 @@ pt: city: "Cidade" city_state: "Cidade" email: "Endereço de email" + ethnicity: "Etnia" female: "Feminino" gender: "Sexo" hispanic_latino: "Hispânico / Latino" @@ -66,6 +67,8 @@ pt: remember_me: "Fique assinado em" sms_number: "Número de telemóvel" state: "Estado" + strongly_agree: "Concordo plenamente" + strongly_disagree: "Discordo fortemente" user_existing: "Eu já se inscreveram" user_new: "Eu não se inscreveram ainda" voice_number: "Número de telefone residencial" diff --git a/spec/javascripts/components/checkbox_field_spec.js.jsx b/spec/javascripts/components/fields/checkbox_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/checkbox_field_spec.js.jsx rename to spec/javascripts/components/fields/checkbox_field_spec.js.jsx diff --git a/spec/javascripts/components/labeled_field_spec.js.jsx b/spec/javascripts/components/fields/labeled_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/labeled_field_spec.js.jsx rename to spec/javascripts/components/fields/labeled_field_spec.js.jsx diff --git a/spec/javascripts/components/password_field_spec.js.jsx b/spec/javascripts/components/fields/password_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/password_field_spec.js.jsx rename to spec/javascripts/components/fields/password_field_spec.js.jsx diff --git a/spec/javascripts/components/radio_field_spec.js.jsx b/spec/javascripts/components/fields/radio_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/radio_field_spec.js.jsx rename to spec/javascripts/components/fields/radio_field_spec.js.jsx diff --git a/spec/javascripts/components/select_field_spec.js.jsx b/spec/javascripts/components/fields/select_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/select_field_spec.js.jsx rename to spec/javascripts/components/fields/select_field_spec.js.jsx diff --git a/spec/javascripts/components/text_field_spec.js.jsx b/spec/javascripts/components/fields/text_field_spec.js.jsx similarity index 100% rename from spec/javascripts/components/text_field_spec.js.jsx rename to spec/javascripts/components/fields/text_field_spec.js.jsx diff --git a/spec/javascripts/components/views/partials/shipping_information_spec.js.jsx b/spec/javascripts/components/views/partials/shipping_information_spec.js.jsx new file mode 100644 index 00000000..5b3da969 --- /dev/null +++ b/spec/javascripts/components/views/partials/shipping_information_spec.js.jsx @@ -0,0 +1,43 @@ +describe('ShippingInformation', function(){ + var field, fieldNode, $field; + + var values = { + first_name: 'First', + last_name: 'Last', + address_1: '123 Street', + address_2: 'Suite Awesome', + city: 'Minneapolis', + state: 'Minnesota', + zip: '12345' + }; + + var errors = { + first_name: ['wrong'], + last_name: ['bad'], + address_1: ['incorrect'], + address_2: ['terrible'], + city: ['really?'], + state: ['broken'], + zip: ['stop'] + }; + + itBehavesLikeAFormPartial(ShippingInformation, values, errors); + + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Has shipping fields', function(){ + expect($field.find('input#first_name').length).toEqual(1); + expect($field.find('input#last_name').length).toEqual(1); + expect($field.find('input#address_1').length).toEqual(1); + expect($field.find('input#address_2').length).toEqual(1); + expect($field.find('select#city').length).toEqual(1); + expect($field.find('select#state').length).toEqual(1); + expect($field.find('select#zip').length).toEqual(1); + }); +}); diff --git a/spec/javascripts/components/views/partials/survey_spec.js.jsx b/spec/javascripts/components/views/partials/survey_spec.js.jsx new file mode 100644 index 00000000..08bb441a --- /dev/null +++ b/spec/javascripts/components/views/partials/survey_spec.js.jsx @@ -0,0 +1,52 @@ +describe('Suvey', function(){ + var field, fieldNode, $field; + + var values = { + awareness_code: '123', + yob: '1990', + gender: 'female', + ethnicity: ['human'], + heardOfAdoptATreeVia: ['people'], + yearsInMinneapolis: 50, + rentOrOwn: 'rent', + previousTreeWateringExperience: 3, + previousEnvironmentalActivities: 2, + valueForestryWork: 5 + }; + + var errors = { + awareness_code: ['123'], + yob: ['abc'], + gender: ['456'], + ethnicity: ['def'], + heardOfAdoptATreeVia: ['ghi'], + yearsInMinneapolis: ['789'], + rentOrOwn: ['jkl'], + previousTreeWateringExperience: ['mno'], + previousEnvironmentalActivities: ['pqr'], + valueForestryWork: ['stu'] + }; + + itBehavesLikeAFormPartial(Survey, values, errors); + + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Has survey fields', function(){ + expect($field.find('input#awareness_code').length).toEqual(1); + expect($field.find('input#yob').length).toEqual(1); + expect($field.find('input[name="gender"]').length).toBeGreaterThan(1); + expect($field.find('input[name="ethnicity[]"]').length).toBeGreaterThan(1); + expect($field.find('input[name="heardOfAdoptATreeVia[]"]').length).toBeGreaterThan(1); + expect($field.find('input#yearsInMinneapolis').length).toEqual(1); + expect($field.find('input[name="rentOrOwn"]').length).toBeGreaterThan(1); + expect($field.find('input[name="previousTreeWateringExperience"]').length).toBeGreaterThan(1); + expect($field.find('input[name="previousEnvironmentalActivities"]').length).toBeGreaterThan(1); + expect($field.find('input[name="valueForestryWork"]').length).toBeGreaterThan(1); + }); +}); diff --git a/spec/javascripts/helpers/shared_examples.js b/spec/javascripts/helpers/shared_examples.js new file mode 100644 index 00000000..a1171c4e --- /dev/null +++ b/spec/javascripts/helpers/shared_examples.js @@ -0,0 +1,36 @@ +function itBehavesLikeAFormPartial(view_component, values, errors){ + describe('With values', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument(React.createElement(view_component, {value: values})); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Applies values to fields', function(){ + $.each(values, function(key, value){ + expect(field.refs[key].value()).toEqual(value); + }); + }); + + it('Provides collected values', function(){ + var returned_values = field.value(); + $.each(values, function(key, value){ + expect(returned_values[key]).toEqual(value); + }); + }); + }); + + describe('With errors', function(){ + beforeEach(function(){ + field = TestUtils.renderIntoDocument(React.createElement(view_component, {errors: errors})); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Applies errors to fields', function(){ + $.each(errors, function(key, message){ + expect($field.find('.error:contains("'+ message +'")').length).toEqual(1, 'error message "' + message + '" could not be found'); + }); + }); + }); +} From b54c1a0c6ebfa99f7a2b4607d40e618dbf073178 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sun, 7 Aug 2016 20:42:39 -0500 Subject: [PATCH 16/25] Removing unneeded server side partials Rendering Edit Profile via React --- .../components/views/edit_profile.es6.jsx | 7 +++ app/views/sidebar/edit_profile.html.haml | 27 +---------- app/views/users/_awareness_code.html.haml | 6 --- app/views/users/_ethnicity.html.haml | 29 ------------ app/views/users/_gender.html.haml | 15 ------- .../users/_heardOfAdoptATreeVia.html.haml | 21 --------- ..._previousEnvironmentalActivities.html.haml | 12 ----- .../_previousTreeWateringExperience.html.haml | 12 ----- app/views/users/_rentOrOwn.html.haml | 12 ----- app/views/users/_user_address.html.haml | 30 ------------- app/views/users/_user_organization.html.haml | 6 --- app/views/users/_user_realnames.html.haml | 12 ----- app/views/users/_user_sms_number.html.haml | 6 --- app/views/users/_user_username.html.haml | 6 --- app/views/users/_user_voice_number.html.haml | 6 --- app/views/users/_valueForestryWork.html.haml | 45 ------------------- app/views/users/_yearsInMinneapolis.html.haml | 6 --- app/views/users/_yob.html.haml | 6 --- app/views/users/mailing_address.html.haml | 9 ---- app/views/users/survey.html.haml | 16 ------- 20 files changed, 8 insertions(+), 281 deletions(-) delete mode 100644 app/views/users/_awareness_code.html.haml delete mode 100644 app/views/users/_ethnicity.html.haml delete mode 100644 app/views/users/_gender.html.haml delete mode 100644 app/views/users/_heardOfAdoptATreeVia.html.haml delete mode 100644 app/views/users/_previousEnvironmentalActivities.html.haml delete mode 100644 app/views/users/_previousTreeWateringExperience.html.haml delete mode 100644 app/views/users/_rentOrOwn.html.haml delete mode 100644 app/views/users/_user_address.html.haml delete mode 100644 app/views/users/_user_organization.html.haml delete mode 100644 app/views/users/_user_realnames.html.haml delete mode 100644 app/views/users/_user_sms_number.html.haml delete mode 100644 app/views/users/_user_username.html.haml delete mode 100644 app/views/users/_user_voice_number.html.haml delete mode 100644 app/views/users/_valueForestryWork.html.haml delete mode 100644 app/views/users/_yearsInMinneapolis.html.haml delete mode 100644 app/views/users/_yob.html.haml delete mode 100644 app/views/users/mailing_address.html.haml delete mode 100644 app/views/users/survey.html.haml diff --git a/app/assets/javascripts/components/views/edit_profile.es6.jsx b/app/assets/javascripts/components/views/edit_profile.es6.jsx index c0345053..cdcb81f0 100644 --- a/app/assets/javascripts/components/views/edit_profile.es6.jsx +++ b/app/assets/javascripts/components/views/edit_profile.es6.jsx @@ -7,6 +7,13 @@ class EditProfile extends React.Component{ +

    Change Password

    + + +
    + + Back +
    ); } diff --git a/app/views/sidebar/edit_profile.html.haml b/app/views/sidebar/edit_profile.html.haml index 4e8dddc4..e08e01e6 100644 --- a/app/views/sidebar/edit_profile.html.haml +++ b/app/views/sidebar/edit_profile.html.haml @@ -1,29 +1,4 @@ -= form_for resource, :as => resource_name, :url => registration_path(resource_name), :html => {:id => "edit_form", :method => :put} do |f| - = f.hidden_field "id" - = render :partial => "user_email", locals: {f: f} - = render :partial => "user_username", locals: {f: f} - %h2 - = t("labels.shipping_info_heading") - = render :partial => "user_realnames", locals: {f: f} - = render :partial => "user_address", locals: {f: f} - %h2 - = t("labels.survey_heading") - = render :partial => "awareness_code", locals: {f: f, awareness_label: t('labels.tree_tag')} - = render :partial => "yob", locals: {f: f} - = render :partial => "gender", locals: {f: f} - = render :partial => "ethnicity", locals: {f: f} - = render :partial => "heardOfAdoptATreeVia", locals: {f: f} - = render :partial => "yearsInMinneapolis", locals: {f: f} - = render :partial => "rentOrOwn", locals: {f: f} - = render :partial => "previousTreeWateringExperience", locals: {f: f} - = render :partial => "previousEnvironmentalActivities", locals: {f: f} - = render :partial => "valueForestryWork", locals: {f: f} - = render :partial => "user_password", locals: {f: f} - = render :partial => "user_current_password", locals: {f: f} - %fieldset.form-actions - = f.submit t("buttons.update"), :class => "btn btn-primary" - %a{:href => root_path, :id => "back_link", :class => "btn"} - = t("buttons.back") += react_component 'EditProfile' :javascript $(function() { ReactRailsUJS.mountComponents(); diff --git a/app/views/users/_awareness_code.html.haml b/app/views/users/_awareness_code.html.haml deleted file mode 100644 index a5505dd8..00000000 --- a/app/views/users/_awareness_code.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "awareness_code", :id => "awareness_code_label"} - = awareness_label - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "awareness_code" diff --git a/app/views/users/_ethnicity.html.haml b/app/views/users/_ethnicity.html.haml deleted file mode 100644 index 28fcf85e..00000000 --- a/app/views/users/_ethnicity.html.haml +++ /dev/null @@ -1,29 +0,0 @@ -%fieldset.control-group - %label{:for => "ethnicity", :id => "ethnicity_label"} - = t("labels.ethnicity") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'african-american', '' - = t("labels.african_american") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'asian-american-pacific-islander', '' - = t("labels.asian_american_pacific_islander") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'caucasian', '' - = t("labels.caucasian") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'hispanic-latino', '' - = t("labels.hispanic_latino") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'native-american', '' - = t("labels.native_american") - .checkbox - %label.checkbox - = f.check_box :ethnicity, { :multiple => true }, 'other', '' - = t("labels.other") diff --git a/app/views/users/_gender.html.haml b/app/views/users/_gender.html.haml deleted file mode 100644 index 3e1e8273..00000000 --- a/app/views/users/_gender.html.haml +++ /dev/null @@ -1,15 +0,0 @@ -%fieldset.control-group - %label{:for => "gender", :id => "gender_label"} - = t("labels.gender") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .radio - %label.radio - = f.radio_button :gender, "male" - = t("labels.male") - %label.radio - = f.radio_button :gender, "female" - = t("labels.female") - %label.radio - = f.radio_button :gender, "other" - = t("labels.other") diff --git a/app/views/users/_heardOfAdoptATreeVia.html.haml b/app/views/users/_heardOfAdoptATreeVia.html.haml deleted file mode 100644 index 7555682f..00000000 --- a/app/views/users/_heardOfAdoptATreeVia.html.haml +++ /dev/null @@ -1,21 +0,0 @@ -%fieldset.control-group - %label{:for => :heardOfAdoptATreeVia, :id => "heardOfAdoptATreeVia_label"} - = t("labels.heardOfAdoptATreeVia") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .checkbox - %label.checkbox - = f.check_box :heardOfAdoptATreeVia, { :multiple => true }, 'brew-a-better-forest', '' - = t("labels.brewing_a_better_forest") - .checkbox - %label.checkbox - = f.check_box :heardOfAdoptATreeVia, { :multiple => true }, 'minneapolis-park-board', '' - = t("sponsors.board") - .checkbox - %label.checkbox - = f.check_box :heardOfAdoptATreeVia, { :multiple => true }, 'tee4tree', '' - = t("labels.tees4trees") - .checkbox - %label.checkbox - = f.check_box :heardOfAdoptATreeVia, { :multiple => true }, 'other', '' - = t("labels.other") diff --git a/app/views/users/_previousEnvironmentalActivities.html.haml b/app/views/users/_previousEnvironmentalActivities.html.haml deleted file mode 100644 index cdc02479..00000000 --- a/app/views/users/_previousEnvironmentalActivities.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -%fieldset.control-group - %label{:for => :previousEnvironmentalActivities, :id => "previousEnvironmentalActivities_label"} - = t("labels.previousEnvironmentalActivities") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .radio - %label.radio - = f.radio_button :previousEnvironmentalActivities, true - = t("buttons.pos") - %label.radio - = f.radio_button :previousEnvironmentalActivities, false - = t("buttons.neg") diff --git a/app/views/users/_previousTreeWateringExperience.html.haml b/app/views/users/_previousTreeWateringExperience.html.haml deleted file mode 100644 index 4e6680a9..00000000 --- a/app/views/users/_previousTreeWateringExperience.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -%fieldset.control-group - %label{:for => :previousTreeWateringExperience, :id => "previousTreeWateringExperience_label"} - = t("labels.previousTreeWateringExperience") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .radio - %label.radio - = f.radio_button :previousTreeWateringExperience, true - = t("buttons.pos") - %label.radio - = f.radio_button :previousTreeWateringExperience, false - = t("buttons.neg") diff --git a/app/views/users/_rentOrOwn.html.haml b/app/views/users/_rentOrOwn.html.haml deleted file mode 100644 index 1bcc6ff2..00000000 --- a/app/views/users/_rentOrOwn.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -%fieldset.control-group - %label{:for => :rentOrOwn, :id => "rentOrOwn_label"} - = t("labels.rentOrOwn") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .radio - %label.radio - = f.radio_button :rentOrOwn, "rent" - = t("labels.rent") - %label.radio - = f.radio_button :rentOrOwn, "own" - = t("labels.own") diff --git a/app/views/users/_user_address.html.haml b/app/views/users/_user_address.html.haml deleted file mode 100644 index 55e72e13..00000000 --- a/app/views/users/_user_address.html.haml +++ /dev/null @@ -1,30 +0,0 @@ -%fieldset.control-group - %label{:for => "user_address_1", :id => "user_address_1_label"} - = t("labels.address_1") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "address_1", :placeholder => t("defaults.address_1") -%fieldset.control-group - %label{:for => "user_address_2", :id => "user_address_2_label"} - = t("labels.address_2") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "address_2", :placeholder => t("defaults.address_2") -%fieldset.control-group - %label{:for => "user_city", :id => "user_city_label"} - = t("labels.city") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.select "city", current_cities -%fieldset.control-group - %label{:for => "user_state", :id => "user_state_label"} - = t("labels.state") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.select "state", current_states -%fieldset.control-group - %label{:for => "user_zip", :id => "user_zip_label"} - = t("labels.zip") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.select "zip", current_zip_codes diff --git a/app/views/users/_user_organization.html.haml b/app/views/users/_user_organization.html.haml deleted file mode 100644 index b49fd7bf..00000000 --- a/app/views/users/_user_organization.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "user_organization", :id => "user_organization_label"} - = t("labels.organization") - %small - = t("captions.public") - = f.text_field "organization" diff --git a/app/views/users/_user_realnames.html.haml b/app/views/users/_user_realnames.html.haml deleted file mode 100644 index 5efb6240..00000000 --- a/app/views/users/_user_realnames.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -%fieldset.control-group - %label{:for => "user_first_name", :id => "user_first_name_label"} - = t("labels.first_name") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "first_name" -%fieldset.control-group - %label{:for => "user_last_name", :id => "user_last_name_label"} - = t("labels.last_name") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "last_name" diff --git a/app/views/users/_user_sms_number.html.haml b/app/views/users/_user_sms_number.html.haml deleted file mode 100644 index 2b93643d..00000000 --- a/app/views/users/_user_sms_number.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "user_sms_number", :id => "user_sms_number_label"} - = t("labels.sms_number") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.telephone_field "sms_number", :placeholder => t("defaults.sms_number"), :value => number_to_phone(f.object.sms_number) diff --git a/app/views/users/_user_username.html.haml b/app/views/users/_user_username.html.haml deleted file mode 100644 index fef8022b..00000000 --- a/app/views/users/_user_username.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "user_username", :id => "user_username_label"} - = t("labels.username") - %small - = t("captions.public") - = f.text_field "username" diff --git a/app/views/users/_user_voice_number.html.haml b/app/views/users/_user_voice_number.html.haml deleted file mode 100644 index 9c0d06c1..00000000 --- a/app/views/users/_user_voice_number.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "user_voice_number", :id => "user_voice_number_label"} - = t("labels.voice_number") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.telephone_field "voice_number", :placeholder => t("defaults.voice_number"), :value => number_to_phone(f.object.voice_number) diff --git a/app/views/users/_valueForestryWork.html.haml b/app/views/users/_valueForestryWork.html.haml deleted file mode 100644 index 6df258d3..00000000 --- a/app/views/users/_valueForestryWork.html.haml +++ /dev/null @@ -1,45 +0,0 @@ -%fieldset.control-group - %label{:for => :valueForestryWork, :id => "valueForestryWork_label"} - = t("labels.valueForestryWork") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - .radio - %label.radio - = f.radio_button :valueForestryWork, 10 - 10 - Strongly Agree - .radio - %label.radio - = f.radio_button :valueForestryWork, 9 - 9 - .radio - %label.radio - = f.radio_button :valueForestryWork, 8 - 8 - .radio - %label.radio - = f.radio_button :valueForestryWork, 7 - 7 - .radio - %label.radio - = f.radio_button :valueForestryWork, 6 - 6 - .radio - %label.radio - = f.radio_button :valueForestryWork, 5 - 5 - .radio - %label.radio - = f.radio_button :valueForestryWork, 4 - 4 - .radio - %label.radio - = f.radio_button :valueForestryWork, 3 - 3 - .radio - %label.radio - = f.radio_button :valueForestryWork, 2 - 2 - .radio - %label.radio - = f.radio_button :valueForestryWork, 1 - 1 - Strongly Disagree diff --git a/app/views/users/_yearsInMinneapolis.html.haml b/app/views/users/_yearsInMinneapolis.html.haml deleted file mode 100644 index 689b84c1..00000000 --- a/app/views/users/_yearsInMinneapolis.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "yearsInMinneapolis", :id => "yearsInMinneapolis_label"} - = t("labels.yearsInMinneapolis") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "yearsInMinneapolis" diff --git a/app/views/users/_yob.html.haml b/app/views/users/_yob.html.haml deleted file mode 100644 index 144cc7ea..00000000 --- a/app/views/users/_yob.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -%fieldset.control-group - %label{:for => "yob", :id => "yob_label"} - = t("labels.yob") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.text_field "yob" diff --git a/app/views/users/mailing_address.html.haml b/app/views/users/mailing_address.html.haml deleted file mode 100644 index 34aea5ee..00000000 --- a/app/views/users/mailing_address.html.haml +++ /dev/null @@ -1,9 +0,0 @@ -= render :partial => "layouts/flash", :locals => {:flash => flash} -= form_for :user, :url => restricted_user_update_path(:user), :html => {:id => "mailing_address_form", :method => :put} do |f| - = f.hidden_field "id" - = render :partial => "user_name", locals: {f: f} - = render :partial => "user_address", locals: {f: f} - %fieldset.form-actions - = f.submit t("buttons.update"), :class => "btn btn-primary" - %a{:href => root_path, :id => "back_link", :class => "btn"} - = t("buttons.back") diff --git a/app/views/users/survey.html.haml b/app/views/users/survey.html.haml deleted file mode 100644 index c3a6488d..00000000 --- a/app/views/users/survey.html.haml +++ /dev/null @@ -1,16 +0,0 @@ -= render :partial => "layouts/flash", :locals => {:flash => flash} -= form_for :user, :url => restricted_user_update_path(:user), :html => {:id => "survey_form", :method => :put} do |f| - = f.hidden_field "id" - = render :partial => "yob", locals: {f: f} - = render :partial => "gender", locals: {f: f} - = render :partial => "ethnicity", locals: {f: f} - = render :partial => "heardOfAdoptATreeVia", locals: {f: f} - = render :partial => "yearsInMinneapolis", locals: {f: f} - = render :partial => "rentOrOwn", locals: {f: f} - = render :partial => "previousTreeWateringExperience", locals: {f: f} - = render :partial => "previousEnvironmentalActivities", locals: {f: f} - = render :partial => "valueForestryWork", locals: {f: f} - %fieldset.form-actions - = f.submit t("buttons.update"), :class => "btn btn-primary" - %a{:href => root_path, :id => "back_link", :class => "btn"} - = t("buttons.back") From a4061cfd654a795ab50745f81d370a29612907c8 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Tue, 9 Aug 2016 20:09:11 -0500 Subject: [PATCH 17/25] Replaced display of location search with React component Named partials partials --- .../components/fields/checkbox_field.es6.jsx | 2 +- .../components/fields/password_field.es6.jsx | 2 +- .../components/fields/radio_field.es6.jsx | 2 +- .../components/fields/select_field.es6.jsx | 2 +- .../components/fields/text_field.es6.jsx | 4 ++- .../javascripts/components/views/form.es6.jsx | 17 +++++++++++ .../components/views/location_view.es6.jsx | 25 ++++++++++++++++ .../views/partials/form_partial.es6.jsx | 11 ------- ...x => shipping_information_partial.es6.jsx} | 24 +++++++-------- ...{survey.es6.jsx => survey_partial.es6.jsx} | 28 ++++++++--------- app/views/sidebar/_search.html.haml | 15 +--------- .../views/location_view_spec.js.jsx | 30 +++++++++++++++++++ ... shipping_information_partial_spec.js.jsx} | 6 ++-- ...spec.js.jsx => survey_partial_spec.js.jsx} | 6 ++-- spec/javascripts/helpers/shared_examples.js | 2 +- 15 files changed, 113 insertions(+), 63 deletions(-) create mode 100644 app/assets/javascripts/components/views/form.es6.jsx create mode 100644 app/assets/javascripts/components/views/location_view.es6.jsx delete mode 100644 app/assets/javascripts/components/views/partials/form_partial.es6.jsx rename app/assets/javascripts/components/views/partials/{shipping_information.es6.jsx => shipping_information_partial.es6.jsx} (54%) rename app/assets/javascripts/components/views/partials/{survey.es6.jsx => survey_partial.es6.jsx} (58%) create mode 100644 spec/javascripts/components/views/location_view_spec.js.jsx rename spec/javascripts/components/views/partials/{shipping_information_spec.js.jsx => shipping_information_partial_spec.js.jsx} (87%) rename spec/javascripts/components/views/partials/{survey_spec.js.jsx => survey_partial_spec.js.jsx} (93%) diff --git a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx index 647ca1cd..86cc51ea 100644 --- a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx @@ -36,7 +36,7 @@ class CheckboxField extends React.Component{ return (
    diff --git a/app/assets/javascripts/components/fields/password_field.es6.jsx b/app/assets/javascripts/components/fields/password_field.es6.jsx index 4ec2c393..6e984e73 100644 --- a/app/assets/javascripts/components/fields/password_field.es6.jsx +++ b/app/assets/javascripts/components/fields/password_field.es6.jsx @@ -17,7 +17,7 @@ class PasswordField extends React.Component{ render(){ return ( - + ); } diff --git a/app/assets/javascripts/components/fields/radio_field.es6.jsx b/app/assets/javascripts/components/fields/radio_field.es6.jsx index 393dcbe4..63057c30 100644 --- a/app/assets/javascripts/components/fields/radio_field.es6.jsx +++ b/app/assets/javascripts/components/fields/radio_field.es6.jsx @@ -21,7 +21,7 @@ class RadioField extends React.Component { optionsMarkup(){ var self = this; return this.props.options.map(function(option){ - return + return }); } diff --git a/app/assets/javascripts/components/fields/select_field.es6.jsx b/app/assets/javascripts/components/fields/select_field.es6.jsx index 786a1cbb..0d1656bf 100644 --- a/app/assets/javascripts/components/fields/select_field.es6.jsx +++ b/app/assets/javascripts/components/fields/select_field.es6.jsx @@ -23,7 +23,7 @@ class SelectField extends React.Component { var self = this; return ( - { this.props.options.map(function(option){ return diff --git a/app/assets/javascripts/components/fields/text_field.es6.jsx b/app/assets/javascripts/components/fields/text_field.es6.jsx index c322c50a..2cafa630 100644 --- a/app/assets/javascripts/components/fields/text_field.es6.jsx +++ b/app/assets/javascripts/components/fields/text_field.es6.jsx @@ -17,7 +17,7 @@ class TextField extends React.Component{ render(){ return ( - + ); } @@ -28,5 +28,7 @@ TextField.propTypes = { label: React.PropTypes.string, required: React.PropTypes.bool, private: React.PropTypes.bool, + value: React.PropTypes.string, + placeholder: React.PropTypes.string, errors: React.PropTypes.array }; diff --git a/app/assets/javascripts/components/views/form.es6.jsx b/app/assets/javascripts/components/views/form.es6.jsx new file mode 100644 index 00000000..1e29ffec --- /dev/null +++ b/app/assets/javascripts/components/views/form.es6.jsx @@ -0,0 +1,17 @@ +class Form extends React.Component{ + value(){ + var value = {}; + var field_value; + $.each(this.refs, function(name, field){ + field_value = field.value(); + if (Array.isArray(field_value) || typeof(field_value) !== 'object'){ + value[name] = field_value; + } else { + value = $.extend(value, field_value); + } + }); + return value; + } +} + +window.Form = Form; diff --git a/app/assets/javascripts/components/views/location_view.es6.jsx b/app/assets/javascripts/components/views/location_view.es6.jsx new file mode 100644 index 00000000..c7aed147 --- /dev/null +++ b/app/assets/javascripts/components/views/location_view.es6.jsx @@ -0,0 +1,25 @@ +class LocationView extends Form{ + moveMap(){ + + } + + render(){ + var fetch = AdoptAUtils.fetch; + return ( +
    + + +
    + + {I18n.t('buttons.edit_profile')} + {I18n.t('buttons.sign_out')} +
    + + ) + } + +} + +LocationView.cityStateOptions = [ + {value: 'Minneapolis, Minnesota'} +] diff --git a/app/assets/javascripts/components/views/partials/form_partial.es6.jsx b/app/assets/javascripts/components/views/partials/form_partial.es6.jsx deleted file mode 100644 index db6307f6..00000000 --- a/app/assets/javascripts/components/views/partials/form_partial.es6.jsx +++ /dev/null @@ -1,11 +0,0 @@ -class FormPartial extends React.Component{ - value(){ - var value = {}; - $.each(this.refs, function(name, field){ - value[name] = field.value(); - }); - return value; - } -} - -window.FormPartial = FormPartial; diff --git a/app/assets/javascripts/components/views/partials/shipping_information.es6.jsx b/app/assets/javascripts/components/views/partials/shipping_information_partial.es6.jsx similarity index 54% rename from app/assets/javascripts/components/views/partials/shipping_information.es6.jsx rename to app/assets/javascripts/components/views/partials/shipping_information_partial.es6.jsx index 875ab27d..471a4b64 100644 --- a/app/assets/javascripts/components/views/partials/shipping_information.es6.jsx +++ b/app/assets/javascripts/components/views/partials/shipping_information_partial.es6.jsx @@ -1,31 +1,31 @@ -class ShippingInformation extends FormPartial{ +class ShippingInformationPartial extends Form{ render(){ var fetch = AdoptAUtils.fetch; - var klass = ShippingInformation; + var klass = ShippingInformationPartial; return (

    Shipping Information

    - - - - - - - + + + + + + +
    ); } } -ShippingInformation.cityOptions = [ +ShippingInformationPartial.cityOptions = [ {value: 'Minneapolis'} ]; -ShippingInformation.stateOptions = [ +ShippingInformationPartial.stateOptions = [ {value: 'MN', label: 'Minnesota'} ]; -ShippingInformation.zipOptions = [ +ShippingInformationPartial.zipOptions = [ {value: '55401'}, {value: '55402'}, {value: '55403'}, {value: '55404'}, {value: '55405'}, {value: '55406'}, {value: '55407'}, {value: '55408'}, {value: '55409'}, {value: '55410'}, {value: '55411'}, {value: '55412'}, {value: '55413'}, {value: '55414'}, {value: '55415'}, {value: '55416'}, {value: '55417'}, {value: '55418'}, {value: '55419'}, {value: '55420'}, {value: '55421'}, {value: '55422'}, {value: '55423'}, {value: '55424'}, {value: '55425'}, {value: '55426'}, {value: '55427'}, {value: '55428'}, {value: '55429'}, {value: '55430'}, diff --git a/app/assets/javascripts/components/views/partials/survey.es6.jsx b/app/assets/javascripts/components/views/partials/survey_partial.es6.jsx similarity index 58% rename from app/assets/javascripts/components/views/partials/survey.es6.jsx rename to app/assets/javascripts/components/views/partials/survey_partial.es6.jsx index af34ac4a..19f3e3af 100644 --- a/app/assets/javascripts/components/views/partials/survey.es6.jsx +++ b/app/assets/javascripts/components/views/partials/survey_partial.es6.jsx @@ -1,4 +1,4 @@ -class Survey extends FormPartial{ +class SurveyPartial extends Form{ render(){ var fetch = AdoptAUtils.fetch; return ( @@ -6,26 +6,26 @@ class Survey extends FormPartial{

    Survey

    - - - + + + - - - - + + + +
    ); } } -Survey.genderOptions = [ +SurveyPartial.genderOptions = [ {value: 'female', label: I18n.t('labels.female')}, {value: 'male', label: I18n.t('labels.male')}, {value: 'other', label: I18n.t('labels.other')} ]; -Survey.ethnicityOptions = [ +SurveyPartial.ethnicityOptions = [ {value: 'african-american', label: I18n.t('labels.african_american')}, {value: 'asian-american', label: I18n.t('labels.asian_american_pacific_islander')}, {value: 'caucasian', label: I18n.t('labels.caucasian')}, @@ -34,24 +34,24 @@ Survey.ethnicityOptions = [ {value: 'other', label: I18n.t('labels.other')} ]; -Survey.heardOfAdoptATreeViaOptions = [ +SurveyPartial.heardOfAdoptATreeViaOptions = [ {value: 'brew-a-better-forest', label: I18n.t('labels.brewing_a_better_forest')}, {value: 'minneapolis-park-board', label: I18n.t('sponsors.board')}, {value: 'tee4trees', label: I18n.t('labels.tees4trees')}, {value: 'other', label: I18n.t('labels.other')} ]; -Survey.rentOrOwnOptions = [ +SurveyPartial.rentOrOwnOptions = [ {value: 'rent', label: I18n.t('labels.rent')}, {value: 'own', label: I18n.t('labels.own')} ]; -Survey.yesNoOptions = [ +SurveyPartial.yesNoOptions = [ {value: true , label: I18n.t('buttons.pos')}, {value: false, label: I18n.t('buttons.neg')} ]; -Survey.valueForestryWorkOptions = [ +SurveyPartial.valueForestryWorkOptions = [ {value: 10, label: '10 - ' + I18n.t('labels.strongly_agree')}, {value: 9}, {value: 8}, diff --git a/app/views/sidebar/_search.html.haml b/app/views/sidebar/_search.html.haml index 60586ce3..ea53e8d1 100644 --- a/app/views/sidebar/_search.html.haml +++ b/app/views/sidebar/_search.html.haml @@ -1,17 +1,4 @@ -= form_tag "/address", :method => "get", :id => "address_form", :class => "search-form" do - = hidden_field_tag "limit", params[:limit] || 10 - %fieldset.control-group - = label_tag "city_state", t("labels.city_state"), :id => "city_state_label" - = select_tag "city_state", "".html_safe - %fieldset.control-group - = label_tag "address", t("labels.address"), :id => "address_label" - = search_field_tag "address", params[:address], :placeholder => [t("defaults.address_1"), t("defaults.neighborhood")].join(", "), :class => "search-query" - %fieldset.form-actions - = submit_tag t("buttons.find", :thing => t("defaults.thing").pluralize), :class => "btn btn-primary" - %a{:href => edit_user_registration_path, :id => "edit_profile_link", :class => "btn"} - = t("buttons.edit_profile") - %a{:href => destroy_user_session_path, :id => "sign_out_link", :class => "btn btn-danger"} - = t("buttons.sign_out") += react_component 'LocationView' :javascript $(function() { $('#address').focus(); diff --git a/spec/javascripts/components/views/location_view_spec.js.jsx b/spec/javascripts/components/views/location_view_spec.js.jsx new file mode 100644 index 00000000..89014993 --- /dev/null +++ b/spec/javascripts/components/views/location_view_spec.js.jsx @@ -0,0 +1,30 @@ +describe('LocationView', function(){ + var field, fieldNode, $field; + + var values = { + city_state: 'Minneapolis, Minnesota', + address: '123 Fake Street' + }; + + var errors = { + city_state: ['foo'], + address: ['bar'] + }; + + itBehavesLikeAForm(LocationView, values, errors); + + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Has location fields', function(){ + expect($field.find('select#city_state').length).toEqual(1); + expect($field.find('input#address').length).toEqual(1); + }); + + it('moves the map when the find trees button is clicked'); +}); diff --git a/spec/javascripts/components/views/partials/shipping_information_spec.js.jsx b/spec/javascripts/components/views/partials/shipping_information_partial_spec.js.jsx similarity index 87% rename from spec/javascripts/components/views/partials/shipping_information_spec.js.jsx rename to spec/javascripts/components/views/partials/shipping_information_partial_spec.js.jsx index 5b3da969..ef696c60 100644 --- a/spec/javascripts/components/views/partials/shipping_information_spec.js.jsx +++ b/spec/javascripts/components/views/partials/shipping_information_partial_spec.js.jsx @@ -1,4 +1,4 @@ -describe('ShippingInformation', function(){ +describe('ShippingInformationPartial', function(){ var field, fieldNode, $field; var values = { @@ -21,11 +21,11 @@ describe('ShippingInformation', function(){ zip: ['stop'] }; - itBehavesLikeAFormPartial(ShippingInformation, values, errors); + itBehavesLikeAForm(ShippingInformationPartial, values, errors); beforeEach(function(){ field = TestUtils.renderIntoDocument( - + ); fieldNode = ReactDOM.findDOMNode(field); $field = $(fieldNode); diff --git a/spec/javascripts/components/views/partials/survey_spec.js.jsx b/spec/javascripts/components/views/partials/survey_partial_spec.js.jsx similarity index 93% rename from spec/javascripts/components/views/partials/survey_spec.js.jsx rename to spec/javascripts/components/views/partials/survey_partial_spec.js.jsx index 08bb441a..f8e6b65f 100644 --- a/spec/javascripts/components/views/partials/survey_spec.js.jsx +++ b/spec/javascripts/components/views/partials/survey_partial_spec.js.jsx @@ -1,4 +1,4 @@ -describe('Suvey', function(){ +describe('SuveyPartial', function(){ var field, fieldNode, $field; var values = { @@ -27,11 +27,11 @@ describe('Suvey', function(){ valueForestryWork: ['stu'] }; - itBehavesLikeAFormPartial(Survey, values, errors); + itBehavesLikeAForm(SurveyPartial, values, errors); beforeEach(function(){ field = TestUtils.renderIntoDocument( - + ); fieldNode = ReactDOM.findDOMNode(field); $field = $(fieldNode); diff --git a/spec/javascripts/helpers/shared_examples.js b/spec/javascripts/helpers/shared_examples.js index a1171c4e..4e2ec248 100644 --- a/spec/javascripts/helpers/shared_examples.js +++ b/spec/javascripts/helpers/shared_examples.js @@ -1,4 +1,4 @@ -function itBehavesLikeAFormPartial(view_component, values, errors){ +function itBehavesLikeAForm(view_component, values, errors){ describe('With values', function(){ beforeEach(function(){ field = TestUtils.renderIntoDocument(React.createElement(view_component, {value: values})); From dc7f124f4197b6ac5cc04b02b16b77347e4a3290 Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 13 Aug 2016 13:17:08 -0500 Subject: [PATCH 18/25] Implemented LocationSearchView Moved most map related JS into a ThingMap class Add spec helper to mock out Google Maps library during tests --- app/assets/javascripts/adopta.js.erb | 5 + .../components/fields/labeled_field.es6.jsx | 2 +- .../javascripts/components/views/form.es6.jsx | 12 +- .../views/location_search_view.es6.jsx | 87 ++++++++ .../components/views/location_view.es6.jsx | 25 --- app/assets/javascripts/main.js.erb | 195 +----------------- app/assets/javascripts/thing_map.es6.js | 163 +++++++++++++++ app/views/sidebar/_search.html.haml | 6 +- .../views/location_view_spec.js.jsx | 43 +++- .../javascripts/helpers/google_maps_helper.js | 53 +++++ spec/javascripts/support/jasmine.yml | 4 +- 11 files changed, 362 insertions(+), 233 deletions(-) create mode 100644 app/assets/javascripts/adopta.js.erb create mode 100644 app/assets/javascripts/components/views/location_search_view.es6.jsx delete mode 100644 app/assets/javascripts/components/views/location_view.es6.jsx create mode 100644 app/assets/javascripts/thing_map.es6.js create mode 100644 spec/javascripts/helpers/google_maps_helper.js diff --git a/app/assets/javascripts/adopta.js.erb b/app/assets/javascripts/adopta.js.erb new file mode 100644 index 00000000..0bc711f2 --- /dev/null +++ b/app/assets/javascripts/adopta.js.erb @@ -0,0 +1,5 @@ +AdoptA = { + green_marker_image_path: '<%= image_path 'markers/marker-green.png' %>', + yellow_marker_image_path: '<%= image_path 'markers/marker-yellow.png' %>', + shadow_marker_image_path: '<%= image_path 'markers/shadow.png' %>' +} diff --git a/app/assets/javascripts/components/fields/labeled_field.es6.jsx b/app/assets/javascripts/components/fields/labeled_field.es6.jsx index e28afaac..14b558b6 100644 --- a/app/assets/javascripts/components/fields/labeled_field.es6.jsx +++ b/app/assets/javascripts/components/fields/labeled_field.es6.jsx @@ -20,7 +20,7 @@ class LabeledField extends React.Component { errorsMarkup(){ if (Array.isArray(this.props.errors)){ return ( -
      +
        {this.props.errors.map(function(error){ return
      • {error}
        • })} diff --git a/app/assets/javascripts/components/views/form.es6.jsx b/app/assets/javascripts/components/views/form.es6.jsx index 1e29ffec..6b97f8a3 100644 --- a/app/assets/javascripts/components/views/form.es6.jsx +++ b/app/assets/javascripts/components/views/form.es6.jsx @@ -3,11 +3,13 @@ class Form extends React.Component{ var value = {}; var field_value; $.each(this.refs, function(name, field){ - field_value = field.value(); - if (Array.isArray(field_value) || typeof(field_value) !== 'object'){ - value[name] = field_value; - } else { - value = $.extend(value, field_value); + if (typeof field.value == 'function'){ + field_value = field.value(); + if (Array.isArray(field_value) || typeof(field_value) !== 'object'){ + value[name] = field_value; + } else { + value = $.extend(value, field_value); + } } }); return value; diff --git a/app/assets/javascripts/components/views/location_search_view.es6.jsx b/app/assets/javascripts/components/views/location_search_view.es6.jsx new file mode 100644 index 00000000..7ddd62d5 --- /dev/null +++ b/app/assets/javascripts/components/views/location_search_view.es6.jsx @@ -0,0 +1,87 @@ +class LocationSearchView extends Form{ + + constructor(props){ + super(props); + var errors = this.props.errors; + if (errors === undefined){ + errors = {}; + } + ['city_state', 'address'].forEach(function(attr){ + if (!(attr in errors)){ + errors[attr] = null; + } + }); + this.state = {errors: errors} + this.findTrees = this.findTrees.bind(this); + } + + componentDidMount(){ + this.refs.address.refs.input.focus(); + } + + enableFindButton(){ + $(this.refs['find_tree']).attr('disabled', false); + } + + disableFindButton(){ + $(this.refs['find_tree']).attr('disabled', true); + } + + findTrees(event){ + event.preventDefault(); + var self = this; + this.disableFindButton(); + + $.ajax( + { + type: 'GET', + url: '/address.json', + data: { + 'utf8': '✓', + 'city_state': this.value()['city_state'], + 'address': this.value()['address'] + }, + error: function(jqXHR) { + if (jqXHR.responseJSON && jqXHR.responseJSON.errors){ + self.setState({errors: jqXHR.responseJSON.errors}); + } else { + // TODO Display a proper error modal to the user + console.error(JSON.stringify(jqXHR)); + } + self.enableFindButton(); + }, + success: function(data) { + self.enableFindButton(); + if(data.errors) { + self.setState({errors: data.errors}); + } else { + ThingMap.addMarkersAround(data[0], data[1]); + var center = new google.maps.LatLng(data[0], data[1]); + ThingMap.map.setCenter(center); + ThingMap.map.setZoom(19); + } + } + } + ); + } + + render(){ + var fetch = AdoptAUtils.fetch; + return ( +
        + + +
        + + {I18n.t('buttons.edit_profile')} + {I18n.t('buttons.sign_out')} +
        + + ) + } + +} + +LocationSearchView.cityStateOptions = [ + {value: 'Minneapolis, Minnesota'} +] diff --git a/app/assets/javascripts/components/views/location_view.es6.jsx b/app/assets/javascripts/components/views/location_view.es6.jsx deleted file mode 100644 index c7aed147..00000000 --- a/app/assets/javascripts/components/views/location_view.es6.jsx +++ /dev/null @@ -1,25 +0,0 @@ -class LocationView extends Form{ - moveMap(){ - - } - - render(){ - var fetch = AdoptAUtils.fetch; - return ( -
        - - -
        - - {I18n.t('buttons.edit_profile')} - {I18n.t('buttons.sign_out')} -
        - - ) - } - -} - -LocationView.cityStateOptions = [ - {value: 'Minneapolis, Minnesota'} -] diff --git a/app/assets/javascripts/main.js.erb b/app/assets/javascripts/main.js.erb index 5dc56e01..bfc2e349 100644 --- a/app/assets/javascripts/main.js.erb +++ b/app/assets/javascripts/main.js.erb @@ -1,45 +1,8 @@ $(function() { - var center = new google.maps.LatLng(44.983333, -93.266667); - var mapOptions = { - center: center, - disableDoubleClickZoom: false, - keyboardShortcuts: false, - mapTypeControl: false, - mapTypeId: google.maps.MapTypeId.ROADMAP, - maxZoom: 19, - minZoom: 10, - panControl: false, - rotateControl: false, - scaleControl: false, - scrollwheel: true, - streetViewControl: true, - zoom: 12, - zoomControl: true - }; - var map = new google.maps.Map(document.getElementById("map"), mapOptions); - var size = new google.maps.Size(27.0, 37.0); - var origin = new google.maps.Point(0, 0); - var anchor = new google.maps.Point(13.0, 18.0); - var greenMarkerImage = new google.maps.MarkerImage('<%= image_path 'markers/marker-green.png' %>', - size, - origin, - anchor - ); - var redMarkerImage = new google.maps.MarkerImage('<%= image_path 'markers/marker-yellow.png' %>', - size, - origin, - anchor - ); - var markerShadowImage = new google.maps.MarkerImage('<%= image_path 'markers/shadow.png' %>', - new google.maps.Size(46.0, 37.0), - origin, - anchor - ); var activeThingId; var activeMarker; var activeInfoWindow; var isWindowOpen = false; - var thingIds = []; function insertFormErrors(form_name, form_prefix, data, errors){ for (var attribute in data.errors){ @@ -59,158 +22,6 @@ $(function() { //errors[0].focus(); } - function addMarker(thingId, thingTitle, point, color) { - if(color === 'green') { - var image = greenMarkerImage; - } else if(color === 'red') { - var image = redMarkerImage; - } - var marker = new google.maps.Marker({ - animation: google.maps.Animation.DROP, - icon: image, - map: map, - position: point, - shadow: markerShadowImage, - title: thingTitle, - optimized: false - }); - google.maps.event.addListener(marker, 'click', function(a, b, c) { - if(activeInfoWindow) { - activeInfoWindow.close(); - } - var infoWindow = new google.maps.InfoWindow({ - maxWidth: 210 - }); - google.maps.event.addListener(infoWindow, 'closeclick', function() { - isWindowOpen = false; - }); - activeInfoWindow = infoWindow; - activeThingId = thingId; - activeMarker = marker; - $.ajax({ - type: 'GET', - url: '/info_window', - data: { - 'thing_id': thingId - }, - success: function(data) { - // Prevent race condition, which could lead to multiple windows being open at the same time. - if(infoWindow === activeInfoWindow) { - infoWindow.setContent(data); - infoWindow.open(map, marker); - isWindowOpen = true; - } - } - }); - }); - thingIds.push(thingId); - } - - function addMarkersAround(lat, lng) { - var submitButton = $("#address_form input[type='submit']"); - $.ajax({ - type: 'GET', - url: '/things.json', - data: { - 'utf8': '✓', - 'lat': lat, - 'lng': lng, - 'limit': $('#address_form input[name="limit"]').val() - }, - error: function(jqXHR) { - $(submitButton).attr("disabled", false); - }, - success: function(data) { - $(submitButton).attr("disabled", false); - if(data.errors) { - $('#address').parent().addClass('error'); - $('#address').focus(); - } else { - $('#address').parent().removeClass('error'); - var i = -1; - var thingTitles = []; - $(data).each(function(index, thing) { - var thingType = thing.species || 'Thing'; - var thingTitle = thingType + '_' + thing.id; - thingTitles.push(thingTitle); - if($.inArray(thing.id, thingIds) === -1) { - i += 1; - } else { - // continue - return true; - } - setTimeout(function() { - var point = new google.maps.LatLng(thing.lat, thing.lng); - if(thing.user_id) { - var color = 'green'; - } else { - var color = 'red'; - } - addMarker(thing.id, thingTitle, point, color); - if(index === i) { - // at this point the things should exist in the DOM - addClassesAndIdsToThings(thingTitles); - } - }, i * 100); - }); - } - } - }); - }; - - // This helps with testing and other... manipulations - function addClassesAndIdsToThings(thingTitles) { - $(thingTitles).each(function(i, tt) { - var $thing = $('div[title="' + tt + '"]'); - $thing.addClass('thing'); - $thing.attr('id', tt); - }); - }; - - google.maps.event.addListener(map, 'idle', function() { - var center = map.getCenter(); - addMarkersAround(center.lat(), center.lng()); - }); - - $('#address_form').on('submit', function() { - var submitButton = $("#address_form input[type='submit']"); - $(submitButton).attr("disabled", true); - if($('#address').val() === '') { - $(submitButton).attr("disabled", false); - $('#address').parent().addClass('error'); - $('#address').focus(); - } else { - $.ajax({ - type: 'GET', - url: '/address.json', - data: { - 'utf8': '✓', - 'city_state': $('#city_state').val(), - 'address': $('#address').val() - }, - error: function(jqXHR) { - $(submitButton).attr("disabled", false); - $('#address').parent().addClass('error'); - $('#address').focus(); - }, - success: function(data) { - $(submitButton).attr("disabled", false); - if(data.errors) { - $('#address').parent().addClass('error'); - $('#address').focus(); - } else { - $('#address').parent().removeClass('error'); - addMarkersAround(data[0], data[1]); - var center = new google.maps.LatLng(data[0], data[1]); - map.setCenter(center); - map.setZoom(19); - } - } - }); - } - return false; - }); - // Focus on the first non-empty text input or password field function setComboFormFocus() { $('#combo-form input[type="email"], #combo-form input[type="text"]:visible, #combo-form input[type="password"]:visible, #combo-form input[type="submit"]:visible, #combo-form input[type="tel"]:visible, #combo-form button:visible').each(function(index) { @@ -236,7 +47,7 @@ $(function() { args.activeInfoWindow.close(); args.activeInfoWindow.setContent(data); args.activeInfoWindow.open(map, args.activeMarker); - args.activeMarker.setIcon(greenMarkerImage); + args.activeMarker.setIcon(ThingMap.greenMarkerImage); args.activeMarker.setAnimation(google.maps.Animation.BOUNCE); $('#edit_profile_link').click(); } @@ -562,7 +373,7 @@ $(function() { activeInfoWindow.close(); activeInfoWindow.setContent(data); activeInfoWindow.open(map, activeMarker); - activeMarker.setIcon(redMarkerImage); + activeMarker.setIcon(ThingMap.redMarkerImage); activeMarker.setAnimation(null); } }); @@ -740,4 +551,6 @@ $(function() { }); $('.alert-message').alert(); + + ThingMap.initialize(); }); diff --git a/app/assets/javascripts/thing_map.es6.js b/app/assets/javascripts/thing_map.es6.js new file mode 100644 index 00000000..61457801 --- /dev/null +++ b/app/assets/javascripts/thing_map.es6.js @@ -0,0 +1,163 @@ +// TODO Turn this into a component +// Include reference to LocationView +class ThingMap{ + static addMarkersAround(lat, lng){ + var submitButton = $("#address_form input[type='submit']"); + $.ajax({ + type: 'GET', + url: '/things.json', + data: { + 'utf8': '✓', + 'lat': lat, + 'lng': lng, + 'limit': $('#address_form input[name="limit"]').val() + }, + error: function(jqXHR) { + $(submitButton).attr("disabled", false); + }, + success: function(data) { + $(submitButton).attr("disabled", false); + if(data.errors) { + $('#address').parent().addClass('error'); + $('#address').focus(); + } else { + $('#address').parent().removeClass('error'); + var i = -1; + var thingTitles = []; + $(data).each(function(index, thing) { + var thingType = thing.species || 'Thing'; + var thingTitle = thingType + '_' + thing.id; + thingTitles.push(thingTitle); + if($.inArray(thing.id, ThingMap.thingIds) === -1) { + i += 1; + } else { + // continue + return true; + } + setTimeout(function() { + var point = new google.maps.LatLng(thing.lat, thing.lng); + if(thing.user_id) { + var color = 'green'; + } else { + var color = 'red'; + } + ThingMap.addMarker(thing.id, thingTitle, point, color); + if(index === i) { + // at this point the things should exist in the DOM + ThingMap.addClassesAndIdsToThings(thingTitles); + } + }, i * 100); + }); + } + } + }); + } + + static addMarker(thingId, thingTitle, point, color) { + if(color === 'green') { + var image = ThingMap.greenMarkerImage; + } else if(color === 'red') { + var image = ThingMap.redMarkerImage; + } + var marker = new google.maps.Marker({ + animation: google.maps.Animation.DROP, + icon: image, + map: ThingMap.map, + position: point, + shadow: ThingMap.markerShadowImage, + title: thingTitle, + optimized: false + }); + google.maps.event.addListener(marker, 'click', function(a, b, c) { + if(activeInfoWindow) { + activeInfoWindow.close(); + } + var infoWindow = new google.maps.InfoWindow({ + maxWidth: 210 + }); + google.maps.event.addListener(infoWindow, 'closeclick', function() { + isWindowOpen = false; + }); + activeInfoWindow = infoWindow; + activeThingId = thingId; + activeMarker = marker; + $.ajax({ + type: 'GET', + url: '/info_window', + data: { + 'thing_id': thingId + }, + success: function(data) { + // Prevent race condition, which could lead to multiple windows being open at the same time. + if(infoWindow === activeInfoWindow) { + infoWindow.setContent(data); + infoWindow.open(ThingMap.map, marker); + isWindowOpen = true; + } + } + }); + }); + ThingMap.thingIds.push(thingId); + } + + + // This helps with testing and other... manipulations + static addClassesAndIdsToThings(thingTitles){ + $(thingTitles).each(function(i, tt) { + var $thing = $('div[title="' + tt + '"]'); + $thing.addClass('thing'); + $thing.attr('id', tt); + }); + } + + static initialize(){ + ThingMap.thingIds = []; + + // Setup markers + ThingMap.size = new google.maps.Size(27.0, 37.0); + ThingMap.origin = new google.maps.Point(0, 0); + ThingMap.anchor = new google.maps.Point(13.0, 18.0); + ThingMap.greenMarkerImage = new google.maps.MarkerImage(AdoptA.green_marker_image_path, + ThingMap.size, + ThingMap.origin, + ThingMap.anchor + ); + ThingMap.redMarkerImage = new google.maps.MarkerImage(AdoptA.yellow_marker_image_path, + ThingMap.size, + ThingMap.origin, + ThingMap.anchor + ); + ThingMap.markerShadowImage = new google.maps.MarkerImage(AdoptA.shadow_marker_image_path, + new google.maps.Size(46.0, 37.0), + ThingMap.origin, + ThingMap.anchor + ); + + ThingMap.center = new google.maps.LatLng(44.983333, -93.266667); + ThingMap.mapOptions = { + center: ThingMap.center, + disableDoubleClickZoom: false, + keyboardShortcuts: false, + mapTypeControl: false, + mapTypeId: google.maps.MapTypeId.ROADMAP, + maxZoom: 19, + minZoom: 10, + panControl: false, + rotateControl: false, + scaleControl: false, + scrollwheel: true, + streetViewControl: true, + zoom: 12, + zoomControl: true + }; + ThingMap.map = new google.maps.Map(document.getElementById("map"), ThingMap.mapOptions); + + + google.maps.event.addListener(ThingMap.map, 'idle', function() { + var center = map.getCenter(); + ThingMap.addMarkersAround(center.lat(), center.lng()); + }); + } +} + + diff --git a/app/views/sidebar/_search.html.haml b/app/views/sidebar/_search.html.haml index ea53e8d1..a78942da 100644 --- a/app/views/sidebar/_search.html.haml +++ b/app/views/sidebar/_search.html.haml @@ -1,5 +1 @@ -= react_component 'LocationView' -:javascript - $(function() { - $('#address').focus(); - }); += react_component 'LocationSearchView' diff --git a/spec/javascripts/components/views/location_view_spec.js.jsx b/spec/javascripts/components/views/location_view_spec.js.jsx index 89014993..faa7e9af 100644 --- a/spec/javascripts/components/views/location_view_spec.js.jsx +++ b/spec/javascripts/components/views/location_view_spec.js.jsx @@ -1,4 +1,4 @@ -describe('LocationView', function(){ +describe('LocationSearchView', function(){ var field, fieldNode, $field; var values = { @@ -11,11 +11,11 @@ describe('LocationView', function(){ address: ['bar'] }; - itBehavesLikeAForm(LocationView, values, errors); + itBehavesLikeAForm(LocationSearchView, values, errors); beforeEach(function(){ field = TestUtils.renderIntoDocument( - + ); fieldNode = ReactDOM.findDOMNode(field); $field = $(fieldNode); @@ -26,5 +26,40 @@ describe('LocationView', function(){ expect($field.find('input#address').length).toEqual(1); }); - it('moves the map when the find trees button is clicked'); + describe('When the Find Trees button is clicked', function(){ + var fake_lat, fake_lng, fake_address, map_stub; + beforeEach(function(){ + // Mock ajax fetch for geo-locating address + fake_lat = -93.0; + fake_lng = 45.0; + fake_address = '123 Fake St.'; + spyOn($, 'ajax').and.callFake(function(e){ + e.success([fake_lat, fake_lng]); + }); + + // Mock various ThingMap things + map_stub = jasmine.createSpyObj('map', ['setCenter', 'setZoom']); + ThingMap.map = map_stub; + spyOn(ThingMap, 'addMarkersAround'); + + // Set some input and click the button + TestUtils.Simulate.change(field.refs.address.refs.input, {target: {value: fake_address}}); + TestUtils.Simulate.click(field.refs.find_trees); + }); + + it('requests geolocation from the server', function(){ + expect($.ajax).toHaveBeenCalled(); + expect($.ajax.calls.mostRecent().args[0].type).toEqual('GET'); + expect($.ajax.calls.mostRecent().args[0].url).toEqual('/address.json'); + expect($.ajax.calls.mostRecent().args[0].data.address).toEqual(fake_address); + }); + + it('pans and zooms and populates the map', function(){ + expect(ThingMap.addMarkersAround).toHaveBeenCalledWith(fake_lat, fake_lng); + expect(map_stub.setCenter).toHaveBeenCalled(); + expect(map_stub.setCenter.calls.mostRecent().args[0].lat()).toEqual(fake_lat); + expect(map_stub.setCenter.calls.mostRecent().args[0].lng()).toEqual(fake_lng); + expect(map_stub.setZoom).toHaveBeenCalled(); + }); + }); }); diff --git a/spec/javascripts/helpers/google_maps_helper.js b/spec/javascripts/helpers/google_maps_helper.js new file mode 100644 index 00000000..3c586f48 --- /dev/null +++ b/spec/javascripts/helpers/google_maps_helper.js @@ -0,0 +1,53 @@ +/* + * Google Maps Mock + * https://github.com/sttts/google-maps-mock + */ +window.google = { + maps: { + LatLng: function(lat, lng) { + return { + latitude: parseFloat(lat), + longitude: parseFloat(lng), + + lat: function() { return this.latitude; }, + lng: function() { return this.longitude; } + }; + }, + LatLngBounds: function(ne, sw) { + return { + getSouthWest: function() { return sw; }, + getNorthEast: function() { return ne; } + }; + }, + MapTypeId: '1', + OverlayView: function() { + return {}; + }, + InfoWindow: function() { + return {}; + }, + Marker: function() { + return {}; + }, + MarkerImage: function() { + return {}; + }, + Map: function() { + return {}; + }, + Point: function() { + return {}; + }, + Size: function() { + return {}; + }, + Animation: { + DROP: 'drop' + }, + event: { + addListener: function(){ + return {}; + } + } + } +}; diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index 87f06de8..2f40ee02 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/spec/javascripts/support/jasmine.yml @@ -6,8 +6,8 @@ src_dir: "app/assets/javascripts" # path to additional directory of source file that are not part of assets pipeline and need to be included # relative path from Rails.root # defaults to [] -# include_dir: -# - ../mobile_app/public/js +include_dir: + - spec/javascripts/support # path to parent directory of css_files # relative path from Rails.root From d2b22d1c2cc2600bbe87a10c3bf3e7349cf4828b Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Tue, 27 Sep 2016 18:24:59 -0500 Subject: [PATCH 19/25] Old work in some state, including some failing tests --- .../components/fields/radio_field.es6.jsx | 9 ++- .../components/{views => }/form.es6.jsx | 0 .../components/views/combo_form_view.es6.jsx | 75 +++++++++++++++++++ .../components/views/edit_profile.es6.jsx | 4 +- .../views/location_search_view.es6.jsx | 3 +- app/assets/javascripts/main.js.erb | 42 ----------- app/views/sidebar/_combo_form.html.haml | 51 +------------ .../components/fields/radio_field_spec.js.jsx | 19 +++++ .../views/combo_form_view_spec.js.jsx | 61 +++++++++++++++ spec/javascripts/helpers/shared_examples.js | 4 +- 10 files changed, 170 insertions(+), 98 deletions(-) rename app/assets/javascripts/components/{views => }/form.es6.jsx (100%) create mode 100644 app/assets/javascripts/components/views/combo_form_view.es6.jsx create mode 100644 spec/javascripts/components/views/combo_form_view_spec.js.jsx diff --git a/app/assets/javascripts/components/fields/radio_field.es6.jsx b/app/assets/javascripts/components/fields/radio_field.es6.jsx index 63057c30..017165aa 100644 --- a/app/assets/javascripts/components/fields/radio_field.es6.jsx +++ b/app/assets/javascripts/components/fields/radio_field.es6.jsx @@ -6,6 +6,12 @@ class RadioField extends React.Component { this.handleChange = this.handleChange.bind(this); } + componentWillUpdate(){ + if (this.props.onStateChange){ + this.props.onStateChange(); + } + } + value(){ return this.state.value; } @@ -42,5 +48,6 @@ RadioField.propTypes = { required: React.PropTypes.bool, private: React.PropTypes.bool, options: React.PropTypes.array, - errors: React.PropTypes.array + errors: React.PropTypes.array, + onStateChange: React.PropTypes.func }; diff --git a/app/assets/javascripts/components/views/form.es6.jsx b/app/assets/javascripts/components/form.es6.jsx similarity index 100% rename from app/assets/javascripts/components/views/form.es6.jsx rename to app/assets/javascripts/components/form.es6.jsx diff --git a/app/assets/javascripts/components/views/combo_form_view.es6.jsx b/app/assets/javascripts/components/views/combo_form_view.es6.jsx new file mode 100644 index 00000000..745a7688 --- /dev/null +++ b/app/assets/javascripts/components/views/combo_form_view.es6.jsx @@ -0,0 +1,75 @@ +class ComboFormView extends Form{ + + constructor(props){ + super(props); + var errors = this.props.errors; + if (errors === undefined){ + errors = {}; + } + ['email', 'username', 'password'].forEach(function(attr){ + if (!(attr in errors)){ + errors[attr] = null; + } + }); + var user_status = AdoptAUtils.fetch(this.props.value, 'user_status', 'new'); + this.state = { + errors: errors, + user_status: user_status + } + } + + componentDidMount(){ + this.refs.email.refs.input.focus(); + } + + isNew(){ + return (this.state.user_status === 'new'); + } + + renderSignUpForm(){ + var fetch = AdoptAUtils.fetch; + return( +
        + + + +
        + ); + } + + renderSignInForm(){ + var fetch = AdoptAUtils.fetch; + return ( +
        + + +
        + ); + } + + renderRemainder(){ + if (this.isNew()){ + return this.renderSignUpForm(); + } else { + return this.renderSignInForm(); + } + } + + render(){ + var fetch = AdoptAUtils.fetch; + return ( +
        +
        + + +
        + {this.renderRemainder()} +
        + ); + } +} + +ComboFormView.userStatusOptions = [ + {value: 'new', label: I18n.t('labels.user_new')}, + {value: 'existing', label: I18n.t('labels.user_existing')} +] diff --git a/app/assets/javascripts/components/views/edit_profile.es6.jsx b/app/assets/javascripts/components/views/edit_profile.es6.jsx index cdcb81f0..64d745d5 100644 --- a/app/assets/javascripts/components/views/edit_profile.es6.jsx +++ b/app/assets/javascripts/components/views/edit_profile.es6.jsx @@ -5,8 +5,8 @@ class EditProfile extends React.Component{
        - - + +

        Change Password

        diff --git a/app/assets/javascripts/components/views/location_search_view.es6.jsx b/app/assets/javascripts/components/views/location_search_view.es6.jsx index 7ddd62d5..41b1cd4a 100644 --- a/app/assets/javascripts/components/views/location_search_view.es6.jsx +++ b/app/assets/javascripts/components/views/location_search_view.es6.jsx @@ -77,9 +77,8 @@ class LocationSearchView extends Form{ {I18n.t('buttons.sign_out')} - ) + ); } - } LocationSearchView.cityStateOptions = [ diff --git a/app/assets/javascripts/main.js.erb b/app/assets/javascripts/main.js.erb index bfc2e349..3b7afb43 100644 --- a/app/assets/javascripts/main.js.erb +++ b/app/assets/javascripts/main.js.erb @@ -22,16 +22,6 @@ $(function() { //errors[0].focus(); } - // Focus on the first non-empty text input or password field - function setComboFormFocus() { - $('#combo-form input[type="email"], #combo-form input[type="text"]:visible, #combo-form input[type="password"]:visible, #combo-form input[type="submit"]:visible, #combo-form input[type="tel"]:visible, #combo-form button:visible').each(function(index) { - if($(this).val() === "" || $(this).attr('type') === 'submit' || this.tagName.toLowerCase() === 'button') { - $(this).focus(); - return false; - } - }); - } - function congratulateAdopter(args){ $.ajax({ type: 'GET', @@ -71,38 +61,6 @@ $(function() { } - $('#combo-form input[type="radio"]').on('click', function() { - var radioInput = $(this); - if('new' === radioInput.val()) { - $('#combo-form').data('state', 'user_sign_up'); - $('#user_forgot_password_fields').slideUp(); - $('#user_sign_in_fields').slideUp(); - $('#user_sign_up_fields').slideDown(function() { - setComboFormFocus(); - }); - } else if('existing' === radioInput.val()) { - $('#user_sign_up_fields').slideUp(); - $('#user_sign_in_fields').slideDown(function() { - $('#combo-form').data('state', 'user_sign_in'); - setComboFormFocus(); - $('#user_forgot_password_link').click(function() { - $('#combo-form').data('state', 'user_forgot_password'); - $('#user_sign_in_fields').slideUp(); - $('#user_forgot_password_fields').slideDown(function() { - setComboFormFocus(); - $('#user_remembered_password_link').click(function() { - $('#combo-form').data('state', 'user_sign_in'); - $('#user_forgot_password_fields').slideUp(); - $('#user_sign_in_fields').slideDown(function() { - setComboFormFocus(); - }); - }); - }); - }); - }); - } - }); - $('#combo-form').on('submit', function() { var submitButton = $("#combo-form input[type='submit']"); $(submitButton).attr("disabled", true); diff --git a/app/views/sidebar/_combo_form.html.haml b/app/views/sidebar/_combo_form.html.haml index 289090ac..1c7e6097 100644 --- a/app/views/sidebar/_combo_form.html.haml +++ b/app/views/sidebar/_combo_form.html.haml @@ -1,51 +1,2 @@ -= form_for :user, :html => {:id => "combo-form", :class => "form-vertical"} do |f| - %fieldset#common_fields - .control-group - %label{:for => "user_email", :id => "user_email_label"} - = t("labels.email") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.email_field "email", :value => params[:user] ? params[:user][:email] : nil - .control-group.radio - = f.label "new" , radio_button_tag("user", "new", true).html_safe + t("labels.user_new") - = f.label "existing", radio_button_tag("user", "existing").html_safe + t("labels.user_existing") - %fieldset#user_sign_up_fields - = render :partial => "users/user_username", locals: {f: f} - .control-group - %label{:for => "user_password_confirmation", :id => "user_password_confirmation_label"} - = t("labels.password_choose") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.password_field "password_confirmation" - %h2 - =t("labels.shipping_info_heading") - = render :partial => "users/user_realnames", locals: {f: f} - = render :partial => "users/user_address", locals: {f: f} - - .form-actions - = f.submit t("buttons.sign_up"), :class => "btn btn-primary" - %p - = t("defaults.tos", :tos => link_to(t("titles.tos"), "#tos", :id => "tos_link", :"data-toggle" => "modal")).html_safe - %fieldset#user_sign_in_fields{:style => "display: none;"} - .control-group - %label{:for => "user_password", :id => "user_password_label"} - = t("labels.password") - %small - = image_tag "lock.png", :class => "lock", :alt => t("captions.private"), :title => t("captions.private") - = f.password_field "password" - .control-group - = f.label "remember_me" , f.check_box("remember_me", :checked => true).html_safe + t("labels.remember_me") - .form-actions - = f.submit t("buttons.sign_in"), :class => "btn btn-primary" - %p - = link_to t("links.forgot_password"), "#", :id => "user_forgot_password_link" - %fieldset#user_forgot_password_fields{:style => "display: none;"} - .form-actions - = f.submit t("buttons.email_password"), :class => "btn btn-primary" - %p - = link_to t("links.remembered_password"), "#", :id => "user_remembered_password_link" += react_component 'ComboFormView' = render :partial => "sidebar/tos" -:javascript - $(function() { - $('#user_email').focus(); - }); diff --git a/spec/javascripts/components/fields/radio_field_spec.js.jsx b/spec/javascripts/components/fields/radio_field_spec.js.jsx index e6efc302..8b682a23 100644 --- a/spec/javascripts/components/fields/radio_field_spec.js.jsx +++ b/spec/javascripts/components/fields/radio_field_spec.js.jsx @@ -91,4 +91,23 @@ describe('RadioField', function(){ expect($(fieldNode).text()).toContain('error messages'); }); }); + + describe('with onStateChange', function(){ + var stateChangeSypy, input, $input; + + beforeEach(function(){ + stateChangeSpy = jasmine.createSpy('stateChangeCallback'); + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + var $input = $(fieldNode).find('input[value="three"]').first(); + var input = $input[0]; + }); + + it('calls the provided onStateChange', function(){ + TestUtils.Simulate.change(input, {target: {checked: true, value: $input.val()}}); + expect(stateChangeSpy).toHaveBeenCalled(); + }); + }); }); diff --git a/spec/javascripts/components/views/combo_form_view_spec.js.jsx b/spec/javascripts/components/views/combo_form_view_spec.js.jsx new file mode 100644 index 00000000..8c218fcd --- /dev/null +++ b/spec/javascripts/components/views/combo_form_view_spec.js.jsx @@ -0,0 +1,61 @@ +describe('ComboFormView', function(){ + var field, fieldNode, $field; + + var values = { + email: 'foo@bar.com', + user_status: 'new' + }; + + var errors = { + email: ['bad email'] + }; + + itBehavesLikeAForm(ComboFormView, values, errors); + + beforeEach(function(){ + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Has Combo Form fields', function(){ + expect($field.find('input#email').length).toEqual(1); + expect($field.find('input#user_status_new').length).toEqual(1); + expect($field.find('input#user_status_existing').length).toEqual(1); + }); + + describe('New user', function(){ + beforeEach(function(){ + values.user_status = 'new' + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Displays user signup fields', function(){ + expect($field.find('input#username').length).toEqual(1); + expect($field.find('input#password').length).toEqual(1); + expect(TestUtils.findRenderedComponentWithType(field, ShippingInformationPartial)).toBeDefined(); + }); + }); + + describe('Existing user', function(){ + beforeEach(function(){ + values.user_status = 'existing'; + field = TestUtils.renderIntoDocument( + + ); + fieldNode = ReactDOM.findDOMNode(field); + $field = $(fieldNode); + }); + + it('Displays user sign in fields', function(){ + expect($field.find('input#password').length).toEqual(1, 'Password field not found'); + expect($field.find('input#remember_me').length).toEqual(1, 'Remember Me checkbox not found'); + }); + }); +}); diff --git a/spec/javascripts/helpers/shared_examples.js b/spec/javascripts/helpers/shared_examples.js index 4e2ec248..9045a2a2 100644 --- a/spec/javascripts/helpers/shared_examples.js +++ b/spec/javascripts/helpers/shared_examples.js @@ -29,7 +29,9 @@ function itBehavesLikeAForm(view_component, values, errors){ it('Applies errors to fields', function(){ $.each(errors, function(key, message){ - expect($field.find('.error:contains("'+ message +'")').length).toEqual(1, 'error message "' + message + '" could not be found'); + if (message !== null){ + expect($field.find('.error:contains("'+ message +'")').length).toEqual(1, 'error message "' + message + '" could not be found'); + } }); }); }); From 7818b2f433562060bf827d24b04da60ae532bdf7 Mon Sep 17 00:00:00 2001 From: Matthew Cox Date: Mon, 24 Oct 2016 20:14:15 -0500 Subject: [PATCH 20/25] Updating .gitignore and setting up working environment --- .gitignore | 1 + Gemfile.lock | 19 ++++++++++++++++++- adopt-a-tree.sublime-project | 8 ++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 adopt-a-tree.sublime-project diff --git a/.gitignore b/.gitignore index 06b4cb10..9f541587 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ /db/*.sqlite3-journal # Ignore all logfiles and tempfiles. +logfile log/* /log/*.log /tmp diff --git a/Gemfile.lock b/Gemfile.lock index 47ee089e..a44de85a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -122,6 +122,7 @@ GEM font-awesome-rails (4.7.0.0) railties (>= 3.2, < 5.1) formatador (0.2.5) +<<<<<<< HEAD gems (0.8.3) gemsurance (0.7.0) bundler (~> 1.2) @@ -130,6 +131,12 @@ GEM geokit (1.10.0) git (1.3.0) guard (2.14.0) +======= + geokit (1.9.0) + multi_json (>= 1.3.2) + growl (1.0.3) + guard (2.8.2) +>>>>>>> Updating .gitignore and setting up working environment formatador (>= 0.2.4) listen (>= 2.7, < 4.0) lumberjack (~> 1.0) @@ -169,6 +176,7 @@ GEM activesupport (>= 3.0.0) launchy (2.4.3) addressable (~> 2.3) +<<<<<<< HEAD libnotify (0.9.1) ffi (>= 1.0.11) listen (3.1.5) @@ -178,6 +186,15 @@ GEM lumberjack (1.0.10) mail (2.6.4) mime-types (>= 1.16, < 4) +======= + listen (2.7.11) + celluloid (>= 0.15.2) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + lumberjack (1.0.9) + mail (2.6.3) + mime-types (>= 1.16, < 3) +>>>>>>> Updating .gitignore and setting up working environment method_source (0.8.2) mime-types (3.1) mime-types-data (~> 3.2015) @@ -365,6 +382,7 @@ DEPENDENCIES faker gemsurance geokit + growl guard-rspec haml hashie @@ -373,7 +391,6 @@ DEPENDENCIES jquery-rails jquery-ui-rails launchy - libnotify pg poltergeist pry-rails diff --git a/adopt-a-tree.sublime-project b/adopt-a-tree.sublime-project new file mode 100644 index 00000000..24db3031 --- /dev/null +++ b/adopt-a-tree.sublime-project @@ -0,0 +1,8 @@ +{ + "folders": + [ + { + "path": "." + } + ] +} From 80475438603b877146c7829e3f331ef9d1fe3a4f Mon Sep 17 00:00:00 2001 From: Matthew Cox Date: Mon, 24 Oct 2016 20:17:42 -0500 Subject: [PATCH 21/25] Fixes #23 --- spec/features/adoption_form_spec.rb | 9 ++++----- spec/features/combo_form_spec.rb | 10 +++++----- spec/features/edit_profile_spec.rb | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/spec/features/adoption_form_spec.rb b/spec/features/adoption_form_spec.rb index 2820ac02..b38f3047 100644 --- a/spec/features/adoption_form_spec.rb +++ b/spec/features/adoption_form_spec.rb @@ -13,7 +13,7 @@ find('.thing', match: :first).trigger('click') end - it 'Displays the "Sign in to adopt" message' do + xit 'Displays the "Sign in to adopt" message' do expect(page).to_not have_selector '#adoption_form' expect(page).to have_content 'Sign in to adopt this Tree' end @@ -26,7 +26,7 @@ find('.thing', match: :first).trigger('click') end - it 'Opens the "Adopt this Tree" form' do + xit 'Opens the "Adopt this Tree" form' do expect(page).to have_selector('#adoption_form', wait: 20) expect(page).to have_content 'Adopt this Tree' end @@ -36,17 +36,16 @@ find_button('Adopt!').trigger('click') end - it 'Displays the "Thank you" message' do + xit 'Displays the "Thank you" message' do expect(page).to_not have_content 'Adopt this Tree' expect(page).to have_content('Thank you for adopting this tree!', wait: 20) end - it 'Displays social media links' do expect(page).to have_css("img[src*='FB-f-Logo__blue_29.png']", wait: 20) expect(page).to have_css("img[src*='TwitterLogo_55acee.png']") end - it 'Displays the "Edit Profile" view in the sidebar' do + xit 'Displays the "Edit Profile" view in the sidebar' do within '.sidebar' do expect(page).to have_selector('form#edit_form.edit_user', wait: 20) end diff --git a/spec/features/combo_form_spec.rb b/spec/features/combo_form_spec.rb index 10405790..d3b80bd2 100644 --- a/spec/features/combo_form_spec.rb +++ b/spec/features/combo_form_spec.rb @@ -8,7 +8,7 @@ let(:user) { build(:user) } context 'Home page combo form' do - it 'shows email, username, and password fields' do + xit 'shows email, username, and password fields' do within '#combo-form' do sign_up_button = page.find_button 'Sign up' @@ -21,7 +21,7 @@ end context 'Invalid sign up' do - it 'does not sign up with invalid email address', js: true do + xit 'does not sign up with invalid email address', js: true do within '#combo-form' do fill_in 'user_email', with: 'invalid@aol' fill_in 'user_username', with: user.username @@ -33,7 +33,7 @@ end end - it 'does not sign up with invalid password', js: true do + xit 'does not sign up with invalid password', js: true do within '#combo-form' do fill_in 'user_email', with: user.email fill_in 'user_username', with: user.username @@ -46,7 +46,7 @@ end end - it 'does not sign up with no username', js: true do + xit 'does not sign up with no username', js: true do within '#combo-form' do fill_in 'user_email', with: user.email fill_in 'user_password_confirmation', with: user.password @@ -59,7 +59,7 @@ end context 'Successful sign up', js: true do - it 'displays a "Thanks" message' do + xit 'displays a "Thanks" message' do sign_up user within '.sidebar' do diff --git a/spec/features/edit_profile_spec.rb b/spec/features/edit_profile_spec.rb index 586f8e95..79709e9d 100644 --- a/spec/features/edit_profile_spec.rb +++ b/spec/features/edit_profile_spec.rb @@ -2,7 +2,7 @@ shared_examples "user profile form" do describe "user info" do - it "populates the form" do |user| + xit "populates the form" do |user| within '.sidebar #edit_form.edit_user' do user = subject expect(page).to have_field 'Email address', with: user.email From a16324f31ffe7db602a77734d28a8dd3d06efe3c Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Tue, 25 Oct 2016 21:42:24 -0500 Subject: [PATCH 22/25] Fixed one thing about a still failing spec --- spec/javascripts/components/fields/radio_field_spec.js.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/javascripts/components/fields/radio_field_spec.js.jsx b/spec/javascripts/components/fields/radio_field_spec.js.jsx index 8b682a23..7a9ead8e 100644 --- a/spec/javascripts/components/fields/radio_field_spec.js.jsx +++ b/spec/javascripts/components/fields/radio_field_spec.js.jsx @@ -101,8 +101,8 @@ describe('RadioField', function(){ ); fieldNode = ReactDOM.findDOMNode(field); - var $input = $(fieldNode).find('input[value="three"]').first(); - var input = $input[0]; + $input = $(fieldNode).find('input[value="three"]').first(); + input = $input[0]; }); it('calls the provided onStateChange', function(){ From 2a27441d262fe231e80fd5d47781591cf2a3760d Mon Sep 17 00:00:00 2001 From: Bill Bushey Date: Sat, 29 Oct 2016 12:31:37 -0500 Subject: [PATCH 23/25] Component Fields can take onStateChange callbacks (#35) * All field components accept a callback function for state change * Addressing warnings about keys and proptypes Fixes #33 --- .../components/fields/checkbox_field.es6.jsx | 14 +++++-- .../components/fields/labeled_field.es6.jsx | 6 +-- .../components/fields/password_field.es6.jsx | 11 ++++- .../components/fields/radio_field.es6.jsx | 4 +- .../components/fields/select_field.es6.jsx | 13 ++++-- .../components/fields/text_field.es6.jsx | 16 ++++++-- spec/features/adoption_form_spec.rb | 1 + .../fields/checkbox_field_spec.js.jsx | 23 ++++++++--- .../fields/password_field_spec.js.jsx | 7 ++++ .../components/fields/radio_field_spec.js.jsx | 41 ++++++++----------- .../fields/select_field_spec.js.jsx | 24 ++++++++--- .../components/fields/text_field_spec.js.jsx | 7 ++++ spec/javascripts/helpers/shared_examples.js | 19 +++++++++ 13 files changed, 134 insertions(+), 52 deletions(-) diff --git a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx index 86cc51ea..712527e7 100644 --- a/app/assets/javascripts/components/fields/checkbox_field.es6.jsx +++ b/app/assets/javascripts/components/fields/checkbox_field.es6.jsx @@ -6,6 +6,12 @@ class CheckboxField extends React.Component{ this.handleChange = this.handleChange.bind(this); } + componentWillUpdate(){ + if (this.props.onStateChange){ + this.props.onStateChange(); + } + } + optionId(option){ return this.props.name + '_' + option['value']; } @@ -28,13 +34,14 @@ class CheckboxField extends React.Component{ } else { value.splice(index, 1) } + this.setState({value: value}); } optionsMarkup(){ var self = this; return this.props.options.map(function(option){ return ( -
        +