richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Modals now focus on the first input within them when activating. Made code more DRY. Updated docs

pull/836/head
Samuel Hodge 10 years ago
parent
fd9c361d20
commit
1df413acae
2 changed files with 83 additions and 66 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      server/documents/modules/modal.html.eco
  2. 130
      src/modules/modal.js

19
server/documents/modules/modal.html.eco
View File

@ -365,31 +365,38 @@ type : 'UI Module'
<tr> <tr>
<td>detachable</td> <td>detachable</td>
<td>true</td> <td>true</td>
<td>If set to false will prevent the modal from being moved to inside the dimmer</td>
<td>Setting to to false will prevent the modal from being removed from the DOM and appended to the dimmer</td>
</tr> </tr>
<tr> <tr>
<td>allowMultiple</td> <td>allowMultiple</td>
<td>false</td> <td>false</td>
<td>If set to true will not close other visible modals when opening a new one</td>
<td>Setting to true will prevent closing other visible modals when opening a new one</td>
</tr> </tr>
<tr> <tr>
<td>offset</td> <td>offset</td>
<td>0</td> <td>0</td>
<td>A vertical offset to allow for content outside of modal, for example a close button, to be centered.</td>
<td>A vertical offset to allow for content outside of the modal (close button, etc)</td>
</tr> </tr>
<tr> <tr>
<td>context</td> <td>context</td>
<td> <td>
body body
</td> </td>
<td>Selector or jquery object specifying the area to dim</td>
<td>A CSS selector or jQuery object specifying the area to dim</td>
</tr> </tr>
<tr> <tr>
<td>closable</td> <td>closable</td>
<td> <td>
true true
</td> </td>
<td>Settings to false will not allow you to close the modal by clicking on the dimmer</td>
<td>Setting to false will not allow you to close the modal by clicking on the dimmer</td>
</tr>
<tr>
<td>autofocus</td>
<td>
true
</td>
<td>Setting to false will prevent autofocusing on the first input within the modal</td>
</tr> </tr>
<tr> <tr>
<td>useCSS</td> <td>useCSS</td>
@ -417,7 +424,7 @@ type : 'UI Module'
<td> <td>
easeOutExpo easeOutExpo
</td> </td>
<td>Animation easing is only used if javascript animations are used.</td>
<td>Animation easing is only used if javascript animations are used</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

130
src/modules/modal.js
View File

