Merge branch 'next' of https://github.com/ChurchDesk/Semantic-UI into…

… next
Semantic-Org · Jul 11, 2017 · 96c0952 · 96c0952
2 parents 7ab6597 + 06aaeb0
commit 96c0952
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/examples/components/menu.html b/examples/components/menu.html
@@ -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>

diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
@@ -2374,6 +2374,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);
@@ -2383,6 +2389,10 @@ $.fn.dropdown = function(parameters) {
             var $element = $menu || $module;
             $element.addClass(className.upward);
           },
+          leftward: function($menu) {
+            var $element = $menu || $module;
+            $element.addClass(className.leftward);
+          },
           value: function(value, text, $selected) {
             var
               escapedValue = module.escape.value(value),
@@ -2734,6 +2744,10 @@ $.fn.dropdown = function(parameters) {
             var $element = $menu || $module;
             $element.removeClass(className.upward);
           },
+          leftward: function($menu) {
+            var $element = $menu || $module;
+            $element.removeClass(className.leftward);
+          },
           visible: function() {
             $module.removeClass(className.visible);
           },
@@ -3096,6 +3110,28 @@ $.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
@@ -3276,7 +3312,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);
                     }
@@ -3707,6 +3748,7 @@ $.fn.dropdown.settings = {
     selected    : 'selected',
     selection   : 'selection',
     upward      : 'upward',
+    leftward    : 'left',
     visible     : 'visible'
   }
 

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -956,6 +956,7 @@ select.ui.dropdown {
 /* Left Flyout Menu */
 .ui.dropdown > .left.menu .menu,
 .ui.dropdown .menu .left.menu {
+  display: block !important;
   left: auto !important;
   right: 100% !important;
   border-radius: @leftSubMenuBorderRadius !important;