sugoi_selectbox-rails 0.0.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 83b4391f8bc966e7bb1c66aa906e7159e7985e29
+  data.tar.gz: 3cf7aa81dca3386f286ed1d2add5a49e7e4dbfaf
+SHA512:
+  metadata.gz: db7dce00c42828345c1ce56550e35307eceec5545b2b6359c9d12a1d10b7fa207931d87f6c63bb7d5c8f55c99c21fcf8269e0915c929313d9ccfa978e81d7f98
+  data.tar.gz: 573bdddab90f0901626986f1b6f7656e0ff55eba57480c75a6749f7a4b1663cfbdfd773e575a4ed3793cf8936632636e10b780bfcba6474bf00a56a0f4c9454e

data/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log
+*~

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in sugoi_selectbox-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 jiikko
+
+MIT License
+
+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,52 @@
+# sugoi_selectbox-rails
+
+jQuery based replacement for select boxes.
+
+![sugoi](https://cloud.githubusercontent.com/assets/1664497/7248919/9405f6fe-e851-11e4-8df6-252d0f948660.gif)
+
+# Features
+
+* Sugoi
+* Lightweight
+
+# 動作確認しているブラウザ
+
+* Chrome(PC)
+* FireFox(PC)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'sugoi_selectbox-rails', github: 'jiikko/sugoi-selectbox-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Add in your javascript.js
+```
+//= require jquery
+//= require sugoi_selectbox
+```
+
+Add in your style.css
+```
+//= require sugoi_selectbox
+```
+
+## Usage
+
+```javascript
+$("#select").suguiSelectbox()
+```
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/sugoi_selectbox-rails/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,7 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec
+

data/lib/sugoi_selectbox/rails/engine.rb

@@ -0,0 +1,6 @@
+module SugoiSelectbox
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/sugoi_selectbox/rails/version.rb

@@ -0,0 +1,5 @@
+module SugoiSelectbox
+  module Rails
+    VERSION = "0.0.3"
+  end
+end

data/lib/sugoi_selectbox/rails.rb

@@ -0,0 +1,7 @@
+require "sugoi_selectbox/rails/version"
+require "sugoi_selectbox/rails/engine"
+
+module SugoiSelectbox
+  module Rails
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,2 @@
+$LOAD_PATH.unshift File.expand_path('../../lib', __FILE__)
+require 'sugoi_selectbox/rails'

data/spec/sugoi_selectbox/rails_spec.rb

@@ -0,0 +1,11 @@
+require 'spec_helper'
+
+describe SugoiSelectbox::Rails do
+  it 'has a version number' do
+    expect(SugoiSelectbox::Rails::VERSION).not_to be nil
+  end
+
+  it 'does something useful' do
+    expect(false).to eq(true)
+  end
+end

data/sugoi_selectbox-rails.gemspec

@@ -0,0 +1,24 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'sugoi_selectbox/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "sugoi_selectbox-rails"
+  spec.version       = SugoiSelectbox::Rails::VERSION
+  spec.authors       = ["jiikko"]
+  spec.email         = ["n905i.1214@gmail.com"]
+  spec.summary       = %q{select boxes.}
+  spec.description   = %q{jQuery based replacement for select boxes.}
+  spec.homepage      = "https://github.com/jiikko/sugoi_selectbox-rails"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec"
+end

data/vendor/assets/javascripts/sugoi_selectbox.js

@@ -0,0 +1,403 @@
+(function ($) {
+  var KEY, ResultList, Select, Selectionm, Container, SearchField, HiddenField;
+
+  KEY = {
+      TAB:        9,
+      ENTER:     13,
+      ESC:       27,
+      SPACE:     32,
+      LEFT:      37,
+      UP:        38,
+      RIGHT:     39,
+      DOWN:      40,
+      SHIFT:     16,
+      CTRL:      17,
+      ALT:       18,
+      PAGE_UP:   33,
+      PAGE_DOWN: 34,
+      HOME:      36,
+      END:       35,
+      BACKSPACE:  8,
+      DELETE:    46
+  };
+
+  Container = new String +
+        "<div data-sugoi-selectbox>" +
+          "<div class='data-sugoi-selectbox-close' data-sugoi-selectbox-top>" +
+            "<span class=currentValue data-sugoi-selectbox-current-value></span>" +
+            "<b></b>" +
+          "</div>" +
+          "<div data-sugoi-selectbox-dropdown>" +
+            "<input type='text' autocomplete='off'>" +
+            "<div data-sugoi-selectbox-list></div>" +
+          "</div>" +
+          "<input type='hidden'>" +
+        "</div>";
+
+  Selection = {
+    init: function (select) {
+      var $container = select.$container;
+      var lists = function () {
+        return $container.find("li");
+      };
+
+      return {
+        isOver: function (relative_position) {
+          var next_position = this.getIndex() + relative_position;
+          if(
+              lists().length <= next_position ||
+              next_position < 0
+            ) {
+              return true;
+          }
+        },
+        getIndex: function () {
+          var index;
+          lists().each(function (i, item) {
+            if($(item).hasClass("sugoi-highlight")) {
+              index = i;
+            }
+          })
+          return index;
+        },
+        move: function (relative_position) {
+          var current = this.getIndex() + relative_position;
+          var move_to_position = 0
+            if(current > 0) {
+              move_to_position = current;
+            }
+          this.set(move_to_position);
+        },
+        clear: function (index) {
+          lists().removeClass("sugoi-highlight");
+        },
+        get: function () {
+          return $(lists().get(this.getIndex()));
+        },
+        set: function (index) {
+          this.clear();
+          $activeList = $(lists().get(index));
+          $activeList.addClass("sugoi-highlight");
+          $(select.el).trigger("scrollToSelecting");
+        },
+        choose: function () {
+          if(this.getIndex() !== undefined) {
+            li = lists().get(this.getIndex());
+            li.click();
+          }
+        },
+        setDefault: function () {
+          if($(lists()[0]).data("role") === "blank") {
+            return;
+          }
+
+          var currentvalue = $container.find("span");
+          var isFinded;
+          if(currentvalue) {
+            lists().each(function (i, item) {
+              if(currentvalue.attr("data-id") === $(item).attr("data-id")) {
+                select.selection.set(i);
+                isFinded = true;
+                return false;
+              }
+            });
+            if(!isFinded) { this.set(0); }
+          }
+        }
+      }
+    }
+  }
+
+  HiddenField = {
+    init: function (select) {
+      var $container = select.$container;
+      var $hiddenField = $container.find("input[type=hidden]");
+      $hiddenField.attr("name", select.el.attr("name"));
+
+      var _set = function () {
+        $container.find("input[type=hidden]").val(
+            $container.find("[data-sugoi-selectbox-current-value]").attr("data-id")
+        );
+      };
+      _set();
+
+      return {
+        set: function () {
+          _set();
+        }
+      }
+    }
+  }
+
+  SearchField = {
+    init: function (select, resultList) {
+      var $container = select.$container;
+
+      $container.find("input").on("keyup", function (e) {
+        if (
+          e.which >= 48             ||
+          e.which === KEY.SPACE     ||
+          e.which === KEY.BACKSPACE ||
+          e.which === KEY.DELETE    ||
+          e.which === KEY.ENTER     ||
+          e.which === KEY.LEFT      ||
+          e.which === KEY.RIGHT
+        ) {
+          resultList.update();
+        }
+      });
+
+      $container.find("input").on("keydown", function (e) {
+        switch (e.which) {
+          case KEY.TAB:
+            select.selection.choose();
+            return;
+          case KEY.ENTER:
+            e.preventDefault();
+            select.selection.choose();
+            return;
+          case KEY.UP:
+            if(select.selection.isOver(-1)) { return; }
+            select.selection.move(-1);
+            return;
+          case KEY.DOWN:
+            if(select.selection.isOver(1)) { return; }
+            select.selection.move(1);
+            return;
+          case KEY.ESC:
+            $(select.el).trigger("canceled");
+            return;
+        };
+      });
+    }
+  }
+
+  ResultList = {
+    init: function (select) {
+      var self = this;
+      var lists = [];
+      var currentIndex = 0;
+      var $container = select.$container;
+      var add = function (obj) {
+        var $li = $("<li>");
+        $li.html(obj.name);
+        $li.attr("data-role", "clickable");
+        $li.attr("data-id", obj["data-id"]);
+        list.push($li);
+      };
+
+      $container.on("click", "li", function (e) {
+        console.log("clicked");
+
+        if($(list[0]).data("role") === "blank") {
+          return;
+        }
+
+        $listItem = $(e.target)
+        $listItem.remove();
+        select.display.show($listItem);
+        select.el.trigger('clickedList');
+      });
+
+      $container.on("mouseenter", "li[data-role=clickable]", function (e) {
+        var self = this;
+        $container.find("li").each(function (i, item) {
+          if(self == item) {
+            select.selection.set(i);
+            return;
+          }
+        });
+      }).on("mouseleave", "li", function (e) {
+        select.selection.clear();
+      });
+
+      return {
+        htmledLists: function() {
+          var $ul = $("<ul>");
+          $.each(list, function(i, item){
+            $ul.append(item);
+          });
+          if(list.length == 0) {
+            var $li = $("<li>");
+            $li.attr("data-role", "blank");
+            $li.html("No matches found");
+            list.push($li);
+            $ul.append($li);
+          }
+          return $ul;
+        },
+        clear: function () {
+          list = [];
+        },
+        result: function () {
+          return $container.find("ul");
+        },
+        update: function () {
+          var query = $container.find("input").val();
+          this.createList(query);
+          select.selection.setDefault();
+        },
+        initSearchField: function () {
+          return SearchField.init(select, this);
+        },
+        createList: function (query) {
+          this.clear();
+          $container.find("[data-sugoi-selectbox-list] ul").remove();
+          $.each(select.el.find("option"), function () {
+            $li = $(this);
+            if($li.html() === '') { return true; }
+            if((new RegExp(query)).test($li.html())) {
+              add(
+                { "data-id": $li.val(), "name": $li.html() }
+              );
+            }
+          });
+          $container.find("[data-sugoi-selectbox-list]").append(
+            this.htmledLists()
+          );
+        },
+        scrollToSelecting: function (selection) {
+          var listYWithAmariY = selection.get().offset().top + selection.get().outerHeight();
+          var listY = this.result().offset().top + this.result().outerHeight();
+          var amriY = listYWithAmariY - listY;
+
+          // down
+          if(amriY > 0) {
+            this.result().scrollTop(
+              this.result().scrollTop() + amriY
+            );
+          }
+
+          // up
+          var y = selection.get().offset().top - this.result().offset().top;
+          if(y < 0) {
+            this.result().scrollTop(
+              this.result().scrollTop() + y
+            );
+          }
+        },
+      }
+    }
+  }
+
+  var Display = {
+    init: function (select) {
+      var $container = select.$container;
+      var $selectedValue = $container.find("[data-sugoi-selectbox-current-value]");
+      var selectorEscape = function (val) {
+        return val.replace(/[ !"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, '\\$&');
+      };
+
+      (function () {
+        var id = select.el.find("option:selected").val();
+        if(id) {
+          var name = select.$container.find("li[data-id=" + selectorEscape(id) + "]").html();
+          $selectedValue.html(name);
+          $selectedValue.attr("data-id", id);
+        } else {
+          $selectedValue.html('未選択');
+        }
+      })();
+
+      (function () {
+        var width = select.el.outerWidth();
+        var height = select.el.outerHeight();
+        $container.find("[data-sugoi-selectbox]").css({ "width": width });
+        $container.css({ 'height': height });
+      })();
+
+      return {
+        show: function (node) {
+          var $node = $(node);
+          $selectedValue.html($node.html());
+          $selectedValue.attr("data-id", $node.attr("data-id"));
+          select.dropdown.createList();
+          select.hiddenField.set();
+        }
+      }
+    }
+  };
+
+  var DropDown = {
+    init: function (select){ //  draw
+      var $el = $(select.el);
+      var $container = select.$container;
+      var $dropdown_div = $container.find("[data-sugoi-selectbox-dropdown]");
+      select.resultList.initSearchField();
+
+      $container.find("[data-sugoi-selectbox-top]").on("click", function () {
+        $(select.el).trigger('clickedList');
+      });
+      select.resultList.createList();
+
+      var isOpen = function () {
+        return $dropdown_div.is(':visible');
+      };
+
+      (function () {
+        var isHover = true;
+        $(select.$container).hover(function () {
+          isHover = true;
+        }, function () {
+          isHover = false;
+        });
+        $(document).on('mouseup', function () {
+          if(!isHover && isOpen()) {
+            $(select.el).trigger("canceled");
+          }
+        });
+      })();
+
+      return {
+        createList: function () {
+          select.resultList.createList();
+        },
+        toggle: function () {
+          var topNode = $container.find("[data-sugoi-selectbox-top]");
+          $dropdown_div.toggle();
+          if(isOpen()) {
+            select.selection.setDefault();
+            select.resultList.update();
+            $dropdown_div.find("input").select();
+            topNode.removeClass("data-sugoi-selectbox-close");
+          } else {
+            topNode.addClass("data-sugoi-selectbox-close");
+          }
+        }
+      }
+    }
+  };
+
+  // あとで名前をかえる
+  Select = {
+    init: function (el) {
+      this.el = $(el);
+      this.el.after(
+         // wrap for height. css no position is yokuwakrann.
+         $("<div>").html(Container)
+        );
+      this.$container = $(this.el.next());
+      this.selection = Selection.init(this);
+      this.resultList = ResultList.init(this);
+      this.dropdown = DropDown.init(this);
+      this.display =  Display.init(this);
+      this.hiddenField = HiddenField.init(this);  // list構築後に実行する必要あり
+      this.el.hide();
+
+      var self = this;
+      this.el.on('clickedList canceled', this.el, function () {
+        console.log("clickedlist or canceled");
+        self.dropdown.toggle();
+      });
+      this.dropdown.toggle();
+
+      this.el.on('scrollToSelecting', this.el, function () {
+        self.resultList.scrollToSelecting(self.selection);
+      });
+    }
+  };
+
+  $.fn.suguiSelectbox = function () {
+    Select.init(this);
+  };
+}(jQuery));

data/vendor/assets/stylesheets/sugoi_selectbox.css

@@ -0,0 +1,56 @@
+[data-sugoi-selectbox] {
+  border: 1px solid #ccc;
+  margin: 2px;
+  padding-left: 5px;
+  background: #fff;
+  z-index: 999;
+  position: absolute;
+}
+
+[data-sugoi-selectbox] input {
+  outline: 0;
+  margin-bottom: 5px;
+}
+
+[data-sugoi-selectbox-top] {
+  display: table;
+  width: 100%;
+  cursor: pointer;
+}
+
+[data-sugoi-selectbox-top] [data-sugoi-selectbox-current-value] {
+  display: table-cell;
+  width: `100%;
+}
+
+.data-sugoi-selectbox-close[data-sugoi-selectbox-top] b {
+  display: table-cell;
+  background: #ccc;
+  height: 100%;
+  width: 20px;
+}
+
+[data-sugoi-selectbox-dropdown] {
+  z-index: 1000;
+}
+
+[data-sugoi-selectbox-current-value] {
+  display: block;
+}
+
+[data-sugoi-selectbox-list] ul {
+  max-height: 300px;
+  padding: 0px;
+  margin: 0px;
+  overflow-y: auto;
+}
+
+[data-sugoi-selectbox-list] li {
+  list-style-type: none;
+  cursor: pointer;
+}
+
+.sugoi-highlight {
+  background: #3875d7;
+  color: white;
+}

metadata

@@ -0,0 +1,101 @@
+--- !ruby/object:Gem::Specification
+name: sugoi_selectbox-rails
+version: !ruby/object:Gem::Version
+  version: 0.0.3
+platform: ruby
+authors:
+- jiikko
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: jQuery based replacement for select boxes.
+email:
+- n905i.1214@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/sugoi_selectbox/rails.rb
+- lib/sugoi_selectbox/rails/engine.rb
+- lib/sugoi_selectbox/rails/version.rb
+- spec/spec_helper.rb
+- spec/sugoi_selectbox/rails_spec.rb
+- sugoi_selectbox-rails.gemspec
+- vendor/assets/javascripts/sugoi_selectbox.js
+- vendor/assets/stylesheets/sugoi_selectbox.css
+homepage: https://github.com/jiikko/sugoi_selectbox-rails
+licenses:
+- MIT
+metadata: {}
+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: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: select boxes.
+test_files:
+- spec/spec_helper.rb
+- spec/sugoi_selectbox/rails_spec.rb