activeadmin_select_many 0.2.8 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3a289f4b6418d0af92538f32caed2af60a8149d6
-  data.tar.gz: 37deed25511b1de438cae523b52a0f4c627d2d4e
+  metadata.gz: 2f658ea409967f4e0cfe78f48dd192d4047b0050
+  data.tar.gz: 4275e93e2a65befd4e712b3b884fe278bcd4c3c2
 SHA512:
-  metadata.gz: a7774b3c4765e20abf7a18379a86f7faf0482c771fac313320bacb555e4a69c440c765da602c1ead8d93952e68a2acfc98d4ec0d626c22cc53f851f55d2242c9
-  data.tar.gz: f7c76a2763f1a7977ea28e17eafbf1f7dde25a784f715d399f2f7b550f370573dd54161de5326e6e0c21ecd11660e6197f06cf3a90b79080ec4406583e42fc22
+  metadata.gz: 7d72c06453f4c81bb5fe90884ad92564e8f1f7ad5068db2e5bcc71bbb027e483e2e55945dc1aa8ad66c5da67614c097649bf84480ddfea32151b80cbc7edbdfe
+  data.tar.gz: 0e9e9dbc6d36d9c0757ca672d43478a081bf4f6806c49f69a83939eecc386ff8133fbf6846ed540d864e0814c8fede3735243978c4ffbed91cb4fefb01cf6d86

data/README.md

@@ -8,6 +8,7 @@ Features for *select_many*:
 - local/remote collections
 - double click to add/remove items
 - sortable (with up/down buttons)
+- key bindings to improve accessibility
 
 Features for *select_one*:
 - search box
@@ -15,6 +16,7 @@ Features for *select_one*:
 - remote collections
 - counter of items found
 - can be used as filter
+- key bindings to improve accessibility
 
 ![screenshot](screenshot.png)
 

data/app/assets/javascripts/activeadmin/select_many.js

@@ -40,6 +40,7 @@ $(document).ready( function() {
     $.proxy( smActivate, $(this) )( event.target );
   });
 
