#4211 Change is.fitWidth to can.openRightward, fix logic to work afte…

…r setting leftward
Semantic-Org · Jul 11, 2017 · 3b802c3 · 3b802c3
1 parent 96c0952
commit 3b802c3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 35 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -3,6 +3,7 @@
 ### Version 2.2.11 - April XX, 2017
 
 **New Features**
+- **Dropdown** - Dropdowns will automatically detect when they are offscreen to the right and will open leftward instead **Thanks @Graveheart**
 - **Form Validation** - Added `add rule` `add field`, `remove rule`, `remove field` to programmatically and and remove validation rules from form validation #4267 #5253
 - **Site** - Site now includes custom scrollbar styles for UI (not page) by default in WebKit/Chrome. Components with inverted content like dimmer include an inverted scrollbar.  You can disable this by setting `@useCustomScrollbars: false` in your `site.variables`
 - **Modal** - Adds new `scrolling content` variation to have a modal with content that scrolls

diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
@@ -2374,16 +2374,16 @@ $.fn.dropdown = function(parameters) {
               else {
                 module.set.upward($menu);
               }
-              if(module.is.fitWidth($menu)) {
-                module.remove.leftward($menu);
-              }
-              else {
-                module.set.leftward($menu);
-              }
             }
             else if(settings.direction == 'upward') {
               module.set.upward($menu);
             }
+            if(module.can.openRightward($menu)) {
+              module.remove.leftward($menu);
+            }
+            else {
+              module.set.leftward($menu);
+            }
           },
           upward: function($menu) {
             var $element = $menu || $module;
@@ -3110,28 +3110,6 @@ $.fn.dropdown = function(parameters) {
             $currentMenu.removeClass(className.loading);
             return canOpenDownward;
           },
-          fitWidth: function($subMenu) {
-            var
-                $currentMenu   = $subMenu || $menu,
-                canOpenRightward = true,
-                isOutsideScreen = false,
-                calculations
-                ;
-            $currentMenu.addClass(className.loading);
-            calculations = {
-              contextWidth: $context.outerWidth(),
-              menuOffset: $currentMenu.offset().left,
-              menuWidth: $currentMenu.outerWidth()
-            };
-            isOutsideScreen = (calculations.contextWidth < calculations.menuOffset + calculations.menuWidth) || (calculations.menuOffset - $menu.offset().left < 0);
-
-            if(isOutsideScreen) {
-              module.verbose('Dropdown cannot fit in context rightward', isOutsideScreen);
-              canOpenRightward = false;
-            }
-            $currentMenu.removeClass(className.loading);
-            return canOpenRightward;
-          },
           inObject: function(needle, object) {
             var
               found = false
@@ -3210,6 +3188,28 @@ $.fn.dropdown = function(parameters) {
             }
             return false;
           },
+          openRightward: function($menu) {
+            var
+              canOpenRightward = true,
+              isOutsideScreen  = false,
+              calculations
+            ;
+            $menu
+              .addClass(className.loading)
+            ;
+            calculations = {
+              contextWidth : $context.outerWidth(),
+              menuOffset   : $menu.offset().left,
+              menuWidth    : $menu.outerWidth(),
+            };
+            isOutsideScreen = (calculations.menuOffset + calculations.menuWidth > calculations.contextWidth) || (calculations.menuOffset - $menu.offset().left < 0);
+            if(isOutsideScreen) {
+              module.verbose('Dropdown cannot fit in context rightward', isOutsideScreen);
+              canOpenRightward = false;
+            }
+            $menu.removeClass(className.loading);
+            return canOpenRightward;
+          },
           click: function() {
             return (hasTouch || settings.on == 'click');
           },
@@ -3242,7 +3242,7 @@ $.fn.dropdown = function(parameters) {
               : function(){}
             ;
             module.verbose('Doing menu show animation', $currentMenu);
-            module.set.direction($subMenu);
+            module.set.direction($currentMenu);
             transition = module.get.transition($subMenu);
             if( module.is.selection() ) {
               module.set.scrollPosition(module.get.selectedItem(), true);

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -229,8 +229,8 @@
 
 .ui.dropdown .menu .menu {
   top: @subMenuTop !important;
-  left: @subMenuLeft !important;
-  right: @subMenuRight !important;
+  left: @subMenuLeft;
+  right: @subMenuRight;
   margin: @subMenuMargin !important;
   border-radius: @subMenuBorderRadius !important;
   z-index: @subMenuZIndex !important;
@@ -851,6 +851,14 @@ select.ui.dropdown {
   visibility: hidden;
   z-index: @loadingZIndex;
 }
+.ui.dropdown > .loading.menu {
+  left: 0px !important;
+  right: auto !important;
+}
+.ui.dropdown > .menu .loading.menu {
+  left: 100% !important;
+  right: auto !important;
+}
 
 /*--------------------
     Keyboard Select
@@ -953,12 +961,16 @@ select.ui.dropdown {
   border-radius: @subMenuBorderRadius !important;
 }
 
-/* Left Flyout Menu */
+/* Leftward Opening Menu */
+.ui.dropdown > .left.menu {
+  left: auto;
+  right: 0px;
+}
+
 .ui.dropdown > .left.menu .menu,
 .ui.dropdown .menu .left.menu {
-  display: block !important;
-  left: auto !important;
-  right: 100% !important;
+  left: auto;
+  right: 100%;
   border-radius: @leftSubMenuBorderRadius !important;
 }