From d4c7824576b1a6d53a413bcab3d0037ea4ecd23c Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 31 May 2013 18:52:07 -0400 Subject: [PATCH] fixes issue with determining click target on modal content Former-commit-id: f90a043b2bb6b3f361b9d73d80c41e17eec76ec9 Former-commit-id: d04778bddd36e45c32dc722a2d18c9bf59144aa2 --- build/minified/modules/dimmer.js | 15 +++++++++++---- build/minified/modules/dimmer.min.js | 2 +- build/packaged/modules/dimmer.js | 15 +++++++++++---- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/modules/dimmer.js | 15 +++++++++++---- node/src/documents/modules/dimmer.html | 5 ++++- .../files/components/semantic/modules/dimmer.js | 15 +++++++++++---- src/modules/dimmer.js | 15 +++++++++++---- 8 files changed, 61 insertions(+), 23 deletions(-) diff --git a/build/minified/modules/dimmer.js b/build/minified/modules/dimmer.js index 9f9539dd1..3cd6201f3 100644 --- a/build/minified/modules/dimmer.js +++ b/build/minified/modules/dimmer.js @@ -76,6 +76,9 @@ $.fn.dimmer = function(parameters) { module.debug('Module initialized with created dimmer', $dimmer); } } + $module + .addClass(className.dimmable) + ; if(settings.closable) { $dimmer .on('click', module.event.click) @@ -103,7 +106,7 @@ $.fn.dimmer = function(parameters) { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( event.target == element ) { + if( $dimmer.find(event.target).size() === 0 ) { module.hide(); } } @@ -117,8 +120,8 @@ $.fn.dimmer = function(parameters) { module.verbose('Showing dimmer animation with css'); $dimmer .one(animationEnd, function() { - $dimmer.removeClass(className.show); module.set.active(); + $dimmer.removeClass(className.show); }) .addClass(className.show) ; @@ -132,7 +135,10 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(settings.duration, 1, module.set.active) + .fadeTo(settings.duration, 1, function() { + $dimmer.removeAttr('style'); + module.set.active(); + }) ; } }, @@ -448,9 +454,10 @@ $.fn.dimmer.settings = { className : { active : 'active', + animating : 'animating', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', - animating : 'animating', hide : 'hide', show : 'show' } diff --git a/build/minified/modules/dimmer.min.js b/build/minified/modules/dimmer.min.js index 061ac79f5..954cb3b81 100644 --- a/build/minified/modules/dimmer.min.js +++ b/build/minified/modules/dimmer.min.js @@ -1 +1 @@ -(function(e,t,n,o){e.fn.dimmer=function(t){var n,i=e(this),a=e.isPlainObject(t)?e.extend(!0,{},e.fn.dimmer.settings,t):e.fn.dimmer.settings,s=("."+a.namespace,"module-"+a.namespace,i.selector||""),r=(i.size(),(new Date).getTime()),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1),m=a.selector,f=a.namespace,g=a.className,p=a.error;return i.each(function(){var t,i=e(this),h=i.children(m.dimmer).first(),v="animationend msAnimationEnd oAnimationEnd webkitAnimationEnd",b=this,y=h.data("module-"+f);t={initialize:function(){t.is.dimmer()?(h=i,i=h.parent(),t.debug("Module initialized as dimmer",h)):t.is.pageDimmer()?(h=i,i=e("body"),t.debug("Initializing page dimmer",h)):t.has.dimmer()?(h=i.find(m.dimmer),t.debug("Module initialized with found dimmer",h)):(h=a.template.dimmer(),h.appendTo(i),t.debug("Module initialized with created dimmer",h)),a.closable&&h.on("click",t.event.click),t.instantiate()},instantiate:function(){t.verbose("Storing instance of module"),y=t,h.data("module-"+f,y)},destroy:function(){t.verbose("Destroying previous module for",i),i.off(f)},event:{click:function(e){t.verbose("Determining if event occured on dimmer",e),e.target==b&&t.hide()}},animate:{show:function(){t.set.dimmed(),"css"==a.animation.show?(t.verbose("Showing dimmer animation with css"),h.one(v,function(){h.removeClass(g.show),t.set.active()}).addClass(g.show)):"fade"==a.animation.show&&(t.verbose("Showing dimmer animation with javascript"),h.stop().css({opacity:0,width:"100%",height:"100%"}).fadeTo(a.duration,1,t.set.active))},hide:function(){t.remove.dimmed(),"css"==a.animation.hide?(t.verbose("Hiding dimmer with css"),h.one(v,function(){t.remove.active(),h.removeClass(g.hide)}).addClass(g.hide)):"fade"==a.animation.hide?(t.verbose("Hiding dimmer with javascript"),h.stop().fadeOut(a.duration,function(){h.removeAttr("style"),t.remove.active()})):e.isFunction(a.animation.hide)&&e.proxy(a.animation.hide,h)()}},has:{dimmer:function(){return i.children(m.dimmer).size()>0}},is:{animating:function(){return h.hasClass(g.show)||h.hasClass(g.hide)||h.is(":animated")},dimmer:function(){return i.is(m.dimmer)},dimmable:function(){return i.is(m.dimmable)},enabled:function(){return!i.hasClass(g.disabled)},disabled:function(){return i.hasClass(g.disabled)},active:function(){return h.hasClass(g.active)},pageDimmer:function(){return h.is(m.pageDimmer)}},can:{show:function(){return!h.hasClass(g.disabled)}},set:{active:function(){h.addClass(g.active)},dimmed:function(){i.addClass(g.dimmed)},disabled:function(){h.addClass(g.disabled)}},remove:{active:function(){h.removeClass(g.active)},dimmed:function(){i.removeClass(g.dimmed)},disabled:function(){h.removeClass(g.disabled)}},show:function(){t.debug("Showing dimmer",h),!t.is.active()&&t.is.enabled()?(t.animate.show(),e.proxy(a.onShow,b)(),e.proxy(a.onChange,b)()):t.debug("Dimmer is already shown or disabled")},hide:function(){t.is.active()?(t.debug("Hiding dimmer",h),t.animate.hide(),e.proxy(a.onHide,b)(),e.proxy(a.onChange,b)()):t.debug("Dimmer is not visible")},toggle:function(){t.verbose("Toggling dimmer visibility",h),t.is.hidden()?t.show():t.hide()},setting:function(t,n){return n===o?a[t]:(e.isPlainObject(t)?e.extend(!0,a,t):a[t]=n,o)},internal:function(n,i){return i===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=i,o)},debug:function(){a.debug&&(a.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},verbose:function(){a.verbose&&a.debug&&(a.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.log,console,a.moduleName+":")},performance:{log:function(e){var n,o,i;a.performance&&(n=(new Date).getTime(),i=r||n,o=n-i,r=n,c.push({Element:b,Name:e[0],Arguments:e[1]||"","Execution Time":o})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var t=a.moduleName+":",n=0;r=!1,e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),(console.group!==o||console.table!==o)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(n,i,a){var s,r;return i=i||d,a=b||a,"string"==typeof n&&y!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,i){e.isPlainObject(y[i])&&n!=s?y=y[i]:y[i]!==o?r=y[i]:t.error(p.method)})),e.isFunction(r)?(y.verbose("Executing invoked function",r),r.apply(a,i)):r||!1}},u?(y===o&&t.initialize(),n=t.invoke(l)):(y===o&&t.destroy(),t.initialize())}),n?n:this},e.fn.dimmer.settings={moduleName:"Dimmer",namespace:"dimmer",verbose:!0,debug:!0,performance:!0,animation:{show:"fade",hide:"fade"},closable:!0,duration:500,onChange:function(){},onShow:function(){},onHide:function(){},error:{method:"The method you called is not defined."},selector:{dimmable:".ui.dimmable",dimmer:".ui.dimmer",pageDimmer:".ui.page.dimmer"},template:{dimmer:function(){return e("
").attr("class","ui dimmer")}},className:{active:"active",dimmed:"dimmed",disabled:"disabled",animating:"animating",hide:"hide",show:"show"}}})(jQuery,window,document); \ No newline at end of file +(function(e,t,n,o){e.fn.dimmer=function(t){var n,i=e(this),a=e.isPlainObject(t)?e.extend(!0,{},e.fn.dimmer.settings,t):e.fn.dimmer.settings,s=("."+a.namespace,"module-"+a.namespace,i.selector||""),r=(i.size(),(new Date).getTime()),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1),m=a.selector,f=a.namespace,g=a.className,p=a.error;return i.each(function(){var t,i=e(this),h=i.children(m.dimmer).first(),v="animationend msAnimationEnd oAnimationEnd webkitAnimationEnd",b=this,y=h.data("module-"+f);t={initialize:function(){t.is.dimmer()?(h=i,i=h.parent(),t.debug("Module initialized as dimmer",h)):t.is.pageDimmer()?(h=i,i=e("body"),t.debug("Initializing page dimmer",h)):t.has.dimmer()?(h=i.find(m.dimmer),t.debug("Module initialized with found dimmer",h)):(h=a.template.dimmer(),h.appendTo(i),t.debug("Module initialized with created dimmer",h)),i.addClass(g.dimmable),a.closable&&h.on("click",t.event.click),t.instantiate()},instantiate:function(){t.verbose("Storing instance of module"),y=t,h.data("module-"+f,y)},destroy:function(){t.verbose("Destroying previous module for",i),i.off(f)},event:{click:function(e){t.verbose("Determining if event occured on dimmer",e),0===h.find(e.target).size()&&t.hide()}},animate:{show:function(){t.set.dimmed(),"css"==a.animation.show?(t.verbose("Showing dimmer animation with css"),h.one(v,function(){t.set.active(),h.removeClass(g.show)}).addClass(g.show)):"fade"==a.animation.show&&(t.verbose("Showing dimmer animation with javascript"),h.stop().css({opacity:0,width:"100%",height:"100%"}).fadeTo(a.duration,1,function(){h.removeAttr("style"),t.set.active()}))},hide:function(){t.remove.dimmed(),"css"==a.animation.hide?(t.verbose("Hiding dimmer with css"),h.one(v,function(){t.remove.active(),h.removeClass(g.hide)}).addClass(g.hide)):"fade"==a.animation.hide?(t.verbose("Hiding dimmer with javascript"),h.stop().fadeOut(a.duration,function(){h.removeAttr("style"),t.remove.active()})):e.isFunction(a.animation.hide)&&e.proxy(a.animation.hide,h)()}},has:{dimmer:function(){return i.children(m.dimmer).size()>0}},is:{animating:function(){return h.hasClass(g.show)||h.hasClass(g.hide)||h.is(":animated")},dimmer:function(){return i.is(m.dimmer)},dimmable:function(){return i.is(m.dimmable)},enabled:function(){return!i.hasClass(g.disabled)},disabled:function(){return i.hasClass(g.disabled)},active:function(){return h.hasClass(g.active)},pageDimmer:function(){return h.is(m.pageDimmer)}},can:{show:function(){return!h.hasClass(g.disabled)}},set:{active:function(){h.addClass(g.active)},dimmed:function(){i.addClass(g.dimmed)},disabled:function(){h.addClass(g.disabled)}},remove:{active:function(){h.removeClass(g.active)},dimmed:function(){i.removeClass(g.dimmed)},disabled:function(){h.removeClass(g.disabled)}},show:function(){t.debug("Showing dimmer",h),!t.is.active()&&t.is.enabled()?(t.animate.show(),e.proxy(a.onShow,b)(),e.proxy(a.onChange,b)()):t.debug("Dimmer is already shown or disabled")},hide:function(){t.is.active()?(t.debug("Hiding dimmer",h),t.animate.hide(),e.proxy(a.onHide,b)(),e.proxy(a.onChange,b)()):t.debug("Dimmer is not visible")},toggle:function(){t.verbose("Toggling dimmer visibility",h),t.is.hidden()?t.show():t.hide()},setting:function(t,n){return n===o?a[t]:(e.isPlainObject(t)?e.extend(!0,a,t):a[t]=n,o)},internal:function(n,i){return i===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=i,o)},debug:function(){a.debug&&(a.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},verbose:function(){a.verbose&&a.debug&&(a.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.log,console,a.moduleName+":")},performance:{log:function(e){var n,o,i;a.performance&&(n=(new Date).getTime(),i=r||n,o=n-i,r=n,c.push({Element:b,Name:e[0],Arguments:e[1]||"","Execution Time":o})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var t=a.moduleName+":",n=0;r=!1,e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),(console.group!==o||console.table!==o)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(n,i,a){var s,r;return i=i||d,a=b||a,"string"==typeof n&&y!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,i){e.isPlainObject(y[i])&&n!=s?y=y[i]:y[i]!==o?r=y[i]:t.error(p.method)})),e.isFunction(r)?(y.verbose("Executing invoked function",r),r.apply(a,i)):r||!1}},u?(y===o&&t.initialize(),n=t.invoke(l)):(y===o&&t.destroy(),t.initialize())}),n?n:this},e.fn.dimmer.settings={moduleName:"Dimmer",namespace:"dimmer",verbose:!0,debug:!0,performance:!0,animation:{show:"fade",hide:"fade"},closable:!0,duration:500,onChange:function(){},onShow:function(){},onHide:function(){},error:{method:"The method you called is not defined."},selector:{dimmable:".ui.dimmable",dimmer:".ui.dimmer",pageDimmer:".ui.page.dimmer"},template:{dimmer:function(){return e("
").attr("class","ui dimmer")}},className:{active:"active",animating:"animating",dimmable:"dimmable",dimmed:"dimmed",disabled:"disabled",hide:"hide",show:"show"}}})(jQuery,window,document); \ No newline at end of file diff --git a/build/packaged/modules/dimmer.js b/build/packaged/modules/dimmer.js index 9f9539dd1..3cd6201f3 100644 --- a/build/packaged/modules/dimmer.js +++ b/build/packaged/modules/dimmer.js @@ -76,6 +76,9 @@ $.fn.dimmer = function(parameters) { module.debug('Module initialized with created dimmer', $dimmer); } } + $module + .addClass(className.dimmable) + ; if(settings.closable) { $dimmer .on('click', module.event.click) @@ -103,7 +106,7 @@ $.fn.dimmer = function(parameters) { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( event.target == element ) { + if( $dimmer.find(event.target).size() === 0 ) { module.hide(); } } @@ -117,8 +120,8 @@ $.fn.dimmer = function(parameters) { module.verbose('Showing dimmer animation with css'); $dimmer .one(animationEnd, function() { - $dimmer.removeClass(className.show); module.set.active(); + $dimmer.removeClass(className.show); }) .addClass(className.show) ; @@ -132,7 +135,10 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(settings.duration, 1, module.set.active) + .fadeTo(settings.duration, 1, function() { + $dimmer.removeAttr('style'); + module.set.active(); + }) ; } }, @@ -448,9 +454,10 @@ $.fn.dimmer.settings = { className : { active : 'active', + animating : 'animating', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', - animating : 'animating', hide : 'hide', show : 'show' } diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index b55dfe2cb..83de00f1c 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -9cdab95e993a45b7b1ee790f44757d8acc6cd475 \ No newline at end of file +0a4f3d705b73fa387698ffb41419590d79580cf4 \ No newline at end of file diff --git a/build/uncompressed/modules/dimmer.js b/build/uncompressed/modules/dimmer.js index 9f9539dd1..3cd6201f3 100644 --- a/build/uncompressed/modules/dimmer.js +++ b/build/uncompressed/modules/dimmer.js @@ -76,6 +76,9 @@ $.fn.dimmer = function(parameters) { module.debug('Module initialized with created dimmer', $dimmer); } } + $module + .addClass(className.dimmable) + ; if(settings.closable) { $dimmer .on('click', module.event.click) @@ -103,7 +106,7 @@ $.fn.dimmer = function(parameters) { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( event.target == element ) { + if( $dimmer.find(event.target).size() === 0 ) { module.hide(); } } @@ -117,8 +120,8 @@ $.fn.dimmer = function(parameters) { module.verbose('Showing dimmer animation with css'); $dimmer .one(animationEnd, function() { - $dimmer.removeClass(className.show); module.set.active(); + $dimmer.removeClass(className.show); }) .addClass(className.show) ; @@ -132,7 +135,10 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(settings.duration, 1, module.set.active) + .fadeTo(settings.duration, 1, function() { + $dimmer.removeAttr('style'); + module.set.active(); + }) ; } }, @@ -448,9 +454,10 @@ $.fn.dimmer.settings = { className : { active : 'active', + animating : 'animating', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', - animating : 'animating', hide : 'hide', show : 'show' } diff --git a/node/src/documents/modules/dimmer.html b/node/src/documents/modules/dimmer.html index c9227c246..9c70b4e67 100755 --- a/node/src/documents/modules/dimmer.html +++ b/node/src/documents/modules/dimmer.html @@ -53,7 +53,10 @@ type : 'UI Module'
-

This is a message for you

+

+ This is a message for you +
How are you doing
+

diff --git a/node/src/files/components/semantic/modules/dimmer.js b/node/src/files/components/semantic/modules/dimmer.js index 9f9539dd1..3cd6201f3 100644 --- a/node/src/files/components/semantic/modules/dimmer.js +++ b/node/src/files/components/semantic/modules/dimmer.js @@ -76,6 +76,9 @@ $.fn.dimmer = function(parameters) { module.debug('Module initialized with created dimmer', $dimmer); } } + $module + .addClass(className.dimmable) + ; if(settings.closable) { $dimmer .on('click', module.event.click) @@ -103,7 +106,7 @@ $.fn.dimmer = function(parameters) { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( event.target == element ) { + if( $dimmer.find(event.target).size() === 0 ) { module.hide(); } } @@ -117,8 +120,8 @@ $.fn.dimmer = function(parameters) { module.verbose('Showing dimmer animation with css'); $dimmer .one(animationEnd, function() { - $dimmer.removeClass(className.show); module.set.active(); + $dimmer.removeClass(className.show); }) .addClass(className.show) ; @@ -132,7 +135,10 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(settings.duration, 1, module.set.active) + .fadeTo(settings.duration, 1, function() { + $dimmer.removeAttr('style'); + module.set.active(); + }) ; } }, @@ -448,9 +454,10 @@ $.fn.dimmer.settings = { className : { active : 'active', + animating : 'animating', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', - animating : 'animating', hide : 'hide', show : 'show' } diff --git a/src/modules/dimmer.js b/src/modules/dimmer.js index 9f9539dd1..3cd6201f3 100755 --- a/src/modules/dimmer.js +++ b/src/modules/dimmer.js @@ -76,6 +76,9 @@ $.fn.dimmer = function(parameters) { module.debug('Module initialized with created dimmer', $dimmer); } } + $module + .addClass(className.dimmable) + ; if(settings.closable) { $dimmer .on('click', module.event.click) @@ -103,7 +106,7 @@ $.fn.dimmer = function(parameters) { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( event.target == element ) { + if( $dimmer.find(event.target).size() === 0 ) { module.hide(); } } @@ -117,8 +120,8 @@ $.fn.dimmer = function(parameters) { module.verbose('Showing dimmer animation with css'); $dimmer .one(animationEnd, function() { - $dimmer.removeClass(className.show); module.set.active(); + $dimmer.removeClass(className.show); }) .addClass(className.show) ; @@ -132,7 +135,10 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(settings.duration, 1, module.set.active) + .fadeTo(settings.duration, 1, function() { + $dimmer.removeAttr('style'); + module.set.active(); + }) ; } }, @@ -448,9 +454,10 @@ $.fn.dimmer.settings = { className : { active : 'active', + animating : 'animating', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', - animating : 'animating', hide : 'hide', show : 'show' }