+  // --- select_many ----------------------------------------------------------
   var onLocalSelect = smDebounce( function() {
     var cnt = 0, search = $(this).val().toLowerCase();
     $(this).closest( '.select_many' ).find( '[data-select="src"] option' ).each( function() {
@@ -49,10 +50,12 @@ $(document).ready( function() {
     });
     $(this).parent().find( '.available span' ).text( ' [' + cnt + ']' );
   }, 250 );
-  var onRemoteSelect = smDebounce( function() {
+
+  var onRemoteSelect = smDebounce( function( event ) {
     var search = $(this).val().trim();
-    if( search != '' && $(this).data( 'searching' ) != '1' ) {
+    if( $(this).data( 'searching' ) != '1' && search && $(this).data( 'last-search' ) != search ) {
       $(this).data( 'searching', '1' );
+      $(this).data( 'last-search', search );
       var _this = $(this);
       var data = {}
       var text_key = $(this).data('text');
@@ -82,8 +85,54 @@ $(document).ready( function() {
     var parent = $(this).parent();
     parent.find( '.available' ).append( '<span> [' + parent.find( '[data-select="src"] option' ).length + ']</span>' );
     parent.find( '.selected' ).append( '<span> [' + parent.find( '[data-select="dst"] option' ).length + ']</span>' );
-    $(this).on( 'keyup', $(this).data( 'remote-collection' ) ? onRemoteSelect : onLocalSelect );
+    $(this).on( 'keydown', function( event ) {
+      if( event.which == 13 || event.which == 40 ) {  // enter or arrow down
+        event.preventDefault();
+        $(this).closest( '.select_many' ).find( '[data-select="src"]' ).focus();
+      }
+      else $.proxy( $(this).data( 'remote-collection' ) ? onRemoteSelect : onLocalSelect, $(this) )( event );
+    });
+
+    // --- key bindings -------------------------------------------------------
+    parent.find( '[data-select="src"]' ).on( 'keydown', function( event ) {
+      if( event.which == 13 ) {  // enter
+        event.preventDefault();
+        var opts = $(this).find( ':selected' );
+        if( opts.length > 0 ) {
+          var next = $( opts[0] ).next();
+          $.proxy( smActivate, $(this) )( opts[0] );
+          if( next.length > 0 ) $(this).val( next.val() );
+        }
+      }
+      else if( event.which == 9 || event.which == 39 ) {  // tab or right arrow
+        event.preventDefault();
+        parent.find( '[data-select="dst"]' ).focus();
+      }
+      else if( event.which == 38 ) {  // up arrow
+        if( $(this).find('option')[0] == $(this).find(':selected')[0] ) {
+          event.preventDefault();
+          parent.find( '.search-select' ).focus();
+        }
+      }
+    });
+    parent.find( '[data-select="dst"]' ).on( 'keydown', function( event ) {
+      if( event.which == 13 ) {  // enter
+        event.preventDefault();
+        var opts = $(this).find( ':selected' );
+        if( opts.length > 0 ) {
+          var next = $( opts[0] ).next();
+          $.proxy( smActivate, $(this) )( opts[0] );
+          if( next.length > 0 ) $(this).val( next.val() );
+        }
+      }
+      else if( event.which == 37 ) {  // left arrow
+        event.preventDefault();
+        parent.find( '[data-select="src"]' ).focus();
+      }
+    });
   });
+
+  // --- buttons --------------------------------------------------------------
   $('.select_many .add').on( 'click', function() {
     var select = $(this).parent().prev();
     var current = select.find( 'option:selected' )[0];
@@ -111,16 +160,19 @@ $(document).ready( function() {
     }
   });
 
+  // --- select one -----------------------------------------------------------
   var onRemoteSelectOne = smDebounce( function( event ) {
+    var search = $(this).val().trim();
     var select = $(this).next();
-    if( select.data( 'searching' ) != '1' ) {
+    if( select.data( 'searching' ) != '1' && search && select.data( 'last-search' ) != search ) {
       select.data( 'searching', '1' );
+      select.data( 'last-search', search );
       var data = {}
       var search_key = $(this).data('search') ? $(this).data('search') : 'name_contains';
       var value_key = $(this).data('value') ? $(this).data('value') : 'id';
       var text_key = $(this).data('text') ? $(this).data('text') : 'name';
       var counter_limit = $(this).data('counter-limit') ? Number( $(this).data('counter-limit') ) : 0;
-      data['q['+search_key+']'] = $(this).val();
+      data['q['+search_key+']'] = search;
       $.ajax({
         context: select,
         data: data,
@@ -139,5 +191,28 @@ $(document).ready( function() {
       });
     }
   }, 500 );
-  $('.select-one-inputs > .search-select').on( 'keyup', onRemoteSelectOne );
+
+  $('.select-one-inputs').each( function() {
+    $(this).find( '.search-select' ).on( 'keydown', function( event ) {
+      if( event.which == 38 ) {  // up arrow
+        event.preventDefault();
+        var select = $(this).closest( '.select-one-inputs' ).find( '[data-select="src"]' );
+        var prev = select.find( ':selected' ).prev();
+        if( prev.length ) select.val( prev.val() );
+      }
+      else if( event.which == 40 ) {  // down arrow
+        event.preventDefault();
+        var select = $(this).closest( '.select-one-inputs' ).find( '[data-select="src"]' );
+        var next = select.find( ':selected' ).next();
+        if( next.length ) select.val( next.val() );
+      }
+      else $.proxy( onRemoteSelectOne, $(this) )( event );
+    });
+    $(this).find( '[data-select="src"]' ).on( 'keydown', function( event ) {
+      if( event.which == 37 ) {  // left arrow
+        event.preventDefault();
+        $(this).closest( '.select-one-inputs' ).find( '.search-select' ).focus();
+      }
+    });
+  });
 });

data/lib/activeadmin/select_many/version.rb

@@ -1,5 +1,5 @@
 module ActiveAdmin
   module SelectMany
-    VERSION = '0.2.8'
+    VERSION = '0.3.0'
   end
 end

data/lib/formtastic/inputs/select_many_input.rb

@@ -10,9 +10,9 @@ module Formtastic
           template.content_tag( :div, opts ) do
             hidden_input <<
             search_box_html <<
-            template.content_tag( :span, '', class: 'empty'  ) <<
+            template.content_tag( :span, '', class: 'empty' ) <<
             template.content_tag( :span, template.t( 'inputs.select_many.available' ), class: 'available' ) <<
-            template.content_tag( :span, template.t( 'inputs.select_many.selected'  ), class: 'selected' ) <<
+            template.content_tag( :span, template.t( 'inputs.select_many.selected' ), class: 'selected' ) <<
             select_src_html <<
             buttons_html <<
             select_dst_html
@@ -40,8 +40,17 @@ module Formtastic
       end
 
       def search_box_html
-        @opts ||= {id: nil, class: 'search-select', placeholder: options.delete( :placeholder ), 'data-remote-collection': options[:'data-remote-collection'], 'data-search': options[:search_param] ? options[:search_param] : 'name_contains', 'data-text': options[:member_label] ? options[:member_label] : ( options[:text_key] ? options[:text_key] : 'name' ), 'data-value': options[:value_key] ? options[:value_key] : 'id', 'data-counter-limit': options[:counter_limit].to_i}
-        template.text_field_tag( nil, '', @opts )
+        opts = {
+          id: nil,
+          class: 'search-select',
+          placeholder: options.delete( :placeholder ),
+          'data-counter-limit': options[:counter_limit].to_i,
+          'data-remote-collection': options[:'data-remote-collection'],
+          'data-search': options[:search_param] ? options[:search_param] : 'name_contains',
+          'data-text': options[:member_label] ? options[:member_label] : ( options[:text_key] ? options[:text_key] : 'name' ),
+          'data-value': options[:value_key] ? options[:value_key] : 'id',
+        }
+        template.text_field_tag( nil, '', opts )
       end
 
       def select_src_html

data/lib/formtastic/inputs/select_one_input.rb

@@ -26,8 +26,18 @@ module Formtastic
 
       def search_box
         # TODO: remove text_key in next major version
-        @opts ||= {id: nil, class: 'search-select', placeholder: options[:placeholder], 'data-remote-collection': options[:remote_collection], 'data-search': options[:search_param] ? options[:search_param] : 'name_contains', 'data-text': options[:member_label] ? options[:member_label] : ( options[:text_key] ? options[:text_key] : 'name' ), 'data-value': options[:value_key] ? options[:value_key] : 'id', 'data-msg': options[:msg_items], 'data-counter-limit': options[:counter_limit].to_i}
-        template.text_field_tag( nil, '', @opts )
+        opts = {
+          id: nil,
+          class: 'search-select',
+          placeholder: options[:placeholder],
+          'data-counter-limit': options[:counter_limit].to_i,
+          'data-msg': options[:msg_items],
+          'data-remote-collection': options[:remote_collection],
+          'data-search': options[:search_param] ? options[:search_param] : 'name_contains',
+          'data-text': options[:member_label] ? options[:member_label] : ( options[:text_key] ? options[:text_key] : 'name' ),
+          'data-value': options[:value_key] ? options[:value_key] : 'id',
+        }
+        template.text_field_tag( nil, '', opts )
       end
 
       def select_html

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_select_many
 version: !ruby/object:Gem::Version
-  version: 0.2.8
+  version: 0.3.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-14 00:00:00.000000000 Z
+date: 2017-10-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin