fomantic-ui-sass 2.8.8.1 → 2.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/fonts/semantic-ui/brand-icons.eot +0 -0
  4. data/app/assets/fonts/semantic-ui/brand-icons.svg +41 -6
  5. data/app/assets/fonts/semantic-ui/brand-icons.ttf +0 -0
  6. data/app/assets/fonts/semantic-ui/brand-icons.woff +0 -0
  7. data/app/assets/fonts/semantic-ui/brand-icons.woff2 +0 -0
  8. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  9. data/app/assets/fonts/semantic-ui/icons.svg +245 -7
  10. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  11. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  12. data/app/assets/fonts/semantic-ui/icons.woff2 +0 -0
  13. data/app/assets/fonts/semantic-ui/outline-icons.eot +0 -0
  14. data/app/assets/fonts/semantic-ui/outline-icons.svg +2 -2
  15. data/app/assets/fonts/semantic-ui/outline-icons.ttf +0 -0
  16. data/app/assets/fonts/semantic-ui/outline-icons.woff +0 -0
  17. data/app/assets/fonts/semantic-ui/outline-icons.woff2 +0 -0
  18. data/app/assets/javascripts/semantic-ui/accordion.js +9 -3
  19. data/app/assets/javascripts/semantic-ui/api.js +92 -33
  20. data/app/assets/javascripts/semantic-ui/calendar.js +200 -82
  21. data/app/assets/javascripts/semantic-ui/checkbox.js +20 -13
  22. data/app/assets/javascripts/semantic-ui/dimmer.js +24 -9
  23. data/app/assets/javascripts/semantic-ui/dropdown.js +250 -205
  24. data/app/assets/javascripts/semantic-ui/embed.js +13 -9
  25. data/app/assets/javascripts/semantic-ui/flyout.js +1530 -0
  26. data/app/assets/javascripts/semantic-ui/form.js +47 -41
  27. data/app/assets/javascripts/semantic-ui/modal.js +187 -83
  28. data/app/assets/javascripts/semantic-ui/nag.js +2 -2
  29. data/app/assets/javascripts/semantic-ui/popup.js +16 -22
  30. data/app/assets/javascripts/semantic-ui/progress.js +7 -4
  31. data/app/assets/javascripts/semantic-ui/rating.js +7 -3
  32. data/app/assets/javascripts/semantic-ui/search.js +47 -20
  33. data/app/assets/javascripts/semantic-ui/shape.js +3 -3
  34. data/app/assets/javascripts/semantic-ui/sidebar.js +140 -43
  35. data/app/assets/javascripts/semantic-ui/site.js +1 -1
  36. data/app/assets/javascripts/semantic-ui/slider.js +78 -63
  37. data/app/assets/javascripts/semantic-ui/state.js +2 -2
  38. data/app/assets/javascripts/semantic-ui/sticky.js +30 -19
  39. data/app/assets/javascripts/semantic-ui/tab.js +24 -6
  40. data/app/assets/javascripts/semantic-ui/toast.js +67 -33
  41. data/app/assets/javascripts/semantic-ui/transition.js +27 -22
  42. data/app/assets/javascripts/semantic-ui/visibility.js +5 -5
  43. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +1 -1
  44. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +160 -83
  45. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +25 -21
  46. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +110 -78
  47. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +43 -43
  48. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +1684 -272
  49. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +204 -157
  50. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +98 -4
  51. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +31 -31
  52. data/app/assets/stylesheets/semantic-ui/elements/_emoji.scss +10799 -8841
  53. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1021 -915
  54. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +6 -4
  55. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +2110 -2061
  56. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +1 -1
  57. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +759 -22
  58. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +72 -68
  59. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +31 -31
  60. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +352 -352
  61. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +33 -33
  62. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +1 -1
  63. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +1 -1
  64. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +118 -34
  65. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +32 -32
  66. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +1 -1
  67. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +5 -4
  68. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +139 -42
  69. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +177 -37
  70. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +18 -1
  71. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +93 -92
  72. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +33 -18
  73. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +101 -51
  74. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +5 -5
  75. data/app/assets/stylesheets/semantic-ui/modules/_flyout.scss +592 -0
  76. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +37 -6
  77. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +1 -1
  78. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +103 -105
  79. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +1 -1
  80. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +7 -46
  81. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +6 -6
  82. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +1 -1
  83. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +23 -9
  84. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +17 -17
  85. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +1 -1
  86. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +5 -5
  87. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +49 -1
  88. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +1 -1
  89. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +4 -4
  90. data/app/assets/stylesheets/semantic-ui/views/_card.scss +754 -117
  91. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +12 -12
  92. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +29 -29
  93. data/app/assets/stylesheets/semantic-ui/views/_item.scss +17 -17
  94. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +4 -4
  95. data/lib/fomantic/ui/sass/version.rb +2 -2
  96. metadata +5 -3
