search_selector 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ec6d006cd1cc884fe45e29de8bb34487c4803271
+  data.tar.gz: 61039c2b023b4d022f5ed8fa6792da51de95bda9
+SHA512:
+  metadata.gz: 89bec611590ccf419f9888cb70c022d4ff0e6efcd6b9a82be980896140af877d2ca55fec3237f27fe8cbc07b2221686d416b7d7da444179691b875379a900c41
+  data.tar.gz: 730d2569f136a7bac223d8b874723d3ecaabbf59d6d9091f11c3816c433b2a394e5cd4d4880ff3a4532b814615edf4d675ec78e5688482ab89a55483163841a7

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2014 Alexander Gorbunov
+
+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.rdoc

@@ -0,0 +1,3 @@
+= SearchSelector
+
+This project rocks and uses MIT-LICENSE.

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    = 'SearchSelector'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/search_selector.js.coffee

@@ -0,0 +1,167 @@
+(
+  ($) ->
+    class SearchSelector
+      templates: {
+        ui: '''
+        <div class="ss-dropdown ss-hide">
+          <div>
+            <input type="text" placeholder="начните вводить..." class="ss-filter-field">
+          </div>
+          <ul class="ss-items">
+          </ul>
+        </div>
+        '''
+
+        item: '''
+        <li>
+          <a href="#" class="ss-item-handler" data-id="{id}">{name}</a>
+        </li>
+        '''
+      }
+
+      triggers:
+        opened: 'ss-opened'
+        closed: 'ss-closed'
+        change: 'ss-change'
+        keyup:   'ss-keyup'
+
+      css:
+        hide: 'ss-hide'
+
+      selectors:
+        handler:      '.ss-handler'
+        itemHandler: '.ss-item-handler'
+        dropDown:    '.ss-dropdown'
+        items:       '.ss-dropdown .ss-items'
+        item:        '.ss-dropdown .ss-items .ss-item-handler'
+        filterField: '.ss-filter-field'
+
+      bindings: {
+        'click handler': ->
+          if @isOpen
+            @close()
+          else
+            @open()
+
+        'click item': (e) ->
+          e.preventDefault()
+          cityId = $(e.currentTarget).data('id')
+          @select(cityId)
+          @close()
+
+        'keyup filterField': (e) ->
+          @trigger('keyup', e.currentTarget)
+      }
+
+      find: (selector) -> @el.find(selector)
+      trigger: (triggerName, options = null) ->
+        @handler.trigger(@triggers[triggerName], options)
+
+      constructor: (@options = {}) ->
+        @el = $(options['el'])
+        throw 'Anchor element not found' unless @el.length
+        @selected = null
+        @selected_caption = null
+
+        @el.append($(@template('ui')))
+        @handler = @find(@selectors.handler).eq(0)
+        for event_selector, callback of @bindings
+          do (event_selector, callback) =>
+            [event, selector] = event_selector.split(' ')
+            # Заменяем на css селектор
+            selector = @selectors[selector]
+            @el.on event, selector, =>
+              callback.apply(@, arguments) if typeof callback == 'function' and event and selector
+        @init()
+
+      init: ->
+        @$dropDown = @find(@selectors.dropDown)
+        @$items = @find(@selectors.items)
+        @isOpen = false
+        @items = []
+        @setItems(@options['items']) if @options['items']?
+        @select(@options['value']) if @options['value']?
+
+      open: ->
+        offset = @handler.offset()
+        @$dropDown.css(top: offset.top + parseInt(@handler.outerHeight(true)))
+        @$dropDown.css(left: offset.left)
+        @$dropDown.removeClass(@css.hide)
+        @isOpen = true
+        @trigger('opened')
+
+      close: ->
+        @$dropDown.addClass(@css.hide)
+        @isOpen = false
+        @trigger('closed')
+
+      drawDropDown: ->
+        @$items.empty()
+        for item of @items
+          [key, val] =
+            if @items instanceof Array
+              [item, item]
+            else
+              [item, @items[item]]
+          $item = $(@template('item', id: key, name: val))
+          @$items.append($item)
+
+      template: (name, params = {}) ->
+        template = @templates[name]
+        for key, val of params
+          template = template.replace(new RegExp("\\{#{key}\\}", 'gi'), val)
+        template
+
+      select: (item) ->
+        if @items instanceof Array
+          if item in @items
+            @selected = item
+            @selected_caption = item
+            @handler.html(item)
+            @trigger('change', [@val(), @text()])
+        else
+          if item.toString() in Object.keys(@items)
+            @selected = item
+            @selected_caption = @items[item]
+            @handler.html(@text())
+            @trigger('change', [@val(), @text()])
+
+      val: -> @selected
+
+      text: -> @selected_caption
+
+      setItems: (items) ->
+        @items = items
+        @drawDropDown()
+
+    jQuery.fn.search_selector = (options) ->
+      $el = $(this)
+      if typeof options == 'string'
+        searchSelector = $el.data('search-selector')
+        switch options
+          when 'val'
+            searchSelector.selected
+          when 'text'
+            searchSelector.text()
+          when 'search_selector'
+            searchSelector
+      else
+        $ss = $('<span class="ss-element"></span>')
+        $el.before($ss).detach()
+        $ss.append($el)
+        $el.addClass('ss-handler')
+        searchSelector = new SearchSelector($.extend(options, el: $ss))
+        $ss.data('search-selector', searchSelector)
+        $el.data('search-selector', searchSelector)
+
+        $(document).on 'click', (e) ->
+          searchSelector.close() if $(e.target).closest('.ss-element').data('search-selector') != searchSelector
+
+)(jQuery)
+
+
+
+
+
+
+

data/app/assets/stylesheets/search_selector.css.scss

@@ -0,0 +1,51 @@
+.ss-handler {
+  color: #ff821e;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+//  margin-left: 20px;
+//  margin-right: 10px;
+//  margin-top: 15px;
+  border-bottom: 1px dashed #ff821e;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ss-hide {
+  display: none !important;
+}
+
+.ss-dropdown {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  //  width: 200px;
+  z-index: 1;
+  background: rgba(#323232, 1);
+  ul {
+    list-style: none;
+    li {
+      padding: 0px;
+      a {
+        color: white;
+        text-decoration: none;
+        display: block;
+        outline: none;
+        padding: 3px 10px 3px 10px;
+        &:hover {
+          background: #ff821e;
+        }
+      }
+    }
+  }
+  .ss-filter-field {
+    margin: 0 10px;
+    width: calc(100% - 20px);
+    height: 24px;
+    border: none;
+    padding: 5px;
+    outline: none;
+  }
+}

data/lib/search_selector/version.rb

@@ -0,0 +1,3 @@
+module SearchSelector
+  VERSION = '0.0.1'
+end

data/lib/search_selector.rb

@@ -0,0 +1,4 @@
+module SearchSelector
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/tasks/search_selector_tasks.rake

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

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: search_selector
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Alexander Gorbunov
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-09-05 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+description: DropDown selector with search field.
+email:
+- lexgorbunov@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.rdoc
+- Rakefile
+- app/assets/javascripts/search_selector.js.coffee
+- app/assets/stylesheets/search_selector.css.scss
+- lib/search_selector.rb
+- lib/search_selector/version.rb
+- lib/tasks/search_selector_tasks.rake
+homepage: https://github.com/lexgorbunov/search_selector
+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.2.2
+signing_key: 
+specification_version: 4
+summary: DropDown selector with search field.
+test_files: []