Skip to content

Commit 5bc385b

Browse files
Semantic-Pusher-RobotSemantic-Pusher-Robot
committed
Updated component to version 2.4.0
1 parent f9321b5 commit 5bc385b

8 files changed

+215
-29
lines changed

‎RELEASE-NOTES.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
### Version 2.4.0 - Sep 17, 2018
2+
3+
- **Modal/Dimmer** - Modals and dimmers now include a new setting `useFlex` which defaults to `auto`. Modals and dimmers will automatically revert to using non-flex layouts when there may be layout issues with using flexbox. Modals will fall back to JS position when `detachable: false` is used or with IE11/Edge (Absolutely positioned elements inside flex containers in IE behave differently).
4+
- **Modal** - Fixed issue where `scrolling modal` would not allow for scrolling with touch devices. [#6449](https://github.com/Semantic-Org/Semantic-UI/issues/6449)
5+
- **Modal** - Fixes `@mobileTopAlignedMargin` theming variable was not implemented
6+
- **Modal** - Modal now will remove `blurring` after undimming, to prevent issues with `position: fixed` [#6520](https://github.com/Semantic-Org/Semantic-UI/issues/6520)
7+
18
### Version 2.3.2 - June 18, 2018
29

310
- **Modal** - Modal and Dimmer now prevent background page from scrolling on mobile or where touch events are present

‎composer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
"framework"
1616
],
1717
"license": "MIT",
18-
"version": "2.3.3"
18+
"version": "2.4.0"
1919
}

‎index.js

+86-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.3.3 - Modal
2+
* # Semantic UI 2.4.0 - Modal
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -111,8 +111,7 @@ module.exports = function(parameters) {
111111
debug : settings.debug,
112112
variation : settings.centered
113113
? false
114-
: 'top aligned'
115-
,
114+
: 'top aligned',
116115
dimmerName : 'modals'
117116
},
118117
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -133,7 +132,7 @@ module.exports = function(parameters) {
133132
$dimmer = $dimmable.dimmer('get dimmer');
134133
},
135134
id: function() {
136-
id = (Math.random().toString(16) + '000000000').substr(2,8);
135+
id = (Math.random().toString(16) + '000000000').substr(2, 8);
137136
elementEventNamespace = '.' + id;
138137
module.verbose('Creating unique id for element', id);
139138
}
@@ -168,6 +167,9 @@ module.exports = function(parameters) {
168167
refresh: function() {
169168
module.remove.scrolling();
170169
module.cacheSizes();
170+
if(!module.can.useFlex()) {
171+
module.set.modalOffset();
172+
}
171173
module.set.screenHeight();
172174
module.set.type();
173175
},
@@ -208,12 +210,22 @@ module.exports = function(parameters) {
208210
$window
209211
.on('resize' + elementEventNamespace, module.event.resize)
210212
;
213+
},
214+
scrollLock: function() {
215+
// touch events default to passive, due to changes in chrome to optimize mobile perf
216+
$dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
217+
}
218+
},
219+
220+
unbind: {
221+
scrollLock: function() {
222+
$dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
211223
}
212224
},
213225

214226
get: {
215227
id: function() {
216-
return (Math.random().toString(16) + '000000000').substr(2,8);
228+
return (Math.random().toString(16) + '000000000').substr(2, 8);
217229
}
218230
},
219231

