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

adds a host of new options to dropdown class, fixes to menu, stuff 

Former-commit-id: 4667c5dda7a64455d7c1767345b601bd2dcc2eec
Former-commit-id: c5a5a5de22ad23426328a12bd9b6b1e56d80fc41
beta
Jack Lukic 12 years ago
parent
5f15c164c3
commit
39199fe9fd
27 changed files with 681 additions and 442 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/menu.min.css
  2. 167
      build/minified/modules/dropdown.js
  3. 2
      build/minified/modules/dropdown.min.css
  4. 2
      build/minified/modules/dropdown.min.js
  5. 2
      build/minified/modules/search.min.js
  6. 2
      build/minified/modules/star.min.js
  7. 2
      build/minified/modules/tab.min.js
  8. 167
      build/packaged/modules/dropdown.js
  9. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  10. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  11. 38
      build/uncompressed/collections/menu.css
  12. 6
      build/uncompressed/modules/dropdown.css
  13. 167
      build/uncompressed/modules/dropdown.js
  14. 4
      node/src/documents/collections/form.html
  15. 42
      node/src/documents/collections/menu.html
  16. 10
      node/src/documents/elements/button.html
  17. 3
      node/src/documents/modules/dropdown.html
  18. 38
      node/src/files/components/semantic/collections/menu.css
  19. 14
      node/src/files/components/semantic/modules/checkbox.js
  20. 6
      node/src/files/components/semantic/modules/dropdown.css
  21. 205
      node/src/files/components/semantic/modules/dropdown.js
  22. 3
      node/src/files/javascript/dropdown.js
  23. 20
      node/src/files/stylesheets/semantic.css
  24. 6
      node/src/layouts/default.html.eco
  25. 38
      src/collections/menu.less
  26. 167
      src/modules/dropdown.js
  27. 6
      src/modules/dropdown.less

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

File diff suppressed because one or more lines are too long

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

