fomantic-ui-sass 2.8.7.1 → 2.8.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui/calendar.js +9 -11
  4. data/app/assets/javascripts/semantic-ui/dimmer.js +8 -11
  5. data/app/assets/javascripts/semantic-ui/dropdown.js +191 -99
  6. data/app/assets/javascripts/semantic-ui/form.js +98 -60
  7. data/app/assets/javascripts/semantic-ui/modal.js +259 -16
  8. data/app/assets/javascripts/semantic-ui/nag.js +130 -64
  9. data/app/assets/javascripts/semantic-ui/popup.js +4 -4
  10. data/app/assets/javascripts/semantic-ui/progress.js +6 -8
  11. data/app/assets/javascripts/semantic-ui/search.js +14 -12
  12. data/app/assets/javascripts/semantic-ui/slider.js +55 -31
  13. data/app/assets/javascripts/semantic-ui/toast.js +26 -6
  14. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +1 -1
  15. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +46 -5
  16. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +14 -7
  17. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +6 -4
  18. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +50 -3
  19. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +6 -2
  20. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +29 -2
  21. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +3 -4
  22. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +1 -1
  23. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1 -1
  24. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +10 -5
  25. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +237 -65
  26. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +1 -1
  27. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +2 -1
  28. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +1 -1
  29. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +1 -1
  30. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +41 -37
  31. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +1 -1
  32. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +1 -1
  33. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +1 -1
  34. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +34 -2
  35. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +1 -1
  36. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +1 -1
  37. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -3
  38. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +2 -2
  39. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +1 -1
  40. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +3 -3
  41. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +46 -4
  42. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +1 -1
  43. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +72 -3
  44. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +1 -1
  45. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +19 -8
  46. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +168 -16
  47. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +4 -2
  48. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +18 -10
  49. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +18 -33
  50. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +1 -1
  51. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +1 -1
  52. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +1 -1
  53. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +3 -1
  54. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +1 -2
  55. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +1 -1
  56. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +97 -10
  57. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +1 -1
  58. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +1 -1
  59. data/app/assets/stylesheets/semantic-ui/views/_card.scss +74 -2
  60. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +1 -1
  61. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +1 -1
  62. data/app/assets/stylesheets/semantic-ui/views/_item.scss +1 -1
  63. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +1 -1
  64. data/lib/fomantic/ui/sass/version.rb +2 -2
  65. metadata +6 -6
