zipcode-rack 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9a72a26ab78d0c7a3b36da3079d9f646729e9068
-  data.tar.gz: 7233ff6e62eaebea24cca44ff851cac14d96e0c2
+  metadata.gz: 5897d5b4ced03a593f32fb730321c58153d0f018
+  data.tar.gz: 38b9ecbf5fbe8bd6fa9c4533b6affdbe34a83516
 SHA512:
-  metadata.gz: bac9cf71c1409cb82c8816cafe5c1c276651632a9ed8f72be09ce81c21685e088e6305ffad95832cf3f8a7040e663cac76852f08eb048b21971c732b0521ce1b
-  data.tar.gz: b2df86801a2f190eafd7bf81920fadb2df1888d623d02105aab85335711bcae89eaa61349972ccb68c866b0223671d92992fcc1465a4e28f9ac8c28d661330b2
+  metadata.gz: 717bda60af4d256a9d4f1f4511522b491f4e1b6d6a3464e4936ad725acea36edd710d02bd28d103593cd348e3af896b1302025c125b0cc7ca6bcde22dfd7b8f8
+  data.tar.gz: d5b564297165788bd246d6a17bb05d1a9ec85fac5f1188108e95f8b5bc3d37c0e9d122b5c0ba1d9185de0088f5b9bebb8e5d13972b853dc192331cba5a6fa71e

data/app/assets/javascript/zipcode-input.js

