fix(dropdown): display sub menu on the left when if cannot fit screen

dist/components/dropdown.js

@@ -2330,6 +2330,12 @@ $.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);
@@ -2339,6 +2345,14 @@ $.fn.dropdown = function(parameters) {
             var $element = $menu || $module;
             $element.addClass(className.upward);
           },
+          leftward: function($menu) {
+            var $element = $menu || $module;
+            var parentMenu = $element.parent().closest(selector.menu);
+            if (parentMenu.hasClass('transition')) {
+              $element = parentMenu;
+            }
+            $element.addClass(className.leftward);
+          },
           value: function(value, text, $selected) {
             var
               escapedValue = module.escape.value(value),
@@ -2691,6 +2705,14 @@ $.fn.dropdown = function(parameters) {
             var $element = $menu || $module;
             $element.removeClass(className.upward);
           },
+          leftward: function($menu) {
+            var $element = $menu || $module;
+            var parentMenu = $element.parent().closest(selector.menu);
+            if (parentMenu.hasClass('transition')) {
+              $element = parentMenu;
+            }
+            $element.removeClass(className.leftward);
+          },
           visible: function() {
             $module.removeClass(className.visible);
           },
@@ -3047,6 +3069,34 @@ $.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 = {
+              childrenWidth: 0,
+              contextWidth: $context.outerWidth(),
+              menuOffset  : $currentMenu.offset().left,
+              menuWidth   : $currentMenu.outerWidth()
+            };
+            $currentMenu.find(selector.menu).each(function() {
+              var child = $(this);
+              child.show();
+              calculations.childrenWidth += child[0].offsetWidth;
+            });
+            isOutsideScreen = ((calculations.contextWidth < calculations.menuOffset + calculations.menuWidth + calculations.childrenWidth) || (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
@@ -3216,7 +3266,12 @@ $.fn.dropdown = function(parameters) {
                     onStart    : start,
                     onComplete : function() {
                       if(settings.direction == 'auto') {
-                        module.remove.upward($subMenu);
+                        if ($currentMenu.hasClass(className.leftward)) {
+                          module.remove.leftward($subMenu);
+                        }
+                        else {
+                          module.remove.upward($subMenu);
+                        }
                       }
                       callback.call(element);
                     }
@@ -3644,6 +3699,7 @@ $.fn.dropdown.settings = {
     selected    : 'selected',
     selection   : 'selection',
     upward      : 'upward',
+    leftward    : 'left',
     visible     : 'visible'
   }
 

examples/components/menu.html

@@ -33,35 +33,35 @@
 
   <!--- Example CSS -->
   <style>
-  body {
-    padding: 1em;
-  }
-  .ui.menu {
-    margin: 3em 0em;
-  }
-  .ui.menu:last-child {
-    margin-bottom: 110px;
-  }
+    body {
+      padding: 1em;
+    }
+    .ui.menu {
+      margin: 3em 0em;
+    }
+    .ui.menu:last-child {
+      margin-bottom: 110px;
+    }
   </style>
 
   <!--- Example Javascript -->
   <script>
-  $(document)
-    .ready(function() {
-      $('.ui.menu .ui.dropdown').dropdown({
-        on: 'hover'
-      });
-      $('.ui.menu a.item')
-        .on('click', function() {
-          $(this)
-            .addClass('active')
-            .siblings()
-            .removeClass('active')
-          ;
-        })
-      ;
-    })
-  ;
+    $(document)
+            .ready(function() {
+              $('.ui.menu .ui.dropdown').dropdown({
+                on: 'hover'
+              });
+              $('.ui.menu a.item')
+                      .on('click', function() {
+                        $(this)
+                                .addClass('active')
+                                .siblings()
+                                .removeClass('active')
+                        ;
+                      })
+              ;
+            })
+    ;
   </script>
 </head>
 <body>
@@ -147,6 +147,32 @@
         <button class="ui button">Submit</button>
       </div>
     </div>
+    <div class="ui dropdown item">
+      Dropdown Left<i class="dropdown icon"></i>
+      <div class="menu">
+        <a class="item">Link</a>
+        <a class="item">Link</a>
+        <div class="divider"></div>
+        <div class="header">Header</div>
+        <div class="item">
+          <i class="dropdown icon"></i>
+          Sub Menu
+          <div class="menu">
+            <a class="item">Link</a>
+            <div class="item">
+              <i class="dropdown icon"></i>
+              Sub Sub Menu
+              <div class="menu">
+                <a class="item">Link</a>
+                <a class="item">Link</a>
+              </div>
+            </div>
+            <a class="item">Link</a>
+          </div>
+        </div>
+        <a class="item">Link</a>
+      </div>
+    </div>
     <a class="item">Link</a>
   </div>
 </div>