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

Rewrites modal and dimmer fixes #233, no longer dependencies between closing dimmer and closing modal, each can close separately. Disables transition logging by default

pull/258/head
jlukic 11 years ago
parent
3d816068ab
commit
f8aa8bbf8d
3 changed files with 77 additions and 66 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      src/modules/dimmer.js
  2. 103
      src/modules/modal.js
  3. 2
      src/modules/transition.js

38
src/modules/dimmer.js
View File

@ -15,28 +15,12 @@ $.fn.dimmer = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.dimmer.settings, parameters)
: $.fn.dimmer.settings,
selector = settings.selector,
namespace = settings.namespace,
className = settings.className,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
clickEvent = ('ontouchstart' in document.documentElement)
? 'touchstart'
: 'click',
invokedResponse
;
@ -44,6 +28,23 @@ $.fn.dimmer = function(parameters) {
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.dimmer.settings, parameters)
: $.fn.dimmer.settings,
selector = settings.selector,
namespace = settings.namespace,
className = settings.className,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
clickEvent = ('ontouchstart' in document.documentElement)
? 'touchstart'
: 'click',
$module = $(this),
$dimmer,
$dimmable,
@ -66,7 +67,7 @@ $.fn.dimmer = function(parameters) {
$dimmer = $dimmable.children(selector.dimmer).first();
}
else {
module.create();
$dimmer = module.create();
}
}
},
@ -141,8 +142,7 @@ $.fn.dimmer = function(parameters) {
},
create: function() {
$dimmer = $( settings.template.dimmer() );
return $dimmer.appendTo($dimmable);
return $( settings.template.dimmer() ).appendTo($dimmable);
},
animate: {

103
src/modules/modal.js
View File

@ -17,19 +17,6 @@ $.fn.modal = function(parameters) {
$window = $(window),
$document = $(document),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.modal.settings, parameters)
: $.fn.modal.settings,
selector = settings.selector,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
@ -44,6 +31,19 @@ $.fn.modal = function(parameters) {
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.modal.settings, parameters)
: $.fn.modal.settings,
selector = settings.selector,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
$module = $(this),
$context = $(settings.context),
$otherModals = $allModules.not($module),
@ -64,7 +64,6 @@ $.fn.modal = function(parameters) {
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
module.verbose('Attaching close events', $close);
@ -107,7 +106,7 @@ $.fn.modal = function(parameters) {
;
event = $.isFunction(module[event])
? module[event]
: module.show
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching modal events to element', selector, event);
@ -124,7 +123,7 @@ $.fn.modal = function(parameters) {
event: {
close: function() {
module.verbose('Close button pressed');
$context.dimmer('hide');
module.hide();
},
debounce: function(method, delay) {
clearTimeout(module.timer);
@ -137,12 +136,12 @@ $.fn.modal = function(parameters) {
;
if(keyCode == escapeKey) {
module.debug('Escape key pressed hiding modal');
$context.dimmer('hide');
module.hide();
event.preventDefault();
}
},
resize: function() {
if( $context.dimmer('is active') ) {
if( $dimmer.dimmer('is active') ) {
module.refresh();
}
}
@ -164,20 +163,12 @@ $.fn.modal = function(parameters) {
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.save.focus();
module.set.type();
})
.transition(settings.transition + ' in', settings.duration, module.set.active)
;
}
else {
$module
.fadeIn(settings.duration, settings.easing, function() {
module.set.active();
module.save.focus();
module.set.type();
})
.fadeIn(settings.duration, settings.easing, module.set.active)
;
}
module.debug('Triggering dimmer');
@ -187,18 +178,30 @@ $.fn.modal = function(parameters) {
showDimmer: function() {
module.debug('Showing modal');
module.set.dimmerSettings();
$context.dimmer('show');
$dimmer.dimmer('show');
},
hide: function() {
if( $dimmer.dimmer('is active') ) {
$dimmer.dimmer('hide');
}
if( module.is.active() ) {
module.hideModal();
$.proxy(settings.onHide, element)();
}
else {
module.debug('Cannot hide modal, modal is not visible');
}
},
hideDimmer: function() {
$context.dimmer('hide');
module.debug('Hiding dimmer');
$dimmer.dimmer('hide');
},
hide: function() {
hideModal: function() {
module.debug('Hiding modal');
// remove keyboard detection
$document
.off('keyup.' + eventNamespace)
;
module.remove.keyboardShortcuts();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' out', settings.duration, function() {
@ -215,7 +218,6 @@ $.fn.modal = function(parameters) {
})
;
}
$.proxy(settings.onHide, element)();
},
hideAll: function() {
@ -242,7 +244,9 @@ $.fn.modal = function(parameters) {
restore: {
focus: function() {
$focusedElement.focus();
if($focusedElement.size() > 0) {
$focusedElement.focus();
}
}
},
@ -267,7 +271,7 @@ $.fn.modal = function(parameters) {
height : $module.outerHeight() + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $context.height()
: $dimmer.height()
};
module.debug('Caching modal and container sizes', module.cache);
},
@ -286,21 +290,28 @@ $.fn.modal = function(parameters) {
set: {
active: function() {
$module.addClass(className.active);
module.save.focus();
module.set.type();
$module
.addClass(className.active)
;
if(settings.closable) {
$dimmer
.dimmer('get dimmer')
.on('click', module.hide)
;
}
},
dimmerSettings: function() {
module.debug('Setting dimmer settings', settings.closable);
$context
.dimmer('setting', 'closable', settings.closable)
module.debug('Setting dimmer settings', $dimmer);
$dimmer
.dimmer('setting', 'closable', false)
.dimmer('setting', 'duration', {
show : settings.duration * 0.95,
hide : settings.duration * 1.05
})
.dimmer('setting', 'onShow' , module.add.keyboardShortcuts)
.dimmer('setting', 'onHide', function() {
module.hide();
module.remove.keyboardShortcuts();
})
// destory after changing settings in order to reattach events
.dimmer('destroy')
.dimmer('initialize')
;

2
src/modules/transition.js
View File

@ -609,7 +609,7 @@ $.fn.transition.settings = {
name : 'Transition',
// debug content outputted to console
debug : true,
debug : false,
// verbose debug output
verbose : true,

Write Preview
Loading…
Cancel
Save