@@ -0,0 +1,357 @@
+(function () {
+    function parse(text) {
+        var parsed = {};
+        var re = /^\s*(\d+)?\s*(\D.*)?$/;
+        var m = re.exec(text);
+        if (m !== null) {
+            parsed.zip = m[1];
+            parsed.name = m[2];
+        }
+        return parsed;
+    }
+
+    function queryString(obj) {
+        var kv = [];
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                kv.push([key, obj[key]].join('='));
+            }
+        }
+        return kv.join('&');
+    }
+
+    function request(method, url, params, done) {
+        var http = new XMLHttpRequest();
+        http.open(method, url + '?' + queryString(params), true);
+        http.onreadystatechange = function() {
+            if (http.readyState === 4) {
+                if (http.status === 200) {
+                    var data = JSON.parse(http.responseText);
+                    done(data);
+                }
+            }
+        };
+        http.send(null);
+    }
+
+    var settings = {
+        endpoint: null,
+        dropdownClass: 'zip-city-dropdown',
+    };
+
+    function endpoint(url) {
+        if (url) { settings.endpoint = url; }
+        return settings.endpoint;
+    }
+
+    function dropdownClass(name) {
+        if (name) { settings.dropdownClass = name; }
+        return settings.dropdownClass;
+    }
+
+    function search(text, limit, done) {
+        var parsed = parse(text);
+        if (parsed.zip) {
+            request('GET', endpoint(), { zip: parsed.zip, limit: limit }, done);
+        } else if (parsed.name) {
+            request('GET', endpoint(), { name: parsed.name, limit: limit }, done);
+        }
+    }
+
+    function handleSearch(e) {
+        var input = e.target.value;
+        if (input === '' && e.target.dropdown) {
+            e.target.dropdown.remove();
+            e.target.dropdown = null;
+        }
+
+        search(input, 10, function (data) {
+            updatePicker(e.target, data);
+        });
+    }
+
+    function dropdownFor(input) {
+        if (input.dropdown) {
+            return input.dropdown;
+        }
+
+        var dropdown = createDropdown(input);
+        assignDropdown(input, dropdown);
+        return dropdown;
+    }
+
+    function createDropdown(input) {
+        var dropdown = document.createElement('div');
+
+        // TODO: auto-align right if needed
+        // TODO: max-width + hide overflow
+        var style = '';
+        style += 'position: absolute;';
+        style += 'top: '   + (input.offsetTop   + input.offsetHeight) + 'px;';
+        style += 'left: '  +  input.offsetLeft  + 'px;';
+        style += 'min-width: ' +  input.offsetWidth + 'px;';
+        dropdown.setAttribute('style', style);
+        dropdown.classList.add(dropdownClass());
+
+        return dropdown;
+    }
+
+    function isHovered(dropdown) {
+        var items = document.querySelectorAll(':hover');
+        for (var i = 0; i < items.length; i++) {
+            if (items[i] === dropdown) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function isFocused(input) {
+        var items = document.querySelectorAll('input:focus');
+        for (var i = 0; i < items.length; i++) {
+            if (items[i] === input) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function assignDropdown(input, dropdown) {
+        document.querySelector('body').appendChild(dropdown);
+        input.dropdown = dropdown;
+        input.addEventListener('blur', function() {
+            if (!isHovered(input.dropdown)) { removeDropdown(input); }
+        });
+        dropdown.addEventListener('mouseleave', function() {
+            if (!isFocused(input)) { removeDropdown(input); }
+        });
+    }
+
+    function removeDropdown(input) {
+        if (input.dropdown) {
+            var dropdown = input.dropdown;
+            input.dropdown = null;
+            dropdown.remove();
+        }
+    }
+
+    function renderResults(data) {
+        var list = '';
+        list += '<ul>';
+        for (var i = 0; i < data.length; i++) {
+            list += '<li>' + data[i].zip + ' ' + data[i].name + '</li>';
+        }
+        list += '</ul>';
+
+        return list;
+    }
+
+    function renderNoResult() {
+        return '<span>No results</span>';
+    }
+
+    function renderResultValue(item) {
+        return '' + item.zip + ' ' + item.name;
+    }
+
+    function setSelection(dropdown, item) {
+        var items = dropdown.querySelectorAll('li');
+        for (var i = 0; i < items.length; i++) {
+            if (items[i] === item) { dropdown.selection = i; }
+        }
+    }
+
+    function redrawSelection(dropdown) {
+        var items = dropdown.querySelectorAll('li');
+        for (var i = 0; i < items.length; i++) {
+            items[i].classList.remove('selected');
+        }
+        items[dropdown.selection].classList.add('selected');
+    }
+
+    function selectedValue(dropdown) {
+        var items = dropdown.querySelectorAll('li');
+        return items[dropdown.selection].data;
+    }
+
+    function applySelection(input) {
+        input.value = selectedValue(input.dropdown);
+        removeDropdown(input);
+    }
+
+    function handleResultMouseEnter(item, input) {
+        setSelection(input.dropdown, item);
+        redrawSelection(input.dropdown);
+    }
+
+    function handleResultClick(item, input) {
+        setSelection(input.dropdown, item);
+        redrawSelection(input.dropdown);
+        applySelection(input);
+    }
+
+    function resultMouseEnterHandler(input) {
+        return (function (e) { handleResultMouseEnter(e.target, input); });
+    }
+
+    function resultClickHandler(input) {
+        return (function (e) { handleResultClick(e.target, input); });
+    }
+
+    function setResultValues(dropdown, data) {
+        var items = dropdown.querySelectorAll('li');
+        for (var i = 0; i < items.length; i++) {
+            items[i].data = renderResultValue(data[i]);
+        }
+    }
+
+    function setResultEvents(input) {
+        var dropdown = input.dropdown;
+        var items = dropdown.querySelectorAll('li');
+        for (var i = 0; i < items.length; i++) {
+            items[i].addEventListener('click', resultClickHandler(input));
+            items[i].addEventListener('mouseenter', resultMouseEnterHandler(input));
+        }
+    }
+
+    function initializeSelection(dropdown) {
+        dropdown.selection = -1;
+    }
+
+    function updatePicker(input, data) {
+        var dropdown = dropdownFor(input);
+        initializeSelection(dropdown);
+        if (data.length > 0) {
+            dropdown.innerHTML = renderResults(data);
+            setResultValues(dropdown, data);
+            setResultEvents(input);
+        } else {
+            dropdown.innerHTML = renderNoResult();
+        }
+    }
+
+    function hasDropdown(input) {
+        return !!input.dropdown;
+    }
+
+    function wrapSelection(dropdown, length) {
+        if (dropdown.selection == length) {
+            dropdown.selection = 0;
+        }
+        if (dropdown.selection < 0) {
+            dropdown.selection = length - 1;
+        }
+    }
+
+    function moveSelection(dropdown, direction) {
+        var items = dropdown.querySelectorAll('li');
+        if (items.length > 0) {
+            dropdown.selection += direction;
+            wrapSelection(dropdown, items.length);
+            redrawSelection(dropdown);
+        }
+    }
+
+    var UP = -1;
+    var DOWN = 1;
+
+    function handleDown(e) {
+        e.preventDefault();
+        if (hasDropdown(e.target)) {
+            moveSelection(e.target.dropdown, DOWN);
+        } else {
+            handleSearch(e);
+        }
+    }
+
+    function handleUp(e) {
+        e.preventDefault();
+        if (hasDropdown(e.target)) {
+            moveSelection(e.target.dropdown, UP);
+        } else {
+            handleSearch(e);
+        }
+    }
+
+    function handleEnter(e) {
+        e.preventDefault();
+        applySelection(e.target);
+        removeDropdown(e.target);
+    }
+
+    function handleEscape(e) {
+        e.preventDefault();
+        removeDropdown(e.target);
+    }
+
+    function handleKeydown(e) {
+        switch (e.keyCode) {
+        case 40: // ArrowDown
+            handleDown(e);
+            break;
+        case 38: // ArrowUp
+            handleUp(e);
+            break;
+        case 13: // Enter
+            handleEnter(e);
+            break;
+        case 27: // Escape
+            handleEscape(e);
+            break;
+        default:
+            return;
+        }
+    }
+
+    function polyfill(input) {
+        if (!input.dropdown_listener) {
+            input.dropdown_listener = true;
+            input.addEventListener('keydown', handleKeydown);
+            input.addEventListener('input', handleSearch);
+        }
+    }
+
+    function polyfillDocument() {
+        var elements = document.querySelectorAll('input[type=zip-city]');
+        for (var i = 0; i < elements.length; i++) {
+            polyfill(elements[i]);
+        }
+    }
+
+    function polyfillInsertedNodes() {
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                for (var i = 0; i < mutation.addedNodes.length; i++) {
+                    var node = mutation.addedNodes[i];
+                    if (node.nodeName === 'INPUT' && node.getAttribute('type') === 'zip-city') {
+                        polyfill(node);
+                    }
+                }
+            });
+        });
+        observer.observe(document.body, { childList: true });
+    }
+
+    var loaded = false;
+    function handleLoaded() {
+        if (loaded) { return; }
+        loaded = true;
+
+        polyfillDocument();
+        polyfillInsertedNodes();
+
+    }
+
+    // export
+    this.ZipCode = {
+        endpoint: endpoint,
+        dropdownClass: dropdownClass,
+    };
+
+    // handle async
+    if (document.readyState == 'complete' || document.readyState == 'interactive') {
+        setTimeout(handleLoaded, 1);
+    } else {
+        document.addEventListener('DOMContentLoaded', handleLoaded);
+    }
+}).call(this);

