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
Split 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() {
if( module.is.active() ) {
if( module.is.active() || module.is.animating() ) {
module.hide();
}
else {
@ -260,10 +260,14 @@ $.fn.modal = function(parameters) {
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();
.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() {
if( !module.is.active() ) {
if( !($dimmable.dimmer('is active') || $dimmable.dimmer('is animating')) ) {
module.debug('Dimmer is not visible cannot hide');
return;
}
@ -318,9 +322,6 @@ $.fn.modal = function(parameters) {
}
$dimmable.dimmer('hide', function() {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition('reset')
;
module.remove.screenHeight();
}
module.remove.active();
@ -332,7 +333,7 @@ $.fn.modal = function(parameters) {
? callback
: function(){}
;
if( !module.is.active() ) {
if( !(module.is.active() || module.is.animating()) ) {
module.debug('Cannot hide modal it is not active');
return;
}
@ -340,12 +341,17 @@ $.fn.modal = function(parameters) {
module.remove.keyboardShortcuts();
$.proxy(settings.onHide, element)();
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
console.log('hiding');
$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() {
return $module.hasClass(className.active);
},
animating: function() {
return $module.transition('is supported')
? $module.transition('is animating')
: $module.is(':visible')
;
},
modernBrowser: function() {
// appName for IE11 reports 'Netscape' can no longer use
return !(window.ActiveXObject || "ActiveXObject" in window);
@ -717,7 +729,7 @@ $.fn.modal.settings = {
name : 'Modal',
namespace : 'modal',
debug : false,
debug : true,
verbose : 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')) {
$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');
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$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
;
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();
}
else {

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

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

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

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

Write Preview
Loading…
Cancel
Save