feat(calendar): support context setting

A calendar popup inside an overflowing container does not allow the popup to be shown completely, because it's still inside the overflowing container of the related calendar input field You can now use a context setting which will move the calendar popup outside of the overflowing container (if the given context isnt an overflowing container itself...)
fomantic · Nov 14, 2022 · 0533782 · 0533782
1 parent ead2efb
commit 0533782
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
@@ -1556,8 +1556,8 @@
     border-color: @invertedCellBorderColor;
   }
   & when (@variationTableDisabled) {
-    .ui.inverted.table tr.disabled td,
-    .ui.inverted.table tr td.disabled,
+    .ui.ui.ui.inverted.table tr.disabled td,
+    .ui.ui.ui.inverted.table tr td.disabled,
     .ui.inverted.table tr.disabled:hover td,
     .ui.inverted.table tr:hover td.disabled {
       pointer-events: none;

diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js
@@ -26,6 +26,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
 $.fn.calendar = function(parameters) {
   var
     $allModules    = $(this),
+    $document      = $(document),
 
     moduleSelector = $allModules.selector || '',
 
@@ -67,11 +68,11 @@ $.fn.calendar = function(parameters) {
 
         $module = $(this),
         $input = $module.find(selector.input),
-        $container = $module.find(selector.popup),
         $activator = $module.find(selector.activator),
 
         element = this,
         instance = $module.data(moduleNamespace),
+        $container = instance && instance.popupId ? $document.find('#'+instance.popupId) : $module.find(selector.popup),
 
         isTouch,
         isTouchDown = false,
@@ -139,11 +140,16 @@ $.fn.calendar = function(parameters) {
               return;
             }
             if (!$container.length) {
-              //prepend the popup element to the activator's parent so that it has less chance of messing with
-              //the styling (eg input action button needs to be the last child to have correct border radius)
-              var $activatorParent = $activator.parent(),
-                  domPositionFunction = $activatorParent.closest(selector.append).length !== 0 ? 'appendTo' : 'prependTo';
-              $container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
+              if(settings.context) {
+                module.popupId = namespace + '_popup_' + (Math.random().toString(16) + '000000000').slice(2, 10);
+                $container = $('<div/>',{id:module.popupId}).addClass(className.popup).appendTo($document.find(settings.context));
+              } else {
+                //prepend the popup element to the activator's parent so that it has less chance of messing with
+                //the styling (eg input action button needs to be the last child to have correct border radius)
+                var $activatorParent = $activator.parent(),
+                    domPositionFunction = $activatorParent.closest(selector.append).length !== 0 ? 'appendTo' : 'prependTo';
+                $container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
+              }
             }
             $container.addClass(className.calendar);
             if(isInverted){
@@ -175,6 +181,7 @@ $.fn.calendar = function(parameters) {
             var on = module.setting('on');
             var options = $.extend({}, settings.popupOptions, {
               popup: $container,
+              movePopup: !settings.context,
               on: on,
               hoverable: on === 'hover',
               closable: on === 'click',
@@ -805,7 +812,7 @@ $.fn.calendar = function(parameters) {
               return null;
             }
             if (!(selector instanceof $)) {
-              selector = $(document).find(selector).first();
+              selector = $document.find(selector).first();
             }
             //assume range related calendars are using the same namespace
             return selector.data(moduleNamespace);
@@ -1490,6 +1497,8 @@ $.fn.calendar.settings = {
   verbose: false,
   performance: true,
 
+  context            : false,
+
   type               : 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
   firstDayOfWeek     : 0,          // day for first day column (0 = Sunday)
   constantHeight     : true,       // add rows to shorter months to keep day calendar height consistent (6 rows)

diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less
@@ -21,31 +21,35 @@
             Popup
 *******************************/
 
-.ui.calendar .ui.popup {
+.ui.calendar.popup {
   max-width: none;
   padding: 0;
   border: none;
   user-select: none;
+  &.inverted::before when (@variationCalendarInverted) {
+    background: @invertedArrowBackground;
+  }
 }
 
 /*******************************
             Calendar
 *******************************/
 
-.ui.calendar .calendar:focus {
+.ui.calendar .calendar:focus,
+.ui.calendar.popup:focus {
   outline: 0;
 }
 
 /*******************************
             Grid
 *******************************/
 
-.ui.calendar .ui.popup .ui.grid {
+.ui.calendar.popup .ui.grid {
   display: block;
   white-space: nowrap;
 }
 
-.ui.calendar .ui.popup .ui.grid > .column {
+.ui.calendar.popup .ui.grid > .column {
   width: auto;
 }
 
@@ -146,8 +150,8 @@
   box-shadow: @rangeBoxShadow;
 }
 
-.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
+.ui.calendar:not(.disabled):focus .ui.table tbody tr td.focus,
+.ui.calendar:not(.disabled).popup.active .ui.table tbody tr td.focus {
   box-shadow: @focusBoxShadow;
 }
 
@@ -159,10 +163,10 @@
   }
 
   .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
-  .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
+  .ui.inverted.calendar:not(.disabled).popup.active .ui.table.inverted tbody tr td.focus {
     box-shadow: @focusInvertedBoxShadow;
   }
-  .ui.inverted.calendar .ui.inverted.table tr .disabled {
+  .ui.inverted.calendar .ui.ui.ui.inverted.table tr .disabled {
     color: @invertedDisabledTextColor;
   }
 

diff --git a/src/themes/default/modules/calendar.variables b/src/themes/default/modules/calendar.variables
@@ -14,6 +14,8 @@
 @rangeInvertedTextColor: @invertedSelectedTextColor;
 @rangeInvertedBoxShadow: none;
 
+@invertedArrowBackground: #2b2b2b;
+
 @adjacentTextColor: @mutedTextColor;
 @adjacentBackground: @subtleTransparentBlack;
 @adjacentInvertedTextColor: @invertedMutedTextColor;