@ -35,7 +35,8 @@ $.fn.dropdown = function(parameters) {
$module = $(this),
$menu = $(this).find(settings.selector.menu),
$item = $(this).find(settings.selector.item),
$input = $(this).find(settings.selector.input)
$text = $(this).find(settings.selector.text),
$input = $(this).find(settings.selector.input),
isTouchDevice = ('ontouchstart' in document.documentElement),
@ -44,9 +45,10 @@ $.fn.dropdown = function(parameters) {
instance = $module.data('module-' + settings.namespace),
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
animation = settings.animation,
errors = settings.errors,
module
;
@ -54,25 +56,31 @@ $.fn.dropdown = function(parameters) {
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
module.verbose('Initializing dropdown with bound events', $module);
console.log(settings.on);
if(isTouchDevice) {
$module
.on('touchstart' + eventNamespace, module.toggle)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
else if(settings.on == 'click') {
$module
.on(module.get.event() + eventNamespace, module.intent.test)
;
$item
.on('click' + eventNamespace, module.event.select)
.on('click' + eventNamespace, module.toggle)
;
}
else if(settings.on == 'hover') {
$module
.data(moduleNamespace, module)
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.delayedHide)
;
}
$item
.on('click' + eventNamespace, module.event.item.click)
;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
@ -88,15 +96,20 @@ $.fn.dropdown = function(parameters) {
click: function () {
var
value = $(this).data(metadata.value) || $(this).html()
value = $(this).data(metadata.value) || $(this).text()
;
module.verbose('Determining select action');
if( $.isFunction( module.action[settings.action] ) {
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);
}
}
@ -105,10 +118,10 @@ $.fn.dropdown = function(parameters) {
intent: {
test: function(event) {
module.debug('Checking if click was inside the dropdown', event.target);
test: function(event, callback) {
module.debug('Determining whether event occurred in dropdown', event.target);
if( $(event.target).closest($menu).size() == 0 ) {
module.toggle();
callback();
event.stopPropagation();
}
},
@ -116,7 +129,9 @@ $.fn.dropdown = function(parameters) {
bind: function() {
module.verbose('Binding hide intent event to document');
$(document)
.on('click', module.intent.test)
.on('click', function(event) {
module.intent.test(event, module.hide);
})
;
},
@ -133,32 +148,32 @@ $.fn.dropdown = function(parameters) {
nothing: function() {},
close: function() {
hide: function() {
module.hide();
},
changeText: function(value) {
module.debug('Changing text', value);
$text.text(value);
module.hide();
},
form: function(value) {
module.debug('Adding selected value to hidden input', value);
$text.text(value);
$input.val(value);
module.hide();
}
}
get: {
},
event: function() {
if(isTouchDevice) {
return 'touchstart';
}
if(settings.on == 'hover') {
return 'hover';
}
else if(settings.on == 'click') {
return 'click';
}
is: {
visible: function() {
return $menu.is(':visible');
},
hidden: function() {
return $menu.is(':not(:visible)');
}
},
can: {
@ -172,6 +187,7 @@ $.fn.dropdown = function(parameters) {
animate: {
show: function() {
module.verbose('Doing menu showing animation');
if(animation.show == 'show') {
$menu
.show()
@ -179,7 +195,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 0)
.delay(100)
.animate({
@ -191,6 +209,7 @@ $.fn.dropdown = function(parameters) {
}
},
hide: function() {
module.verbose('Doing menu hiding animation');
if(animation.hide == 'hide') {
$menu
.hide()
@ -198,7 +217,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 1)
.animate({
opacity : 0
@ -212,33 +233,42 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
}
$.proxy(settings.onShow, $menu.get())();
}
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
}
module.animate.hide();
$.proxy(settings.onHide, $menu.get())();
}
module.animate.hide();
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show() && $menu.is(':not(:visible)') ) {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
module.show();
}
else {
@ -398,21 +428,23 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : false,
action: 'close',
animation: {
action : 'hide',
animation : {
show: 'slide',
hide: 'slide'
},
on : 'click',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
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.'
},
@ -422,9 +454,10 @@ $.fn.dropdown.settings = {
},
selector : {
input : 'input[type="hidden"]',
menu : '.menu'
item : '.menu > .item'
menu : '.menu',
item : '.menu > .item',
text : '> .text',
input : '> input[type="hidden"]',
},
className : {

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

@ -1 +1 @@
.ui.dropdown{position:relative;display:inline-block;line-height:1;white-space:nowrap;-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%;-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>.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;min-width:210px;width:100%;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;-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}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
(function(e,t,n,o){e.fn.starReview=function(t){var n=e.extend(!0,{},e.fn.starReview.settings,t),i=arguments||!1;return e(this).each(function(){var t,a=e(this),s=a.find(n.selector.star),r=n.className,l=n.namespace,c=a.data("module");return t={settings:n,initialize:function(){n.rateable&&(e.fn.state!==o&&(a.state(),s.state()),s.bind("mouseenter."+l,t.event.mouseenter).bind("mouseleave."+l,t.event.mouseleave).bind("click."+l,t.event.click)),a.addClass(r.initialize).data("module",t)},setRating:function(t){var o=s.eq(t-1);a.removeClass(r.hover),s.removeClass(r.hover),o.nextAll().removeClass(r.active),o.addClass(r.active).prevAll().addClass(r.active),e.proxy(n.onRate,a)()},event:{mouseenter:function(){var t=e(this);t.nextAll().removeClass(r.hover),a.addClass(r.hover),t.addClass(r.hover).prevAll().addClass(r.hover)},mouseleave:function(){s.removeClass(r.hover)},click:function(){var n=e(this);t.setRating(s.index(n)+1)}},error:function(e){console.warn(n.moduleName+": "+e)},invoke:function(i,a,s){var r;return s=s||Array.prototype.slice.call(arguments,2),"string"==typeof i&&c!==o&&(i=i.split("."),e.each(i,function(o,i){return e.isPlainObject(c[i])?(c=c[i],!0):e.isFunction(c[i])?(r=c[i],!0):(t.error(n.errors.method),!1)})),e.isFunction(r)?r.apply(a,s):!1}},c!==o&&i?("invoke"==i[0]&&(i=Array.prototype.slice.call(i,1)),t.invoke(i[0],this,Array.prototype.slice.call(i,1))):(t.initialize(),o)}),this},e.fn.starReview.settings={moduleName:"Star Module",namespace:"star",rateable:!0,onRate:function(){},className:{initialize:"initialize",loading:"loading",active:"active",hover:"hover",down:"down"},selector:{star:"i"}}})(jQuery,window,document);
(function(e,t,n,o){e.fn.starReview=function(t){var n=e.extend(!0,{},e.fn.starReview.settings,t),i=arguments||!1;return e(this).each(function(){var t,a=e(this),s=a.find(n.selector.star),r=n.className,c=n.namespace,l=a.data("module");return t={settings:n,initialize:function(){n.rateable&&(e.fn.state!==o&&(a.state(),s.state()),s.bind("mouseenter."+c,t.event.mouseenter).bind("mouseleave."+c,t.event.mouseleave).bind("click."+c,t.event.click)),a.addClass(r.initialize).data("module",t)},setRating:function(t){var o=s.eq(t-1);a.removeClass(r.hover),s.removeClass(r.hover),o.nextAll().removeClass(r.active),o.addClass(r.active).prevAll().addClass(r.active),e.proxy(n.onRate,a)()},event:{mouseenter:function(){var t=e(this);t.nextAll().removeClass(r.hover),a.addClass(r.hover),t.addClass(r.hover).prevAll().addClass(r.hover)},mouseleave:function(){s.removeClass(r.hover)},click:function(){var n=e(this);t.setRating(s.index(n)+1)}},error:function(e){console.warn(n.moduleName+": "+e)},invoke:function(i,a,s){var r;return s=s||Array.prototype.slice.call(arguments,2),"string"==typeof i&&l!==o&&(i=i.split("."),e.each(i,function(o,i){return e.isPlainObject(l[i])?(l=l[i],!0):e.isFunction(l[i])?(r=l[i],!0):(t.error(n.errors.method),!1)})),e.isFunction(r)?r.apply(a,s):!1}},l!==o&&i?("invoke"==i[0]&&(i=Array.prototype.slice.call(i,1)),t.invoke(i[0],this,Array.prototype.slice.call(i,1))):(t.initialize(),o)}),this},e.fn.starReview.settings={moduleName:"Star Module",namespace:"star",rateable:!0,onRate:function(){},className:{initialize:"initialize",loading:"loading",active:"active",hover:"hover",down:"down"},selector:{star:"i"}}})(jQuery,window,document);

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

File diff suppressed because one or more lines are too long

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

@ -35,7 +35,8 @@ $.fn.dropdown = function(parameters) {
$module = $(this),
$menu = $(this).find(settings.selector.menu),
$item = $(this).find(settings.selector.item),
$input = $(this).find(settings.selector.input)
$text = $(this).find(settings.selector.text),
$input = $(this).find(settings.selector.input),
isTouchDevice = ('ontouchstart' in document.documentElement),
@ -44,9 +45,10 @@ $.fn.dropdown = function(parameters) {
instance = $module.data('module-' + settings.namespace),
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
animation = settings.animation,
errors = settings.errors,
module
;
@ -54,25 +56,31 @@ $.fn.dropdown = function(parameters) {
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
module.verbose('Initializing dropdown with bound events', $module);
console.log(settings.on);
if(isTouchDevice) {
$module
.on('touchstart' + eventNamespace, module.toggle)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
else if(settings.on == 'click') {
$module
.on(module.get.event() + eventNamespace, module.intent.test)
;
$item
.on('click' + eventNamespace, module.event.select)
.on('click' + eventNamespace, module.toggle)
;
}
else if(settings.on == 'hover') {
$module
.data(moduleNamespace, module)
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.delayedHide)
;
}
$item
.on('click' + eventNamespace, module.event.item.click)
;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
@ -88,15 +96,20 @@ $.fn.dropdown = function(parameters) {
click: function () {
var
value = $(this).data(metadata.value) || $(this).html()
value = $(this).data(metadata.value) || $(this).text()
;
module.verbose('Determining select action');
if( $.isFunction( module.action[settings.action] ) {
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);
}
}
@ -105,10 +118,10 @@ $.fn.dropdown = function(parameters) {
intent: {
test: function(event) {
module.debug('Checking if click was inside the dropdown', event.target);
test: function(event, callback) {
module.debug('Determining whether event occurred in dropdown', event.target);
if( $(event.target).closest($menu).size() == 0 ) {
module.toggle();
callback();
event.stopPropagation();
}
},
@ -116,7 +129,9 @@ $.fn.dropdown = function(parameters) {
bind: function() {
module.verbose('Binding hide intent event to document');
$(document)
.on('click', module.intent.test)
.on('click', function(event) {
module.intent.test(event, module.hide);
})
;
},
@ -133,32 +148,32 @@ $.fn.dropdown = function(parameters) {
nothing: function() {},
close: function() {
hide: function() {
module.hide();
},
changeText: function(value) {
module.debug('Changing text', value);
$text.text(value);
module.hide();
},
form: function(value) {
module.debug('Adding selected value to hidden input', value);
$text.text(value);
$input.val(value);
module.hide();
}
}
get: {
},
event: function() {
if(isTouchDevice) {
return 'touchstart';
}
if(settings.on == 'hover') {
return 'hover';
}
else if(settings.on == 'click') {
return 'click';
}
is: {
visible: function() {
return $menu.is(':visible');
},
hidden: function() {
return $menu.is(':not(:visible)');
}
},
can: {
@ -172,6 +187,7 @@ $.fn.dropdown = function(parameters) {
animate: {
show: function() {
module.verbose('Doing menu showing animation');
if(animation.show == 'show') {
$menu
.show()
@ -179,7 +195,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 0)
.delay(100)
.animate({
@ -191,6 +209,7 @@ $.fn.dropdown = function(parameters) {
}
},
hide: function() {
module.verbose('Doing menu hiding animation');
if(animation.hide == 'hide') {
$menu
.hide()
@ -198,7 +217,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 1)
.animate({
opacity : 0
@ -212,33 +233,42 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
}
$.proxy(settings.onShow, $menu.get())();
}
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
}
module.animate.hide();
$.proxy(settings.onHide, $menu.get())();
}
module.animate.hide();
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show() && $menu.is(':not(:visible)') ) {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
module.show();
}
else {
@ -398,21 +428,23 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : false,
action: 'close',
animation: {
action : 'hide',
animation : {
show: 'slide',
hide: 'slide'
},
on : 'click',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
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.'
},
@ -422,9 +454,10 @@ $.fn.dropdown.settings = {
},
selector : {
input : 'input[type="hidden"]',
menu : '.menu'
item : '.menu > .item'
menu : '.menu',
item : '.menu > .item',
text : '> .text',
input : '> input[type="hidden"]',
},
className : {

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

@ -1 +1 @@
5dd53cafcc4e065adc363338f570384e7d941806
e552253d17881eda267621f3d946d81039cc6e87

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

@ -1 +1 @@
3e66f0dc5b499861816375c6e348512adf5250df
7e1bb8477df47718254ea69649fe3f0c4e10d4cf

38
build/uncompressed/collections/menu.css
View File

@ -46,7 +46,7 @@
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
vertical-align: middle;
line-height: 1.25em;
line-height: 1em;
min-height: 1.25em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -175,15 +175,12 @@
---------------*/
.ui.menu .header.item {
background-color: rgba(0, 0, 0, 0.04);
font-weight: bold;
margin: 0em;
-webkit-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
}
.ui.vertical.menu .header.item {
padding-top: 1em;
padding-bottom: 1em;
font-weight: bold;
-webkit-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
@ -288,8 +285,10 @@
.ui.vertical.menu .active.item .menu .active.item {
border-left: none;
}
.ui.vertical.menu .active.item .menu .active.item {
padding-left: 1.5rem;
}
.ui.vertical.menu .item .menu .active.item {
padding-top: 0.5rem;
padding-left: 1.3rem;
}
/*--------------
@ -322,7 +321,7 @@
.ui.vertical.menu .item > .icon {
float: right;
width: 1.22em;
margin: 0.2em 0em 0em 0.5em;
margin: 0em 0em 0em 0.5em;
}
/*--- Border ---*/
.ui.vertical.menu .item:before {
@ -348,9 +347,15 @@
.ui.vertical.menu .dropdown.item .menu {
top: 0%;
left: 100%;
margin: 0em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ui.vertical.menu .dropdown.item .menu .item {
font-size: 1em;
font-size: 0.9em;
padding: 0.75em 1em;
}
.ui.vertical.menu .dropdown.item .menu .item .icon {
margin-right: 0em;
}
/*--- Sub Menu ---*/
.ui.vertical.menu .item > .menu {
@ -728,7 +733,7 @@
box-shadow: none;
border: none;
margin: 0em 0.25em;
padding: 0.4em 1em;
padding: 0.5em 1em;
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
border-radius: 0.325em;
@ -747,6 +752,8 @@
.ui.secondary.menu > .active.item {
border-top: none;
background-color: rgba(0, 0, 0, 0.08);
}
.ui.secondary.vertical.menu > .active.item {
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
border-radius: 0.325em;
@ -811,6 +818,11 @@
-moz-border-radius: 0.325em;
border-radius: 0.325em;
}
.ui.secondary.vertical.menu > .header.item {
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em;
-webkit-border-radius: 0em;
@ -1125,19 +1137,18 @@
---------------*/
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
padding: 0.5em 0.75em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
margin: -0.5em -0.75em;
padding: 0.5em 0.75em;
}
.ui.tiny.vertical.menu {
width: 9rem;
}
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;
}
.ui.small.vertical.menu {
width: 13rem;
@ -1150,7 +1161,6 @@
}
.ui.large.menu .item {
font-size: 1.125rem;
min-height: 1.35em;
}
.ui.large.vertical.menu {
width: 18rem;

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

@ -16,7 +16,6 @@
position: relative;
display: inline-block;
line-height: 1;
white-space: nowrap;
-webkit-transition: border-radius 0.1s ease;
-moz-transition: border-radius 0.1s ease;
-o-transition: border-radius 0.1s ease;
@ -29,6 +28,7 @@
top: 100%;
background-color: #FFFFFF;
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
@ -46,6 +46,7 @@
.ui.dropdown .menu {
left: 0px;
}
.ui.menu .dropdown:last-child .menu,
.ui > .ui.dropdown:last-child .menu {
left: auto;
right: 0px;
@ -106,8 +107,7 @@
.ui.simple.dropdown:hover .menu {
display: block;
overflow: visible;
min-width: 210px;
width: 100%;
width: auto;
height: auto;
opacity: 1;
}

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

@ -35,7 +35,8 @@ $.fn.dropdown = function(parameters) {
$module = $(this),
$menu = $(this).find(settings.selector.menu),
$item = $(this).find(settings.selector.item),
$input = $(this).find(settings.selector.input)
$text = $(this).find(settings.selector.text),
$input = $(this).find(settings.selector.input),
isTouchDevice = ('ontouchstart' in document.documentElement),
@ -44,9 +45,10 @@ $.fn.dropdown = function(parameters) {
instance = $module.data('module-' + settings.namespace),
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
animation = settings.animation,
errors = settings.errors,
module
;
@ -54,25 +56,31 @@ $.fn.dropdown = function(parameters) {
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
module.verbose('Initializing dropdown with bound events', $module);
console.log(settings.on);
if(isTouchDevice) {
$module
.on('touchstart' + eventNamespace, module.toggle)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
else if(settings.on == 'click') {
$module
.on(module.get.event() + eventNamespace, module.intent.test)
;
$item
.on('click' + eventNamespace, module.event.select)
.on('click' + eventNamespace, module.toggle)
;
}
else if(settings.on == 'hover') {
$module
.data(moduleNamespace, module)
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.delayedHide)
;
}
$item
.on('click' + eventNamespace, module.event.item.click)
;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
@ -88,15 +96,20 @@ $.fn.dropdown = function(parameters) {
click: function () {
var
value = $(this).data(metadata.value) || $(this).html()
value = $(this).data(metadata.value) || $(this).text()
;
module.verbose('Determining select action');
if( $.isFunction( module.action[settings.action] ) {
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);
}
}
@ -105,10 +118,10 @@ $.fn.dropdown = function(parameters) {
intent: {
test: function(event) {
module.debug('Checking if click was inside the dropdown', event.target);
test: function(event, callback) {
module.debug('Determining whether event occurred in dropdown', event.target);
if( $(event.target).closest($menu).size() == 0 ) {
module.toggle();
callback();
event.stopPropagation();
}
},
@ -116,7 +129,9 @@ $.fn.dropdown = function(parameters) {
bind: function() {
module.verbose('Binding hide intent event to document');
$(document)
.on('click', module.intent.test)
.on('click', function(event) {
module.intent.test(event, module.hide);
})
;
},
@ -133,32 +148,32 @@ $.fn.dropdown = function(parameters) {
nothing: function() {},
close: function() {
hide: function() {
module.hide();
},
changeText: function(value) {
module.debug('Changing text', value);
$text.text(value);
module.hide();
},
form: function(value) {
module.debug('Adding selected value to hidden input', value);
$text.text(value);
$input.val(value);
module.hide();
}
}
get: {
},
event: function() {
if(isTouchDevice) {
return 'touchstart';
}
if(settings.on == 'hover') {
return 'hover';
}
else if(settings.on == 'click') {
return 'click';
}
is: {
visible: function() {
return $menu.is(':visible');
},
hidden: function() {
return $menu.is(':not(:visible)');
}
},
can: {
@ -172,6 +187,7 @@ $.fn.dropdown = function(parameters) {
animate: {
show: function() {
module.verbose('Doing menu showing animation');
if(animation.show == 'show') {
$menu
.show()
@ -179,7 +195,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 0)
.delay(100)
.animate({
@ -191,6 +209,7 @@ $.fn.dropdown = function(parameters) {
}
},
hide: function() {
module.verbose('Doing menu hiding animation');
if(animation.hide == 'hide') {
$menu
.hide()
@ -198,7 +217,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 1)
.animate({
opacity : 0
@ -212,33 +233,42 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
}
$.proxy(settings.onShow, $menu.get())();
}
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
}
module.animate.hide();
$.proxy(settings.onHide, $menu.get())();
}
module.animate.hide();
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show() && $menu.is(':not(:visible)') ) {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
module.show();
}
else {
@ -398,21 +428,23 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : false,
action: 'close',
animation: {
action : 'hide',
animation : {
show: 'slide',
hide: 'slide'
},
on : 'click',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
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.'
},
@ -422,9 +454,10 @@ $.fn.dropdown.settings = {
},
selector : {
input : 'input[type="hidden"]',
menu : '.menu'
item : '.menu > .item'
menu : '.menu',
item : '.menu > .item',
text : '> .text',
input : '> input[type="hidden"]',
},
className : {

4
node/src/documents/collections/form.html
View File

@ -12,9 +12,9 @@ type : 'UI Collection'
<p>
Forms always include fields, and fields always contain form elements. Fields themselves may also include:
<a href="#">standard form fields</a>, like labels, inputs and textareas, as well as:
<a href="#">checkboxes</a>,
<a href="/modules/checkbox.html">checkboxes</a>,
<a href="#">sliders</a>, and
<a href="#">message blocks</a>.
<a href="/elements/message.html">message blocks</a>.
</p>
<p>Validation messages are <a href="#">text blocks</a> which are formatted for use inside forms.</p>
</div>

42
node/src/documents/collections/menu.html
View File

@ -44,9 +44,9 @@ type : 'UI Collection'
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -73,12 +73,12 @@ type : 'UI Collection'
<div class="item">
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="ui simple dropdown item">
<div class="ui simple right arrow">
More <i class="icon right triangle"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -106,9 +106,9 @@ type : 'UI Collection'
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -143,11 +143,11 @@ type : 'UI Collection'
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
More <i class="icon right triangle"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -175,9 +175,9 @@ type : 'UI Collection'
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -202,9 +202,9 @@ type : 'UI Collection'
<div class="ui simple dropdown item">
More <i class="icon right triangle"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
<div class="item"><i class="icon settings"></i> Account Settings</div>
<a class="item"><i class="icon edit"></i> Edit Profile</a>
<a class="item"><i class="icon globe"></i> Choose Language</a>
<a class="item"><i class="icon settings"></i> Account Settings</a>
</div>
</div>
</div>
@ -239,7 +239,7 @@ type : 'UI Collection'
</div>
<div class="example">
<p>A pointing menu can also be vertical</p>
<div class="ui vertical pointing secondary menu">
<div class="ui vertical pointing menu">
<a class="active item">
<i class="icon home"></i> Home
</a>

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

@ -7,14 +7,14 @@ type : 'UI Element'
---
<div class="segment">
<div class="container">
<div class="ui secondary download menu">
<div class="header item">Download:</div>
<div class="ui small download menu">
<a class="item"><i class="icon setting"></i> Uncompressed</a>
<a class="item"><i class="icon cloud"></i> Minified</a>
<a class="item"><i class="icon doc"></i> Authoring Guide</a>
</div>
<h1 class="ui dividing header">Button</h1>
<p>Buttons indicate a possible user action.</p>
<h1 class="ui header">
Button
<div class="sub header">Buttons indicate a possible user action.</div>
</h1>
</div>
</div>
<div class="main container">

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

@ -47,7 +47,8 @@ type : 'UI Module'
<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">
<i class="down settings icon"></i> Settings
<i class="down settings icon"></i>
<span class="text">Settings</span>
<div class="menu">
<div class="item"><i class="edit icon"></i>Edit</div>
<div class="item"><i class="delete icon"></i>Remove</div>

38
node/src/files/components/semantic/collections/menu.css
View File

@ -46,7 +46,7 @@
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
vertical-align: middle;
line-height: 1.25em;
line-height: 1em;
min-height: 1.25em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -175,15 +175,12 @@
---------------*/
.ui.menu .header.item {
background-color: rgba(0, 0, 0, 0.04);
font-weight: bold;
margin: 0em;
-webkit-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
}
.ui.vertical.menu .header.item {
padding-top: 1em;
padding-bottom: 1em;
font-weight: bold;
-webkit-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
@ -288,8 +285,10 @@
.ui.vertical.menu .active.item .menu .active.item {
border-left: none;
}
.ui.vertical.menu .active.item .menu .active.item {
padding-left: 1.5rem;
}
.ui.vertical.menu .item .menu .active.item {
padding-top: 0.5rem;
padding-left: 1.3rem;
}
/*--------------
@ -322,7 +321,7 @@
.ui.vertical.menu .item > .icon {
float: right;
width: 1.22em;
margin: 0.2em 0em 0em 0.5em;
margin: 0em 0em 0em 0.5em;
}
/*--- Border ---*/
.ui.vertical.menu .item:before {
@ -348,9 +347,15 @@
.ui.vertical.menu .dropdown.item .menu {
top: 0%;
left: 100%;
margin: 0em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ui.vertical.menu .dropdown.item .menu .item {
font-size: 1em;
font-size: 0.9em;
padding: 0.75em 1em;
}
.ui.vertical.menu .dropdown.item .menu .item .icon {
margin-right: 0em;
}
/*--- Sub Menu ---*/
.ui.vertical.menu .item > .menu {
@ -728,7 +733,7 @@
box-shadow: none;
border: none;
margin: 0em 0.25em;
padding: 0.4em 1em;
padding: 0.5em 1em;
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
border-radius: 0.325em;
@ -747,6 +752,8 @@
.ui.secondary.menu > .active.item {
border-top: none;
background-color: rgba(0, 0, 0, 0.08);
}
.ui.secondary.vertical.menu > .active.item {
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
border-radius: 0.325em;
@ -811,6 +818,11 @@
-moz-border-radius: 0.325em;
border-radius: 0.325em;
}
.ui.secondary.vertical.menu > .header.item {
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em;
-webkit-border-radius: 0em;
@ -1125,19 +1137,18 @@
---------------*/
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
padding: 0.5em 0.75em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
margin: -0.5em -0.75em;
padding: 0.5em 0.75em;
}
.ui.tiny.vertical.menu {
width: 9rem;
}
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;
}
.ui.small.vertical.menu {
width: 13rem;
@ -1150,7 +1161,6 @@
}
.ui.large.menu .item {
font-size: 1.125rem;
min-height: 1.35em;
}
.ui.large.vertical.menu {
width: 18rem;

14
node/src/files/components/semantic/modules/checkbox.js
View File

@ -66,6 +66,13 @@ $.fn.checkbox = function(parameters) {
}
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
;
},
is: {
radio: function() {
return $module
@ -83,13 +90,6 @@ $.fn.checkbox = function(parameters) {
}
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
;
},
enable: function() {
module.debug('Enabling checkbox');
$module

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

@ -16,7 +16,6 @@
position: relative;
display: inline-block;
line-height: 1;
white-space: nowrap;
-webkit-transition: border-radius 0.1s ease;
-moz-transition: border-radius 0.1s ease;
-o-transition: border-radius 0.1s ease;
@ -29,6 +28,7 @@
top: 100%;
background-color: #FFFFFF;
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
@ -46,6 +46,7 @@
.ui.dropdown .menu {
left: 0px;
}
.ui.menu .dropdown:last-child .menu,
.ui > .ui.dropdown:last-child .menu {
left: auto;
right: 0px;
@ -106,8 +107,7 @@
.ui.simple.dropdown:hover .menu {
display: block;
overflow: visible;
min-width: 210px;
width: 100%;
width: auto;
height: auto;
opacity: 1;
}

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

@ -34,6 +34,9 @@ $.fn.dropdown = function(parameters) {
var
$module = $(this),
$menu = $(this).find(settings.selector.menu),
$item = $(this).find(settings.selector.item),
$text = $(this).find(settings.selector.text),
$input = $(this).find(settings.selector.input),
isTouchDevice = ('ontouchstart' in document.documentElement),
@ -42,9 +45,10 @@ $.fn.dropdown = function(parameters) {
instance = $module.data('module-' + settings.namespace),
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
animation = settings.animation,
errors = settings.errors,
module
;
@ -52,31 +56,72 @@ $.fn.dropdown = function(parameters) {
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
module.verbose('Initializing dropdown with bound events', $module);
console.log(settings.on);
if(isTouchDevice) {
$module
.on('touchstart' + eventNamespace, module.toggle)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
else if(settings.on == 'click') {
$module
.on(module.get.event() + eventNamespace, module.intent.test)
.on('click' + eventNamespace, module.toggle)
;
}
else if(settings.on == 'hover') {
$module
.data(moduleNamespace, module)
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.delayedHide)
;
}
$item
.on('click' + eventNamespace, module.event.item.click)
;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
;
},
event: {
item: {
click: function () {
var
value = $(this).data(metadata.value) || $(this).text()
;
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);
}
}
},
intent: {
test: function(event) {
module.debug('Checking if click was inside the dropdown', event.target);
test: function(event, callback) {
module.debug('Determining whether event occurred in dropdown', event.target);
if( $(event.target).closest($menu).size() == 0 ) {
module.toggle();
callback();
event.stopPropagation();
}
},
@ -84,7 +129,9 @@ $.fn.dropdown = function(parameters) {
bind: function() {
module.verbose('Binding hide intent event to document');
$(document)
.on('click', module.intent.test)
.on('click', function(event) {
module.intent.test(event, module.hide);
})
;
},
@ -97,22 +144,38 @@ $.fn.dropdown = function(parameters) {
},
get: {
action: {
event: function() {
if(isTouchDevice) {
return 'touchstart';
}
if(settings.on == 'hover') {
return 'hover';
}
else if(settings.on == 'click') {
return 'click';
}
nothing: function() {},
hide: function() {
module.hide();
},
changeText: function(value) {
module.debug('Changing text', value);
$text.text(value);
module.hide();
},
form: function(value) {
module.debug('Adding selected value to hidden input', value);
$text.text(value);
$input.val(value);
module.hide();
}
},
is: {
visible: function() {
return $menu.is(':visible');
},
hidden: function() {
return $menu.is(':not(:visible)');
}
},
can: {
click: function() {
return (isTouchDevice || settings.on == 'click');
@ -122,15 +185,9 @@ $.fn.dropdown = function(parameters) {
}
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.off(namespace)
;
},
animate: {
show: function() {
module.verbose('Doing menu showing animation');
if(animation.show == 'show') {
$menu
.show()
@ -138,7 +195,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 0)
.delay(100)
.animate({
@ -150,6 +209,7 @@ $.fn.dropdown = function(parameters) {
}
},
hide: function() {
module.verbose('Doing menu hiding animation');
if(animation.hide == 'hide') {
$menu
.hide()
@ -157,7 +217,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 1)
.animate({
opacity : 0
@ -171,33 +233,42 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
}
$.proxy(settings.onShow, $menu.get())();
}
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
}
module.animate.hide();
$.proxy(settings.onHide, $menu.get())();
}
module.animate.hide();
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show() && $menu.is(':not(:visible)') ) {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
module.show();
}
else {
@ -357,26 +428,36 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : false,
action: 'close',
animation: {
action : 'hide',
animation : {
show: 'slide',
hide: 'slide'
},
on : 'click',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
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'
menu : '.menu',
item : '.menu > .item',
text : '> .text',
input : '> input[type="hidden"]',
},
className : {

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

@ -17,9 +17,6 @@ semantic.dropdown.ready = function() {
};
$select
.dropdown()
;
$hover
.dropdown({
on: 'hover'
})

20
node/src/files/stylesheets/semantic.css
View File

@ -255,13 +255,13 @@ a:hover {
#example > .content > .page > .segment,
#example > .segment {
margin: 0px 0px 46px;
padding-top: 65px;
padding-top: 45px;
padding-bottom: 20px;
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
}
#example .download.menu {
margin-top: 5px;
margin-top: 15px;
float: right;
}
@ -414,6 +414,13 @@ a:hover {
#example .main.container {
position: relative;
}
#example .main.container > h2 {
-webkit-transition: 0.5s color ease;
-moz-transition: 0.5s color ease;
-o-transition: 0.5s color ease;
-ms-transition: 0.5s color ease;
transition: 0.5s color ease;
}
#example .swap {
background: url(http://beta.myfav.es/images/themes/bg/subtle/subtle-handmade-paper.png) repeat;
}
@ -519,23 +526,14 @@ a:hover {
box-shadow: 0.2em 0em 0em #00B9F0;
color: #00B9F0;
}
#example .main h2.standard {
color: #00B9F0;
}
#example .peek .menu .active:nth-child(2) {
box-shadow: 0.2em 0em 0em #56BB73;
color: #56BB73;
}
#example .main h2.states {
color: #56BB73;
}
#example .peek .menu .active:nth-child(3) {
box-shadow: 0.2em 0em 0em #EF3F49;
color: #EF3F49;
}
#example .main h2.variations {
color: #EF3F49;
}
#example .peek .menu .active:nth-child(4) {
box-shadow: 0.2em 0em 0em #A24096;
color: #A24096;

6
node/src/layouts/default.html.eco
View File

@ -145,14 +145,14 @@
</div>
<div class="right menu">
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer item" title="Designer Mode">
<a class="popup designer icon item" title="Designer Mode">
<i class="icon paint"></i>
</a>
<a class="popup developer item" title="Developer Mode">
<a class="popup developer icon item" title="Developer Mode">
<i class="icon terminal"></i>
</a>
<% end %>
<a class="popup item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
<a class="popup icon item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<!--

38
src/collections/menu.less
View File

@ -58,7 +58,7 @@
vertical-align: middle;
line-height: 1.25em;
line-height: 1em;
min-height: 1.25em;
-webkit-box-sizing: border-box;
@ -248,15 +248,12 @@
.ui.menu .header.item {
background-color: rgba(0, 0, 0, 0.04);
font-weight: bold;
margin: 0em;
-webkit-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: -0.1em 0em 0em 0em rgba(0, 0, 0, 0.1) inset;
}
.ui.vertical.menu .header.item {
padding-top: 1em;
padding-bottom: 1em;
font-weight: bold;
-webkit-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.1em 0em 0em rgba(0, 0, 0, 0.1) inset;
@ -386,8 +383,10 @@
.ui.vertical.menu .active.item .menu .active.item {
border-left: none;
}
.ui.vertical.menu .active.item .menu .active.item {
padding-left: 1.5rem;
}
.ui.vertical.menu .item .menu .active.item {
padding-top: 0.5rem;
padding-left: 1.3rem;
}
@ -427,7 +426,7 @@
.ui.vertical.menu .item > .icon {
float: right;
width: 1.22em;
margin: 0.2em 0em 0em 0.5em;
margin: 0em 0em 0em 0.5em;
}
/*--- Border ---*/
@ -476,9 +475,15 @@
.ui.vertical.menu .dropdown.item .menu {
top: 0%;
left: 100%;
margin: 0em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ui.vertical.menu .dropdown.item .menu .item {
font-size: 1em;
font-size: 0.9em;
padding: 0.75em 1em;
}
.ui.vertical.menu .dropdown.item .menu .item .icon {
margin-right: 0em;
}
/*--- Sub Menu ---*/
@ -957,7 +962,7 @@
border: none;
margin: 0em 0.25em;
padding: 0.4em 1em;
padding: 0.5em 1em;
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
@ -981,6 +986,8 @@
.ui.secondary.menu > .active.item {
border-top: none;
background-color: rgba(0, 0, 0, 0.08);
}
.ui.secondary.vertical.menu > .active.item {
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
border-radius: 0.325em;
@ -1058,6 +1065,11 @@
-moz-border-radius: 0.325em;
border-radius: 0.325em;
}
.ui.secondary.vertical.menu > .header.item {
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em;
-webkit-border-radius: 0em;
@ -1427,12 +1439,12 @@
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
padding: 0.5em 0.75em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
margin: -0.5em -0.75em;
padding: 0.5em 0.75em;
}
.ui.tiny.vertical.menu {
width: 9rem;
@ -1440,7 +1452,6 @@
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;
}
.ui.small.vertical.menu {
width: 13rem;
@ -1456,7 +1467,6 @@
.ui.large.menu .item {
font-size: 1.125rem;
min-height: 1.35em;
}
.ui.large.vertical.menu {
width: 18rem;

167
src/modules/dropdown.js
View File

@ -35,7 +35,8 @@ $.fn.dropdown = function(parameters) {
$module = $(this),
$menu = $(this).find(settings.selector.menu),
$item = $(this).find(settings.selector.item),
$input = $(this).find(settings.selector.input)
$text = $(this).find(settings.selector.text),
$input = $(this).find(settings.selector.input),
isTouchDevice = ('ontouchstart' in document.documentElement),
@ -44,9 +45,10 @@ $.fn.dropdown = function(parameters) {
instance = $module.data('module-' + settings.namespace),
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
animation = settings.animation,
errors = settings.errors,
module
;
@ -54,25 +56,31 @@ $.fn.dropdown = function(parameters) {
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
module.verbose('Initializing dropdown with bound events', $module);
console.log(settings.on);
if(isTouchDevice) {
$module
.on('touchstart' + eventNamespace, module.toggle)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
else if(settings.on == 'click') {
$module
.on(module.get.event() + eventNamespace, module.intent.test)
;
$item
.on('click' + eventNamespace, module.event.select)
.on('click' + eventNamespace, module.toggle)
;
}
else if(settings.on == 'hover') {
$module
.data(moduleNamespace, module)
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.delayedHide)
;
}
$item
.on('click' + eventNamespace, module.event.item.click)
;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
@ -88,15 +96,20 @@ $.fn.dropdown = function(parameters) {
click: function () {
var
value = $(this).data(metadata.value) || $(this).html()
value = $(this).data(metadata.value) || $(this).text()
;
module.verbose('Determining select action');
if( $.isFunction( module.action[settings.action] ) {
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);
}
}
@ -105,10 +118,10 @@ $.fn.dropdown = function(parameters) {
intent: {
test: function(event) {
module.debug('Checking if click was inside the dropdown', event.target);
test: function(event, callback) {
module.debug('Determining whether event occurred in dropdown', event.target);
if( $(event.target).closest($menu).size() == 0 ) {
module.toggle();
callback();
event.stopPropagation();
}
},
@ -116,7 +129,9 @@ $.fn.dropdown = function(parameters) {
bind: function() {
module.verbose('Binding hide intent event to document');
$(document)
.on('click', module.intent.test)
.on('click', function(event) {
module.intent.test(event, module.hide);
})
;
},
@ -133,32 +148,32 @@ $.fn.dropdown = function(parameters) {
nothing: function() {},
close: function() {
hide: function() {
module.hide();
},
changeText: function(value) {
module.debug('Changing text', value);
$text.text(value);
module.hide();
},
form: function(value) {
module.debug('Adding selected value to hidden input', value);
$text.text(value);
$input.val(value);
module.hide();
}
}
get: {
},
event: function() {
if(isTouchDevice) {
return 'touchstart';
}
if(settings.on == 'hover') {
return 'hover';
}
else if(settings.on == 'click') {
return 'click';
}
is: {
visible: function() {
return $menu.is(':visible');
},
hidden: function() {
return $menu.is(':not(:visible)');
}
},
can: {
@ -172,6 +187,7 @@ $.fn.dropdown = function(parameters) {
animate: {
show: function() {
module.verbose('Doing menu showing animation');
if(animation.show == 'show') {
$menu
.show()
@ -179,7 +195,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 0)
.delay(100)
.animate({
@ -191,6 +209,7 @@ $.fn.dropdown = function(parameters) {
}
},
hide: function() {
module.verbose('Doing menu hiding animation');
if(animation.hide == 'hide') {
$menu
.hide()
@ -198,7 +217,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'slide') {
$menu
.clearQueue()
.children()
.clearQueue()
.css('opacity', 1)
.animate({
opacity : 0
@ -212,33 +233,42 @@ $.fn.dropdown = function(parameters) {
},
show: function() {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
clearTimeout(module.graceTimer);
if( !module.is.visible() ) {
module.debug('Showing dropdown');
$module
.addClass(className.active)
;
module.animate.show();
if( module.can.click() ) {
module.intent.bind();
}
$.proxy(settings.onShow, $menu.get())();
}
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
delayedHide: function() {
module.verbose('User moused away setting timer to hide dropdown');
module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
},
hide: function() {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
if( !module.is.hidden() ) {
module.debug('Hiding dropdown');
$module
.removeClass(className.active)
;
if( module.can.click() ) {
module.intent.unbind();
}
module.animate.hide();
$.proxy(settings.onHide, $menu.get())();
}
module.animate.hide();
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show() && $menu.is(':not(:visible)') ) {
module.verbose('Toggling menu visibility');
if(module.can.show()) {
module.show();
}
else {
@ -398,21 +428,23 @@ $.fn.dropdown.settings = {
verbose : true,
debug : true,
performance : false,
action: 'close',
animation: {
action : 'hide',
animation : {
show: 'slide',
hide: 'slide'
},
on : 'click',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
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.'
},
@ -422,9 +454,10 @@ $.fn.dropdown.settings = {
},
selector : {
input : 'input[type="hidden"]',
menu : '.menu'
item : '.menu > .item'
menu : '.menu',
item : '.menu > .item',
text : '> .text',
input : '> input[type="hidden"]',
},
className : {

6
src/modules/dropdown.less
View File

@ -20,7 +20,6 @@
display: inline-block;
line-height: 1;
white-space: nowrap;
-webkit-transition: border-radius 0.1s ease;
-moz-transition: border-radius 0.1s ease;
@ -35,6 +34,7 @@
top: 100%;
background-color: #FFFFFF;
min-width: 100%;
white-space: nowrap;
-webkit-box-shadow:
0px 2px 0px 0px rgba(0, 0, 0, 0.1),
@ -70,6 +70,7 @@
.ui.dropdown .menu {
left: 0px;
}
.ui.menu .dropdown:last-child .menu,
.ui > .ui.dropdown:last-child .menu {
left: auto;
right: 0px;
@ -142,8 +143,7 @@
.ui.simple.dropdown:hover .menu {
display: block;
overflow: visible;
min-width: 210px;
width: 100%;
width: auto;
height: auto;
opacity: 1;
}

Write Preview
Loading…
Cancel
Save