data/lib/json_enum.rb

@@ -0,0 +1,9 @@
+require 'json'
+
+class Enumerator
+  def to_json
+    '[' << each.with_object('') do |e, s|
+      s << "#{s.empty? ? '' : ','}" << e.to_json
+    end << ']'
+  end
+end

data/lib/zipcode/rails.rb

@@ -0,0 +1,4 @@
+require 'zipcode-rack'
+
+class ZipCode::Engine < ::Rails::Engine
+end

data/lib/zipcode-rack.rb

@@ -1,4 +1,5 @@
 require 'grape'
+require 'json_enum'
 
 module ZipCode
   class API < Grape::API
@@ -29,10 +30,11 @@ module ZipCode
       optional :name, type: String
       optional :zip, type: String
       optional :country, type: Symbol, regexp: /^[a-z]{2}$/
+      optional :limit, type: Integer, default: 20
       exactly_one_of :name, :zip
     end
     get '/search' do
-      db.for(country).search(*criteria)
+      db.for(country).search(*criteria).take(params[:limit])
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: zipcode-rack
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Loic Nageleisen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-05 00:00:00.000000000 Z
+date: 2015-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: grape
@@ -115,7 +115,10 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/assets/javascript/zipcode-input.js
+- lib/json_enum.rb
 - lib/zipcode-rack.rb
+- lib/zipcode/rails.rb
 homepage: https://github.com/lloeki/zipcode-rack
 licenses:
 - MIT