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

Swaps transition calls to consistent format across modules, looking into issues with dimmer/modal when hiding during show

pull/1129/head
jlukic 10 years ago
parent
6c7f3b8ce6
commit
05a8671fce
5 changed files with 81 additions and 77 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      src/definitions/modules/modal.js
  2. 20
      src/definitions/modules/popup.js
  3. 3
      src/definitions/modules/sticky.js
  4. 89
      src/definitions/modules/transition.js
  5. 2
      src/definitions/modules/transition.less

44
src/definitions/modules/modal.js
View File

@ -223,7 +223,7 @@ $.fn.modal = function(parameters) {
}, },
toggle: function() { toggle: function() {
if( module.is.active() ) {
if( module.is.active() || module.is.animating() ) {
module.hide(); module.hide();
} }
else { else {
@ -260,10 +260,14 @@ $.fn.modal = function(parameters) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.debug('Showing modal with css animations'); module.debug('Showing modal with css animations');
$module $module
.transition(settings.transition + ' in', settings.duration, function() {
$.proxy(settings.onVisible, element)();
module.set.active();
callback();
.transition({
animation : settings.transition + ' in',
duration : settings.duration,
complete : function() {
$.proxy(settings.onVisible, element)();
module.set.active();
callback();
}
}) })
; ;
} }
@ -306,7 +310,7 @@ $.fn.modal = function(parameters) {
}, },
hideDimmer: function() { hideDimmer: function() {
if( !module.is.active() ) {
if( !($dimmable.dimmer('is active') || $dimmable.dimmer('is animating')) ) {
module.debug('Dimmer is not visible cannot hide'); module.debug('Dimmer is not visible cannot hide');
return; return;
} }
@ -318,9 +322,6 @@ $.fn.modal = function(parameters) {
} }
$dimmable.dimmer('hide', function() { $dimmable.dimmer('hide', function() {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition('reset')
;
module.remove.screenHeight(); module.remove.screenHeight();
} }
module.remove.active(); module.remove.active();
@ -332,7 +333,7 @@ $.fn.modal = function(parameters) {
? callback ? callback
: function(){} : function(){}
; ;
if( !module.is.active() ) {
if( !(module.is.active() || module.is.animating()) ) {
module.debug('Cannot hide modal it is not active'); module.debug('Cannot hide modal it is not active');
return; return;
} }
@ -340,12 +341,17 @@ $.fn.modal = function(parameters) {
module.remove.keyboardShortcuts(); module.remove.keyboardShortcuts();
$.proxy(settings.onHide, element)(); $.proxy(settings.onHide, element)();
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
console.log('hiding');
$module $module
.transition(settings.transition + ' out', settings.duration, function() {
$.proxy(settings.onHidden, element)();
module.remove.active();
module.restore.focus();
callback();
.transition({
animation : settings.transition + ' out',
duration : settings.duration,
complete : function() {
$.proxy(settings.onHidden, element)();
module.remove.active();
module.restore.focus();
callback();
}
}) })
; ;
} }
@ -463,6 +469,12 @@ $.fn.modal = function(parameters) {
active: function() { active: function() {
return $module.hasClass(className.active); return $module.hasClass(className.active);
}, },
animating: function() {
return $module.transition('is supported')
? $module.transition('is animating')
: $module.is(':visible')
;
},
modernBrowser: function() { modernBrowser: function() {
// appName for IE11 reports 'Netscape' can no longer use // appName for IE11 reports 'Netscape' can no longer use
return !(window.ActiveXObject || "ActiveXObject" in window); return !(window.ActiveXObject || "ActiveXObject" in window);
@ -717,7 +729,7 @@ $.fn.modal.settings = {
name : 'Modal', name : 'Modal',
namespace : 'modal', namespace : 'modal',
debug : false,
debug : true,
verbose : true, verbose : true,
performance : true, performance : true,

20
src/definitions/modules/popup.js
View File

@ -325,9 +325,13 @@ $.fn.popup = function(parameters) {
; ;
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$popup $popup
.transition(settings.transition + ' in', settings.duration, function() {
module.bind.close();
$.proxy(callback, element)();
.transition({
animation : settings.transition + ' in',
duration : settings.duration,
complete : function() {
module.bind.close();
$.proxy(callback, element)();
}
}) })
; ;
} }
@ -347,9 +351,13 @@ $.fn.popup = function(parameters) {
module.debug('Hiding pop-up'); module.debug('Hiding pop-up');
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$popup $popup
.transition(settings.transition + ' out', settings.duration, function() {
module.reset();
callback();
.transition({
animation : settings.transition + ' out',
duration : settings.duration,
complete : function() {
module.reset();
callback();
}
}) })
; ;
} }

3
src/definitions/modules/sticky.js
View File

@ -298,7 +298,8 @@ $.fn.sticky = function(parameters) {
tagName = $container.get(0).tagName tagName = $container.get(0).tagName
; ;
if(tagName === 'HTML' || tagName == 'body') { if(tagName === 'HTML' || tagName == 'body') {
module.error(error.container, tagName, $module);
// this can trigger for too many reasons
//module.error(error.container, tagName, $module);
$container = $module.offsetParent(); $container = $module.offsetParent();
} }
else { else {

89
src/definitions/modules/transition.js
View File

@ -59,21 +59,18 @@ $.fn.transition = function() {
module = { module = {
initialize: function() { initialize: function() {
// get settings
settings = module.get.settings.apply(element, moduleArguments);
module.verbose('Converted arguments into settings object', settings);
// set shortcuts
error = settings.error;
// get full settings
moduleNamespace = 'module-' + namespace;
settings = module.get.settings.apply(element, moduleArguments);
className = settings.className; className = settings.className;
namespace = settings.namespace;
metadata = settings.metadata; metadata = settings.metadata;
moduleNamespace = 'module-' + namespace;
eventNamespace = '.' + settings.namespace;
animationEnd = module.get.animationEvent(); animationEnd = module.get.animationEvent();
animationName = module.get.animationName(); animationName = module.get.animationName();
error = settings.error;
namespace = settings.namespace;
eventNamespace = '.' + settings.namespace;
instance = $module.data(moduleNamespace) || module; instance = $module.data(moduleNamespace) || module;
if(methodInvoked) { if(methodInvoked) {
@ -81,6 +78,7 @@ $.fn.transition = function() {
} }
// no internal method was found matching query or query not made // no internal method was found matching query or query not made
if(methodInvoked === false) { if(methodInvoked === false) {
module.verbose('Converted arguments into settings object', settings);
module.animate(); module.animate();
module.instantiate(); module.instantiate();
} }
@ -135,7 +133,7 @@ $.fn.transition = function() {
module.debug('Preparing animation', settings.animation); module.debug('Preparing animation', settings.animation);
if(module.is.animating() && settings.queue) { if(module.is.animating() && settings.queue) {
if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && module.queuing !== true) { if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && module.queuing !== true) {
module.error(error.repeated, settings.animation);
module.error(error.repeated);
} }
else { else {
module.queue(settings.animation); module.queue(settings.animation);
@ -152,7 +150,7 @@ $.fn.transition = function() {
reset: function() { reset: function() {
module.debug('Resetting animation to beginning conditions'); module.debug('Resetting animation to beginning conditions');
$module.off(animationEnd);
$module.off(animationEnd + eventNamespace);
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
module.remove.animating(); module.remove.animating();
@ -183,6 +181,7 @@ $.fn.transition = function() {
else if( module.is.inward() ) { else if( module.is.inward() ) {
module.verbose('Animation is outward, showing element'); module.verbose('Animation is outward, showing element');
module.restore.conditions(); module.restore.conditions();
module.set.display();
module.show(); module.show();
$.proxy(settings.onShow, this)(); $.proxy(settings.onShow, this)();
} }
@ -207,7 +206,6 @@ $.fn.transition = function() {
}, },
set: { set: {
animating: function(animation) { animating: function(animation) {
animation = animation || settings.animation; animation = animation || settings.animation;
module.save.conditions(); module.save.conditions();
@ -225,19 +223,19 @@ $.fn.transition = function() {
module.set.duration(settings.duration); module.set.duration(settings.duration);
module.debug('Starting tween', settings.animation, $module.attr('class')); module.debug('Starting tween', settings.animation, $module.attr('class'));
}, },
display: function() { display: function() {
var var
style = $module.attr('style') || '', style = $module.attr('style') || '',
displayType = module.get.displayType(), displayType = module.get.displayType(),
overrideStyle = style + ';display: ' + displayType + ' !important;' overrideStyle = style + ';display: ' + displayType + ' !important;'
; ;
module.verbose('Setting final visibility to', displayType);
$module
.attr('style', overrideStyle)
;
if( $module.css('display') !== displayType ) {
module.verbose('Setting inline visibility to', displayType);
$module
.attr('style', overrideStyle)
;
}
}, },
direction: function() { direction: function() {
if($module.is(':visible') && !module.is.hidden()) { if($module.is(':visible') && !module.is.hidden()) {
module.debug('Automatically determining the direction of animation', 'Outward'); module.debug('Automatically determining the direction of animation', 'Outward');
@ -254,14 +252,12 @@ $.fn.transition = function() {
; ;
} }
}, },
looping: function() { looping: function() {
module.debug('Transition set to loop'); module.debug('Transition set to loop');
$module $module
.addClass(className.looping) .addClass(className.looping)
; ;
}, },
duration: function(duration) { duration: function(duration) {
duration = duration || settings.duration; duration = duration || settings.duration;
duration = (typeof duration == 'number') duration = (typeof duration == 'number')
@ -279,24 +275,20 @@ $.fn.transition = function() {
}) })
; ;
}, },
hidden: function() { hidden: function() {
if(!module.is.hidden()) { if(!module.is.hidden()) {
$module $module
.addClass(className.transition) .addClass(className.transition)
.addClass(className.hidden) .addClass(className.hidden)
; ;
requestAnimationFrame(function() {
if($module.css('display') !== 'none') {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
});
if($module.css('display') !== 'none') {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
} }
}, },
visible: function() { visible: function() {
$module $module
.addClass(className.transition) .addClass(className.transition)
@ -339,7 +331,7 @@ $.fn.transition = function() {
} }
else { else {
if(module.get.displayType() === 'block') { if(module.get.displayType() === 'block') {
module.verbose('Removing inline block style, element defaults to block');
module.verbose('Removing inline style override, element defaults to block');
$module.removeAttr('style'); $module.removeAttr('style');
} }
} }
@ -351,17 +343,14 @@ $.fn.transition = function() {
}, },
remove: { remove: {
animating: function() { animating: function() {
$module.removeClass(className.animating); $module.removeClass(className.animating);
}, },
display: function() { display: function() {
if(module.displayType !== undefined) { if(module.displayType !== undefined) {
$module.css('display', ''); $module.css('display', '');
} }
}, },
duration: function() { duration: function() {
$module $module
.css({ .css({
@ -373,15 +362,12 @@ $.fn.transition = function() {
}) })
; ;
}, },
hidden: function() { hidden: function() {
$module.removeClass(className.hidden); $module.removeClass(className.hidden);
}, },
visible: function() { visible: function() {
$module.removeClass(className.visible); $module.removeClass(className.visible);
}, },
looping: function() { looping: function() {
module.debug('Transitions are no longer looping'); module.debug('Transitions are no longer looping');
$module $module
@ -389,18 +375,14 @@ $.fn.transition = function() {
; ;
module.forceRepaint(); module.forceRepaint();
}, },
transition: function() { transition: function() {
$module $module
.removeClass(className.visible) .removeClass(className.visible)
.removeClass(className.hidden) .removeClass(className.hidden)
; ;
} }
}, },
get: { get: {
settings: function(animation, duration, complete) { settings: function(animation, duration, complete) {
// single settings object // single settings object
if(typeof animation == 'object') { if(typeof animation == 'object') {
@ -442,7 +424,6 @@ $.fn.transition = function() {
} }
return $.fn.transition.settings; return $.fn.transition.settings;
}, },
displayType: function() { displayType: function() {
if(module.displayType === undefined) { if(module.displayType === undefined) {
// create fake element to determine display state // create fake element to determine display state
@ -450,11 +431,9 @@ $.fn.transition = function() {
} }
return module.displayType; return module.displayType;
}, },
transitionExists: function(animation) { transitionExists: function(animation) {
return $.fn.transition.exists[animation]; return $.fn.transition.exists[animation];
}, },
animationName: function() { animationName: function() {
var var
element = document.createElement('div'), element = document.createElement('div'),
@ -468,13 +447,11 @@ $.fn.transition = function() {
; ;
for(animation in animations){ for(animation in animations){
if( element.style[animation] !== undefined ){ if( element.style[animation] !== undefined ){
module.verbose('Determined animation vendor name property', animations[animation]);
return animations[animation]; return animations[animation];
} }
} }
return false; return false;
}, },
animationEvent: function() { animationEvent: function() {
var var
element = document.createElement('div'), element = document.createElement('div'),
@ -488,7 +465,6 @@ $.fn.transition = function() {
; ;
for(animation in animations){ for(animation in animations){
if( element.style[animation] !== undefined ){ if( element.style[animation] !== undefined ){
module.verbose('Determined animation vendor end event', animations[animation]);
return animations[animation]; return animations[animation];
} }
} }
@ -552,7 +528,9 @@ $.fn.transition = function() {
} }
$clone.remove(); $clone.remove();
module.save.displayType(displayType); module.save.displayType(displayType);
module.save.transitionExists(animation, transitionExists);
if(transitionExists === undefined) {
module.save.transitionExists(animation, transitionExists);
}
} }
return transitionExists; return transitionExists;
} }
@ -679,12 +657,12 @@ $.fn.transition = function() {
performance.push({ performance.push({
'Name' : message[0], 'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '', 'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime,
'Element' : element
'Element' : element,
'Execution Time' : executionTime
}); });
} }
clearTimeout(module.performance.timer); clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 600);
}, },
display: function() { display: function() {
var var
@ -718,6 +696,7 @@ $.fn.transition = function() {
performance = []; performance = [];
} }
}, },
// modified for transition to return invoke success
invoke: function(query, passedArguments, context) { invoke: function(query, passedArguments, context) {
var var
object = instance, object = instance,
@ -760,6 +739,7 @@ $.fn.transition = function() {
else if(found !== undefined) { else if(found !== undefined) {
response = found; response = found;
} }
if($.isArray(returnedValue)) { if($.isArray(returnedValue)) {
returnedValue.push(response); returnedValue.push(response);
} }
@ -769,7 +749,10 @@ $.fn.transition = function() {
else if(response !== undefined) { else if(response !== undefined) {
returnedValue = response; returnedValue = response;
} }
return found || false;
return (found !== undefined)
? found
: false
;
} }
}; };
module.initialize(); module.initialize();
@ -805,7 +788,7 @@ $.fn.transition.settings = {
onShow : function() {}, onShow : function() {},
onHide : function() {}, onHide : function() {},
// whether animation can occur twice in a row
// whether EXACT animation can occur twice in a row
allowRepeats : false, allowRepeats : false,
// animation duration // animation duration

2
src/definitions/modules/transition.less
View File

@ -57,11 +57,11 @@
/* Hidden */ /* Hidden */
.hidden.transition { .hidden.transition {
display: none; display: none;
visibility: hidden;
} }
/* Visible */ /* Visible */
.visible.transition { .visible.transition {
display: block !important;
visibility: visible !important; visibility: visible !important;
backface-visibility: @backfaceVisibility; backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration; transform: @use3DAcceleration;

Write Preview
Loading…
Cancel
Save