@ -251,51 +251,53 @@ $.fn.modal = function(parameters) {
return $otherModals.filter(':visible').size() > 0; return $otherModals.filter(':visible').size() > 0;
}, },
showModal: function(callback) {
showModal: function(callback) {
if(module.is.active()) {
module.debug('Modal is already visible');
return;
}
callback = $.isFunction(callback) callback = $.isFunction(callback)
? callback ? callback
: function(){} : function(){}
; ;
if( !module.is.active() ) {
if(module.cache === undefined) {
module.cacheSizes();
}
module.set.position();
module.set.screenHeight();
module.set.type();
module.save.focus();
module.add.keyboardShortcuts();
if(module.cache === undefined) {
module.cacheSizes();
}
module.set.position();
module.set.screenHeight();
module.set.type();
if(module.othersVisible() && !settings.allowMultiple) {
module.debug('Other modals visible, queueing show animation');
module.hideOthers(module.showModal);
if(module.othersVisible() && !settings.allowMultiple) {
module.debug('Other modals visible, queueing show animation');
module.hideOthers(module.showModal);
}
else {
$.proxy(settings.onShow, element)();
var transitionCallback = function() {
module.set.active();
$.proxy(settings.onVisible, element)();
callback();
};
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.debug('Showing modal with css animations');
$module
.transition(settings.transition + ' in', settings.duration, transitionCallback)
;
} }
else { else {
$.proxy(settings.onShow, element)();
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.debug('Showing modal with css animations');
$module
.transition(settings.transition + ' in', settings.duration, function() {
$.proxy(settings.onVisible, element)();
module.set.active();
callback();
})
;
}
else {
module.debug('Showing modal with javascript');
$module
.fadeIn(settings.duration, settings.easing, function() {
$.proxy(settings.onVisible, element)();
module.set.active();
callback();
})
;
}
module.debug('Showing modal with javascript');
$module
.fadeIn(settings.duration, settings.easing, transitionCallback)
;
} }
} }
else {
module.debug('Modal is already visible');
}
}, },
showDimmer: function() { showDimmer: function() {
@ -304,7 +306,7 @@ $.fn.modal = function(parameters) {
$dimmable.dimmer('show'); $dimmable.dimmer('show');
} }
else { else {
module.debug('Dimmer already visible');
module.debug('Dimmer is already visible');
} }
}, },
@ -322,7 +324,7 @@ $.fn.modal = function(parameters) {
hideDimmer: function() { hideDimmer: function() {
if( !module.is.active() ) { if( !module.is.active() ) {
module.debug('Dimmer is not visible cannot hide');
module.debug('Dimmer is already hidden');
return; return;
} }
module.debug('Hiding dimmer'); module.debug('Hiding dimmer');
@ -343,35 +345,37 @@ $.fn.modal = function(parameters) {
}, },
hideModal: function(callback) { hideModal: function(callback) {
if(!module.is.active()) {
module.debug('Modal is already hidden');
return;
}
callback = $.isFunction(callback) callback = $.isFunction(callback)
? callback ? callback
: function(){} : function(){}
; ;
if( !module.is.active() ) {
module.debug('Cannot hide modal it is not active');
return;
}
module.debug('Hiding modal');
module.restore.focus();
module.remove.keyboardShortcuts(); module.remove.keyboardShortcuts();
$.proxy(settings.onHide, element)(); $.proxy(settings.onHide, element)();
var transitionCallback = function() {
module.remove.active();
$.proxy(settings.onHidden, element)();
callback();
};
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.debug('Hiding modal with css animations');
$module $module
.transition(settings.transition + ' out', settings.duration, function() {
$.proxy(settings.onHidden, element)();
module.remove.active();
module.restore.focus();
callback();
})
.transition(settings.transition + ' out', settings.duration, transitionCallback)
; ;
} }
else { else {
module.debug('Hiding modal with javascript');
$module $module
.fadeOut(settings.duration, settings.easing, function() {
$.proxy(settings.onHidden, element)();
module.remove.active();
module.restore.focus();
callback();
})
.fadeOut(settings.duration, settings.easing, transitionCallback)
; ;
} }
}, },
@ -489,17 +493,22 @@ $.fn.modal = function(parameters) {
} }
}, },
active: function() { active: function() {
module.add.keyboardShortcuts();
module.save.focus();
$module
.addClass(className.active)
;
$module.addClass(className.active);
if(settings.closable) { if(settings.closable) {
$dimmer $dimmer
.off('click' + eventNamespace) .off('click' + eventNamespace)
.on('click' + eventNamespace, module.event.click) .on('click' + eventNamespace, module.event.click)
; ;
} }
if(settings.autofocus) {
var $inputs = $module.find(':input:visible');
var $autofocus = $inputs.filter('[autofocus]');
var $input = $autofocus.length ? $autofocus : $inputs;
$input.first().focus();
}
}, },
scrolling: function() { scrolling: function() {
$dimmable.addClass(className.scrolling); $dimmable.addClass(className.scrolling);
@ -724,6 +733,7 @@ $.fn.modal.settings = {
allowMultiple : true, allowMultiple : true,
detachable : true, detachable : true,
closable : true, closable : true,
autofocus : true,
context : 'body', context : 'body',
duration : 500, duration : 500,
@ -765,4 +775,4 @@ $.extend( $.easing, {
} }
}); });
})( jQuery, window , document );
})( jQuery, window , document );
Write Preview
Loading…
Cancel
Save