From c5560006f809067e74537ae5679b8a4fab0147c7 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 10 Aug 2013 11:45:02 -0400 Subject: [PATCH] Dropdown: Fixes positioning, adds example of icon toolbar. Fixes destroy method --- build/minified/modules/carousel.js | 2 +- build/minified/modules/dropdown.js | 58 ++++++------------- build/minified/modules/sidebar.js | 2 +- build/packaged/modules/carousel.js | 2 +- build/packaged/modules/dropdown.js | 58 ++++++------------- build/packaged/modules/sidebar.js | 2 +- build/uncompressed/modules/carousel.js | 2 +- build/uncompressed/modules/dropdown.css | 32 +++++----- build/uncompressed/modules/dropdown.js | 58 ++++++------------- build/uncompressed/modules/sidebar.js | 2 +- node/package.json | 3 + node/src/documents/guide/cssguide.html | 32 ++++++++++ node/src/documents/modules/dropdown.html | 39 ++++++++++--- .../components/semantic/modules/carousel.js | 2 +- .../components/semantic/modules/dropdown.css | 32 +++++----- .../components/semantic/modules/dropdown.js | 58 ++++++------------- .../components/semantic/modules/sidebar.js | 2 +- node/src/files/javascript/dropdown.js | 2 +- src/modules/carousel.js | 2 +- src/modules/dropdown.js | 58 ++++++------------- src/modules/dropdown.less | 34 +++++------ src/modules/sidebar.js | 2 +- 22 files changed, 209 insertions(+), 275 deletions(-) diff --git a/build/minified/modules/carousel.js b/build/minified/modules/carousel.js index ee59c048f..93f770ef4 100644 --- a/build/minified/modules/carousel.js +++ b/build/minified/modules/carousel.js @@ -69,7 +69,7 @@ $.fn.carousel = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) ; }, diff --git a/build/minified/modules/dropdown.js b/build/minified/modules/dropdown.js index 2fdcc2cf4..acd0d079d 100644 --- a/build/minified/modules/dropdown.js +++ b/build/minified/modules/dropdown.js @@ -20,13 +20,12 @@ $.fn.dropdown = function(parameters) { metadata = settings.metadata, namespace = settings.namespace, selector = settings.selector, - error = settings.error, + errors = settings.errors, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - isTouchDevice = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], @@ -45,6 +44,8 @@ $.fn.dropdown = function(parameters) { $text = $(this).find(selector.text), $input = $(this).find(selector.input), + isTouchDevice = ('ontouchstart' in document.documentElement), + element = this, instance = $module.data(moduleNamespace), module @@ -53,7 +54,7 @@ $.fn.dropdown = function(parameters) { module = { initialize: function() { - module.debug('Initializing dropdown with bound events', $module); + module.debug('Initializing dropdown', $module); if(isTouchDevice) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) @@ -93,8 +94,11 @@ $.fn.dropdown = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + $item + .off(eventNamespace) + ; $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, @@ -186,7 +190,7 @@ $.fn.dropdown = function(parameters) { settings.action(text, value); } else { - module.error(error.action); + module.error(errors.action); } }, @@ -334,7 +338,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } }, hide: function(callback) { @@ -376,7 +380,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } } }, @@ -542,8 +546,7 @@ $.fn.dropdown = function(parameters) { invoke: function(query, passedArguments, context) { var maxDepth, - found, - response + found ; passedArguments = passedArguments || queryArguments; context = element || context; @@ -551,46 +554,21 @@ $.fn.dropdown = function(parameters) { query = query.split(/[\. ]/); maxDepth = query.length - 1; $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { instance = instance[value]; } - else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { - instance = instance[camelCaseValue]; - } else if( instance[value] !== undefined ) { found = instance[value]; - return false; - } - else if( instance[camelCaseValue] !== undefined ) { - found = instance[camelCaseValue]; - return false; } else { - module.error(error.method); - return false; + module.error(errors.method); } }); } if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(invokedResponse)) { - invokedResponse.push(response); - } - else if(typeof invokedResponse == 'string') { - invokedResponse = [invokedResponse, response]; - } - else if(response !== undefined) { - invokedResponse = response; + return found.apply(context, passedArguments); } - return found; + return found || false; } }; @@ -598,7 +576,7 @@ $.fn.dropdown = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + invokedResponse = module.invoke(query); } else { if(instance !== undefined) { @@ -609,7 +587,7 @@ $.fn.dropdown = function(parameters) { }) ; - return (invokedResponse !== undefined) + return (invokedResponse) ? invokedResponse : this ; @@ -639,7 +617,7 @@ $.fn.dropdown.settings = { onShow : function(){}, onHide : function(){}, - error : { + errors : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', animation : 'The requested animation was not found' diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js index 1ec702fbf..fb8785cf4 100644 --- a/build/minified/modules/sidebar.js +++ b/build/minified/modules/sidebar.js @@ -60,7 +60,7 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, diff --git a/build/packaged/modules/carousel.js b/build/packaged/modules/carousel.js index ee59c048f..93f770ef4 100644 --- a/build/packaged/modules/carousel.js +++ b/build/packaged/modules/carousel.js @@ -69,7 +69,7 @@ $.fn.carousel = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) ; }, diff --git a/build/packaged/modules/dropdown.js b/build/packaged/modules/dropdown.js index 2fdcc2cf4..acd0d079d 100644 --- a/build/packaged/modules/dropdown.js +++ b/build/packaged/modules/dropdown.js @@ -20,13 +20,12 @@ $.fn.dropdown = function(parameters) { metadata = settings.metadata, namespace = settings.namespace, selector = settings.selector, - error = settings.error, + errors = settings.errors, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - isTouchDevice = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], @@ -45,6 +44,8 @@ $.fn.dropdown = function(parameters) { $text = $(this).find(selector.text), $input = $(this).find(selector.input), + isTouchDevice = ('ontouchstart' in document.documentElement), + element = this, instance = $module.data(moduleNamespace), module @@ -53,7 +54,7 @@ $.fn.dropdown = function(parameters) { module = { initialize: function() { - module.debug('Initializing dropdown with bound events', $module); + module.debug('Initializing dropdown', $module); if(isTouchDevice) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) @@ -93,8 +94,11 @@ $.fn.dropdown = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + $item + .off(eventNamespace) + ; $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, @@ -186,7 +190,7 @@ $.fn.dropdown = function(parameters) { settings.action(text, value); } else { - module.error(error.action); + module.error(errors.action); } }, @@ -334,7 +338,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } }, hide: function(callback) { @@ -376,7 +380,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } } }, @@ -542,8 +546,7 @@ $.fn.dropdown = function(parameters) { invoke: function(query, passedArguments, context) { var maxDepth, - found, - response + found ; passedArguments = passedArguments || queryArguments; context = element || context; @@ -551,46 +554,21 @@ $.fn.dropdown = function(parameters) { query = query.split(/[\. ]/); maxDepth = query.length - 1; $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { instance = instance[value]; } - else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { - instance = instance[camelCaseValue]; - } else if( instance[value] !== undefined ) { found = instance[value]; - return false; - } - else if( instance[camelCaseValue] !== undefined ) { - found = instance[camelCaseValue]; - return false; } else { - module.error(error.method); - return false; + module.error(errors.method); } }); } if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(invokedResponse)) { - invokedResponse.push(response); - } - else if(typeof invokedResponse == 'string') { - invokedResponse = [invokedResponse, response]; - } - else if(response !== undefined) { - invokedResponse = response; + return found.apply(context, passedArguments); } - return found; + return found || false; } }; @@ -598,7 +576,7 @@ $.fn.dropdown = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + invokedResponse = module.invoke(query); } else { if(instance !== undefined) { @@ -609,7 +587,7 @@ $.fn.dropdown = function(parameters) { }) ; - return (invokedResponse !== undefined) + return (invokedResponse) ? invokedResponse : this ; @@ -639,7 +617,7 @@ $.fn.dropdown.settings = { onShow : function(){}, onHide : function(){}, - error : { + errors : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', animation : 'The requested animation was not found' diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js index 1ec702fbf..fb8785cf4 100644 --- a/build/packaged/modules/sidebar.js +++ b/build/packaged/modules/sidebar.js @@ -60,7 +60,7 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, diff --git a/build/uncompressed/modules/carousel.js b/build/uncompressed/modules/carousel.js index ee59c048f..93f770ef4 100644 --- a/build/uncompressed/modules/carousel.js +++ b/build/uncompressed/modules/carousel.js @@ -69,7 +69,7 @@ $.fn.carousel = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) ; }, diff --git a/build/uncompressed/modules/dropdown.css b/build/uncompressed/modules/dropdown.css index 103ccb6f7..fe754589a 100644 --- a/build/uncompressed/modules/dropdown.css +++ b/build/uncompressed/modules/dropdown.css @@ -91,17 +91,20 @@ /******************************* States *******************************/ -.ui.dropdown.visible { +/* Dropdown Visible */ +.ui.visible.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.dropdown.visible .menu { +.ui.visible.dropdown .menu { display: block; } +/* Menu Item Hover */ .ui.dropdown .menu .item:hover { background-color: rgba(0, 0, 0, 0.02); z-index: 12; } +/* Menu Item Active */ .ui.dropdown .menu .active.item { background-color: rgba(0, 0, 0, 0.04); border-left: none; @@ -139,12 +142,12 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } -.ui.simple.dropdown.visible, +.ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.simple.dropdown.visible .menu, +.ui.simple.active.dropdown .menu, .ui.simple.dropdown:hover .menu { overflow: visible; width: auto; @@ -226,15 +229,15 @@ opacity: 1; } /* Visible */ -.ui.selection.dropdown.visible { +.ui.selection.active.dropdown { -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; border-radius: 0.3125em 0.3125em 0em 0em !important; } -.ui.selection.dropdown.visible > .dropdown.icon { +.ui.selection.active.dropdown > .dropdown.icon { opacity: 1; } -.ui.selection.dropdown.visible .menu { +.ui.selection.active.dropdown .menu { -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; box-shadow: 0px 1px 0px 1px #D3D3D3; @@ -295,7 +298,7 @@ } .ui.top.left.pointing.dropdown .menu:after { top: -0.25em; - left: 1em; + left: 1.25em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); @@ -312,7 +315,7 @@ .ui.top.right.pointing.dropdown .menu:after { top: -0.25em; left: auto; - right: 1em; + right: 1.25em; margin: 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -327,7 +330,7 @@ .ui.left.pointing.dropdown .menu:after { top: 1em; left: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); @@ -342,15 +345,8 @@ top: 1em; left: auto; right: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } -/* States */ -.ui.pointing.dropdown.visible, -.ui.pointing.dropdown.visible .menu { - -moz-border-radius: 0.325em !important; - -webkit-border-radius: 0.325em !important; - border-radius: 0.325em !important; -} diff --git a/build/uncompressed/modules/dropdown.js b/build/uncompressed/modules/dropdown.js index 2fdcc2cf4..acd0d079d 100644 --- a/build/uncompressed/modules/dropdown.js +++ b/build/uncompressed/modules/dropdown.js @@ -20,13 +20,12 @@ $.fn.dropdown = function(parameters) { metadata = settings.metadata, namespace = settings.namespace, selector = settings.selector, - error = settings.error, + errors = settings.errors, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - isTouchDevice = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], @@ -45,6 +44,8 @@ $.fn.dropdown = function(parameters) { $text = $(this).find(selector.text), $input = $(this).find(selector.input), + isTouchDevice = ('ontouchstart' in document.documentElement), + element = this, instance = $module.data(moduleNamespace), module @@ -53,7 +54,7 @@ $.fn.dropdown = function(parameters) { module = { initialize: function() { - module.debug('Initializing dropdown with bound events', $module); + module.debug('Initializing dropdown', $module); if(isTouchDevice) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) @@ -93,8 +94,11 @@ $.fn.dropdown = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + $item + .off(eventNamespace) + ; $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, @@ -186,7 +190,7 @@ $.fn.dropdown = function(parameters) { settings.action(text, value); } else { - module.error(error.action); + module.error(errors.action); } }, @@ -334,7 +338,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } }, hide: function(callback) { @@ -376,7 +380,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } } }, @@ -542,8 +546,7 @@ $.fn.dropdown = function(parameters) { invoke: function(query, passedArguments, context) { var maxDepth, - found, - response + found ; passedArguments = passedArguments || queryArguments; context = element || context; @@ -551,46 +554,21 @@ $.fn.dropdown = function(parameters) { query = query.split(/[\. ]/); maxDepth = query.length - 1; $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { instance = instance[value]; } - else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { - instance = instance[camelCaseValue]; - } else if( instance[value] !== undefined ) { found = instance[value]; - return false; - } - else if( instance[camelCaseValue] !== undefined ) { - found = instance[camelCaseValue]; - return false; } else { - module.error(error.method); - return false; + module.error(errors.method); } }); } if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(invokedResponse)) { - invokedResponse.push(response); - } - else if(typeof invokedResponse == 'string') { - invokedResponse = [invokedResponse, response]; - } - else if(response !== undefined) { - invokedResponse = response; + return found.apply(context, passedArguments); } - return found; + return found || false; } }; @@ -598,7 +576,7 @@ $.fn.dropdown = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + invokedResponse = module.invoke(query); } else { if(instance !== undefined) { @@ -609,7 +587,7 @@ $.fn.dropdown = function(parameters) { }) ; - return (invokedResponse !== undefined) + return (invokedResponse) ? invokedResponse : this ; @@ -639,7 +617,7 @@ $.fn.dropdown.settings = { onShow : function(){}, onHide : function(){}, - error : { + errors : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', animation : 'The requested animation was not found' diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js index 1ec702fbf..fb8785cf4 100644 --- a/build/uncompressed/modules/sidebar.js +++ b/build/uncompressed/modules/sidebar.js @@ -60,7 +60,7 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, diff --git a/node/package.json b/node/package.json index 86efcc3e2..2452c0c70 100755 --- a/node/package.json +++ b/node/package.json @@ -2,5 +2,8 @@ "semantic": { "name": "Semantic UI", "version": 0.1 + }, + "dependencies": { + "docpad": "~6.48.1" } } diff --git a/node/src/documents/guide/cssguide.html b/node/src/documents/guide/cssguide.html index aa2264c03..42f78f084 100755 --- a/node/src/documents/guide/cssguide.html +++ b/node/src/documents/guide/cssguide.html @@ -340,6 +340,38 @@ type : 'UI Guide' } +

Centering Content with Transform

+

Using percentages in CSS will give you a ratio based on the size of the parent element. For exaple setting content to be left 50% will set content to start at exactly halfway across its parent.

Sometimes you want content to positioned relative to its own size. Inside calls to transform, percentages are based on the current element size so this can be done.

+
+ + /* doesnt work */ + .ui.modal { + width: 800px; + height: 500px; + left: 50%; + top: 50%; + margin: -50% 0px 0px -50%x; + } + + /* works with measurements */ + .ui.modal { + width: 800px; + height: 500px; + left: 50%; + top: 50%; + margin: -250px 0px 0px -400px; + } + + /* with transform no measurements needed */ + .ui.modal { + position: absolute; + width: 800px; + top: 50%; + left: 50%; + transform: transformX(-50%) transformY(-50%); + } +
+

Consider alternatives to floats

CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.

Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.

diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html index e193f9374..37fb4b3e7 100755 --- a/node/src/documents/modules/dropdown.html +++ b/node/src/documents/modules/dropdown.html @@ -42,16 +42,36 @@ type : 'UI Module' +
+

Icon Menu Dropdown

+

Button Dropdown

-

A button can be formatted to open a dropdown

-
- - Settings -
-
Edit
-
Remove
-
Hide
+

An icon toolbar can be formatted as a dropdown

+
+
+ +
+
Edit User
+
Remove User
+
Make Invisible
+
+
+
+ +
+
Edit Group
+
Remove Group
+
Hide from Group
+
+
+
+ +
+
Edit
+
Remove
+
Hide
+
@@ -141,7 +161,8 @@ type : 'UI Module'
All Sections
- More +
More
+
Choice 1
Choice 2
diff --git a/node/src/files/components/semantic/modules/carousel.js b/node/src/files/components/semantic/modules/carousel.js index ee59c048f..93f770ef4 100644 --- a/node/src/files/components/semantic/modules/carousel.js +++ b/node/src/files/components/semantic/modules/carousel.js @@ -69,7 +69,7 @@ $.fn.carousel = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) ; }, diff --git a/node/src/files/components/semantic/modules/dropdown.css b/node/src/files/components/semantic/modules/dropdown.css index 103ccb6f7..fe754589a 100644 --- a/node/src/files/components/semantic/modules/dropdown.css +++ b/node/src/files/components/semantic/modules/dropdown.css @@ -91,17 +91,20 @@ /******************************* States *******************************/ -.ui.dropdown.visible { +/* Dropdown Visible */ +.ui.visible.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.dropdown.visible .menu { +.ui.visible.dropdown .menu { display: block; } +/* Menu Item Hover */ .ui.dropdown .menu .item:hover { background-color: rgba(0, 0, 0, 0.02); z-index: 12; } +/* Menu Item Active */ .ui.dropdown .menu .active.item { background-color: rgba(0, 0, 0, 0.04); border-left: none; @@ -139,12 +142,12 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } -.ui.simple.dropdown.visible, +.ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.simple.dropdown.visible .menu, +.ui.simple.active.dropdown .menu, .ui.simple.dropdown:hover .menu { overflow: visible; width: auto; @@ -226,15 +229,15 @@ opacity: 1; } /* Visible */ -.ui.selection.dropdown.visible { +.ui.selection.active.dropdown { -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; border-radius: 0.3125em 0.3125em 0em 0em !important; } -.ui.selection.dropdown.visible > .dropdown.icon { +.ui.selection.active.dropdown > .dropdown.icon { opacity: 1; } -.ui.selection.dropdown.visible .menu { +.ui.selection.active.dropdown .menu { -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; box-shadow: 0px 1px 0px 1px #D3D3D3; @@ -295,7 +298,7 @@ } .ui.top.left.pointing.dropdown .menu:after { top: -0.25em; - left: 1em; + left: 1.25em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); @@ -312,7 +315,7 @@ .ui.top.right.pointing.dropdown .menu:after { top: -0.25em; left: auto; - right: 1em; + right: 1.25em; margin: 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -327,7 +330,7 @@ .ui.left.pointing.dropdown .menu:after { top: 1em; left: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); @@ -342,15 +345,8 @@ top: 1em; left: auto; right: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } -/* States */ -.ui.pointing.dropdown.visible, -.ui.pointing.dropdown.visible .menu { - -moz-border-radius: 0.325em !important; - -webkit-border-radius: 0.325em !important; - border-radius: 0.325em !important; -} diff --git a/node/src/files/components/semantic/modules/dropdown.js b/node/src/files/components/semantic/modules/dropdown.js index 2fdcc2cf4..acd0d079d 100644 --- a/node/src/files/components/semantic/modules/dropdown.js +++ b/node/src/files/components/semantic/modules/dropdown.js @@ -20,13 +20,12 @@ $.fn.dropdown = function(parameters) { metadata = settings.metadata, namespace = settings.namespace, selector = settings.selector, - error = settings.error, + errors = settings.errors, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - isTouchDevice = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], @@ -45,6 +44,8 @@ $.fn.dropdown = function(parameters) { $text = $(this).find(selector.text), $input = $(this).find(selector.input), + isTouchDevice = ('ontouchstart' in document.documentElement), + element = this, instance = $module.data(moduleNamespace), module @@ -53,7 +54,7 @@ $.fn.dropdown = function(parameters) { module = { initialize: function() { - module.debug('Initializing dropdown with bound events', $module); + module.debug('Initializing dropdown', $module); if(isTouchDevice) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) @@ -93,8 +94,11 @@ $.fn.dropdown = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + $item + .off(eventNamespace) + ; $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, @@ -186,7 +190,7 @@ $.fn.dropdown = function(parameters) { settings.action(text, value); } else { - module.error(error.action); + module.error(errors.action); } }, @@ -334,7 +338,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } }, hide: function(callback) { @@ -376,7 +380,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } } }, @@ -542,8 +546,7 @@ $.fn.dropdown = function(parameters) { invoke: function(query, passedArguments, context) { var maxDepth, - found, - response + found ; passedArguments = passedArguments || queryArguments; context = element || context; @@ -551,46 +554,21 @@ $.fn.dropdown = function(parameters) { query = query.split(/[\. ]/); maxDepth = query.length - 1; $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { instance = instance[value]; } - else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { - instance = instance[camelCaseValue]; - } else if( instance[value] !== undefined ) { found = instance[value]; - return false; - } - else if( instance[camelCaseValue] !== undefined ) { - found = instance[camelCaseValue]; - return false; } else { - module.error(error.method); - return false; + module.error(errors.method); } }); } if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(invokedResponse)) { - invokedResponse.push(response); - } - else if(typeof invokedResponse == 'string') { - invokedResponse = [invokedResponse, response]; - } - else if(response !== undefined) { - invokedResponse = response; + return found.apply(context, passedArguments); } - return found; + return found || false; } }; @@ -598,7 +576,7 @@ $.fn.dropdown = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + invokedResponse = module.invoke(query); } else { if(instance !== undefined) { @@ -609,7 +587,7 @@ $.fn.dropdown = function(parameters) { }) ; - return (invokedResponse !== undefined) + return (invokedResponse) ? invokedResponse : this ; @@ -639,7 +617,7 @@ $.fn.dropdown.settings = { onShow : function(){}, onHide : function(){}, - error : { + errors : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', animation : 'The requested animation was not found' diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js index 1ec702fbf..fb8785cf4 100644 --- a/node/src/files/components/semantic/modules/sidebar.js +++ b/node/src/files/components/semantic/modules/sidebar.js @@ -60,7 +60,7 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, diff --git a/node/src/files/javascript/dropdown.js b/node/src/files/javascript/dropdown.js index 147683b5d..0ef0dfdb0 100755 --- a/node/src/files/javascript/dropdown.js +++ b/node/src/files/javascript/dropdown.js @@ -8,7 +8,7 @@ semantic.dropdown.ready = function() { $examples = $('.example'), $hoverDropdown = $examples.filter('.hover').find('.ui.dropdown'), $formDropdown = $examples.filter('.form').find('.ui.dropdown'), - $dropdown = $examples.filter('.dropdown').find('.ui.dropdown'), + $dropdown = $examples.filter('.dropdown').find('.ui.dropdown:not(.simple)'), // alias handler ; diff --git a/src/modules/carousel.js b/src/modules/carousel.js index ee59c048f..93f770ef4 100755 --- a/src/modules/carousel.js +++ b/src/modules/carousel.js @@ -69,7 +69,7 @@ $.fn.carousel = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) ; }, diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 2fdcc2cf4..acd0d079d 100755 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -20,13 +20,12 @@ $.fn.dropdown = function(parameters) { metadata = settings.metadata, namespace = settings.namespace, selector = settings.selector, - error = settings.error, + errors = settings.errors, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - isTouchDevice = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], @@ -45,6 +44,8 @@ $.fn.dropdown = function(parameters) { $text = $(this).find(selector.text), $input = $(this).find(selector.input), + isTouchDevice = ('ontouchstart' in document.documentElement), + element = this, instance = $module.data(moduleNamespace), module @@ -53,7 +54,7 @@ $.fn.dropdown = function(parameters) { module = { initialize: function() { - module.debug('Initializing dropdown with bound events', $module); + module.debug('Initializing dropdown', $module); if(isTouchDevice) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) @@ -93,8 +94,11 @@ $.fn.dropdown = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + $item + .off(eventNamespace) + ; $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; }, @@ -186,7 +190,7 @@ $.fn.dropdown = function(parameters) { settings.action(text, value); } else { - module.error(error.action); + module.error(errors.action); } }, @@ -334,7 +338,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } }, hide: function(callback) { @@ -376,7 +380,7 @@ $.fn.dropdown = function(parameters) { ; } else { - module.error(error.animation); + module.error(errors.animation); } } }, @@ -542,8 +546,7 @@ $.fn.dropdown = function(parameters) { invoke: function(query, passedArguments, context) { var maxDepth, - found, - response + found ; passedArguments = passedArguments || queryArguments; context = element || context; @@ -551,46 +554,21 @@ $.fn.dropdown = function(parameters) { query = query.split(/[\. ]/); maxDepth = query.length - 1; $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { instance = instance[value]; } - else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { - instance = instance[camelCaseValue]; - } else if( instance[value] !== undefined ) { found = instance[value]; - return false; - } - else if( instance[camelCaseValue] !== undefined ) { - found = instance[camelCaseValue]; - return false; } else { - module.error(error.method); - return false; + module.error(errors.method); } }); } if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(invokedResponse)) { - invokedResponse.push(response); - } - else if(typeof invokedResponse == 'string') { - invokedResponse = [invokedResponse, response]; - } - else if(response !== undefined) { - invokedResponse = response; + return found.apply(context, passedArguments); } - return found; + return found || false; } }; @@ -598,7 +576,7 @@ $.fn.dropdown = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + invokedResponse = module.invoke(query); } else { if(instance !== undefined) { @@ -609,7 +587,7 @@ $.fn.dropdown = function(parameters) { }) ; - return (invokedResponse !== undefined) + return (invokedResponse) ? invokedResponse : this ; @@ -639,7 +617,7 @@ $.fn.dropdown.settings = { onShow : function(){}, onHide : function(){}, - error : { + errors : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', animation : 'The requested animation was not found' diff --git a/src/modules/dropdown.less b/src/modules/dropdown.less index 875419005..f589b9ca7 100755 --- a/src/modules/dropdown.less +++ b/src/modules/dropdown.less @@ -136,18 +136,22 @@ States *******************************/ -.ui.dropdown.visible { +/* Dropdown Visible */ +.ui.visible.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.dropdown.visible .menu { +.ui.visible.dropdown .menu { display: block; } +/* Menu Item Hover */ .ui.dropdown .menu .item:hover { background-color: rgba(0, 0, 0, 0.02); z-index: 12; } + +/* Menu Item Active */ .ui.dropdown .menu .active.item { background-color: rgba(0, 0, 0, 0.04); border-left: none; @@ -192,13 +196,13 @@ transition: opacity 0.2s ease-out; } -.ui.simple.dropdown.visible, +.ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } -.ui.simple.dropdown.visible .menu, +.ui.simple.active.dropdown .menu, .ui.simple.dropdown:hover .menu { overflow: visible; width: auto; @@ -296,15 +300,15 @@ } /* Visible */ -.ui.selection.dropdown.visible { +.ui.selection.active.dropdown { -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; border-radius: 0.3125em 0.3125em 0em 0em !important; } -.ui.selection.dropdown.visible > .dropdown.icon { +.ui.selection.active.dropdown > .dropdown.icon { opacity: 1; } -.ui.selection.dropdown.visible .menu { +.ui.selection.active.dropdown .menu { -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; box-shadow: 0px 1px 0px 1px #D3D3D3; @@ -378,7 +382,7 @@ } .ui.top.left.pointing.dropdown .menu:after { top: -0.25em; - left: 1em; + left: 1.25em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); @@ -395,7 +399,7 @@ .ui.top.right.pointing.dropdown .menu:after { top: -0.25em; left: auto; - right: 1em; + right: 1.25em; margin: 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -411,7 +415,7 @@ .ui.left.pointing.dropdown .menu:after { top: 1em; left: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); @@ -428,17 +432,9 @@ top: 1em; left: auto; right: -0.25em; - margin: -0.1em 0em 0em 0em; + margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } - -/* States */ -.ui.pointing.dropdown.visible, -.ui.pointing.dropdown.visible .menu { - -moz-border-radius: 0.325em !important; - -webkit-border-radius: 0.325em !important; - border-radius: 0.325em !important; -} \ No newline at end of file diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js index 1ec702fbf..fb8785cf4 100755 --- a/src/modules/sidebar.js +++ b/src/modules/sidebar.js @@ -60,7 +60,7 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); $module - .off(namespace) + .off(eventNamespace) .removeData(moduleNamespace) ; },