Updated component to version 2.5.0

Semantic-Org · Oct 6, 2022 · f27e29a · f27e29a
1 parent 7410a6f
commit f27e29a
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 40 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,3 +1,10 @@
+### Version 2.5.0 - Oct 6, 2022
+
+- **Sticky** - Adds new example for sticky to highlight behavior when sticky/context height varies
+- **Dropdown** - Fix issue where dropdown menu could not open to right when in `right menu` inside a `ui menu` (See examples/sticky.html) for use-case
+- **Sticky** - Fix issue where element might be `bound bottom` (fixed to bottom of context) if the sticky element is larger than the context
+- **Sticky** - Fix issue when sticky size is larger than context size caused context `min-height` not to be set correctly.
+
 ### Version 2.2.11 - July 11, 2017
 
 - **Sticky** - Fix issue where sticky would cause page to shift when `context` height was determined by sticky's height in `position: static;`  [#3430](https://github.com/Semantic-Org/Semantic-UI/issues/3430)

diff --git a/bower.json b/bower.json
@@ -6,24 +6,8 @@
     "name": "Jack Lukic",
     "web": "http://www.jacklukic.com"
   },
-  "ignore": [
-    "docs",
-    "node",
-    "server",
-    "spec",
-    "src",
-    "test"
-  ],
-  "keywords": [
-    "semantic",
-    "ui",
-    "css3",
-    "framework"
-  ],
-  "license": [
-    "http://semantic-ui.mit-license.org/"
-  ],
-  "main": [
-    "sticky.css"
-  ]
+  "ignore": ["docs", "node", "server", "spec", "src", "test"],
+  "keywords": ["semantic", "ui", "css3", "framework"],
+  "license": ["http://semantic-ui.mit-license.org/"],
+  "main": ["sticky.css"]
 }
diff --git a/composer.json b/composer.json
@@ -5,15 +5,10 @@
   "authors": [{
     "name": "Jack Lukic",
     "email": "[email protected]",
-    "web": "http://www.jacklukic.com",
+    "homepage": "http://www.jacklukic.com",
     "role": "Creator"
   }],
-  "keywords": [
-    "semantic",
-    "ui",
-    "css",
-    "framework"
-  ],
+  "keywords": ["semantic", "ui", "css", "framework"],
   "license": "MIT",
-  "version": "2.4.0"
+  "version": "2.5.0"
 }
diff --git a/index.js b/index.js
@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.4.0 - Sticky
+ * # Semantic UI 2.5.0 - Sticky
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -403,6 +403,18 @@ module.exports = function(parameters) {
               module.determineContainer();
             }
             else {
+              var tallestHeight = Math.max(module.cache.context.height, module.cache.element.height);
+              if(tallestHeight - $container.outerHeight() > settings.jitter) {
+                module.debug('Context is taller than container. Specifying exact height for container', module.cache.context.height);
+                $container.css({
+                  height: tallestHeight,
+                });
+              }
+              else {
+                $container.css({
+                  height: '',
+                });
+              }
               if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
                 module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
                 $container.css({
@@ -439,7 +451,7 @@ module.exports = function(parameters) {
           },
           size: function() {
             if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
-              element.style.setProperty('width',  module.cache.element.width  + 'px', 'important');
+              element.style.setProperty('width', module.cache.element.width  + 'px', 'important');
               element.style.setProperty('height', module.cache.element.height + 'px', 'important');
             }
           }
@@ -502,7 +514,7 @@ module.exports = function(parameters) {
                 module.bindBottom();
               }
               else if(scroll.top > element.top) {
-                if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
+                if((element.height + scroll.top - elementScroll) >= context.bottom  && element.height < context.height) {
                   module.debug('Initial element position is bottom of container');
                   module.bindBottom();
                 }
@@ -581,6 +593,9 @@ module.exports = function(parameters) {
         bindTop: function() {
           module.debug('Binding element to top of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',
@@ -598,6 +613,9 @@ module.exports = function(parameters) {
         bindBottom: function() {
           module.debug('Binding element to bottom of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-sticky",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "title": "Semantic UI - Sticky",
   "description": "Single component release of sticky",
   "homepage": "http://www.semantic-ui.com",

diff --git a/sticky.css b/sticky.css
@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.4.0 - Sticky
+ * # Semantic UI 2.5.0 - Sticky
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -15,7 +15,6 @@
 
 .ui.sticky {
   position: static;
-  -webkit-transition: none;
   transition: none;
   z-index: 800;
 }

diff --git a/sticky.js b/sticky.js
@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.4.0 - Sticky
+ * # Semantic UI 2.5.0 - Sticky
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -402,6 +402,18 @@ $.fn.sticky = function(parameters) {
               module.determineContainer();
             }
             else {
+              var tallestHeight = Math.max(module.cache.context.height, module.cache.element.height);
+              if(tallestHeight - $container.outerHeight() > settings.jitter) {
+                module.debug('Context is taller than container. Specifying exact height for container', module.cache.context.height);
+                $container.css({
+                  height: tallestHeight,
+                });
+              }
+              else {
+                $container.css({
+                  height: '',
+                });
+              }
               if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
                 module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
                 $container.css({
@@ -438,7 +450,7 @@ $.fn.sticky = function(parameters) {
           },
           size: function() {
             if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
-              element.style.setProperty('width',  module.cache.element.width  + 'px', 'important');
+              element.style.setProperty('width', module.cache.element.width  + 'px', 'important');
               element.style.setProperty('height', module.cache.element.height + 'px', 'important');
             }
           }
@@ -501,7 +513,7 @@ $.fn.sticky = function(parameters) {
                 module.bindBottom();
               }
               else if(scroll.top > element.top) {
-                if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
+                if((element.height + scroll.top - elementScroll) >= context.bottom  && element.height < context.height) {
                   module.debug('Initial element position is bottom of container');
                   module.bindBottom();
                 }
@@ -580,6 +592,9 @@ $.fn.sticky = function(parameters) {
         bindTop: function() {
           module.debug('Binding element to top of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',
@@ -597,6 +612,9 @@ $.fn.sticky = function(parameters) {
         bindBottom: function() {
           module.debug('Binding element to bottom of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',

diff --git a/sticky.min.css b/sticky.min.css
@@ -1,9 +1,9 @@
 /*!
- * # Semantic UI 2.4.0 - Sticky
+ * # Semantic UI 2.5.0 - Sticky
  * http://github.com/semantic-org/semantic-ui/
  *
  *
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.sticky{position:static;-webkit-transition:none;transition:none;z-index:800}.ui.sticky.bound{position:absolute;left:auto;right:auto}.ui.sticky.fixed{position:fixed;left:auto;right:auto}.ui.sticky.bound.top,.ui.sticky.fixed.top{top:0;bottom:auto}.ui.sticky.bound.bottom,.ui.sticky.fixed.bottom{top:auto;bottom:0}.ui.native.sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}
+ */.ui.sticky{position:static;transition:none;z-index:800}.ui.sticky.bound{position:absolute;left:auto;right:auto}.ui.sticky.fixed{position:fixed;left:auto;right:auto}.ui.sticky.bound.top,.ui.sticky.fixed.top{top:0;bottom:auto}.ui.sticky.bound.bottom,.ui.sticky.fixed.bottom{top:auto;bottom:0}.ui.native.sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}