lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

finishing up dropdown module 

Former-commit-id: 83961373897bc6daa792472261e0277714042509
Former-commit-id: e1c136d6ecb7e52666888275572645f6c190058f
beta
Jack Lukic 12 years ago
parent
acf30aee01
commit
5a4e2954d4
23 changed files with 519 additions and 223 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
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/header.min.css
  3. 111
      build/minified/modules/dropdown.js
  4. 2
      build/minified/modules/dropdown.min.css
  5. 2
      build/minified/modules/dropdown.min.js
  6. 111
      build/packaged/modules/dropdown.js
  7. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  8. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  9. 1
      build/uncompressed/collections/grid.css
  10. 2
      build/uncompressed/elements/header.css
  11. 25
      build/uncompressed/modules/dropdown.css
  12. 111
      build/uncompressed/modules/dropdown.js
  13. 2
      node/src/documents/elements/button.html
  14. 54
      node/src/documents/modules/dropdown.html
  15. 1
      node/src/files/components/semantic/collections/grid.css
  16. 2
      node/src/files/components/semantic/elements/header.css
  17. 25
      node/src/files/components/semantic/modules/dropdown.css
  18. 111
      node/src/files/components/semantic/modules/dropdown.js
  19. 19
      node/src/files/javascript/dropdown.js
  20. 1
      src/collections/grid.less
  21. 2
      src/elements/header.less
  22. 111
      src/modules/dropdown.js
  23. 41
      src/modules/dropdown.less

2
build/minified/collections/grid.min.css
View File

@ -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}}
.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}}

2
build/minified/elements/header.min.css
View File

@ -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}
.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}

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

@ -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'
}
};

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;-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}
.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}

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

File diff suppressed because one or more lines are too long

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

@ -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'
}
};

2
build/packaged/semantic.min.css.REMOVED.git-id
View File

@ -1 +1 @@
f2ef2da283399e7a48c30aaa1d942f652b053527
61d5df6293abdd0f9e68d09cd9d2e2ca46103abe

2
build/packaged/semantic.min.js.REMOVED.git-id
View File

@ -1 +1 @@
75b0dcf26fbaba1f015dab6d083f18421b0b9bfb
4048e4d9247269ea41e8973fcff744e96cfc421a

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

@ -218,6 +218,7 @@
/*----------------------
Divided
-----------------------*/
.ui.divided.grid,
.ui.divided.grid > .row {
display: table;
}

2
build/uncompressed/elements/header.css
View File

@ -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;
}

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

@ -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;

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

@ -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'
}
};

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

@ -205,7 +205,7 @@ type : 'UI Element'
</div>
<h2 class="ui dividing header">Group</h2>
<h2 class="ui dividing header">Groups</h2>
<div class="example">
<h4 class="ui header">Buttons</h4>

54
node/src/documents/modules/dropdown.html
View File

@ -21,15 +21,15 @@ type : 'UI Module'
<div class="ui vertical pointing secondary menu">
<a class="active item">Standard</a>
<a class="item">Variations</a>
<a class="item">States</a>
<a class="item">Behavior</a>
<a class="item">Examples</a>
<a class="item">Usage</a>
</div>
</div>
<h2 class="ui dividing header">Standard</h2>
<div class="visible example">
<div class="visible hover example">
<h4 class="ui header">Dropdown</h4>
<p>The markup for a dropdown</p>
<div class="ui dropdown">
@ -43,7 +43,7 @@ type : 'UI Module'
</div>
</div>
<div class="example">
<div class="dropdown example">
<h4 class="ui header">Button Dropdown</h4>
<p>A button can be formatted to open a dropdown</p>
<div class="ui red labeled icon dropdown button">
@ -57,7 +57,7 @@ type : 'UI Module'
</div>
</div>
<div class="example">
<div class="dropdown example">
<h4 class="ui header">Combo Dropdown</h4>
<p>A button group can be formatted with a dropdown</p>
<div class="ui teal buttons">
@ -73,7 +73,7 @@ type : 'UI Module'
</div>
</div>
<div class="example">
<div class="hover example">
<h4 class="ui header">Menu Dropdown</h4>
<p>A menu element can contain a dropdown</p>
<div class="ui compact tiered purple inverted menu">
@ -101,7 +101,7 @@ type : 'UI Module'
</div>
<div class="example">
<div class="form example">
<h4 class="ui header">Select</h4>
<p>A dropdown can be formatted to allow selection inside a form</p>
<div class="ui form segment">
@ -119,11 +119,12 @@ type : 'UI Module'
<div class="field">
<label>Gender</label>
<div class="ui dropdown selection">
<input type="hidden" name="gender">
<i class="icon dropdown"></i>
Male
<div class="text">Male</div>
<div class="menu">
<div class="item">Male</div>
<div class="item">Female</div>
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
@ -134,7 +135,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Simple</h4>
<p>A dropdown can open without javascript</p>
<div class="ui menu">
<div class="ui compact menu">
<div class="ui simple dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
@ -146,6 +147,37 @@ type : 'UI Module'
</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Visible</h4>
<p>A visible dropdown menu has its menu open</p>
<div class="ui compact menu">
<div class="ui simple visible dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>A disabled dropdown menu will not open or close</p>
<div class="ui menu">
<div class="ui simple disabled dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<div class="example">
@ -229,8 +261,6 @@ type : 'UI Module'
</div>
</div>
<h2 class="ui dividing header">Examples</h2>
<h2 class="ui dividing header">Usage</h2>

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

@ -218,6 +218,7 @@
/*----------------------
Divided
-----------------------*/
.ui.divided.grid,
.ui.divided.grid > .row {
display: table;
}

2
node/src/files/components/semantic/elements/header.css
View File

@ -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;
}

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

@ -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;

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

@ -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'
}
};

19
node/src/files/javascript/dropdown.js
View File

@ -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);
};

1
src/collections/grid.less
View File

@ -285,6 +285,7 @@
Divided
-----------------------*/
.ui.divided.grid,
.ui.divided.grid > .row {
display: table;
}

2
src/elements/header.less
View File

@ -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;
}

111
src/modules/dropdown.js
View File

@ -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'
}
};

41
src/modules/dropdown.less
View File

@ -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;

Write Preview
Loading…
Cancel
Save