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

fixes to dropdown, hiding other dropdowns when open

pull/13/head
Jack Lukic 12 years ago
parent
81134fea7a
commit
6b527efdd9
22 changed files with 154 additions and 75 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/grid.min.css
  2. 2
      build/minified/elements/button.min.css
  3. 28
      build/minified/modules/dropdown.js
  4. 2
      build/minified/modules/dropdown.min.css
  5. 2
      build/minified/modules/dropdown.min.js
  6. 28
      build/packaged/modules/dropdown.js
  7. 2
      build/packaged/semantic.min.css
  8. 4
      build/packaged/semantic.min.js
  9. 4
      build/uncompressed/collections/grid.css
  10. 1
      build/uncompressed/elements/button.css
  11. 6
      build/uncompressed/modules/dropdown.css
  12. 28
      build/uncompressed/modules/dropdown.js
  13. 2
      node/src/documents/elements/input.html
  14. 10
      node/src/documents/index.html
  15. 4
      node/src/files/components/semantic/collections/grid.css
  16. 1
      node/src/files/components/semantic/elements/button.css
  17. 6
      node/src/files/components/semantic/modules/dropdown.css
  18. 28
      node/src/files/components/semantic/modules/dropdown.js
  19. 5
      src/collections/grid.less
  20. 1
      src/elements/button.less
  21. 28
      src/modules/dropdown.js
  22. 35
      src/modules/dropdown.less

2
build/minified/collections/grid.min.css
File diff suppressed because it is too large
View File

2
build/minified/elements/button.min.css
File diff suppressed because it is too large
View File

28
build/minified/modules/dropdown.js
View File

