From 5a4e2954d4332ff7286f0acc87b08db492056ad1 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 28 May 2013 01:15:39 -0400 Subject: [PATCH] finishing up dropdown module Former-commit-id: 83961373897bc6daa792472261e0277714042509 Former-commit-id: e1c136d6ecb7e52666888275572645f6c190058f --- build/minified/collections/grid.min.css | 2 +- build/minified/elements/header.min.css | 2 +- build/minified/modules/dropdown.js | 111 ++++++++++++------ build/minified/modules/dropdown.min.css | 2 +- build/minified/modules/dropdown.min.js | 2 +- build/packaged/modules/dropdown.js | 111 ++++++++++++------ .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/collections/grid.css | 1 + build/uncompressed/elements/header.css | 2 +- build/uncompressed/modules/dropdown.css | 25 +++- build/uncompressed/modules/dropdown.js | 111 ++++++++++++------ node/src/documents/elements/button.html | 2 +- node/src/documents/modules/dropdown.html | 54 +++++++-- .../components/semantic/collections/grid.css | 1 + .../components/semantic/elements/header.css | 2 +- .../components/semantic/modules/dropdown.css | 25 +++- .../components/semantic/modules/dropdown.js | 111 ++++++++++++------ node/src/files/javascript/dropdown.js | 19 ++- src/collections/grid.less | 1 + src/elements/header.less | 2 +- src/modules/dropdown.js | 111 ++++++++++++------ src/modules/dropdown.less | 41 ++++++- 23 files changed, 519 insertions(+), 223 deletions(-) diff --git a/build/minified/collections/grid.min.css b/build/minified/collections/grid.min.css index a76f1b294..c9c9d5064 100644 --- a/build/minified/collections/grid.min.css +++ b/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row{display:table}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.grid .column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.divided.grid .column:first-child,.ui.stackable.celled.grid .column:first-child{border-top:0!important}} \ No newline at end of file +.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row{display:table}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.grid .column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.divided.grid .column:first-child,.ui.stackable.celled.grid .column:first-child{border-top:0!important}} \ No newline at end of file diff --git a/build/minified/elements/header.min.css b/build/minified/elements/header.min.css index 2fd5a85ac..5c74db7f8 100644 --- a/build/minified/elements/header.min.css +++ b/build/minified/elements/header.min.css @@ -1 +1 @@ -.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.5em 1rem;-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)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0rem auto 2rem} \ No newline at end of file +.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.5em 1rem;-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)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0 auto .2em} \ No newline at end of file diff --git a/build/minified/modules/dropdown.js b/build/minified/modules/dropdown.js index 894702aa5..02bba2cfe 100644 --- a/build/minified/modules/dropdown.js +++ b/build/minified/modules/dropdown.js @@ -57,15 +57,14 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.verbose('Initializing dropdown with bound events', $module); - console.log(settings.on); if(isTouchDevice) { $module - .on('touchstart' + eventNamespace, module.toggle) + .on('touchstart' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'click') { $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'hover') { @@ -97,24 +96,38 @@ $.fn.dropdown = function(parameters) { event: { + stopPropagation: function(event) { + event.stopPropagation(); + }, + + test: { + toggle: function(event) { + module.intent.test(event, module.toggle); + event.stopPropagation(); + }, + hide: function(event) { + module.intent.test(event, module.hide); + event.stopPropagation(); + } + }, + item: { click: function () { var - value = $(this).data(metadata.value) || $(this).text() + $choice = $(this), + name = $choice.data(metadata.name) || $choice.text(), + value = $choice.data(metadata.value) || name ; - if( $.isFunction( module.action[settings.action] ) ) { - module.verbose('Triggering preset item action', settings.action); - module.action[ settings.action ](value); - } - else if( $.isFunction(settings.action) ) { - module.verbose('Triggering user action', settings.action); - settings.action(value); - } - else { - module.error(errors.action); - } - $.proxy(settings.onChange, $menu.get())(value); + module.verbose('Adding active state to selected item'); + $item + .removeClass(className.active) + ; + $choice + .addClass(className.active) + ; + module.action.determine(name, value); + $.proxy(settings.onChange, $menu.get())(name, value); } } @@ -125,25 +138,27 @@ $.fn.dropdown = function(parameters) { test: function(event, callback) { module.debug('Determining whether event occurred in dropdown', event.target); + callback = callback || function(){}; if( $(event.target).closest($menu).size() == 0 ) { + module.verbose('Triggering event', callback) callback(); - event.stopPropagation(); + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); } }, bind: function() { module.verbose('Binding hide intent event to document'); - $(document) - .on('click', function(event) { - module.intent.test(event, module.hide); - }) + $document + .on(module.get.selectEvent(), module.event.test.hide) ; }, unbind: function() { module.verbose('Removing hide intent event from document'); $document - .off('click') + .off(module.get.selectEvent()) ; } @@ -151,27 +166,50 @@ $.fn.dropdown = function(parameters) { action: { + determine: function(name, value) { + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action); + module.action[ settings.action ](name, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action); + settings.action(name, value); + } + else { + module.error(errors.action); + } + }, + nothing: function() {}, hide: function() { module.hide(); }, - changeText: function(value) { - module.debug('Changing text', value); - $text.text(value); + changeText: function(name, value) { + module.debug('Changing text', name); + $text.text(name); module.hide(); }, - form: function(value) { - module.debug('Adding selected value to hidden input', value); - $text.text(value); + form: function(name, value) { + module.debug('Adding selected value to hidden input', name, value); + $text.text(name); $input.val(value); module.hide(); } }, + get: { + selectEvent: function() { + return (isTouchDevice) + ? 'touchstart' + : 'click' + ; + } + }, + is: { visible: function() { return $menu.is(':visible'); @@ -242,7 +280,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.visible() ) { module.debug('Showing dropdown'); $module - .addClass(className.active) + .addClass(className.visible) ; module.animate.show(); if( module.can.click() ) { @@ -261,7 +299,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.hidden() ) { module.debug('Hiding dropdown'); $module - .removeClass(className.active) + .removeClass(className.visible) ; if( module.can.click() ) { module.intent.unbind(); @@ -434,6 +472,8 @@ $.fn.dropdown.settings = { debug : true, performance : false, + on : 'click', + gracePeriod : 300, action : 'hide', animation : { @@ -441,10 +481,6 @@ $.fn.dropdown.settings = { hide: 'slide' }, - on : 'click', - - gracePeriod : 300, - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -455,7 +491,8 @@ $.fn.dropdown.settings = { }, metadata: { - value: 'value' + name : 'name', + value : 'value' }, selector : { @@ -466,7 +503,9 @@ $.fn.dropdown.settings = { }, className : { - active : 'visible' + active : 'active', + disabled : 'disabled', + visible : 'visible' } }; diff --git a/build/minified/modules/dropdown.min.css b/build/minified/modules/dropdown.min.css index d59345df6..d089bfd66 100644 --- a/build/minified/modules/dropdown.min.css +++ b/build/minified/modules/dropdown.min.css @@ -1 +1 @@ -.ui.dropdown{position:relative;display:inline-block;line-height:1;-webkit-transition:border-radius .1s ease;-moz-transition:border-radius .1s ease;-o-transition:border-radius .1s ease;-ms-transition:border-radius .1s ease;transition:border-radius .1s 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 .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{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:hover .menu{display:block;overflow:visible;width:auto;height:auto;opacity:1}.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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/minified/modules/dropdown.min.js b/build/minified/modules/dropdown.min.js index caefaff10..e7090b4c2 100644 --- a/build/minified/modules/dropdown.min.js +++ b/build/minified/modules/dropdown.min.js @@ -1 +1 @@ -(function(e,t,n,o){e.fn.dropdown=function(t){var i,a=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(a.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,p=[].slice.call(arguments,1);return a.each(function(){var t,g=e(this),h=e(this).find(r.selector.menu),v=e(this).find(r.selector.item),b=e(this).find(r.selector.text),y=e(this).find(r.selector.input),x="ontouchstart"in n.documentElement,C=g.selector||"",w=this,T=g.data("module-"+r.namespace),k=r.className,N=r.metadata,z=r.namespace,P=r.animation,D=r.errors;t={initialize:function(){t.verbose("Initializing dropdown with bound events",g),console.log(r.on),x?g.on("touchstart"+c,t.toggle):"click"==r.on?g.on("click"+c,t.toggle):"hover"==r.on?g.on("mouseenter"+c,t.show).on("mouseleave"+c,t.delayedHide):g.on(r.on+c,t.toggle),v.on("click"+c,t.event.item.click),g.data(l,t)},destroy:function(){t.verbose("Destroying previous module for",g),g.off(z)},event:{item:{click:function(){var n=e(this).data(N.value)||e(this).text();e.isFunction(t.action[r.action])?(t.verbose("Triggering preset item action",r.action),t.action[r.action](n)):e.isFunction(r.action)?(t.verbose("Triggering user action",r.action),r.action(n)):t.error(D.action),e.proxy(r.onChange,h.get())(n)}}},intent:{test:function(n,o){t.debug("Determining whether event occurred in dropdown",n.target),0==e(n.target).closest(h).size()&&(o(),n.stopPropagation())},bind:function(){t.verbose("Binding hide intent event to document"),e(n).on("click",function(e){t.intent.test(e,t.hide)})},unbind:function(){t.verbose("Removing hide intent event from document"),s.off("click")}},action:{nothing:function(){},hide:function(){t.hide()},changeText:function(e){t.debug("Changing text",e),b.text(e),t.hide()},form:function(e){t.debug("Adding selected value to hidden input",e),b.text(e),y.val(e),t.hide()}},is:{visible:function(){return h.is(":visible")},hidden:function(){return h.is(":not(:visible)")}},can:{click:function(){return x||"click"==r.on},show:function(){return!g.hasClass(k.disabled)}},animate:{show:function(){t.verbose("Doing menu showing animation"),"show"==P.show?h.show():"slide"==P.show&&h.clearQueue().children().clearQueue().css("opacity",0).delay(100).animate({opacity:1},300,"easeOutQuad").end().slideDown(200,"easeOutQuad")},hide:function(){t.verbose("Doing menu hiding animation"),"hide"==P.hide?h.hide():"slide"==P.hide&&h.clearQueue().children().clearQueue().css("opacity",1).animate({opacity:0},300,"easeOutQuad").end().delay(100).slideUp(200,"easeOutQuad")}},show:function(){clearTimeout(t.graceTimer),t.is.visible()||(t.debug("Showing dropdown"),g.addClass(k.active),t.animate.show(),t.can.click()&&t.intent.bind(),e.proxy(r.onShow,h.get())())},delayedHide:function(){t.verbose("User moused away setting timer to hide dropdown"),t.graceTimer=setTimeout(t.hide,r.gracePeriod)},hide:function(){t.is.hidden()||(t.debug("Hiding dropdown"),g.removeClass(k.active),t.can.click()&&t.intent.unbind(),t.animate.hide(),e.proxy(r.onHide,h.get())())},toggle:function(){t.verbose("Toggling menu visibility"),t.can.show()?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[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(){r.debug&&(t.performance.log(arguments[0]),t.debug=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,i;r.performance&&(n=(new Date).getTime(),i=u||n,o=n-i,u=n,d.push({Element:w,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+C+"("+a.size()+" elements)",0);C&&(t+="Performance ("+C+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,i,a){var s,r;return i=i||p,a=w||a,"string"==typeof n&&T!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,i){return e.isPlainObject(T[i])&&n!=s?(T=T[i],!0):T[i]!==o?(r=T[i],!0):(t.error(D.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(a,i)):r||!1}},m?(T===o&&t.initialize(),i=t.invoke(f)):(T!==o&&t.destroy(),t.initialize())}),i?i:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,action:"hide",animation:{show:"slide",hide:"slide"},on:"click",gracePeriod:300,onChange:function(){},onShow:function(){},onHide:function(){},errors:{action:"You called a dropdown action that was not defined",method:"The method you called is not defined."},metadata:{value:"value"},selector:{menu:".menu",item:".menu > .item",text:"> .text",input:'> input[type="hidden"]'},className:{active:"visible"}}})(jQuery,window,document); \ No newline at end of file +(function(e,t,n,o){e.fn.dropdown=function(t){var i,a=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(a.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,g=[].slice.call(arguments,1);return a.each(function(){var t,p=e(this),h=e(this).find(r.selector.menu),v=e(this).find(r.selector.item),b=e(this).find(r.selector.text),y=e(this).find(r.selector.input),x="ontouchstart"in n.documentElement,C=p.selector||"",w=this,T=p.data("module-"+r.namespace),k=r.className,N=r.metadata,z=r.namespace,P=r.animation,D=r.errors;t={initialize:function(){t.verbose("Initializing dropdown with bound events",p),x?p.on("touchstart"+c,t.event.test.toggle):"click"==r.on?p.on("click"+c,t.event.test.toggle):"hover"==r.on?p.on("mouseenter"+c,t.show).on("mouseleave"+c,t.delayedHide):p.on(r.on+c,t.toggle),v.on("click"+c,t.event.item.click),p.data(l,t)},destroy:function(){t.verbose("Destroying previous module for",p),p.off(z)},event:{stopPropagation:function(e){e.stopPropagation()},test:{toggle:function(e){t.intent.test(e,t.toggle),e.stopPropagation()},hide:function(e){t.intent.test(e,t.hide),e.stopPropagation()}},item:{click:function(){var n=e(this),o=n.data(N.name)||n.text(),i=n.data(N.value)||o;t.verbose("Adding active state to selected item"),v.removeClass(k.active),n.addClass(k.active),t.action.determine(o,i),e.proxy(r.onChange,h.get())(o,i)}}},intent:{test:function(n,o){t.debug("Determining whether event occurred in dropdown",n.target),o=o||function(){},0==e(n.target).closest(h).size()?(t.verbose("Triggering event",o),o()):t.verbose("Event occurred in dropdown, canceling callback")},bind:function(){t.verbose("Binding hide intent event to document"),s.on(t.get.selectEvent(),t.event.test.hide)},unbind:function(){t.verbose("Removing hide intent event from document"),s.off(t.get.selectEvent())}},action:{determine:function(n,o){e.isFunction(t.action[r.action])?(t.verbose("Triggering preset action",r.action),t.action[r.action](n,o)):e.isFunction(r.action)?(t.verbose("Triggering user action",r.action),r.action(n,o)):t.error(D.action)},nothing:function(){},hide:function(){t.hide()},changeText:function(e){t.debug("Changing text",e),b.text(e),t.hide()},form:function(e,n){t.debug("Adding selected value to hidden input",e,n),b.text(e),y.val(n),t.hide()}},get:{selectEvent:function(){return x?"touchstart":"click"}},is:{visible:function(){return h.is(":visible")},hidden:function(){return h.is(":not(:visible)")}},can:{click:function(){return x||"click"==r.on},show:function(){return!p.hasClass(k.disabled)}},animate:{show:function(){t.verbose("Doing menu showing animation"),"show"==P.show?h.show():"slide"==P.show&&h.clearQueue().children().clearQueue().css("opacity",0).delay(100).animate({opacity:1},300,"easeOutQuad").end().slideDown(200,"easeOutQuad")},hide:function(){t.verbose("Doing menu hiding animation"),"hide"==P.hide?h.hide():"slide"==P.hide&&h.clearQueue().children().clearQueue().css("opacity",1).animate({opacity:0},300,"easeOutQuad").end().delay(100).slideUp(200,"easeOutQuad")}},show:function(){clearTimeout(t.graceTimer),t.is.visible()||(t.debug("Showing dropdown"),p.addClass(k.visible),t.animate.show(),t.can.click()&&t.intent.bind(),e.proxy(r.onShow,h.get())())},delayedHide:function(){t.verbose("User moused away setting timer to hide dropdown"),t.graceTimer=setTimeout(t.hide,r.gracePeriod)},hide:function(){t.is.hidden()||(t.debug("Hiding dropdown"),p.removeClass(k.visible),t.can.click()&&t.intent.unbind(),t.animate.hide(),e.proxy(r.onHide,h.get())())},toggle:function(){t.verbose("Toggling menu visibility"),t.can.show()?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[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(){r.debug&&(t.performance.log(arguments[0]),t.debug=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,i;r.performance&&(n=(new Date).getTime(),i=u||n,o=n-i,u=n,d.push({Element:w,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+C+"("+a.size()+" elements)",0);C&&(t+="Performance ("+C+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,i,a){var s,r;return i=i||g,a=w||a,"string"==typeof n&&T!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,i){return e.isPlainObject(T[i])&&n!=s?(T=T[i],!0):T[i]!==o?(r=T[i],!0):(t.error(D.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(a,i)):r||!1}},m?(T===o&&t.initialize(),i=t.invoke(f)):(T!==o&&t.destroy(),t.initialize())}),i?i:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,on:"click",gracePeriod:300,action:"hide",animation:{show:"slide",hide:"slide"},onChange:function(){},onShow:function(){},onHide:function(){},errors:{action:"You called a dropdown action that was not defined",method:"The method you called is not defined."},metadata:{name:"name",value:"value"},selector:{menu:".menu",item:".menu > .item",text:"> .text",input:'> input[type="hidden"]'},className:{active:"active",disabled:"disabled",visible:"visible"}}})(jQuery,window,document); \ No newline at end of file diff --git a/build/packaged/modules/dropdown.js b/build/packaged/modules/dropdown.js index 894702aa5..02bba2cfe 100644 --- a/build/packaged/modules/dropdown.js +++ b/build/packaged/modules/dropdown.js @@ -57,15 +57,14 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.verbose('Initializing dropdown with bound events', $module); - console.log(settings.on); if(isTouchDevice) { $module - .on('touchstart' + eventNamespace, module.toggle) + .on('touchstart' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'click') { $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'hover') { @@ -97,24 +96,38 @@ $.fn.dropdown = function(parameters) { event: { + stopPropagation: function(event) { + event.stopPropagation(); + }, + + test: { + toggle: function(event) { + module.intent.test(event, module.toggle); + event.stopPropagation(); + }, + hide: function(event) { + module.intent.test(event, module.hide); + event.stopPropagation(); + } + }, + item: { click: function () { var - value = $(this).data(metadata.value) || $(this).text() + $choice = $(this), + name = $choice.data(metadata.name) || $choice.text(), + value = $choice.data(metadata.value) || name ; - if( $.isFunction( module.action[settings.action] ) ) { - module.verbose('Triggering preset item action', settings.action); - module.action[ settings.action ](value); - } - else if( $.isFunction(settings.action) ) { - module.verbose('Triggering user action', settings.action); - settings.action(value); - } - else { - module.error(errors.action); - } - $.proxy(settings.onChange, $menu.get())(value); + module.verbose('Adding active state to selected item'); + $item + .removeClass(className.active) + ; + $choice + .addClass(className.active) + ; + module.action.determine(name, value); + $.proxy(settings.onChange, $menu.get())(name, value); } } @@ -125,25 +138,27 @@ $.fn.dropdown = function(parameters) { test: function(event, callback) { module.debug('Determining whether event occurred in dropdown', event.target); + callback = callback || function(){}; if( $(event.target).closest($menu).size() == 0 ) { + module.verbose('Triggering event', callback) callback(); - event.stopPropagation(); + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); } }, bind: function() { module.verbose('Binding hide intent event to document'); - $(document) - .on('click', function(event) { - module.intent.test(event, module.hide); - }) + $document + .on(module.get.selectEvent(), module.event.test.hide) ; }, unbind: function() { module.verbose('Removing hide intent event from document'); $document - .off('click') + .off(module.get.selectEvent()) ; } @@ -151,27 +166,50 @@ $.fn.dropdown = function(parameters) { action: { + determine: function(name, value) { + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action); + module.action[ settings.action ](name, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action); + settings.action(name, value); + } + else { + module.error(errors.action); + } + }, + nothing: function() {}, hide: function() { module.hide(); }, - changeText: function(value) { - module.debug('Changing text', value); - $text.text(value); + changeText: function(name, value) { + module.debug('Changing text', name); + $text.text(name); module.hide(); }, - form: function(value) { - module.debug('Adding selected value to hidden input', value); - $text.text(value); + form: function(name, value) { + module.debug('Adding selected value to hidden input', name, value); + $text.text(name); $input.val(value); module.hide(); } }, + get: { + selectEvent: function() { + return (isTouchDevice) + ? 'touchstart' + : 'click' + ; + } + }, + is: { visible: function() { return $menu.is(':visible'); @@ -242,7 +280,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.visible() ) { module.debug('Showing dropdown'); $module - .addClass(className.active) + .addClass(className.visible) ; module.animate.show(); if( module.can.click() ) { @@ -261,7 +299,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.hidden() ) { module.debug('Hiding dropdown'); $module - .removeClass(className.active) + .removeClass(className.visible) ; if( module.can.click() ) { module.intent.unbind(); @@ -434,6 +472,8 @@ $.fn.dropdown.settings = { debug : true, performance : false, + on : 'click', + gracePeriod : 300, action : 'hide', animation : { @@ -441,10 +481,6 @@ $.fn.dropdown.settings = { hide: 'slide' }, - on : 'click', - - gracePeriod : 300, - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -455,7 +491,8 @@ $.fn.dropdown.settings = { }, metadata: { - value: 'value' + name : 'name', + value : 'value' }, selector : { @@ -466,7 +503,9 @@ $.fn.dropdown.settings = { }, className : { - active : 'visible' + active : 'active', + disabled : 'disabled', + visible : 'visible' } }; diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 4d9d1baf6..0b1775391 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -f2ef2da283399e7a48c30aaa1d942f652b053527 \ No newline at end of file +61d5df6293abdd0f9e68d09cd9d2e2ca46103abe \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index 9bb0c32a5..14a4f3d00 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -75b0dcf26fbaba1f015dab6d083f18421b0b9bfb \ No newline at end of file +4048e4d9247269ea41e8973fcff744e96cfc421a \ No newline at end of file diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index 3a098ef59..05bb338f1 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -218,6 +218,7 @@ /*---------------------- Divided -----------------------*/ +.ui.divided.grid, .ui.divided.grid > .row { display: table; } diff --git a/build/uncompressed/elements/header.css b/build/uncompressed/elements/header.css index 5d35b600a..677796a9c 100644 --- a/build/uncompressed/elements/header.css +++ b/build/uncompressed/elements/header.css @@ -249,5 +249,5 @@ h5.ui.header { .ui.header.icon .icon { display: block; font-size: 4em; - margin: 0rem auto 2rem; + margin: 0em auto 0.2em; } diff --git a/build/uncompressed/modules/dropdown.css b/build/uncompressed/modules/dropdown.css index 95363f1f7..0ddc31c9b 100644 --- a/build/uncompressed/modules/dropdown.css +++ b/build/uncompressed/modules/dropdown.css @@ -16,11 +16,11 @@ position: relative; display: inline-block; line-height: 1; - -webkit-transition: border-radius 0.1s ease; - -moz-transition: border-radius 0.1s ease; - -o-transition: border-radius 0.1s ease; - -ms-transition: border-radius 0.1s ease; - transition: border-radius 0.1s ease; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + -moz-transition: border-radius 0.1s ease, width 0.2s ease; + -o-transition: border-radius 0.1s ease, width 0.2s ease; + -ms-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; } .ui.dropdown .menu { position: absolute; @@ -42,6 +42,12 @@ transition: opacity 0.2s ease; z-index: 11; } +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .text { + display: inline-block; +} /* Flyout Direction */ .ui.dropdown .menu { left: 0px; @@ -93,6 +99,7 @@ ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu { + display: block; overflow: hidden; height: 0px; width: 0px; @@ -104,16 +111,22 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } +.ui.simple.dropdown.visible .menu, .ui.simple.dropdown:hover .menu { - display: block; overflow: visible; width: auto; height: auto; opacity: 1; } +.ui.simple.disabled.dropdown:hover .menu { + height: 0px; + width: 0px; + overflow: hidden; +} /*-------------- Selection ---------------*/ +/* Displays like a select box */ .ui.selection.dropdown { cursor: pointer; display: inline-block; diff --git a/build/uncompressed/modules/dropdown.js b/build/uncompressed/modules/dropdown.js index 894702aa5..02bba2cfe 100644 --- a/build/uncompressed/modules/dropdown.js +++ b/build/uncompressed/modules/dropdown.js @@ -57,15 +57,14 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.verbose('Initializing dropdown with bound events', $module); - console.log(settings.on); if(isTouchDevice) { $module - .on('touchstart' + eventNamespace, module.toggle) + .on('touchstart' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'click') { $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'hover') { @@ -97,24 +96,38 @@ $.fn.dropdown = function(parameters) { event: { + stopPropagation: function(event) { + event.stopPropagation(); + }, + + test: { + toggle: function(event) { + module.intent.test(event, module.toggle); + event.stopPropagation(); + }, + hide: function(event) { + module.intent.test(event, module.hide); + event.stopPropagation(); + } + }, + item: { click: function () { var - value = $(this).data(metadata.value) || $(this).text() + $choice = $(this), + name = $choice.data(metadata.name) || $choice.text(), + value = $choice.data(metadata.value) || name ; - if( $.isFunction( module.action[settings.action] ) ) { - module.verbose('Triggering preset item action', settings.action); - module.action[ settings.action ](value); - } - else if( $.isFunction(settings.action) ) { - module.verbose('Triggering user action', settings.action); - settings.action(value); - } - else { - module.error(errors.action); - } - $.proxy(settings.onChange, $menu.get())(value); + module.verbose('Adding active state to selected item'); + $item + .removeClass(className.active) + ; + $choice + .addClass(className.active) + ; + module.action.determine(name, value); + $.proxy(settings.onChange, $menu.get())(name, value); } } @@ -125,25 +138,27 @@ $.fn.dropdown = function(parameters) { test: function(event, callback) { module.debug('Determining whether event occurred in dropdown', event.target); + callback = callback || function(){}; if( $(event.target).closest($menu).size() == 0 ) { + module.verbose('Triggering event', callback) callback(); - event.stopPropagation(); + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); } }, bind: function() { module.verbose('Binding hide intent event to document'); - $(document) - .on('click', function(event) { - module.intent.test(event, module.hide); - }) + $document + .on(module.get.selectEvent(), module.event.test.hide) ; }, unbind: function() { module.verbose('Removing hide intent event from document'); $document - .off('click') + .off(module.get.selectEvent()) ; } @@ -151,27 +166,50 @@ $.fn.dropdown = function(parameters) { action: { + determine: function(name, value) { + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action); + module.action[ settings.action ](name, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action); + settings.action(name, value); + } + else { + module.error(errors.action); + } + }, + nothing: function() {}, hide: function() { module.hide(); }, - changeText: function(value) { - module.debug('Changing text', value); - $text.text(value); + changeText: function(name, value) { + module.debug('Changing text', name); + $text.text(name); module.hide(); }, - form: function(value) { - module.debug('Adding selected value to hidden input', value); - $text.text(value); + form: function(name, value) { + module.debug('Adding selected value to hidden input', name, value); + $text.text(name); $input.val(value); module.hide(); } }, + get: { + selectEvent: function() { + return (isTouchDevice) + ? 'touchstart' + : 'click' + ; + } + }, + is: { visible: function() { return $menu.is(':visible'); @@ -242,7 +280,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.visible() ) { module.debug('Showing dropdown'); $module - .addClass(className.active) + .addClass(className.visible) ; module.animate.show(); if( module.can.click() ) { @@ -261,7 +299,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.hidden() ) { module.debug('Hiding dropdown'); $module - .removeClass(className.active) + .removeClass(className.visible) ; if( module.can.click() ) { module.intent.unbind(); @@ -434,6 +472,8 @@ $.fn.dropdown.settings = { debug : true, performance : false, + on : 'click', + gracePeriod : 300, action : 'hide', animation : { @@ -441,10 +481,6 @@ $.fn.dropdown.settings = { hide: 'slide' }, - on : 'click', - - gracePeriod : 300, - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -455,7 +491,8 @@ $.fn.dropdown.settings = { }, metadata: { - value: 'value' + name : 'name', + value : 'value' }, selector : { @@ -466,7 +503,9 @@ $.fn.dropdown.settings = { }, className : { - active : 'visible' + active : 'active', + disabled : 'disabled', + visible : 'visible' } }; diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index cba329c5d..a666ab3e7 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -205,7 +205,7 @@ type : 'UI Element' -

Group

+

Groups

Buttons

diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html index 42599463c..b38e14918 100644 --- a/node/src/documents/modules/dropdown.html +++ b/node/src/documents/modules/dropdown.html @@ -21,15 +21,15 @@ type : 'UI Module'
Standard Variations + States Behavior - Examples Usage

Standard

-
+

Dropdown

The markup for a dropdown

@@ -43,7 +43,7 @@ type : 'UI Module'
-
+

Button Dropdown

A button can be formatted to open a dropdown

@@ -57,7 +57,7 @@ type : 'UI Module'
-
+

Combo Dropdown

A button group can be formatted with a dropdown

@@ -73,7 +73,7 @@ type : 'UI Module'
-
+

Menu Dropdown

A menu element can contain a dropdown

@@ -101,7 +101,7 @@ type : 'UI Module'
-
+

Select

A dropdown can be formatted to allow selection inside a form

@@ -119,11 +119,12 @@ type : 'UI Module'
+ - Male +
Male
-
Male
-
Female
+
Male
+
Female
@@ -134,7 +135,7 @@ type : 'UI Module'

Simple

A dropdown can open without javascript

-
+
Dropdown
@@ -146,6 +147,37 @@ type : 'UI Module'
+

States

+ +
+

Visible

+

A visible dropdown menu has its menu open

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
+
+
+
+ +
+

Disabled

+

A disabled dropdown menu will not open or close

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+

Behavior

@@ -229,8 +261,6 @@ type : 'UI Module'
-

Examples

-

Usage

diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css index 3a098ef59..05bb338f1 100644 --- a/node/src/files/components/semantic/collections/grid.css +++ b/node/src/files/components/semantic/collections/grid.css @@ -218,6 +218,7 @@ /*---------------------- Divided -----------------------*/ +.ui.divided.grid, .ui.divided.grid > .row { display: table; } diff --git a/node/src/files/components/semantic/elements/header.css b/node/src/files/components/semantic/elements/header.css index 5d35b600a..677796a9c 100644 --- a/node/src/files/components/semantic/elements/header.css +++ b/node/src/files/components/semantic/elements/header.css @@ -249,5 +249,5 @@ h5.ui.header { .ui.header.icon .icon { display: block; font-size: 4em; - margin: 0rem auto 2rem; + margin: 0em auto 0.2em; } diff --git a/node/src/files/components/semantic/modules/dropdown.css b/node/src/files/components/semantic/modules/dropdown.css index 95363f1f7..0ddc31c9b 100644 --- a/node/src/files/components/semantic/modules/dropdown.css +++ b/node/src/files/components/semantic/modules/dropdown.css @@ -16,11 +16,11 @@ position: relative; display: inline-block; line-height: 1; - -webkit-transition: border-radius 0.1s ease; - -moz-transition: border-radius 0.1s ease; - -o-transition: border-radius 0.1s ease; - -ms-transition: border-radius 0.1s ease; - transition: border-radius 0.1s ease; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + -moz-transition: border-radius 0.1s ease, width 0.2s ease; + -o-transition: border-radius 0.1s ease, width 0.2s ease; + -ms-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; } .ui.dropdown .menu { position: absolute; @@ -42,6 +42,12 @@ transition: opacity 0.2s ease; z-index: 11; } +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .text { + display: inline-block; +} /* Flyout Direction */ .ui.dropdown .menu { left: 0px; @@ -93,6 +99,7 @@ ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu { + display: block; overflow: hidden; height: 0px; width: 0px; @@ -104,16 +111,22 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } +.ui.simple.dropdown.visible .menu, .ui.simple.dropdown:hover .menu { - display: block; overflow: visible; width: auto; height: auto; opacity: 1; } +.ui.simple.disabled.dropdown:hover .menu { + height: 0px; + width: 0px; + overflow: hidden; +} /*-------------- Selection ---------------*/ +/* Displays like a select box */ .ui.selection.dropdown { cursor: pointer; display: inline-block; diff --git a/node/src/files/components/semantic/modules/dropdown.js b/node/src/files/components/semantic/modules/dropdown.js index 894702aa5..02bba2cfe 100644 --- a/node/src/files/components/semantic/modules/dropdown.js +++ b/node/src/files/components/semantic/modules/dropdown.js @@ -57,15 +57,14 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.verbose('Initializing dropdown with bound events', $module); - console.log(settings.on); if(isTouchDevice) { $module - .on('touchstart' + eventNamespace, module.toggle) + .on('touchstart' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'click') { $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'hover') { @@ -97,24 +96,38 @@ $.fn.dropdown = function(parameters) { event: { + stopPropagation: function(event) { + event.stopPropagation(); + }, + + test: { + toggle: function(event) { + module.intent.test(event, module.toggle); + event.stopPropagation(); + }, + hide: function(event) { + module.intent.test(event, module.hide); + event.stopPropagation(); + } + }, + item: { click: function () { var - value = $(this).data(metadata.value) || $(this).text() + $choice = $(this), + name = $choice.data(metadata.name) || $choice.text(), + value = $choice.data(metadata.value) || name ; - if( $.isFunction( module.action[settings.action] ) ) { - module.verbose('Triggering preset item action', settings.action); - module.action[ settings.action ](value); - } - else if( $.isFunction(settings.action) ) { - module.verbose('Triggering user action', settings.action); - settings.action(value); - } - else { - module.error(errors.action); - } - $.proxy(settings.onChange, $menu.get())(value); + module.verbose('Adding active state to selected item'); + $item + .removeClass(className.active) + ; + $choice + .addClass(className.active) + ; + module.action.determine(name, value); + $.proxy(settings.onChange, $menu.get())(name, value); } } @@ -125,25 +138,27 @@ $.fn.dropdown = function(parameters) { test: function(event, callback) { module.debug('Determining whether event occurred in dropdown', event.target); + callback = callback || function(){}; if( $(event.target).closest($menu).size() == 0 ) { + module.verbose('Triggering event', callback) callback(); - event.stopPropagation(); + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); } }, bind: function() { module.verbose('Binding hide intent event to document'); - $(document) - .on('click', function(event) { - module.intent.test(event, module.hide); - }) + $document + .on(module.get.selectEvent(), module.event.test.hide) ; }, unbind: function() { module.verbose('Removing hide intent event from document'); $document - .off('click') + .off(module.get.selectEvent()) ; } @@ -151,27 +166,50 @@ $.fn.dropdown = function(parameters) { action: { + determine: function(name, value) { + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action); + module.action[ settings.action ](name, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action); + settings.action(name, value); + } + else { + module.error(errors.action); + } + }, + nothing: function() {}, hide: function() { module.hide(); }, - changeText: function(value) { - module.debug('Changing text', value); - $text.text(value); + changeText: function(name, value) { + module.debug('Changing text', name); + $text.text(name); module.hide(); }, - form: function(value) { - module.debug('Adding selected value to hidden input', value); - $text.text(value); + form: function(name, value) { + module.debug('Adding selected value to hidden input', name, value); + $text.text(name); $input.val(value); module.hide(); } }, + get: { + selectEvent: function() { + return (isTouchDevice) + ? 'touchstart' + : 'click' + ; + } + }, + is: { visible: function() { return $menu.is(':visible'); @@ -242,7 +280,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.visible() ) { module.debug('Showing dropdown'); $module - .addClass(className.active) + .addClass(className.visible) ; module.animate.show(); if( module.can.click() ) { @@ -261,7 +299,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.hidden() ) { module.debug('Hiding dropdown'); $module - .removeClass(className.active) + .removeClass(className.visible) ; if( module.can.click() ) { module.intent.unbind(); @@ -434,6 +472,8 @@ $.fn.dropdown.settings = { debug : true, performance : false, + on : 'click', + gracePeriod : 300, action : 'hide', animation : { @@ -441,10 +481,6 @@ $.fn.dropdown.settings = { hide: 'slide' }, - on : 'click', - - gracePeriod : 300, - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -455,7 +491,8 @@ $.fn.dropdown.settings = { }, metadata: { - value: 'value' + name : 'name', + value : 'value' }, selector : { @@ -466,7 +503,9 @@ $.fn.dropdown.settings = { }, className : { - active : 'visible' + active : 'active', + disabled : 'disabled', + visible : 'visible' } }; diff --git a/node/src/files/javascript/dropdown.js b/node/src/files/javascript/dropdown.js index 7f7d5394e..8b3d0fcfd 100644 --- a/node/src/files/javascript/dropdown.js +++ b/node/src/files/javascript/dropdown.js @@ -5,8 +5,10 @@ semantic.dropdown.ready = function() { // selector cache var - $hover = $('.hover .ui.dropdown'), - $select = $('.ui.dropdown').not($hover), + $examples = $('.example'), + $hoverDropdown = $examples.filter('.hover').find('.ui.dropdown'), + $formDropdown = $examples.filter('.form').find('.ui.dropdown'), + $dropdown = $examples.filter('.dropdown').find('.ui.dropdown'), // alias handler ; @@ -16,11 +18,22 @@ semantic.dropdown.ready = function() { }; - $select + $dropdown + .dropdown() + ; + console.log($dropdown); + $formDropdown + .dropdown({ + action: 'form' + }) + ; + console.log($formDropdown); + $hoverDropdown .dropdown({ on: 'hover' }) ; + console.log($hoverDropdown); }; diff --git a/src/collections/grid.less b/src/collections/grid.less index 1338a58fd..46e718983 100755 --- a/src/collections/grid.less +++ b/src/collections/grid.less @@ -285,6 +285,7 @@ Divided -----------------------*/ +.ui.divided.grid, .ui.divided.grid > .row { display: table; } diff --git a/src/elements/header.less b/src/elements/header.less index bcb1f81d5..b3bace751 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -287,5 +287,5 @@ h5.ui.header { .ui.header.icon .icon { display: block; font-size: 4em; - margin: 0rem auto 2rem; + margin: 0em auto 0.2em; } \ No newline at end of file diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 894702aa5..02bba2cfe 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -57,15 +57,14 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.verbose('Initializing dropdown with bound events', $module); - console.log(settings.on); if(isTouchDevice) { $module - .on('touchstart' + eventNamespace, module.toggle) + .on('touchstart' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'click') { $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.test.toggle) ; } else if(settings.on == 'hover') { @@ -97,24 +96,38 @@ $.fn.dropdown = function(parameters) { event: { + stopPropagation: function(event) { + event.stopPropagation(); + }, + + test: { + toggle: function(event) { + module.intent.test(event, module.toggle); + event.stopPropagation(); + }, + hide: function(event) { + module.intent.test(event, module.hide); + event.stopPropagation(); + } + }, + item: { click: function () { var - value = $(this).data(metadata.value) || $(this).text() + $choice = $(this), + name = $choice.data(metadata.name) || $choice.text(), + value = $choice.data(metadata.value) || name ; - if( $.isFunction( module.action[settings.action] ) ) { - module.verbose('Triggering preset item action', settings.action); - module.action[ settings.action ](value); - } - else if( $.isFunction(settings.action) ) { - module.verbose('Triggering user action', settings.action); - settings.action(value); - } - else { - module.error(errors.action); - } - $.proxy(settings.onChange, $menu.get())(value); + module.verbose('Adding active state to selected item'); + $item + .removeClass(className.active) + ; + $choice + .addClass(className.active) + ; + module.action.determine(name, value); + $.proxy(settings.onChange, $menu.get())(name, value); } } @@ -125,25 +138,27 @@ $.fn.dropdown = function(parameters) { test: function(event, callback) { module.debug('Determining whether event occurred in dropdown', event.target); + callback = callback || function(){}; if( $(event.target).closest($menu).size() == 0 ) { + module.verbose('Triggering event', callback) callback(); - event.stopPropagation(); + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); } }, bind: function() { module.verbose('Binding hide intent event to document'); - $(document) - .on('click', function(event) { - module.intent.test(event, module.hide); - }) + $document + .on(module.get.selectEvent(), module.event.test.hide) ; }, unbind: function() { module.verbose('Removing hide intent event from document'); $document - .off('click') + .off(module.get.selectEvent()) ; } @@ -151,27 +166,50 @@ $.fn.dropdown = function(parameters) { action: { + determine: function(name, value) { + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action); + module.action[ settings.action ](name, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action); + settings.action(name, value); + } + else { + module.error(errors.action); + } + }, + nothing: function() {}, hide: function() { module.hide(); }, - changeText: function(value) { - module.debug('Changing text', value); - $text.text(value); + changeText: function(name, value) { + module.debug('Changing text', name); + $text.text(name); module.hide(); }, - form: function(value) { - module.debug('Adding selected value to hidden input', value); - $text.text(value); + form: function(name, value) { + module.debug('Adding selected value to hidden input', name, value); + $text.text(name); $input.val(value); module.hide(); } }, + get: { + selectEvent: function() { + return (isTouchDevice) + ? 'touchstart' + : 'click' + ; + } + }, + is: { visible: function() { return $menu.is(':visible'); @@ -242,7 +280,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.visible() ) { module.debug('Showing dropdown'); $module - .addClass(className.active) + .addClass(className.visible) ; module.animate.show(); if( module.can.click() ) { @@ -261,7 +299,7 @@ $.fn.dropdown = function(parameters) { if( !module.is.hidden() ) { module.debug('Hiding dropdown'); $module - .removeClass(className.active) + .removeClass(className.visible) ; if( module.can.click() ) { module.intent.unbind(); @@ -434,6 +472,8 @@ $.fn.dropdown.settings = { debug : true, performance : false, + on : 'click', + gracePeriod : 300, action : 'hide', animation : { @@ -441,10 +481,6 @@ $.fn.dropdown.settings = { hide: 'slide' }, - on : 'click', - - gracePeriod : 300, - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -455,7 +491,8 @@ $.fn.dropdown.settings = { }, metadata: { - value: 'value' + name : 'name', + value : 'value' }, selector : { @@ -466,7 +503,9 @@ $.fn.dropdown.settings = { }, className : { - active : 'visible' + active : 'active', + disabled : 'disabled', + visible : 'visible' } }; diff --git a/src/modules/dropdown.less b/src/modules/dropdown.less index 72c615271..78f613078 100644 --- a/src/modules/dropdown.less +++ b/src/modules/dropdown.less @@ -21,11 +21,26 @@ line-height: 1; - -webkit-transition: border-radius 0.1s ease; - -moz-transition: border-radius 0.1s ease; - -o-transition: border-radius 0.1s ease; - -ms-transition: border-radius 0.1s ease; - transition: border-radius 0.1s ease; + -webkit-transition: + border-radius 0.1s ease, + width 0.2s ease + ; + -moz-transition: + border-radius 0.1s ease, + width 0.2s ease + ; + -o-transition: + border-radius 0.1s ease, + width 0.2s ease + ; + -ms-transition: + border-radius 0.1s ease, + width 0.2s ease + ; + transition: + border-radius 0.1s ease, + width 0.2s ease + ; } .ui.dropdown .menu { @@ -66,6 +81,13 @@ z-index: 11; } +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .text { + display: inline-block; +} + /* Flyout Direction */ .ui.dropdown .menu { left: 0px; @@ -129,6 +151,7 @@ /* Displays without javascript */ .ui.simple.dropdown .menu { + display: block; overflow: hidden; height: 0px; width: 0px; @@ -140,17 +163,23 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } +.ui.simple.dropdown.visible .menu, .ui.simple.dropdown:hover .menu { - display: block; overflow: visible; width: auto; height: auto; opacity: 1; } +.ui.simple.disabled.dropdown:hover .menu { + height: 0px; + width: 0px; + overflow: hidden; +} /*-------------- Selection ---------------*/ +/* Displays like a select box */ .ui.selection.dropdown { cursor: pointer;