handy_location_inputs 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 278e0cc94cffc6ccfa881af0d79356dbd4b898e84de67dfbab4d02a68c5d849b
+  data.tar.gz: ec2af4700802febe3495a11ce38f005cdb00a0ad3658b267ead66449293868b3
+SHA512:
+  metadata.gz: 32252ebe82b061b901ddd8570e1926b5c6789f376bd159434eee3c1d3354216ef9e8f35781550cb2f251a900eaeedac9cfd54d2b1e1fd80be06919cedb7e8617
+  data.tar.gz: 52cc17252396bb125ab63dcfe46bb70ebec013c58e7b9dd37f81c75dc937f7968beccd476156303ec2284f9d0dfa1c323dda1304bb6da738eeeb2a5bd4ba21e2

data/MIT-LICENSE

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

data/README.md

@@ -0,0 +1,56 @@
+# HandyLocationInputs
+HandyLocationInputs is a rails gem/engine for adding powerful location inputs to your forms. It allows you to guarentee your Country, State, and City names will be uniform without the UX penalties of Select Boxes.
+
+## Requirements
+Rails with turbolinks and bulma css. (Future versions will remove the dependency on Bulma.)
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'handy_location_inputs'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install handy_location_inputs
+```
+
+## Setup
+
+First, add this line to your app/assets/javascripts/application.js manifest file.
+
+```javascript
+// = require handy_location_inputs/input_controllers
+```
+
+To use handy_location_inputs in a view, ```include HandyLocationInputs::Locatable``` to that view's controller.
+
+If the associated model is new, or has no location data yet, call ```country_list_to_client``` to the controller action. This will pass the country list to the client.
+
+If the model already has state and city data that you would like to pass to the client as well, call ```location_lists_to_client(your_model)```.
+
+### In The View
+
+To trigger functionality in a form, include the class ```handy-location-inputs``` somewhere on the page.
+
+Each input needs an id of ```country-input```, ```state-input```, or ```city-input``` respectively.
+
+The dropdown for each input should look like this.
+
+```html
+<div class="dropdown country-dropdown">
+  <div class="dropdown-menu" role="menu">
+    <div class="country-dropdown-content">
+    </div>
+  </div>
+</div>
+```
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'HandyLocationInputs'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/handy_location_inputs_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/handy_location_inputs .js
+//= link_directory ../stylesheets/handy_location_inputs .css

data/app/assets/javascripts/handy_location_inputs/input_controllers.js

@@ -0,0 +1,180 @@
+document.addEventListener("turbolinks:load", function(){
+  if(!document.querySelector('.handy-location-inputs')) return;
+
+  var countryInput = document.getElementById("country-input");
+  var countryDropdown = document.querySelector('.country-dropdown');
+  var countryDropdownContent = document.querySelector('.country-dropdown-content')
+
+  var stateInput = document.getElementById("state-input");
+  var stateDropdown = document.querySelector('.state-dropdown');
+  var stateDropdownContent = document.querySelector('.state-dropdown-content')
+
+  var cityInput = document.getElementById("city-input");
+  var cityDropdown = document.querySelector('.city-dropdown');
+  var cityDropdownContent = document.querySelector('.city-dropdown-content')
+
+  class InputController {
+    constructor(type, input, dropdown, dropdownContent) {
+      this.type = type;
+      this.input = input;
+      this.dropdown = dropdown;
+      this.dropdownContent = dropdownContent;
+      this.setPlaces();
+      this.addAllEventListeners();
+    }
+
+    addAllEventListeners() {
+      this.addInputListener();
+      this.addClickListener();
+      this.addBlurInputListener();
+      this.addFocusListener();
+      this.addClearSubordinateInputsListener();
+    }
+
+    addClearSubordinateInputsListener() {
+      this.input.addEventListener('change', () => this.clearSubordinateInputs());
+    }
+
+    addClickListener() {
+      this.dropdown.addEventListener('click', e => {
+        this.input.value = e.target.innerText;
+        var nextInput = this.subordinateInputs()[0];
+        if(nextInput) {
+          this.ajaxCallForSubordinateInput();
+          nextInput.focus();
+        }
+      });
+    }
+
+    subordinateInputs() {
+      var result;
+      if(this.type === 'countries') {
+        result = [stateInput, cityInput];
+      } else if(this.type === 'states') {
+        result = [cityInput];
+      } else {
+        result = [];
+      }
+      return result
+    }
+
+    subordinateInputType() {
+      if(this.type === 'countries') {
+        return 'states';
+      } else if(this.type === 'states') {
+        return 'cities';
+      } else return null;
+    }
+
+    superiorController() {
+      if(this.type === 'states') return countryInputController;
+      if(this.type === 'cities') return stateInputController;
+    }
+
+    clearSubordinateInputs() {
+      this.subordinateInputs().forEach(input => input.value = '');
+    }
+
+    inputIsValid() {
+      return this.input.value && 
+        gon[this.type] &&
+        this.inputWithProperCase();
+    }
+
+    inputWithProperCase() {
+      return this.places.find(place => place.toLowerCase() === this.input.value.toLowerCase())
+    }
+
+    fixCase() {
+      if(this.inputWithProperCase()) {
+        this.input.value = this.inputWithProperCase();
+      }
+    }
+
+    ajaxCallForSubordinateInput() {
+      if(!this.inputIsValid()) return;
+      if(this.type === 'cities') return;
+      var url;
+      var data;
+      if(this.type === 'countries') {
+        url = "/HandyLocationInputs/states.json";
+        data = `country=${this.inputWithProperCase()}`;
+      } else if(this.type === 'states') {
+        url = "/HandyLocationInputs/cities.json";
+        data = `country=${countryInputController.inputWithProperCase()}&state=${this.inputWithProperCase()}`
+      }
+      Rails.ajax({
+        dataType: "json",
+        url: url,
+        type: "POST",
+        data: data,
+        beforeSend: () => true,
+        success: (data) => {
+          gon[this.subordinateInputType()] = data[this.subordinateInputType()];
+        },
+      });
+    }
+
+    addBlurInputListener() {
+      this.input.addEventListener('blur', () => {
+        this.fixCase();
+        this.ajaxCallForSubordinateInput();
+        setTimeout(() => {
+          this.dropdown.classList.remove('is-active');
+        }, 300)
+      });
+    }
+
+    addFocusListener() {
+      this.input.addEventListener('focus', () => {
+        if(!this.superiorController()) {
+          this.input.dispatchEvent(new Event('keyup'));
+        } else if(this.superiorController().inputIsValid()) {
+          setTimeout(() => {
+            this.input.dispatchEvent(new Event('keyup'))
+          }, 1000)
+        } else {
+          this.superiorController().input.focus()
+        }
+      });
+    }
+
+    setPlaces() {
+      this.places;
+      if(gon) {
+        if(this.type === 'countries') {
+          this.places = gon.countries;
+        } else if(this.type === 'states') {
+          this.places = gon.states;
+        } else if(this.type === 'cities') {
+          this.places = gon.cities;
+        }
+      }
+      if(!this.places || !this.places.length) return;
+    }
+    
+    addInputListener() {
+      this.input.addEventListener("keyup", () => {
+        var inputValLower = this.input.value.toLowerCase();
+        this.dropdown.classList.add('is-active');
+        this.setPlaces();
+        this.matching = this.places.filter(c => c.toLowerCase().slice(0, inputValLower.length) == (inputValLower)).slice(0, 5);
+        if(this.dropdownContent.firstChild) {
+          while (this.dropdownContent.firstChild) {
+            this.dropdownContent.removeChild(this.dropdownContent.firstChild);
+          }
+        }
+        this.matching.forEach((c) => {
+          let item = document.createElement("div");
+          item.className = 'dropdown-item';
+          item.innerText = c;
+          this.dropdownContent.appendChild(item)
+        });
+      });
+    }
+  }
+
+  countryInputController = new InputController('countries', countryInput, countryDropdown, countryDropdownContent)
+  stateInputController = new InputController('states', stateInput, stateDropdown, stateDropdownContent)
+  cityInputController = new InputController('cities', cityInput, cityDropdown, cityDropdownContent)
+});

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

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/controllers/concerns/handy_location_inputs/locatable.rb

@@ -0,0 +1,40 @@
+module HandyLocationInputs
+  module Locatable
+    extend ActiveSupport::Concern
+
+    private
+
+    def country_list_to_client
+      countries = CS.countries.map { |c| c[1] }.sort
+      countries.delete("country_name")
+      countries.delete("United States")
+      countries.unshift("United States")
+      gon.countries = countries
+    end
+
+    def location_lists_to_client(model)
+      country_list_to_client
+      gon.states = CS.states(country_key model).values if !model[:country].blank?
+      gon.cities = CS.cities(state_key(model), country_key(model)) if !model[:state].blank?
+    end
+
+    def valid_location?(model)
+      return false if state_key(model).blank?
+      return false if !CS.cities(state_key(model), country_key(model)).blank? &&
+        CS.cities(state_key(model), country_key(model)).map(&:downcase).exclude?(model[:city].downcase)
+      true
+    end
+
+    def country_key(model)
+      @country_key ||= CS.countries.key(model[:country])
+    end
+
+    def state_key(model)
+      @state_key ||= return_key(CS.states(country_key(model)), model[:state])
+    end
+
+    def return_key(obj, match)
+      obj.each {|key, val| break key if key.to_s == match || val == match}
+    end
+  end
+end

data/app/controllers/handy_location_inputs/locations_controller.rb

@@ -0,0 +1,30 @@
+module HandyLocationInputs
+  class LocationsController < ApplicationController
+    protect_from_forgery with: :exception
+
+    include HandyLocationInputs::Locatable
+  
+    skip_around_action :set_time_zone
+    skip_before_action :require_user, :require_village
+  
+    def states
+      respond_to do |format|
+        format.json {render json: { states: CS.states(country_key).values }}
+      end
+    end
+  
+    def cities
+      respond_to do |format|
+        format.json {render json: { cities: CS.cities(state_key, country_key)}}
+      end
+    end
+  
+    def country_key
+      CS.countries.key(params[:country])
+    end
+  
+    def state_key
+      return_key(CS.states(country_key), params[:state])
+    end
+  end
+end

data/app/helpers/handy_location_inputs/application_helper.rb

@@ -0,0 +1,4 @@
+module HandyLocationInputs
+  module ApplicationHelper
+  end
+end

data/app/jobs/handy_location_inputs/application_job.rb

@@ -0,0 +1,4 @@
+module HandyLocationInputs
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/handy_location_inputs/application_mailer.rb

@@ -0,0 +1,6 @@
+module HandyLocationInputs
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/handy_location_inputs/application_record.rb

@@ -0,0 +1,5 @@
+module HandyLocationInputs
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

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

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Handy location inputs</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "handy_location_inputs/application", media: "all" %>
+  <%= javascript_include_tag "handy_location_inputs/application" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,4 @@
+HandyLocationInputs::Engine.routes.draw do
+  post 'states', to: 'locations#states'
+  post 'cities', to: 'locations#cities'
+end

data/lib/handy_location_inputs.rb

@@ -0,0 +1,5 @@
+require "handy_location_inputs/engine"
+
+module HandyLocationInputs
+  # Your code goes here...
+end

data/lib/handy_location_inputs/engine.rb

@@ -0,0 +1,5 @@
+module HandyLocationInputs
+  class Engine < ::Rails::Engine
+    isolate_namespace HandyLocationInputs
+  end
+end

data/lib/handy_location_inputs/version.rb

@@ -0,0 +1,3 @@
+module HandyLocationInputs
+  VERSION = '0.1.0'
+end

data/lib/tasks/handy_location_inputs_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :handy_location_inputs do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,80 @@
+--- !ruby/object:Gem::Specification
+name: handy_location_inputs
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- handofthecode
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-07-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.3
+description: HandyLocationInputs is an easy way to get uniform location input from
+  a user without the UX compromise of select boxes.
+email:
+- deartovi@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/handy_location_inputs_manifest.js
+- app/assets/javascripts/handy_location_inputs/input_controllers.js
+- app/assets/stylesheets/handy_location_inputs/application.css
+- app/controllers/concerns/handy_location_inputs/locatable.rb
+- app/controllers/handy_location_inputs/locations_controller.rb
+- app/helpers/handy_location_inputs/application_helper.rb
+- app/jobs/handy_location_inputs/application_job.rb
+- app/mailers/handy_location_inputs/application_mailer.rb
+- app/models/handy_location_inputs/application_record.rb
+- app/views/layouts/handy_location_inputs/application.html.erb
+- config/routes.rb
+- lib/handy_location_inputs.rb
+- lib/handy_location_inputs/engine.rb
+- lib/handy_location_inputs/version.rb
+- lib/tasks/handy_location_inputs_tasks.rake
+homepage: https://github.com/handofthecode/handy_location_inputs
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.1
+signing_key: 
+specification_version: 4
+summary: HandyLocationInputs auto suggests locations as the user types. It prevents
+  them from continuing until a valid location is selected. Subordinate input possibilities
+  are requested from the server via ajax as soon as approved locations are entered.
+  Cases are fixed.
+test_files: []