Iteration on allowAdditions setting for selection dropdown

RELEASE-NOTES.md

@@ -43,6 +43,7 @@
 - **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions
 - **Dropdown** - Added `showOnFocus` option that lets you specify whether dropdown menu should show on focus
 - **Dropdown** - `fullTextSearch: true` now uses fuzzy search (same as `ui search`)
+- **Dropdown** - Page down and page up now works with dropdown menus
 - **Form** - Added placeholder color rules for IE, `ms-input-placeholder`
 - **Form** - Fix `errored field` dropdown keyboard selection color
 - **Form Validation** - `data-validate` now takes precedence over other validation matching schemes like `name` or `id`

src/definitions/modules/dropdown.js

@@ -169,6 +169,9 @@ $.fn.dropdown = function(parameters) {
             query = module.get.query()
           ;
           module.verbose('Searching for query', query);
+          if(settings.allowAdditions) {
+            module.add.userChoice();
+          }
           module.filter(query);
           if(module.is.searchSelection() && module.can.show() ) {
             module.show();
@@ -1757,11 +1760,35 @@ $.fn.dropdown = function(parameters) {
               html     = settings.templates.message(message)
             ;
             if($message.length > 0) {
-              module.remove.message();
+              $message
+                .html(html)
+              ;
+            }
+            else {
+              $message = $('<div/>')
+                .html(html)
+                .addClass(className.message)
+                .appendTo($menu)
+              ;
             }
-            $message = $(html)
-              .appendTo($menu)
+          },
+          userChoice: function(choice) {
+            var
+              $addition = $menu.children(selector.addition),
+              html      = settings.templates.addition(choice)
             ;
+            if($addition.length > 0) {
+              $addition
+                .html(html)
+              ;
+            }
+            else {
+              $addition = $('<div/>')
+                .html(html)
+                .addClass(className.addition)
+                .prependTo($menu)
+              ;
+            }
           },
           variables: function(message) {
             var
@@ -2345,71 +2372,45 @@ $.fn.dropdown.settings = {
   verbose        : false,
   performance    : true,
 
-  on                     : 'click',
-  // what event should show menu
-
-  action                 : 'activate',
-  // action on item selection
-
-  allowTab               : true,
-  // add tabindex to element
-
-  showOnFocus            : true,
-  // show menu on focus
-
-  fullTextSearch         : false,
-  // search anywhere in value
+  on                     : 'click',    // what event should show menu action on item selection
+  action                 : 'activate', // action on item selection
 
-  placeholder            : 'auto',
-  // whether to convert blank <select> values to placeholder text
+  showOnFocus            : true,       // show menu on focus
+  allowTab               : true,       // add tabindex to element
+  allowCategorySelection : false,      // allow elements with sub-menus to be selected
 
-  preserveHTML           : true,
-  // preserve html when selecting value
+  match                  : 'both',     // what to match against with search selection (both, text, or label)
+  fullTextSearch         : false,      // search anywhere in value
 
-  sortSelect             : false,
-  // sort selection on init
+  placeholder            : 'auto',     // whether to convert blank <select> values to placeholder text
+  preserveHTML           : true,       // preserve html when selecting value
+  sortSelect             : false,      // sort selection on init
 
-  match                  : 'both',
-  // what to match against with search selection (both, text, or label)
+  forceSelection         : true,       // force a choice on blur with search selection
+  useLabels              : true,       // whether multiple select should filter currently active selections from choices
 
-  allowCategorySelection : false,
-  // allow elements with sub-menus to be selected
+  transition             : 'auto',     // auto transition will slide down or up based on direction
+  duration               : 200,        // duration of transition
 
-  forceSelection         : true,
-  // force a value selection on search selection
+  allowAdditions         : false,      // whether multiple select should allow user added values
+  delimiter              : ',',        // multi select delimiting key
 
-  transition             : 'auto',
-  duration               : 200,
-  // menu transition
+  glyphWidth             : 1.0714,     // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width
 
+  // delay before event
   delay : {
     hide   : 300,
     show   : 200,
     search : 50,
     touch  : 50
   },
-  // delay before event
-
-  glyphWidth     : 1.0714,
-  // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width
-
-  allowAdditions : false,
-  // whether multiple select should allow user added values
-
-  tokenize       : 'missing',
-  delimiter      : ',',
-  // multi select delimiting key
 
+  // label settings on multi-select
   label: {
     transition : 'horizontal flip',
-    duration   : 150,
+    duration   : 200,
     variation  : false
   },
-  // label settings on multi-select
-
-  useLabels : true,
-  // whether multiple select should filter currently active selections from choices
-
 
   /* Callbacks */
   onLabelSelect : function($selectedLabels){},
@@ -2448,6 +2449,7 @@ $.fn.dropdown.settings = {
   },
 
   selector : {
+    addition     : '.addition',
     dropdown     : '.ui.dropdown',
     icon         : '> .dropdown.icon',
     input        : '> input[type="hidden"], > select',
@@ -2464,6 +2466,7 @@ $.fn.dropdown.settings = {
 
   className : {
     active      : 'active',
+    addition    : 'addition',
     animating   : 'animating',
     disabled    : 'disabled',
     dropdown    : 'ui dropdown',
@@ -2487,23 +2490,7 @@ $.fn.dropdown.settings = {
 /* Templates */
 $.fn.dropdown.settings.templates = {
 
-  message: function(message) {
-    return '<div class="message">' + message + '</div>';
-  },
-  menu: function(select) {
-    var
-      placeholder = select.placeholder || false,
-      values      = select.values || {},
-      html        = ''
-    ;
-    $.each(select.values, function(index, option) {
-      html += '<div class="item" data-value="' + option.value + '">' + option.name + '</div>';
-    });
-    return html;
-  },
-  label: function(value, text) {
-    return text + '<i class="delete icon"></i>';
-  },
+  // generates dropdown from select values
   dropdown: function(select) {
     var
       placeholder = select.placeholder || false,
@@ -2523,16 +2510,37 @@ $.fn.dropdown.settings.templates = {
     });
     html += '</div>';
     return html;
-  }
-};
+  },
+
+  // generates just menu from select
+  menu: function(select) {
+    var
+      placeholder = select.placeholder || false,
+      values      = select.values || {},
+      html        = ''
+    ;
+    $.each(select.values, function(index, option) {
+      html += '<div class="item" data-value="' + option.value + '">' + option.name + '</div>';
+    });
+    return html;
+  },
+
+  // generates label for multiselect
+  label: function(value, text) {
+    return text + '<i class="delete icon"></i>';
+  },
 
 
-/* Dependencies */
-$.extend( $.easing, {
-  easeOutQuad: function (x, t, b, c, d) {
-    return -c *(t/=d)*(t-2) + b;
+  // generates messages like "No results"
+  message: function(message) {
+    return message;
   },
-});
 
+  // generates user addition to selection menu
+  addition: function(choice) {
+    return choice;
+  }
+
+};
 
 })( jQuery, window , document );

src/themes/github/collections/menu.variables

@@ -16,14 +16,10 @@
 @activeBackground: rgba(0, 0, 0, 0.04);
 @activeHoverBackground: rgba(0, 0, 0, 0.04);
 
-@boxShadow:
-  0px 1px 2px 0px rgba(0, 0, 0, 0.15)
-;
 
 @headerBackground: rgba(0, 0, 0, 0.08);
 
-@subMenuMargin: 1em;
-@subMenuFontSize: 0.9rem;
+@subMenuMargin: 0.5em -0.6em 0;
 @subMenuHorizontalPadding: 0.7em;
 
 @arrowHoverColor: #EEEEEE;