@ -26,7 +26,8 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
invokedResponse,
allModules
;
$allModules
@ -326,9 +327,10 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Checking if dropdown can show');
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
module.hideOthers();
$module
.addClass(className.visible)
;
@ -340,11 +342,6 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
@ -359,6 +356,21 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hideOthers: function() {
module.verbose('Finding other dropdowns to hide');
$allModules
.not($module)
.has(settings.selector.menu + ':visible')
.dropdown('hide')
;
console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
},
toggle: function() {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
@ -528,7 +540,7 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : true,
performance : false,
on : 'click',
gracePeriod : 300,

2
build/minified/modules/dropdown.min.css
View File

@ -1 +1 @@
.ui.dropdown{position:relative;display:inline-block;line-height:1;-webkit-transition:border-radius .1s ease,width .2s ease;-moz-transition:border-radius .1s ease,width .2s ease;-o-transition:border-radius .1s ease,width .2s ease;-ms-transition:border-radius .1s ease,width .2s ease;transition:border-radius .1s ease,width .2s ease}.ui.dropdown .menu{position:absolute;display:none;top:100%;background-color:#FFF;min-width:100%;white-space:nowrap;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset;box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-border-radius:0 0 .325em .325em;-webkit-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-o-transition:opacity .2s ease;-ms-transition:opacity .2s ease;transition:opacity .2s ease;z-index:11}.ui.dropdown>.dropdown.icon{width:auto}.ui.dropdown>.text{display:inline-block}.ui.dropdown .menu{left:0}.ui.menu .dropdown:last-child .menu,.ui>.ui.dropdown:last-child .menu{left:auto;right:0}.ui.dropdown .menu .item{cursor:pointer;border:0;border-top:1px solid rgba(0,0,0,.05);font-size:.9em;display:block;color:rgba(0,0,0,.75);padding:.85em 1em;font-size:.9rem;text-transform:none;font-weight:400;text-align:left;-webkit-touch-callout:none}.ui.dropdown .menu .item .icon{margin-right:.75em}.ui.dropdown .menu .item:first-child{border-top:0}.ui.dropdown.visible{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{border-top:1px solid rgba(0,0,0,.05);font-weight:700}.ui.simple.dropdown .menu{display:block;overflow:hidden;height:0;width:0;position:absolute;opacity:0;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.ui.simple.dropdown.visible .menu,.ui.simple.dropdown:hover .menu{overflow:visible;width:auto;height:auto;opacity:1}.ui.simple.disabled.dropdown:hover .menu{height:0;width:0;overflow:hidden}.ui.selection.dropdown{cursor:pointer;display:inline-block;background-color:#FFF;padding:.5em 1em;line-height:1.33;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.dropdown.icon{float:right;margin:.2em 0 .2em .5em}.ui.selection.dropdown,.ui.selection.dropdown .menu{-webkit-transition:box-shadow .2s ease-out;-moz-transition:box-shadow .2s ease-out;-o-transition:box-shadow .2s ease-out;-ms-transition:box-shadow .2s ease-out;transition:box-shadow .2s ease-out}.ui.selection.dropdown .menu{-webkit-box-shadow:0 1px 0 1px #EEE;-moz-box-shadow:0 1px 0 1px #EEE;box-shadow:0 1px 0 1px #EEE}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.selection.dropdown:hover .menu{-webkit-box-shadow:0 1px 0 1px #D3D3D3;-moz-box-shadow:0 1px 0 1px #D3D3D3;box-shadow:0 1px 0 1px #D3D3D3}
.ui.dropdown{position:relative;display:inline-block;line-height:1;-webkit-transition:border-radius .1s ease,width .2s ease;-moz-transition:border-radius .1s ease,width .2s ease;-o-transition:border-radius .1s ease,width .2s ease;-ms-transition:border-radius .1s ease,width .2s ease;transition:border-radius .1s ease,width .2s ease}.ui.dropdown .menu{position:absolute;display:none;top:100%;background-color:#FFF;min-width:100%;white-space:nowrap;-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(0,0,0,.1) inset;-moz-border-radius:0 0 .325em .325em;-webkit-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-o-transition:opacity .2s ease;-ms-transition:opacity .2s ease;transition:opacity .2s ease;z-index:11}.ui.dropdown>.dropdown.icon{width:auto}.ui.dropdown>.text{display:inline-block}.ui.dropdown .menu{left:0}.ui.menu .dropdown:last-child .menu,.ui>.ui.dropdown:last-child .menu{left:auto;right:0}.ui.dropdown .menu .item{cursor:pointer;border:0;border-top:1px solid rgba(0,0,0,.05);font-size:.9em;display:block;color:rgba(0,0,0,.75);padding:.85em 1em;font-size:.9rem;text-transform:none;font-weight:400;text-align:left;-webkit-touch-callout:none}.ui.dropdown .menu .item .icon{margin-right:.75em}.ui.dropdown .menu .item:first-child{border-top:0}.ui.dropdown.visible{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{border-top:1px solid rgba(0,0,0,.05);font-weight:700}.ui.simple.dropdown .menu{display:block;overflow:hidden;height:0;width:0;position:absolute;opacity:0;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.ui.simple.dropdown.visible .menu,.ui.simple.dropdown:hover .menu{overflow:visible;width:auto;height:auto;opacity:1}.ui.simple.disabled.dropdown:hover .menu{height:0;width:0;overflow:hidden}.ui.selection.dropdown{cursor:pointer;display:inline-block;background-color:#FFF;padding:.5em 1em;line-height:1.33;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.dropdown.icon{float:right;margin:.2em 0 .2em .5em}.ui.selection.dropdown,.ui.selection.dropdown .menu{-webkit-transition:box-shadow .2s ease-out;-moz-transition:box-shadow .2s ease-out;-o-transition:box-shadow .2s ease-out;-ms-transition:box-shadow .2s ease-out;transition:box-shadow .2s ease-out}.ui.selection.dropdown .menu{-webkit-box-shadow:0 1px 0 1px #EEE;-moz-box-shadow:0 1px 0 1px #EEE;box-shadow:0 1px 0 1px #EEE}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.selection.dropdown:hover .menu{-webkit-box-shadow:0 1px 0 1px #D3D3D3;-moz-box-shadow:0 1px 0 1px #D3D3D3;box-shadow:0 1px 0 1px #D3D3D3}

2
build/minified/modules/dropdown.min.js
File diff suppressed because it is too large
View File

28
build/packaged/modules/dropdown.js
View File

@ -26,7 +26,8 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
invokedResponse,
allModules
;
$allModules
@ -326,9 +327,10 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Checking if dropdown can show');
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
module.hideOthers();
$module
.addClass(className.visible)
;
@ -340,11 +342,6 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
@ -359,6 +356,21 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hideOthers: function() {
module.verbose('Finding other dropdowns to hide');
$allModules
.not($module)
.has(settings.selector.menu + ':visible')
.dropdown('hide')
;
console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
},
toggle: function() {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
@ -528,7 +540,7 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : true,
performance : false,
on : 'click',
gracePeriod : 300,

2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File

4
build/packaged/semantic.min.js
File diff suppressed because it is too large
View File

4
build/uncompressed/collections/grid.css
View File

@ -86,11 +86,15 @@
Page
--------------------*/
.ui.page.grid {
margin: 0%;
padding: 0% 2%;
}
/*-------------------
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width: 1000px) {
.ui.responsive.grid {
padding: 0% 5.55%;

1
build/uncompressed/elements/button.css
View File

@ -449,6 +449,7 @@ Containing Icon
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
height: 0.9em;
margin: 0em;
}
/*--------------

6
build/uncompressed/modules/dropdown.css
View File

@ -29,9 +29,9 @@
background-color: #FFFFFF;
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 0px 0px 0.325em 0.325em;
-webkit-border-radius: 0px 0px 0.325em 0.325em;
border-radius: 0px 0px 0.325em 0.325em;

28
build/uncompressed/modules/dropdown.js
View File

@ -26,7 +26,8 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
invokedResponse,
allModules
;
$allModules
@ -326,9 +327,10 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Checking if dropdown can show');
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
module.hideOthers();
$module
.addClass(className.visible)
;
@ -340,11 +342,6 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
@ -359,6 +356,21 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hideOthers: function() {
module.verbose('Finding other dropdowns to hide');
$allModules
.not($module)
.has(settings.selector.menu + ':visible')
.dropdown('hide')
;
console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
},
toggle: function() {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
@ -528,7 +540,7 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : true,
performance : false,
on : 'click',
gracePeriod : 300,

2
node/src/documents/elements/input.html
View File

@ -8,7 +8,7 @@ type : 'UI Element'
<div class="segment">
<div class="container">
<div class="ui small download menu">
<div class="header item">Download</div>
<div class="header item">Links</div>
<div class="simple ui dropdown item">
<i class="icon setting"></i> Download <i class="icon dropdown"></i>
<div class="menu">

10
node/src/documents/index.html
View File

@ -25,7 +25,15 @@ type : 'Semantic'
Code Like You Think
</h1>
<p><b>Designing pages be as easy as describing them.</b>
<br>Semantic creates a re-usable vocabulary for user interface. Semantic lets </p>
<br>Writing pages in Semantic is as easy as writing english sentences.</p>
</div>
<div class="column">
<h1 class="ui purple header">
<i class="inverted purple circular community icon"></i>
Lean
</h1>
<p><b>Use only the bits you want, leave the rest.</b>
<br>Every UI element in semantic is written to be stand-alone, or loosely coupled. Use only what you need.</p>
</div>
<div class="column">
<h1 class="ui teal header">

4
node/src/files/components/semantic/collections/grid.css
View File

@ -86,11 +86,15 @@
Page
--------------------*/
.ui.page.grid {
margin: 0%;
padding: 0% 2%;
}
/*-------------------
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width: 1000px) {
.ui.responsive.grid {
padding: 0% 5.55%;

1
node/src/files/components/semantic/elements/button.css
View File

@ -449,6 +449,7 @@ Containing Icon
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
height: 0.9em;
margin: 0em;
}
/*--------------

6
node/src/files/components/semantic/modules/dropdown.css
View File

@ -29,9 +29,9 @@
background-color: #FFFFFF;
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 0px 0px 0.325em 0.325em;
-webkit-border-radius: 0px 0px 0.325em 0.325em;
border-radius: 0px 0px 0.325em 0.325em;

28
node/src/files/components/semantic/modules/dropdown.js
View File

@ -26,7 +26,8 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
invokedResponse,
allModules
;
$allModules
@ -326,9 +327,10 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Checking if dropdown can show');
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
module.hideOthers();
$module
.addClass(className.visible)
;
@ -340,11 +342,6 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
@ -359,6 +356,21 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hideOthers: function() {
module.verbose('Finding other dropdowns to hide');
$allModules
.not($module)
.has(settings.selector.menu + ':visible')
.dropdown('hide')
;
console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
},
toggle: function() {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
@ -528,7 +540,7 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : true,
performance : false,
on : 'click',
gracePeriod : 300,

5
src/collections/grid.less
View File

@ -111,6 +111,7 @@
--------------------*/
.ui.page.grid {
margin: 0%;
padding: 0% 2%;
}
@ -119,6 +120,10 @@
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width : 1000px) {
.ui.responsive.grid {
padding: 0% 5.55%;

1
src/elements/button.less
View File

@ -549,6 +549,7 @@ Containing Icon
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
height: 0.9em;
margin: 0em;
}

28
src/modules/dropdown.js
View File

@ -26,7 +26,8 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
invokedResponse,
allModules
;
$allModules
@ -326,9 +327,10 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Checking if dropdown can show');
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
module.hideOthers();
$module
.addClass(className.visible)
;
@ -340,11 +342,6 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
@ -359,6 +356,21 @@ $.fn.dropdown = function(parameters) {
}
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hideOthers: function() {
module.verbose('Finding other dropdowns to hide');
$allModules
.not($module)
.has(settings.selector.menu + ':visible')
.dropdown('hide')
;
console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
},
toggle: function() {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
@ -528,7 +540,7 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : true,
performance : false,
on : 'click',
gracePeriod : 300,

35
src/modules/dropdown.less
View File

@ -21,23 +21,23 @@
line-height: 1;
-webkit-transition:
-webkit-transition:
border-radius 0.1s ease,
width 0.2s ease
;
-moz-transition:
-moz-transition:
border-radius 0.1s ease,
width 0.2s ease
;
-o-transition:
-o-transition:
border-radius 0.1s ease,
width 0.2s ease
;
-ms-transition:
-ms-transition:
border-radius 0.1s ease,
width 0.2s ease
;
transition:
transition:
border-radius 0.1s ease,
width 0.2s ease
;
@ -51,22 +51,17 @@
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow:
0px 2px 0px 0px rgba(0, 0, 0, 0.1),
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset
-webkit-box-shadow:
0px 0px 1px 0px rgba(0, 0, 0, 0.1),
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
;
-moz-box-shadow:
0px 2px 0px 0px rgba(0, 0, 0, 0.1),
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset
-moz-box-shadow:
0px 0px 1px 0px rgba(0, 0, 0, 0.1),
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
;
box-shadow:
0px 2px 0px 0px rgba(0, 0, 0, 0.1),
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset
box-shadow:
0px 0px 1px 0px rgba(0, 0, 0, 0.1),
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
;
-moz-border-radius: 0px 0px 0.325em 0.325em;
@ -89,7 +84,7 @@
}
/* Flyout Direction */
.ui.dropdown .menu {
.ui.dropdown .menu {
left: 0px;
}
.ui.menu .dropdown:last-child .menu,

Write Preview
Loading…
Cancel
Save