@@ -23,7 +23,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
23
23
  : Function('return this')()
24
24
  ;
25
25
 
26
- $.fn.modal = function(parameters) {
26
+ $.modal = $.fn.modal = function(parameters) {
27
27
  var
28
28
  $allModules = $(this),
29
29
  $window = $(window),
@@ -65,8 +65,10 @@ $.fn.modal = function(parameters) {
65
65
  moduleNamespace = 'module-' + namespace,
66
66
 
67
67
  $module = $(this),
68
- $context = $(settings.context),
69
- $close = $module.find(selector.close),
68
+ $context = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body,
69
+ isBody = $context[0] === $body[0],
70
+ $closeIcon = $module.find(selector.closeIcon),
71
+ $inputs,
70
72
 
71
73
  $allModals,
72
74
  $otherModals,
@@ -74,8 +76,10 @@ $.fn.modal = function(parameters) {
74
76
  $dimmable,
75
77
  $dimmer,
76
78
 
79
+ isModalComponent = $module.hasClass('modal'),
80
+
77
81
  element = this,
78
- instance = $module.hasClass('modal') ? $module.data(moduleNamespace) : undefined,
82
+ instance = isModalComponent ? $module.data(moduleNamespace) : undefined,
79
83
 
80
84
  ignoreRepeatedEvents = false,
81
85
 
@@ -83,6 +87,8 @@ $.fn.modal = function(parameters) {
83
87
  initialMouseDownInScrollbar,
84
88
  initialBodyMargin = '',
85
89
  tempBodyMargin = '',
90
+ keepScrollingClass = false,
91
+ hadScrollbar = false,
86
92
 
87
93
  elementEventNamespace,
88
94
  id,
@@ -92,7 +98,8 @@ $.fn.modal = function(parameters) {
92
98
  module = {
93
99
 
94
100
  initialize: function() {
95
- if(!$module.hasClass('modal')) {
101
+ module.create.id();
102
+ if(!isModalComponent) {
96
103
  module.create.modal();
97
104
  if(!$.isFunction(settings.onHidden)) {
98
105
  settings.onHidden = function () {
@@ -116,15 +123,17 @@ $.fn.modal = function(parameters) {
116
123
  $actions.empty();
117
124
  }
118
125
  settings.actions.forEach(function (el) {
119
- var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
126
+ var icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
120
127
  text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
121
128
  cls = module.helpers.deQuote(el[fields.class] || ''),
122
129
  click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
123
130
  $actions.append($('<button/>', {
124
131
  html: icon + text,
132
+ 'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
125
133
  class: className.button + ' ' + cls,
126
134
  click: function () {
127
- if (click.call(element, $module) === false) {
135
+ var button = $(this);
136
+ if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
128
137
  return;
129
138
  }
130
139
  module.hide();
@@ -135,7 +144,6 @@ $.fn.modal = function(parameters) {
135
144
  module.cache = {};
136
145
  module.verbose('Initializing dimmer', $context);
137
146
 
138
- module.create.id();
139
147
  module.create.dimmer();
140
148
 
141
149
  if ( settings.allowMultiple ) {
@@ -145,11 +153,8 @@ $.fn.modal = function(parameters) {
145
153
  $module.addClass('top aligned');
146
154
  }
147
155
  module.refreshModals();
148
-
149
156
  module.bind.events();
150
- if(settings.observeChanges) {
151
- module.observeChanges();
152
- }
157
+ module.observeChanges();
153
158
  module.instantiate();
154
159
  if(settings.autoShow){
155
160
  module.show();
@@ -166,21 +171,26 @@ $.fn.modal = function(parameters) {
166
171
 
167
172
  create: {
168
173
  modal: function() {
169
- $module = $('<div/>', {class: className.modal});
174
+ $module = $('<div/>', {class: className.modal, role: 'dialog', 'aria-modal': true});
170
175
  if (settings.closeIcon) {
171
- $close = $('<i/>', {class: className.close})
172
- $module.append($close);
176
+ $closeIcon = $('<i/>', {class: className.close, role: 'button', tabindex: 0, 'aria-label': settings.text.close})
177
+ $module.append($closeIcon);
173
178
  }
174
179
  if (settings.title !== '') {
175
- $('<div/>', {class: className.title}).appendTo($module);
180
+ var titleId = '_' + module.get.id() + 'title';
181
+ $module.attr('aria-labelledby', titleId);
182
+ $('<div/>', {class: className.title, id: titleId}).appendTo($module);
176
183
  }
177
184
  if (settings.content !== '') {
178
- $('<div/>', {class: className.content}).appendTo($module);
185
+ var descId = '_' + module.get.id() + 'desc';
186
+ $module.attr('aria-describedby', descId);
187
+ $('<div/>', {class: className.content, id: descId}).appendTo($module);
179
188
  }
180
189
  if (module.has.configActions()) {
181
190
  $('<div/>', {class: className.actions}).appendTo($module);
182
191
  }
183
192
  $context.append($module);
193
+ element = $module[0];
184
194
  },
185
195
  dimmer: function() {
186
196
  var
@@ -196,6 +206,7 @@ $.fn.modal = function(parameters) {
196
206
  }
197
207
  module.debug('Creating dimmer');
198
208
  $dimmable = $context.dimmer(dimmerSettings);
209
+ keepScrollingClass = module.is.scrolling();
199
210
  if(settings.detachable) {
200
211
  module.verbose('Modal is detachable, moving content into dimmer');
201
212
  $dimmable.dimmer('add content', $module);
@@ -206,13 +217,13 @@ $.fn.modal = function(parameters) {
206
217
  $dimmer = $dimmable.dimmer('get dimmer');
207
218
  },
208
219
  id: function() {
209
- id = (Math.random().toString(16) + '000000000').substr(2, 8);
220
+ id = (Math.random().toString(16) + '000000000').slice(2, 10);
210
221
  elementEventNamespace = '.' + id;
211
222
  module.verbose('Creating unique id for element', id);
212
223
  },
213
224
  innerDimmer: function() {
214
- if ( $module.find(selector.dimmer).length == 0 ) {
215
- $module.prepend('<div class="ui inverted dimmer"></div>');
225
+ if ( $module.find(selector.dimmer).length === 0 ) {
226
+ $('<div/>', {class: className.innerDimmer}).prependTo($module);
216
227
  }
217
228
  }
218
229
  },
@@ -228,15 +239,21 @@ $.fn.modal = function(parameters) {
228
239
  ;
229
240
  $window.off(elementEventNamespace);
230
241
  $dimmer.off(elementEventNamespace);
231
- $close.off(eventNamespace);
242
+ $closeIcon.off(elementEventNamespace);
243
+ if($inputs) {
244
+ $inputs.off(elementEventNamespace);
245
+ }
232
246
  $context.dimmer('destroy');
233
247
  },
234
248
 
235
249
  observeChanges: function() {
236
250
  if('MutationObserver' in window) {
237
251
  observer = new MutationObserver(function(mutations) {
238
- module.debug('DOM tree modified, refreshing');
239
- module.refresh();
252
+ if(settings.observeChanges) {
253
+ module.debug('DOM tree modified, refreshing');
254
+ module.refresh();
255
+ }
256
+ module.refreshInputs();
240
257
  });
241
258
  observer.observe(element, {
242
259
  childList : true,
@@ -261,6 +278,23 @@ $.fn.modal = function(parameters) {
261
278
  $allModals = $otherModals.add($module);
262
279
  },
263
280
 
281
+ refreshInputs: function(){
282
+ if($inputs){
283
+ $inputs
284
+ .off('keydown' + elementEventNamespace)
285
+ ;
286
+ }
287
+ $inputs = $module.find('[tabindex], :input').filter(':visible').filter(function() {
288
+ return $(this).closest('.disabled').length === 0;
289
+ });
290
+ $inputs.first()
291
+ .on('keydown' + elementEventNamespace, module.event.inputKeyDown.first)
292
+ ;
293
+ $inputs.last()
294
+ .on('keydown' + elementEventNamespace, module.event.inputKeyDown.last)
295
+ ;
296
+ },
297
+
264
298
  attachEvents: function(selector, event) {
265
299
  var
266
300
  $toggle = $(selector)
@@ -289,25 +323,28 @@ $.fn.modal = function(parameters) {
289
323
  .on('click' + eventNamespace, selector.approve, module.event.approve)
290
324
  .on('click' + eventNamespace, selector.deny, module.event.deny)
291
325
  ;
326
+ $closeIcon
327
+ .on('keyup' + elementEventNamespace, module.event.closeKeyUp)
328
+ ;
292
329
  $window
293
330
  .on('resize' + elementEventNamespace, module.event.resize)
294
331
  ;
295
332
  },
296
333
  scrollLock: function() {
297
334
  // touch events default to passive, due to changes in chrome to optimize mobile perf
298
- $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
335
+ $dimmable[0].addEventListener('touchmove', module.event.preventScroll, { passive: false });
299
336
  }
300
337
  },
301
338
 
302
339
  unbind: {
303
340
  scrollLock: function() {
304
- $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
341
+ $dimmable[0].removeEventListener('touchmove', module.event.preventScroll, { passive: false });
305
342
  }
306
343
  },
307
344
 
308
345
  get: {
309
346
  id: function() {
310
- return (Math.random().toString(16) + '000000000').substr(2, 8);
347
+ return id;
311
348
  },
312
349
  element: function() {
313
350
  return $module;
@@ -346,16 +383,44 @@ $.fn.modal = function(parameters) {
346
383
  close: function() {
347
384
  module.hide();
348
385
  },
386
+ closeKeyUp: function(event){
387
+ var
388
+ keyCode = event.which
389
+ ;
390
+ if ((keyCode === settings.keys.enter || keyCode === settings.keys.space) && $module.hasClass(className.front)) {
391
+ module.hide();
392
+ }
393
+ },
394
+ inputKeyDown: {
395
+ first: function(event) {
396
+ var
397
+ keyCode = event.which
398
+ ;
399
+ if (keyCode === settings.keys.tab && event.shiftKey) {
400
+ $inputs.last().focus();
401
+ event.preventDefault();
402
+ }
403
+ },
404
+ last: function(event) {
405
+ var
406
+ keyCode = event.which
407
+ ;
408
+ if (keyCode === settings.keys.tab && !event.shiftKey) {
409
+ $inputs.first().focus();
410
+ event.preventDefault();
411
+ }
412
+ }
413
+ },
349
414
  mousedown: function(event) {
350
415
  var
351
416
  $target = $(event.target),
352
- isRtl = module.is.rtl();
417
+ isRtl = module.is.rtl()
353
418
  ;
354
419
  initialMouseDownInModal = ($target.closest(selector.modal).length > 0);
355
420
  if(initialMouseDownInModal) {
356
421
  module.verbose('Mouse down event registered inside the modal');
357
422
  }
358
- initialMouseDownInScrollbar = module.is.scrolling() && ((!isRtl && $(window).outerWidth() - settings.scrollbarWidth <= event.clientX) || (isRtl && settings.scrollbarWidth >= event.clientX));
423
+ initialMouseDownInScrollbar = module.is.scrolling() && ((!isRtl && $window.outerWidth() - settings.scrollbarWidth <= event.clientX) || (isRtl && settings.scrollbarWidth >= event.clientX));
359
424
  if(initialMouseDownInScrollbar) {
360
425
  module.verbose('Mouse down event registered inside the scrollbar');
361
426
  }
@@ -397,10 +462,9 @@ $.fn.modal = function(parameters) {
397
462
  },
398
463
  keyboard: function(event) {
399
464
  var
400
- keyCode = event.which,
401
- escapeKey = 27
465
+ keyCode = event.which
402
466
  ;
403
- if(keyCode == escapeKey) {
467
+ if(keyCode === settings.keys.escape) {
404
468
  if(settings.closable) {
405
469
  module.debug('Escape key pressed hiding modal');
406
470
  if ( $module.hasClass(className.front) ) {
@@ -456,9 +520,16 @@ $.fn.modal = function(parameters) {
456
520
  : function(){}
457
521
  ;
458
522
  if( module.is.animating() || !module.is.active() ) {
523
+ if(settings.onShow.call(element) === false) {
524
+ module.verbose('Show callback returned false cancelling show');
525
+ return;
526
+ }
527
+ hadScrollbar = module.has.scrollbar();
459
528
  module.showDimmer();
460
529
  module.cacheSizes();
461
- module.set.bodyMargin();
530
+ if(hadScrollbar) {
531
+ module.set.bodyMargin();
532
+ }
462
533
  if(module.can.useFlex()) {
463
534
  module.remove.legacy();
464
535
  }
@@ -485,12 +556,13 @@ $.fn.modal = function(parameters) {
485
556
  $module.detach().appendTo($dimmer);
486
557
  }
487
558
  }
488
- settings.onShow.call(element);
489
559
  if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
490
560
  module.debug('Showing modal with css animations');
491
561
  $module
492
562
  .transition({
493
563
  debug : settings.debug,
564
+ verbose : settings.verbose,
565
+ silent : settings.silent,
494
566
  animation : (settings.transition.showMethod || settings.transition) + ' in',
495
567
  queue : settings.queue,
496
568
  duration : settings.transition.showDuration || settings.duration,
@@ -502,6 +574,7 @@ $.fn.modal = function(parameters) {
502
574
  }
503
575
  module.save.focus();
504
576
  module.set.active();
577
+ module.refreshInputs()
505
578
  if(settings.autofocus) {
506
579
  module.set.autofocus();
507
580
  }
@@ -528,7 +601,6 @@ $.fn.modal = function(parameters) {
528
601
  ? callback
529
602
  : function(){}
530
603
  ;
531
- module.debug('Hiding modal');
532
604
  if(settings.onHide.call(element, $(this)) === false) {
533
605
  module.verbose('Hide callback returned false cancelling hide');
534
606
  ignoreRepeatedEvents = false;
@@ -536,11 +608,14 @@ $.fn.modal = function(parameters) {
536
608
  }
537
609
 
538
610
  if( module.is.animating() || module.is.active() ) {
611
+ module.debug('Hiding modal');
539
612
  if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
540
613
  module.remove.active();
541
614
  $module
542
615
  .transition({
543
616
  debug : settings.debug,
617
+ verbose : settings.verbose,
618
+ silent : settings.silent,
544
619
  animation : (settings.transition.hideMethod || settings.transition) + ' out',
545
620
  queue : settings.queue,
546
621
  duration : settings.transition.hideDuration || settings.duration,
@@ -584,7 +659,12 @@ $.fn.modal = function(parameters) {
584
659
 
585
660
  showDimmer: function() {
586
661
  if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
587
- module.save.bodyMargin();
662
+ if(hadScrollbar) {
663
+ if(!isBody) {
664
+ $dimmer.css('top', $dimmable.scrollTop());
665
+ }
666
+ module.save.bodyMargin();
667
+ }
588
668
  module.debug('Showing dimmer');
589
669
  $dimmable.dimmer('show');
590
670
  }
@@ -597,14 +677,15 @@ $.fn.modal = function(parameters) {
597
677
  if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
598
678
  module.unbind.scrollLock();
599
679
  $dimmable.dimmer('hide', function() {
600
- module.restore.bodyMargin();
680
+ if(hadScrollbar) {
681
+ module.restore.bodyMargin();
682
+ }
601
683
  module.remove.clickaway();
602
684
  module.remove.screenHeight();
603
685
  });
604
686
  }
605
687
  else {
606
688
  module.debug('Dimmer is not visible cannot hide');
607
- return;
608
689
  }
609
690
  },
610
691
 
@@ -662,7 +743,7 @@ $.fn.modal = function(parameters) {
662
743
  keyboardShortcuts: function() {
663
744
  module.verbose('Adding keyboard shortcuts');
664
745
  $document
665
- .on('keyup' + eventNamespace, module.event.keyboard)
746
+ .on('keydown' + eventNamespace, module.event.keyboard)
666
747
  ;
667
748
  }
668
749
  },
@@ -678,9 +759,9 @@ $.fn.modal = function(parameters) {
678
759
  }
679
760
  },
680
761
  bodyMargin: function() {
681
- initialBodyMargin = $body.css('margin-'+(module.can.leftBodyScrollbar() ? 'left':'right'));
762
+ initialBodyMargin = $context.css((isBody ? 'margin-':'padding-')+(module.can.leftBodyScrollbar() ? 'left':'right'));
682
763
  var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
683
- bodyScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
764
+ bodyScrollbarWidth = isBody ? window.innerWidth - document.documentElement.clientWidth : $context[0].offsetWidth - $context[0].clientWidth;
684
765
  tempBodyMargin = bodyMarginRightPixel + bodyScrollbarWidth;
685
766
  }
686
767
  },
@@ -693,8 +774,8 @@ $.fn.modal = function(parameters) {
693
774
  },
694
775
  bodyMargin: function() {
695
776
  var position = module.can.leftBodyScrollbar() ? 'left':'right';
696
- $body.css('margin-'+position, initialBodyMargin);
697
- $body.find(selector.bodyFixed.replace('right',position)).each(function(){
777
+ $context.css((isBody ? 'margin-':'padding-')+position, initialBodyMargin);
778
+ $context.find(selector.bodyFixed.replace('right',position)).each(function(){
698
779
  var el = $(this),
699
780
  attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
700
781
  ;
@@ -715,7 +796,7 @@ $.fn.modal = function(parameters) {
715
796
  $module
716
797
  .off('mousedown' + elementEventNamespace)
717
798
  ;
718
- }
799
+ }
719
800
  $dimmer
720
801
  .off('mousedown' + elementEventNamespace)
721
802
  ;
@@ -728,25 +809,28 @@ $.fn.modal = function(parameters) {
728
809
  $dimmable.removeClass(className.blurring);
729
810
  },
730
811
  bodyStyle: function() {
731
- if($body.attr('style') === '') {
812
+ if($context.attr('style') === '') {
732
813
  module.verbose('Removing style attribute');
733
- $body.removeAttr('style');
814
+ $context.removeAttr('style');
734
815
  }
735
816
  },
736
817
  screenHeight: function() {
737
818
  module.debug('Removing page height');
738
- $body
819
+ $context
739
820
  .css('height', '')
740
821
  ;
822
+ module.remove.bodyStyle()
741
823
  },
742
824
  keyboardShortcuts: function() {
743
825
  module.verbose('Removing keyboard shortcuts');
744
826
  $document
745
- .off('keyup' + eventNamespace)
827
+ .off('keydown' + eventNamespace)
746
828
  ;
747
829
  },
748
830
  scrolling: function() {
749
- $dimmable.removeClass(className.scrolling);
831
+ if(!keepScrollingClass) {
832
+ $dimmable.removeClass(className.scrolling);
833
+ }
750
834
  $module.removeClass(className.scrolling);
751
835
  }
752
836
  },
@@ -760,12 +844,12 @@ $.fn.modal = function(parameters) {
760
844
  ;
761
845
  if(module.cache.pageHeight === undefined || modalHeight !== 0) {
762
846
  $.extend(module.cache, {
763
- pageHeight : $(document).outerHeight(),
847
+ pageHeight : $document.outerHeight(),
764
848
  width : modalWidth,
765
849
  height : modalHeight + settings.offset,
766
850
  scrollHeight : scrollHeight + settings.offset,
767
- contextHeight : (settings.context == 'body')
768
- ? $(window).height()
851
+ contextHeight : isBody
852
+ ? $window.height()
769
853
  : $dimmable.height(),
770
854
  });
771
855
  module.cache.topOffset = -(module.cache.height / 2);
@@ -796,7 +880,7 @@ $.fn.modal = function(parameters) {
796
880
  }
797
881
  ;
798
882
  if(shouldEscape.test(string)) {
799
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
883
+ string = string.replace(/&(?![a-z0-9#]{1,12};)/gi, "&amp;");
800
884
  return string.replace(badChars, escapedChar);
801
885
  }
802
886
  return string;
@@ -839,6 +923,9 @@ $.fn.modal = function(parameters) {
839
923
  has: {
840
924
  configActions: function () {
841
925
  return Array.isArray(settings.actions) && settings.actions.length > 0;
926
+ },
927
+ scrollbar: function() {
928
+ return isBody || $context.css('overflow-y') !== 'hidden';
842
929
  }
843
930
  },
844
931
  is: {
@@ -870,7 +957,7 @@ $.fn.modal = function(parameters) {
870
957
  },
871
958
  rtl: function() {
872
959
  if(module.cache.isRTL === undefined) {
873
- module.cache.isRTL = $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl';
960
+ module.cache.isRTL = $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl' || $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl' || $context.attr('dir') === 'rtl' || $context.css('direction') === 'rtl';
874
961
  }
875
962
  return module.cache.isRTL;
876
963
  },
@@ -900,13 +987,10 @@ $.fn.modal = function(parameters) {
900
987
  set: {
901
988
  autofocus: function() {
902
989
  var
903
- $inputs = $module.find('[tabindex], :input').filter(':visible').filter(function() {
904
- return $(this).closest('.disabled').length === 0;
905
- }),
906
990
  $autofocus = $inputs.filter('[autofocus]'),
907
991
  $input = ($autofocus.length > 0)
908
992
  ? $autofocus.first()
909
- : $inputs.first()
993
+ : ($inputs.length > 1 ? $inputs.filter(':not(i.close)') : $inputs).first()
910
994
  ;
911
995
  if($input.length > 0) {
912
996
  $input.focus();
@@ -915,9 +999,9 @@ $.fn.modal = function(parameters) {
915
999
  bodyMargin: function() {
916
1000
  var position = module.can.leftBodyScrollbar() ? 'left':'right';
917
1001
  if(settings.detachable || module.can.fit()) {
918
- $body.css('margin-'+position, tempBodyMargin + 'px');
1002
+ $context.css((isBody ? 'margin-':'padding-')+position, tempBodyMargin + 'px');
919
1003
  }
920
- $body.find(selector.bodyFixed.replace('right',position)).each(function(){
1004
+ $context.find(selector.bodyFixed.replace('right',position)).each(function(){
921
1005
  var el = $(this),
922
1006
  attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
923
1007
  ;
@@ -983,12 +1067,12 @@ $.fn.modal = function(parameters) {
983
1067
  $module
984
1068
  .css({
985
1069
  top: (!$module.hasClass('aligned') && canFit)
986
- ? $(document).scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
1070
+ ? $document.scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
987
1071
  : !canFit || $module.hasClass('top')
988
- ? $(document).scrollTop() + settings.padding
989
- : $(document).scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
1072
+ ? $document.scrollTop() + settings.padding
1073
+ : $document.scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
990
1074
  marginLeft: -(module.cache.width / 2)
991
- })
1075
+ })
992
1076
  ;
993
1077
  } else {
994
1078
  $module
@@ -997,18 +1081,18 @@ $.fn.modal = function(parameters) {
997
1081
  ? -(module.cache.height / 2)
998
1082
  : settings.padding / 2,
999
1083
  marginLeft: -(module.cache.width / 2)
1000
- })
1084
+ })
1001
1085
  ;
1002
1086
  }
1003
1087
  module.verbose('Setting modal offset for legacy mode');
1004
1088
  },
1005
1089
  screenHeight: function() {
1006
1090
  if( module.can.fit() ) {
1007
- $body.css('height', '');
1091
+ $context.css('height', '');
1008
1092
  }
1009
1093
  else if(!$module.hasClass('bottom')) {
1010
1094
  module.debug('Modal is taller than page content, resizing page height');
1011
- $body
1095
+ $context
1012
1096
  .css('height', module.cache.height + (settings.padding * 2) )
1013
1097
  ;
1014
1098
  }
@@ -1160,7 +1244,7 @@ $.fn.modal = function(parameters) {
1160
1244
  response
1161
1245
  ;
1162
1246
  passedArguments = passedArguments || queryArguments;
1163
- context = element || context;
1247
+ context = context || element;
1164
1248
  if(typeof query == 'string' && object !== undefined) {
1165
1249
  query = query.split(/[\. ]/);
1166
1250
  maxDepth = query.length - 1;
@@ -1323,11 +1407,19 @@ $.fn.modal.settings = {
1323
1407
  // called after deny selector match
1324
1408
  onDeny : function(){ return true; },
1325
1409
 
1410
+ keys : {
1411
+ space : 32,
1412
+ enter : 13,
1413
+ escape : 27,
1414
+ tab : 9,
1415
+ },
1416
+
1326
1417
  selector : {
1327
1418
  title : '> .header',
1328
1419
  content : '> .content',
1329
1420
  actions : '> .actions',
1330
1421
  close : '> .close',
1422
+ closeIcon: '> .close',
1331
1423
  approve : '.actions .positive, .actions .approve, .actions .ok',
1332
1424
  deny : '.actions .negative, .actions .deny, .actions .cancel',
1333
1425
  modal : '.ui.modal',
@@ -1359,11 +1451,13 @@ $.fn.modal.settings = {
1359
1451
  template : 'ui tiny modal',
1360
1452
  ok : 'positive',
1361
1453
  cancel : 'negative',
1362
- prompt : 'ui fluid input'
1454
+ prompt : 'ui fluid input',
1455
+ innerDimmer: 'ui inverted dimmer'
1363
1456
  },
1364
1457
  text: {
1365
1458
  ok : 'Ok',
1366
- cancel: 'Cancel'
1459
+ cancel: 'Cancel',
1460
+ close : 'Close'
1367
1461
  }
1368
1462
  };
1369
1463
 
@@ -1389,33 +1483,39 @@ $.fn.modal.settings.templates = {
1389
1483
  },
1390
1484
  alert: function () {
1391
1485
  var settings = this.get.settings(),
1392
- args = settings.templates.getArguments(arguments)
1486
+ args = settings.templates.getArguments(arguments),
1487
+ approveFn = args.handler
1393
1488
  ;
1394
1489
  return {
1395
1490
  title : args.title,
1396
1491
  content: args.content,
1492
+ onApprove: approveFn,
1397
1493
  actions: [{
1398
1494
  text : settings.text.ok,
1399
1495
  class: settings.className.ok,
1400
- click: args.handler
1496
+ click: approveFn
1401
1497
  }]
1402
1498
  }
1403
1499
  },
1404
1500
  confirm: function () {
1405
1501
  var settings = this.get.settings(),
1406
- args = settings.templates.getArguments(arguments)
1502
+ args = settings.templates.getArguments(arguments),
1503
+ approveFn = function(){args.handler(true)},
1504
+ denyFn = function(){args.handler(false)}
1407
1505
  ;
1408
1506
  return {
1409
1507
  title : args.title,
1410
1508
  content: args.content,
1509
+ onApprove: approveFn,
1510
+ onDeny: denyFn,
1411
1511
  actions: [{
1412
1512
  text : settings.text.ok,
1413
1513
  class: settings.className.ok,
1414
- click: function(){args.handler(true)}
1514
+ click: approveFn
1415
1515
  },{
1416
1516
  text: settings.text.cancel,
1417
1517
  class: settings.className.cancel,
1418
- click: function(){args.handler(false)}
1518
+ click: denyFn
1419
1519
  }]
1420
1520
  }
1421
1521
  },
@@ -1423,27 +1523,31 @@ $.fn.modal.settings.templates = {
1423
1523
  var $this = this,
1424
1524
  settings = this.get.settings(),
1425
1525
  args = settings.templates.getArguments(arguments),
1426
- input = $($.parseHTML(args.content)).filter('.ui.input')
1526
+ input = $($.parseHTML(args.content)).filter('.ui.input'),
1527
+ approveFn = function(){
1528
+ var settings = $this.get.settings(),
1529
+ inputField = $this.get.element().find(settings.selector.prompt)[0]
1530
+ ;
1531
+ args.handler($(inputField).val());
1532
+ },
1533
+ denyFn = function(){args.handler(null)}
1427
1534
  ;
1428
1535
  if (input.length === 0) {
1429
- args.content += '<p><div class="'+settings.className.prompt+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
1536
+ args.content += '<p><div class="'+this.helpers.deQuote(settings.className.prompt)+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
1430
1537
  }
1431
1538
  return {
1432
1539
  title : args.title,
1433
1540
  content: args.content,
1541
+ onApprove: approveFn,
1542
+ onDeny: denyFn,
1434
1543
  actions: [{
1435
1544
  text: settings.text.ok,
1436
1545
  class: settings.className.ok,
1437
- click: function(){
1438
- var settings = $this.get.settings(),
1439
- inputField = $this.get.element().find(settings.selector.prompt)[0]
1440
- ;
1441
- args.handler($(inputField).val());
1442
- }
1546
+ click: approveFn
1443
1547
  },{
1444
1548
  text: settings.text.cancel,
1445
1549
  class: settings.className.cancel,
1446
- click: function(){args.handler(null)}
1550
+ click: denyFn
1447
1551
  }]
1448
1552
  }
1449
1553
  }