@@ -228,6 +240,9 @@ module.exports = function(parameters) {
228240
ignoreRepeatedEvents = false;
229241
});
230242
},
243+
preventScroll: function(event) {
244+
event.preventDefault();
245+
},
231246
deny: function() {
232247
if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) {
233248
module.verbose('Deny callback returned false cancelling hide');
@@ -305,6 +320,8 @@ module.exports = function(parameters) {
305320
;
306321
module.refreshModals();
307322
module.set.dimmerSettings();
323+
module.set.dimmerStyles();
324+
308325
module.showModal(callback);
309326
},
310327

@@ -323,9 +340,16 @@ module.exports = function(parameters) {
323340
: function(){}
324341
;
325342
if( module.is.animating() || !module.is.active() ) {
326-
327343
module.showDimmer();
328344
module.cacheSizes();
345+
if(module.can.useFlex()) {
346+
module.remove.legacy();
347+
}
348+
else {
349+
module.set.legacy();
350+
module.set.modalOffset();
351+
module.debug('Using non-flex legacy modal positioning.');
352+
}
329353
module.set.screenHeight();
330354
module.set.type();
331355
module.set.clickaway();
@@ -403,6 +427,7 @@ module.exports = function(parameters) {
403427
},
404428
onComplete : function() {
405429
settings.onHidden.call(element);
430+
module.remove.dimmerStyles();
406431
module.restore.focus();
407432
callback();
408433
}
@@ -427,6 +452,7 @@ module.exports = function(parameters) {
427452

428453
hideDimmer: function() {
429454
if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
455+
module.unbind.scrollLock();
430456
$dimmable.dimmer('hide', function() {
431457
module.remove.clickaway();
432458
module.remove.screenHeight();
@@ -514,11 +540,18 @@ module.exports = function(parameters) {
514540
active: function() {
515541
$module.removeClass(className.active);
516542
},
543+
legacy: function() {
544+
$module.removeClass(className.legacy);
545+
},
517546
clickaway: function() {
518547
$dimmer
519548
.off('click' + elementEventNamespace)
520549
;
521550
},
551+
dimmerStyles: function() {
552+
$dimmer.removeClass(className.inverted);
553+
$dimmable.removeClass(className.blurring);
554+
},
522555
bodyStyle: function() {
523556
if($body.attr('style') === '') {
524557
module.verbose('Removing style attribute');
@@ -547,11 +580,13 @@ module.exports = function(parameters) {
547580
$module.addClass(className.loading);
548581
var
549582
scrollHeight = $module.prop('scrollHeight'),
583+
modalWidth = $module.outerWidth(),
550584
modalHeight = $module.outerHeight()
551585
;
552586
if(module.cache === undefined || modalHeight !== 0) {
553587
module.cache = {
554588
pageHeight : $(document).outerHeight(),
589+
width : modalWidth,
555590
height : modalHeight + settings.offset,
556591
scrollHeight : scrollHeight + settings.offset,
557592
contextHeight : (settings.context == 'body')
@@ -565,6 +600,12 @@ module.exports = function(parameters) {
565600
},
566601

567602
can: {
603+
useFlex: function() {
604+
return (settings.useFlex == 'auto')
605+
? settings.detachable && !module.is.ie()
606+
: settings.useFlex
607+
;
608+
},
568609
fit: function() {
569610
var
570611
contextHeight = module.cache.contextHeight,
@@ -586,6 +627,13 @@ module.exports = function(parameters) {
586627
active: function() {
587628
return $module.hasClass(className.active);
588629
},
630+
ie: function() {
631+
var
632+
isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
633+
isIE = ('ActiveXObject' in window)
634+
;
635+
return (isIE11 || isIE);
636+
},
589637
animating: function() {
590638
return $module.transition('is supported')
591639
? $module.transition('is animating')
@@ -597,7 +645,7 @@ module.exports = function(parameters) {
597645
},
598646
modernBrowser: function() {
599647
// appName for IE11 reports 'Netscape' can no longer use
600-
return !(window.ActiveXObject || "ActiveXObject" in window);
648+
return !(window.ActiveXObject || 'ActiveXObject' in window);
601649
}
602650
},
603651

@@ -629,10 +677,10 @@ module.exports = function(parameters) {
629677
debug : settings.debug,
630678
dimmerName : 'modals',
631679
closable : 'auto',
680+
useFlex : module.can.useFlex(),
632681
variation : settings.centered
633682
? false
634-
: 'top aligned'
635-
,
683+
: 'top aligned',
636684
duration : {
637685
show : settings.duration,
638686
hide : settings.duration
@@ -645,6 +693,11 @@ module.exports = function(parameters) {
645693
? dimmerSettings.variation + ' inverted'
646694
: 'inverted'
647695
;
696+
}
697+
$context.dimmer('setting', dimmerSettings);
698+
},
699+
dimmerStyles: function() {
700+
if(settings.inverted) {
648701
$dimmer.addClass(className.inverted);
649702
}
650703
else {
@@ -656,7 +709,21 @@ module.exports = function(parameters) {
656709
else {
657710
$dimmable.removeClass(className.blurring);
658711
}
659-
$context.dimmer('setting', dimmerSettings);
712+
},
713+
modalOffset: function() {
714+
var
715+
width = module.cache.width,
716+
height = module.cache.height
717+
;
718+
$module
719+
.css({
720+
marginTop: (settings.centered && module.can.fit())
721+
? -(height / 2)
722+
: 0,
723+
marginLeft: -(width / 2)
724+
})
725+
;
726+
module.verbose('Setting modal offset for legacy mode');
660727
},
661728
screenHeight: function() {
662729
if( module.can.fit() ) {
@@ -675,12 +742,17 @@ module.exports = function(parameters) {
675742
scrolling: function() {
676743
$dimmable.addClass(className.scrolling);
677744
$module.addClass(className.scrolling);
745+
module.unbind.scrollLock();
746+
},
747+
legacy: function() {
748+
$module.addClass(className.legacy);
678749
},
679750
type: function() {
680751
if(module.can.fit()) {
681752
module.verbose('Modal fits on screen');
682753
if(!module.others.active() && !module.others.animating()) {
683754
module.remove.scrolling();
755+
module.bind.scrollLock();
684756
}
685757
}
686758
else {
@@ -881,6 +953,9 @@ _module.exports.settings = {
881953
name : 'Modal',
882954
namespace : 'modal',
883955

956+
useFlex : 'auto',
957+
offset : 0,
958+
884959
silent : false,
885960
debug : false,
886961
verbose : false,
@@ -910,7 +985,6 @@ _module.exports.settings = {
910985

911986
queue : false,
912987
duration : 500,
913-
offset : 0,
914988
transition : 'scale',
915989

916990
// padding with edge of page
@@ -950,6 +1024,7 @@ _module.exports.settings = {
9501024
animating : 'animating',
9511025
blurring : 'blurring',
9521026
inverted : 'inverted',
1027+
legacy : 'legacy',
9531028
loading : 'loading',
9541029
scrolling : 'scrolling',
9551030
undetached : 'undetached'

‎modal.css

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.3.3 - Modal
2+
* # Semantic UI 2.4.0 - Modal
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -14,6 +14,7 @@
1414
*******************************/
1515

1616
.ui.modal {
17+
position: absolute;
1718
display: none;
1819
z-index: 1001;
1920
text-align: left;
@@ -320,6 +321,19 @@
320321
color: rgba(0, 0, 0, 0.85);
321322
}
322323

324+
/* Resort to margin positioning if legacy */
325+
.ui.legacy.modal,
326+
.ui.legacy.page.dimmer > .ui.modal {
327+
top: 50%;
328+
left: 50%;
329+
}
330+
.ui.legacy.page.dimmer > .ui.scrolling.modal,
331+
.ui.page.dimmer > .ui.scrolling.legacy.modal,
332+
.ui.top.aligned.legacy.page.dimmer > .ui.modal,
333+
.ui.top.aligned.dimmer > .ui.legacy.modal {
334+
top: auto;
335+
}
336+
323337
/* Tablet and Mobile */
324338
@media only screen and (max-width: 991px) {
325339
.ui.basic.modal > .close {
@@ -356,6 +370,21 @@
356370
.modals.dimmer[class*="top aligned"] .modal {
357371
margin: 5vh auto;
358372
}
373+
@media only screen and (max-width: 767px) {
374+
.modals.dimmer[class*="top aligned"] .modal {
375+
margin: 1rem auto;
376+
}
377+
}
378+
379+
/* Legacy Top Aligned */
380+
.legacy.modals.dimmer[class*="top aligned"] {
381+
padding-top: 5vh;
382+
}
383+
@media only screen and (max-width: 767px) {
384+
.legacy.modals.dimmer[class*="top aligned"] {
385+
padding-top: 1rem;
386+
}
387+
}
359388

360389
/*--------------
361390
Scrolling
@@ -379,7 +408,7 @@
379408
position: fixed;
380409
}
381410
.modals.dimmer .ui.scrolling.modal {
382-
margin: 1rem auto !important;
411+
margin: 1rem auto;
383412
}
384413

385414
/* Undetached Scrolling */

0 commit comments

Comments
 (0)