@@ -87,6 +87,7 @@ $.fn.dropdown = function(parameters) {
87
87
  internalChange = false,
88
88
  iconClicked = false,
89
89
  element = this,
90
+ focused = false,
90
91
  instance = $module.data(moduleNamespace),
91
92
 
92
93
  selectActionActive,
@@ -296,7 +297,9 @@ $.fn.dropdown = function(parameters) {
296
297
  : module.get.query()
297
298
  ;
298
299
  module.verbose('Searching for query', query);
299
- if(module.has.minCharacters(query)) {
300
+ if(settings.fireOnInit === false && module.is.initialLoad()) {
301
+ module.verbose('Skipping callback on initial load', settings.onSearch);
302
+ } else if(module.has.minCharacters(query) && settings.onSearch.call(element, query) !== false) {
300
303
  module.filter(query);
301
304
  }
302
305
  else {
@@ -358,7 +361,7 @@ $.fn.dropdown = function(parameters) {
358
361
  if( !module.has.menu() ) {
359
362
  module.create.menu();
360
363
  }
361
- if ( module.is.selection() && module.is.clearable() && !module.has.clearItem() ) {
364
+ if ( module.is.clearable() && !module.has.clearItem() ) {
362
365
  module.verbose('Adding clear icon');
363
366
  $clear = $('<i />')
364
367
  .addClass('remove icon')
@@ -369,7 +372,7 @@ $.fn.dropdown = function(parameters) {
369
372
  module.verbose('Adding search input');
370
373
  $search = $('<input />')
371
374
  .addClass(className.search)
372
- .prop('autocomplete', 'off')
375
+ .prop('autocomplete', module.is.chrome() ? 'fomantic-search' : 'off')
373
376
  .insertBefore($text)
374
377
  ;
375
378
  }
@@ -497,6 +500,11 @@ $.fn.dropdown = function(parameters) {
497
500
  ;
498
501
  },
499
502
 
503
+ clearItems: function() {
504
+ $menu.empty();
505
+ module.refreshItems();
506
+ },
507
+
500
508
  toggle: function() {
501
509
  module.verbose('Toggling menu visibility');
502
510
  if( !module.is.active() ) {
@@ -512,9 +520,12 @@ $.fn.dropdown = function(parameters) {
512
520
  ? callback
513
521
  : function(){}
514
522
  ;
523
+ if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) {
524
+ module.clearItems();
525
+ }
515
526
  if(!module.can.show() && module.is.remote()) {
516
527
  module.debug('No API results retrieved, searching before show');
517
- module.queryRemote(module.get.query(), module.show);
528
+ module.queryRemote(module.get.query(), module.show, [callback, preventFocus]);
518
529
  }
519
530
  if( module.can.show() && !module.is.active() ) {
520
531
  module.debug('Showing dropdown');
@@ -560,6 +571,7 @@ $.fn.dropdown = function(parameters) {
560
571
  module.unbind.intent();
561
572
  }
562
573
  iconClicked = false;
574
+ focused = false;
563
575
  },
564
576
 
565
577
  hideOthers: function() {
@@ -638,6 +650,7 @@ $.fn.dropdown = function(parameters) {
638
650
  if(module.is.multiple()) {
639
651
  $module
640
652
  .on(clickEvent + eventNamespace, module.event.click)
653
+ .on(clickEvent + eventNamespace, module.event.search.focus)
641
654
  ;
642
655
  }
643
656
  }
@@ -767,11 +780,14 @@ $.fn.dropdown = function(parameters) {
767
780
  if(!Array.isArray(preSelected)) {
768
781
  preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : [];
769
782
  }
770
- $.each(preSelected,function(index,value){
771
- $item.filter('[data-value="'+value+'"]')
772
- .addClass(className.filtered)
773
- ;
774
- });
783
+ if (module.is.multiple()) {
784
+ $.each(preSelected,function(index,value){
785
+ $item.filter('[data-value="'+value+'"]')
786
+ .addClass(className.filtered)
787
+ ;
788
+ });
789
+ }
790
+ module.focusSearch(true);
775
791
  afterFiltered();
776
792
  });
777
793
  }
@@ -785,7 +801,10 @@ $.fn.dropdown = function(parameters) {
785
801
  }
786
802
  },
787
803
 
788
- queryRemote: function(query, callback) {
804
+ queryRemote: function(query, callback, callbackParameters) {
805
+ if(!Array.isArray(callbackParameters)){
806
+ callbackParameters = [callbackParameters];
807
+ }
789
808
  var
790
809
  apiSettings = {
791
810
  errorDuration : false,
@@ -796,11 +815,15 @@ $.fn.dropdown = function(parameters) {
796
815
  },
797
816
  onError: function() {
798
817
  module.add.message(message.serverError);
799
- callback();
818
+ iconClicked = false;
819
+ focused = false;
820
+ callback.apply(null, callbackParameters);
800
821
  },
801
822
  onFailure: function() {
802
823
  module.add.message(message.serverError);
803
- callback();
824
+ iconClicked = false;
825
+ focused = false;
826
+ callback.apply(null, callbackParameters);
804
827
  },
805
828
  onSuccess : function(response) {
806
829
  var
@@ -817,7 +840,16 @@ $.fn.dropdown = function(parameters) {
817
840
  if(values.length===0 && !settings.allowAdditions) {
818
841
  module.add.message(message.noResults);
819
842
  }
820
- callback();
843
+ else {
844
+ var value = module.is.multiple() ? module.get.values() : module.get.value();
845
+ if (value !== '') {
846
+ module.verbose('Value(s) present after click icon, select value(s) in items');
847
+ module.set.selected(value, null, null, true);
848
+ }
849
+ }
850
+ iconClicked = false;
851
+ focused = false;
852
+ callback.apply(null, callbackParameters);
821
853
  }
822
854
  }
823
855
  ;
@@ -1049,6 +1081,7 @@ $.fn.dropdown = function(parameters) {
1049
1081
  },
1050
1082
  focus: function() {
1051
1083
  if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) {
1084
+ focused = true;
1052
1085
  module.show();
1053
1086
  }
1054
1087
  },
@@ -1098,7 +1131,8 @@ $.fn.dropdown = function(parameters) {
1098
1131
  if(module.is.multiple()) {
1099
1132
  module.remove.activeLabel();
1100
1133
  }
1101
- if(settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) {
1134
+ if(!focused && !module.is.active() && (settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin'))) {
1135
+ focused = true;
1102
1136
  module.search();
1103
1137
  }
1104
1138
  },
@@ -1143,6 +1177,7 @@ $.fn.dropdown = function(parameters) {
1143
1177
  } else {
1144
1178
  module.toggle();
1145
1179
  }
1180
+ event.stopPropagation();
1146
1181
  }
1147
1182
  },
1148
1183
  text: {
@@ -1182,10 +1217,11 @@ $.fn.dropdown = function(parameters) {
1182
1217
  $label.addClass(className.active);
1183
1218
  }
1184
1219
  settings.onLabelSelect.apply(this, $labels.filter('.' + className.active));
1220
+ event.stopPropagation();
1185
1221
  }
1186
1222
  },
1187
1223
  remove: {
1188
- click: function() {
1224
+ click: function(event) {
1189
1225
  var
1190
1226
  $label = $(this).parent()
1191
1227
  ;
@@ -1197,6 +1233,7 @@ $.fn.dropdown = function(parameters) {
1197
1233
  // remove this label only
1198
1234
  module.remove.activeLabels( $label );
1199
1235
  }
1236
+ event.stopPropagation();
1200
1237
  }
1201
1238
  },
1202
1239
  test: {
@@ -1209,6 +1246,9 @@ $.fn.dropdown = function(parameters) {
1209
1246
  if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) {
1210
1247
  return;
1211
1248
  }
1249
+ if (!module.is.multiple() || (module.is.multiple() && !module.is.active())) {
1250
+ focused = true;
1251
+ }
1212
1252
  if( module.determine.eventOnElement(event, toggleBehavior) ) {
1213
1253
  event.preventDefault();
1214
1254
  }
@@ -1829,7 +1869,7 @@ $.fn.dropdown = function(parameters) {
1829
1869
  return count;
1830
1870
  },
1831
1871
  transition: function($subMenu) {
1832
- return (settings.transition == 'auto')
1872
+ return (settings.transition === 'auto')
1833
1873
  ? module.is.upward($subMenu)
1834
1874
  ? 'slide up'
1835
1875
  : 'slide down'
@@ -1892,7 +1932,7 @@ $.fn.dropdown = function(parameters) {
1892
1932
  : value
1893
1933
  ;
1894
1934
  },
1895
- values: function() {
1935
+ values: function(raw) {
1896
1936
  var
1897
1937
  value = module.get.value()
1898
1938
  ;
@@ -1901,7 +1941,7 @@ $.fn.dropdown = function(parameters) {
1901
1941
  }
1902
1942
  return ( !module.has.selectInput() && module.is.multiple() )
1903
1943
  ? (typeof value == 'string') // delimited string
1904
- ? module.escape.htmlEntities(value).split(settings.delimiter)
1944
+ ? (raw ? value : module.escape.htmlEntities(value)).split(settings.delimiter)
1905
1945
  : ''
1906
1946
  : value
1907
1947
  ;
@@ -1945,8 +1985,8 @@ $.fn.dropdown = function(parameters) {
1945
1985
  return ($choice.data(metadata.text) !== undefined)
1946
1986
  ? $choice.data(metadata.text)
1947
1987
  : (preserveHTML)
1948
- ? $choice.html().trim()
1949
- : $choice.text().trim()
1988
+ ? $choice.html() && $choice.html().trim()
1989
+ : $choice.text() && $choice.text().trim()
1950
1990
  ;
1951
1991
  }
1952
1992
  },
@@ -2136,6 +2176,9 @@ $.fn.dropdown = function(parameters) {
2136
2176
  ;
2137
2177
  }
2138
2178
  return $selectedItem;
2179
+ },
2180
+ displayType: function() {
2181
+ return $module.hasClass('column') ? 'flex' : settings.displayType;
2139
2182
  }
2140
2183
  },
2141
2184
 
@@ -2327,7 +2370,7 @@ $.fn.dropdown = function(parameters) {
2327
2370
 
2328
2371
  clear: function(preventChangeTrigger) {
2329
2372
  if(module.is.multiple() && settings.useLabels) {
2330
- module.remove.labels();
2373
+ module.remove.labels($module.find(selector.label), preventChangeTrigger);
2331
2374
  }
2332
2375
  else {
2333
2376
  module.remove.activeItem();
@@ -2690,7 +2733,7 @@ $.fn.dropdown = function(parameters) {
2690
2733
  module.clear();
2691
2734
  module.set.selected(value, $selectedItem);
2692
2735
  },
2693
- selected: function(value, $selectedItem) {
2736
+ selected: function(value, $selectedItem, preventChangeTrigger, keepSearchTerm) {
2694
2737
  var
2695
2738
  isMultiple = module.is.multiple()
2696
2739
  ;
@@ -2752,8 +2795,10 @@ $.fn.dropdown = function(parameters) {
2752
2795
  if(settings.apiSettings && settings.saveRemoteData) {
2753
2796
  module.save.remoteData(selectedText, selectedValue);
2754
2797
  }
2755
- module.set.text(selectedText);
2756
- module.set.value(selectedValue, selectedText, $selected);
2798
+ if (!keepSearchTerm) {
2799
+ module.set.text(selectedText);
2800
+ }
2801
+ module.set.value(selectedValue, selectedText, $selected, preventChangeTrigger);
2757
2802
  $selected
2758
2803
  .addClass(className.active)
2759
2804
  .addClass(className.selected)
@@ -2761,7 +2806,9 @@ $.fn.dropdown = function(parameters) {
2761
2806
  }
2762
2807
  })
2763
2808
  ;
2764
- module.remove.searchTerm();
2809
+ if (!keepSearchTerm) {
2810
+ module.remove.searchTerm();
2811
+ }
2765
2812
  }
2766
2813
  },
2767
2814
 
@@ -2925,7 +2972,7 @@ $.fn.dropdown = function(parameters) {
2925
2972
  },
2926
2973
  value: function(addedValue, addedText, $selectedItem) {
2927
2974
  var
2928
- currentValue = module.get.values(),
2975
+ currentValue = module.get.values(true),
2929
2976
  newValue
2930
2977
  ;
2931
2978
  if(module.has.value(addedValue)) {
@@ -3049,7 +3096,7 @@ $.fn.dropdown = function(parameters) {
3049
3096
  userAddition: function() {
3050
3097
  $item.filter(selector.addition).remove();
3051
3098
  },
3052
- selected: function(value, $selectedItem) {
3099
+ selected: function(value, $selectedItem, preventChangeTrigger) {
3053
3100
  $selectedItem = (settings.allowAdditions)
3054
3101
  ? $selectedItem || module.get.itemWithAdditions(value)
3055
3102
  : $selectedItem || module.get.item(value)
@@ -3068,11 +3115,11 @@ $.fn.dropdown = function(parameters) {
3068
3115
  ;
3069
3116
  if(module.is.multiple()) {
3070
3117
  if(settings.useLabels) {
3071
- module.remove.value(selectedValue, selectedText, $selected);
3118
+ module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger);
3072
3119
  module.remove.label(selectedValue);
3073
3120
  }
3074
3121
  else {
3075
- module.remove.value(selectedValue, selectedText, $selected);
3122
+ module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger);
3076
3123
  if(module.get.selectionCount() === 0) {
3077
3124
  module.set.placeholderText();
3078
3125
  }
@@ -3082,7 +3129,7 @@ $.fn.dropdown = function(parameters) {
3082
3129
  }
3083
3130
  }
3084
3131
  else {
3085
- module.remove.value(selectedValue, selectedText, $selected);
3132
+ module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger);
3086
3133
  }
3087
3134
  $selected
3088
3135
  .removeClass(className.filtered)
@@ -3097,7 +3144,7 @@ $.fn.dropdown = function(parameters) {
3097
3144
  selectedItem: function() {
3098
3145
  $item.removeClass(className.selected);
3099
3146
  },
3100
- value: function(removedValue, removedText, $removedItem) {
3147
+ value: function(removedValue, removedText, $removedItem, preventChangeTrigger) {
3101
3148
  var
3102
3149
  values = module.get.values(),
3103
3150
  newValue
@@ -3119,7 +3166,7 @@ $.fn.dropdown = function(parameters) {
3119
3166
  else {
3120
3167
  settings.onRemove.call(element, removedValue, removedText, $removedItem);
3121
3168
  }
3122
- module.set.value(newValue, removedText, $removedItem);
3169
+ module.set.value(newValue, removedText, $removedItem, preventChangeTrigger);
3123
3170
  module.check.maxSelections();
3124
3171
  },
3125
3172
  arrayValue: function(removedValue, values) {
@@ -3134,8 +3181,9 @@ $.fn.dropdown = function(parameters) {
3134
3181
  },
3135
3182
  label: function(value, shouldAnimate) {
3136
3183
  var
3184
+ escapedValue = module.escape.value(value),
3137
3185
  $labels = $module.find(selector.label),
3138
- $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? value.toLowerCase() : value) +'"]')
3186
+ $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? escapedValue.toLowerCase() : escapedValue) +'"]')
3139
3187
  ;
3140
3188
  module.verbose('Removing label', $removedLabel);
3141
3189
  $removedLabel.remove();
@@ -3145,7 +3193,7 @@ $.fn.dropdown = function(parameters) {
3145
3193
  module.verbose('Removing active label selections', $activeLabels);
3146
3194
  module.remove.labels($activeLabels);
3147
3195
  },
3148
- labels: function($labels) {
3196
+ labels: function($labels, preventChangeTrigger) {
3149
3197
  $labels = $labels || $module.find(selector.label);
3150
3198
  module.verbose('Removing labels', $labels);
3151
3199
  $labels
@@ -3164,12 +3212,12 @@ $.fn.dropdown = function(parameters) {
3164
3212
  }
3165
3213
  module.remove.message();
3166
3214
  if(isUserValue) {
3167
- module.remove.value(stringValue);
3215
+ module.remove.value(stringValue, stringValue, module.get.item(stringValue), preventChangeTrigger);
3168
3216
  module.remove.label(stringValue);
3169
3217
  }
3170
3218
  else {
3171
3219
  // selected will also remove label
3172
- module.remove.selected(stringValue);
3220
+ module.remove.selected(stringValue, false, preventChangeTrigger);
3173
3221
  }
3174
3222
  })
3175
3223
  ;
@@ -3248,6 +3296,9 @@ $.fn.dropdown = function(parameters) {
3248
3296
  menu: function() {
3249
3297
  return ($menu.length > 0);
3250
3298
  },
3299
+ subMenu: function($currentMenu) {
3300
+ return ($currentMenu || $menu).find(selector.menu).length > 0;
3301
+ },
3251
3302
  message: function() {
3252
3303
  return ($menu.children(selector.message).length !== 0);
3253
3304
  },
@@ -3284,7 +3335,7 @@ $.fn.dropdown = function(parameters) {
3284
3335
  },
3285
3336
  valueMatchingCase: function(value) {
3286
3337
  var
3287
- values = module.get.values(),
3338
+ values = module.get.values(true),
3288
3339
  hasValue = Array.isArray(values)
3289
3340
  ? values && ($.inArray(value, values) !== -1)
3290
3341
  : (values == value)
@@ -3296,7 +3347,7 @@ $.fn.dropdown = function(parameters) {
3296
3347
  },
3297
3348
  valueIgnoringCase: function(value) {
3298
3349
  var
3299
- values = module.get.values(),
3350
+ values = module.get.values(true),
3300
3351
  hasValue = false
3301
3352
  ;
3302
3353
  if(!Array.isArray(values)) {
@@ -3328,6 +3379,9 @@ $.fn.dropdown = function(parameters) {
3328
3379
  bubbledIconClick: function(event) {
3329
3380
  return $(event.target).closest($icon).length > 0;
3330
3381
  },
3382
+ chrome: function() {
3383
+ return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
3384
+ },
3331
3385
  alreadySetup: function() {
3332
3386
  return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0);
3333
3387
  },
@@ -3380,6 +3434,9 @@ $.fn.dropdown = function(parameters) {
3380
3434
  remote: function() {
3381
3435
  return settings.apiSettings && module.can.useAPI();
3382
3436
  },
3437
+ noApiCache: function() {
3438
+ return settings.apiSettings && !settings.apiSettings.cache
3439
+ },
3383
3440
  single: function() {
3384
3441
  return !module.is.multiple();
3385
3442
  },
@@ -3474,6 +3531,9 @@ $.fn.dropdown = function(parameters) {
3474
3531
  if(module.is.verticallyScrollableContext()) {
3475
3532
  calculations.menu.offset.top += calculations.context.scrollTop;
3476
3533
  }
3534
+ if(module.has.subMenu($currentMenu)) {
3535
+ calculations.menu.height += $currentMenu.find(selector.menu).first().outerHeight();
3536
+ }
3477
3537
  onScreen = {
3478
3538
  above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.context.offset.top - calculations.menu.height,
3479
3539
  below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top - calculations.context.offset.top + calculations.menu.height
@@ -3560,16 +3620,15 @@ $.fn.dropdown = function(parameters) {
3560
3620
  ;
3561
3621
  module.verbose('Doing menu show animation', $currentMenu);
3562
3622
  module.set.direction($subMenu);
3563
- transition = module.get.transition($subMenu);
3623
+ transition = settings.transition.showMethod || module.get.transition($subMenu);
3564
3624
  if( module.is.selection() ) {
3565
3625
  module.set.scrollPosition(module.get.selectedItem(), true);
3566
3626
  }
3567
3627
  if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
3568
- var displayType = $module.hasClass('column') ? 'flex' : false;
3569
- if(transition == 'none') {
3628
+ if(transition === 'none') {
3570
3629
  start();
3571
3630
  $currentMenu.transition({
3572
- displayType: displayType
3631
+ displayType: module.get.displayType()
3573
3632
  }).transition('show');
3574
3633
  callback.call(element);
3575
3634
  }
@@ -3579,10 +3638,10 @@ $.fn.dropdown = function(parameters) {
3579
3638
  animation : transition + ' in',
3580
3639
  debug : settings.debug,
3581
3640
  verbose : settings.verbose,
3582
- duration : settings.duration,
3641
+ duration : settings.transition.showDuration || settings.duration,
3583
3642
  queue : true,
3584
3643
  onStart : start,
3585
- displayType: displayType,
3644
+ displayType: module.get.displayType(),
3586
3645
  onComplete : function() {
3587
3646
  callback.call(element);
3588
3647
  }
@@ -3605,7 +3664,7 @@ $.fn.dropdown = function(parameters) {
3605
3664
  }
3606
3665
  module.remove.active();
3607
3666
  },
3608
- transition = module.get.transition($subMenu)
3667
+ transition = settings.transition.hideMethod || module.get.transition($subMenu)
3609
3668
  ;
3610
3669
  callback = $.isFunction(callback)
3611
3670
  ? callback
@@ -3614,20 +3673,23 @@ $.fn.dropdown = function(parameters) {
3614
3673
  if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
3615
3674
  module.verbose('Doing menu hide animation', $currentMenu);
3616
3675
 
3617
- if(transition == 'none') {
3676
+ if(transition === 'none') {
3618
3677
  start();
3619
- $currentMenu.transition('hide');
3678
+ $currentMenu.transition({
3679
+ displayType: module.get.displayType()
3680
+ }).transition('hide');
3620
3681
  callback.call(element);
3621
3682
  }
3622
3683
  else if($.fn.transition !== undefined && $module.transition('is supported')) {
3623
3684
  $currentMenu
3624
3685
  .transition({
3625
3686
  animation : transition + ' out',
3626
- duration : settings.duration,
3687
+ duration : settings.transition.hideDuration || settings.duration,
3627
3688
  debug : settings.debug,
3628
3689
  verbose : settings.verbose,
3629
3690
  queue : false,
3630
3691
  onStart : start,
3692
+ displayType: module.get.displayType(),
3631
3693
  onComplete : function() {
3632
3694
  callback.call(element);
3633
3695
  }
@@ -3956,6 +4018,7 @@ $.fn.dropdown.settings = {
3956
4018
 
3957
4019
  transition : 'auto', // auto transition will slide down or up based on direction
3958
4020
  duration : 200, // duration of transition
4021
+ displayType : false, // displayType of transition
3959
4022
 
3960
4023
  glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
3961
4024
 
@@ -3980,6 +4043,7 @@ $.fn.dropdown.settings = {
3980
4043
  onChange : function(value, text, $selected){},
3981
4044
  onAdd : function(value, text, $selected){},
3982
4045
  onRemove : function(value, text, $selected){},
4046
+ onSearch : function(searchTerm){},
3983
4047
 
3984
4048
  onLabelSelect : function($selectedLabels){},
3985
4049
  onLabelCreate : function(value, text) { return $(this); },
@@ -4027,19 +4091,21 @@ $.fn.dropdown.settings = {
4027
4091
 
4028
4092
  // property names for remote query
4029
4093
  fields: {
4030
- remoteValues : 'results', // grouping for api results
4031
- values : 'values', // grouping for all dropdown values
4032
- disabled : 'disabled', // whether value should be disabled
4033
- name : 'name', // displayed dropdown text
4034
- value : 'value', // actual dropdown value
4035
- text : 'text', // displayed text when selected
4036
- type : 'type', // type of dropdown element
4037
- image : 'image', // optional image path
4038
- imageClass : 'imageClass', // optional individual class for image
4039
- icon : 'icon', // optional icon name
4040
- iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead)
4041
- class : 'class', // optional individual class for item/header
4042
- divider : 'divider' // optional divider append for group headers
4094
+ remoteValues : 'results', // grouping for api results
4095
+ values : 'values', // grouping for all dropdown values
4096
+ disabled : 'disabled', // whether value should be disabled
4097
+ name : 'name', // displayed dropdown text
4098
+ description : 'description', // displayed dropdown description
4099
+ descriptionVertical : 'descriptionVertical', // whether description should be vertical
4100
+ value : 'value', // actual dropdown value
4101
+ text : 'text', // displayed text when selected
4102
+ type : 'type', // type of dropdown element
4103
+ image : 'image', // optional image path
4104
+ imageClass : 'imageClass', // optional individual class for image
4105
+ icon : 'icon', // optional icon name
4106
+ iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead)
4107
+ class : 'class', // optional individual class for item/header
4108
+ divider : 'divider' // optional divider append for group headers
4043
4109
  },
4044
4110
 
4045
4111
  keys : {
@@ -4078,45 +4144,48 @@ $.fn.dropdown.settings = {
4078
4144
  },
4079
4145
 
4080
4146
  className : {
4081
- active : 'active',
4082
- addition : 'addition',
4083
- animating : 'animating',
4084
- disabled : 'disabled',
4085
- empty : 'empty',
4086
- dropdown : 'ui dropdown',
4087
- filtered : 'filtered',
4088
- hidden : 'hidden transition',
4089
- icon : 'icon',
4090
- image : 'image',
4091
- item : 'item',
4092
- label : 'ui label',
4093
- loading : 'loading',
4094
- menu : 'menu',
4095
- message : 'message',
4096
- multiple : 'multiple',
4097
- placeholder : 'default',
4098
- sizer : 'sizer',
4099
- search : 'search',
4100
- selected : 'selected',
4101
- selection : 'selection',
4102
- upward : 'upward',
4103
- leftward : 'left',
4104
- visible : 'visible',
4105
- clearable : 'clearable',
4106
- noselection : 'noselection',
4107
- delete : 'delete',
4108
- header : 'header',
4109
- divider : 'divider',
4110
- groupIcon : '',
4111
- unfilterable : 'unfilterable'
4147
+ active : 'active',
4148
+ addition : 'addition',
4149
+ animating : 'animating',
4150
+ description : 'description',
4151
+ descriptionVertical : 'vertical',
4152
+ disabled : 'disabled',
4153
+ empty : 'empty',
4154
+ dropdown : 'ui dropdown',
4155
+ filtered : 'filtered',
4156
+ hidden : 'hidden transition',
4157
+ icon : 'icon',
4158
+ image : 'image',
4159
+ item : 'item',
4160
+ label : 'ui label',
4161
+ loading : 'loading',
4162
+ menu : 'menu',
4163
+ message : 'message',
4164
+ multiple : 'multiple',
4165
+ placeholder : 'default',
4166
+ sizer : 'sizer',
4167
+ search : 'search',
4168
+ selected : 'selected',
4169
+ selection : 'selection',
4170
+ text : 'text',
4171
+ upward : 'upward',
4172
+ leftward : 'left',
4173
+ visible : 'visible',
4174
+ clearable : 'clearable',
4175
+ noselection : 'noselection',
4176
+ delete : 'delete',
4177
+ header : 'header',
4178
+ divider : 'divider',
4179
+ groupIcon : '',
4180
+ unfilterable : 'unfilterable'
4112
4181
  }
4113
4182
 
4114
4183
  };
4115
4184
 
4116
4185
  /* Templates */
4117
4186
  $.fn.dropdown.settings.templates = {
4118
- deQuote: function(string) {
4119
- return String(string).replace(/"/g,"");
4187
+ deQuote: function(string, encode) {
4188
+ return String(string).replace(/"/g,encode ? "&quot;" : "");
4120
4189
  },
4121
4190
  escape: function(string, preserveHTML) {
4122
4191
  if (preserveHTML){
@@ -4174,26 +4243,49 @@ $.fn.dropdown.settings.templates = {
4174
4243
  var
4175
4244
  itemType = (option[fields.type])
4176
4245
  ? option[fields.type]
4177
- : 'item'
4246
+ : 'item',
4247
+ isMenu = itemType.indexOf('menu') !== -1
4178
4248
  ;
4179
4249
 
4180
- if( itemType === 'item' ) {
4250
+ if( itemType === 'item' || isMenu) {
4181
4251
  var
4182
4252
  maybeText = (option[fields.text])
4183
- ? ' data-text="' + deQuote(option[fields.text]) + '"'
4253
+ ? ' data-text="' + deQuote(option[fields.text],true) + '"'
4184
4254
  : '',
4185
4255
  maybeDisabled = (option[fields.disabled])
4186
4256
  ? className.disabled+' '
4187
- : ''
4257
+ : '',
4258
+ maybeDescriptionVertical = (option[fields.descriptionVertical])
4259
+ ? className.descriptionVertical+' '
4260
+ : '',
4261
+ hasDescription = (escape(option[fields.description] || '', preserveHTML) != '')
4188
4262
  ;
4189
- html += '<div class="'+ maybeDisabled + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value]) + '"' + maybeText + '>';
4263
+ html += '<div class="'+ maybeDisabled + maybeDescriptionVertical + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value],true) + '"' + maybeText + '>';
4264
+ if (isMenu) {
4265
+ html += '<i class="'+ (itemType.indexOf('left') !== -1 ? 'left' : '') + ' dropdown icon"></i>';
4266
+ }
4190
4267
  if(option[fields.image]) {
4191
4268
  html += '<img class="'+(option[fields.imageClass] ? deQuote(option[fields.imageClass]) : className.image)+'" src="' + deQuote(option[fields.image]) + '">';
4192
4269
  }
4193
4270
  if(option[fields.icon]) {
4194
4271
  html += '<i class="'+deQuote(option[fields.icon])+' '+(option[fields.iconClass] ? deQuote(option[fields.iconClass]) : className.icon)+'"></i>';
4195
4272
  }
4273
+ if(hasDescription){
4274
+ html += '<span class="'+ className.description +'">'+ escape(option[fields.description] || '', preserveHTML) + '</span>';
4275
+ html += (!isMenu) ? '<span class="'+ className.text + '">' : '';
4276
+ }
4277
+ if (isMenu) {
4278
+ html += '<span class="' + className.text + '">';
4279
+ }
4196
4280
  html += escape(option[fields.name] || '', preserveHTML);
4281
+ if (isMenu) {
4282
+ html += '</span>';
4283
+ html += '<div class="' + itemType + '">';
4284
+ html += $.fn.dropdown.settings.templates.menu(option, fields, preserveHTML, className);
4285
+ html += '</div>';
4286
+ } else if(hasDescription){
4287
+ html += '</span>';
4288
+ }
4197
4289
  html += '</div>';
4198
4290
  } else if (itemType === 'header') {
4199
4291
  var groupName = escape(option[fields.name] || '', preserveHTML),