Skip to content

Commit ff98003

Browse files
Semantic-Pusher-RobotSemantic-Pusher-Robot
committed
Updated component to version 2.3.0
1 parent 854c9a6 commit ff98003

8 files changed

Lines changed: 108 additions & 23 deletions

File tree

‎RELEASE-NOTES.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
### Version 2.3.0 - Feb 19, 2018
2+
3+
- **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/).
4+
- **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
5+
6+
To preserve functionality `movePopup` default has remained as `true` (moving the popup to the same offset context), however now setting `movePopup: false` should now always position correctly. Be sure to use `movePopup: true` to avoid issues with `ui popup` inside `menu`, `input` or other places where it may inherit rules from its activating element or its context.
7+
8+
- **Popup** - `arrowBackground` now inherits from `background` [#6059](https://github.com/Semantic-Org/Semantic-UI/issues/6059) **Thanks @devsli**
9+
- **Popup** - Adds new variable `headerFontWeight`
10+
- **Popup** - Popup will now use `content` specified in settings before `title` attribute [#4614](https://github.com/Semantic-Org/Semantic-UI/issues/4614) **Thanks @aaronbhansen**
11+
112
### Version 2.2.14 - Jan 29, 2018
213

314
- **Popup** - Fixed an error which could cause popup not to move to right offset context when using a different target setting.

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
"framework"
1616
],
1717
"license": "MIT",
18-
"version": "2.2.14"
18+
"version": "2.3.0"
1919
}

‎index.js‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.2.14 - Popup
2+
* # Semantic UI 2.3.0 - Popup
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -489,7 +489,7 @@ module.exports = function(parameters) {
489489
},
490490
content: function() {
491491
$module.removeData(metadata.content);
492-
return $module.data(metadata.content) || $module.attr('title') || settings.content;
492+
return $module.data(metadata.content) || settings.content || $module.attr('title');
493493
},
494494
variation: function() {
495495
$module.removeData(metadata.variation);
@@ -503,9 +503,10 @@ module.exports = function(parameters) {
503503
},
504504
calculations: function() {
505505
var
506-
targetElement = $target[0],
507-
isWindow = ($boundary[0] == window),
508-
targetPosition = (settings.inline || (settings.popup && settings.movePopup))
506+
$popupOffsetParent = module.get.offsetParent($popup),
507+
targetElement = $target[0],
508+
isWindow = ($boundary[0] == window),
509+
targetPosition = (settings.inline || (settings.popup && settings.movePopup))
509510
? $target.position()
510511
: $target.offset(),
511512
screenPosition = (isWindow)
@@ -550,6 +551,17 @@ module.exports = function(parameters) {
550551
}
551552
};
552553

554+
// if popup offset context is not same as target, then adjust calculations
555+
if($popupOffsetParent.get(0) !== $offsetParent.get(0)) {
556+
var
557+
popupOffset = $popupOffsetParent.offset()
558+
;
559+
calculations.target.top -= popupOffset.top;
560+
calculations.target.left -= popupOffset.left;
561+
calculations.parent.width = $popupOffsetParent.outerWidth();
562+
calculations.parent.height = $popupOffsetParent.outerHeight();
563+
}
564+
553565
// add in container calcs if fluid
554566
if( settings.setFluidWidth && module.is.fluid() ) {
555567
calculations.container = {
@@ -638,14 +650,14 @@ module.exports = function(parameters) {
638650
var
639651
is2D = ($node.css('transform') === 'none'),
640652
isStatic = ($node.css('position') === 'static'),
641-
isHTML = $node.is('html')
653+
isBody = $node.is('body')
642654
;
643-
while(parentNode && !isHTML && isStatic && is2D) {
655+
while(parentNode && !isBody && isStatic && is2D) {
644656
parentNode = parentNode.parentNode;
645657
$node = $(parentNode);
646658
is2D = ($node.css('transform') === 'none');
647659
isStatic = ($node.css('position') === 'static');
648-
isHTML = $node.is('html');
660+
isBody = $node.is('body');
649661
}
650662
}
651663
return ($node && $node.length > 0)
@@ -754,6 +766,18 @@ module.exports = function(parameters) {
754766
popup = calculations.popup;
755767
parent = calculations.parent;
756768

769+
if(module.should.centerArrow(calculations)) {
770+
module.verbose('Adjusting offset to center arrow on small target element');
771+
if(position == 'top left' || position == 'bottom left') {
772+
offset += (target.width / 2)
773+
offset -= settings.arrowPixelsFromEdge;
774+
}
775+
if(position == 'top right' || position == 'bottom right') {
776+
offset -= (target.width / 2)
777+
offset += settings.arrowPixelsFromEdge;
778+
}
779+
}
780+
757781
if(target.width === 0 && target.height === 0 && !module.is.svg(target.element)) {
758782
module.debug('Popup target is hidden, no action taken');
759783
return false;
@@ -1047,6 +1071,12 @@ module.exports = function(parameters) {
10471071
}
10481072
},
10491073

1074+
should: {
1075+
centerArrow: function(calculations) {
1076+
return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2);
1077+
}
1078+
},
1079+
10501080
is: {
10511081
offstage: function(distanceFromBoundary, position) {
10521082
var
@@ -1069,6 +1099,9 @@ module.exports = function(parameters) {
10691099
svg: function(element) {
10701100
return module.supports.svg() && (element instanceof SVGGraphicsElement);
10711101
},
1102+
basic: function() {
1103+
return $module.hasClass(className.basic);
1104+
},
10721105
active: function() {
10731106
return $module.hasClass(className.active);
10741107
},
@@ -1381,8 +1414,11 @@ _module.exports.settings = {
13811414
// specify position to appear even if it doesn't fit
13821415
lastResort : false,
13831416

1417+
// number of pixels from edge of popup to pointing arrow center (used from centering)
1418+
arrowPixelsFromEdge: 20,
1419+
13841420
// delay used to prevent accidental refiring of animations due to user error
1385-
delay : {
1421+
delay : {
13861422
show : 50,
13871423
hide : 70
13881424
},
@@ -1426,6 +1462,7 @@ _module.exports.settings = {
14261462

14271463
className : {
14281464
active : 'active',
1465+
basic : 'basic',
14291466
animating : 'animating',
14301467
dropdown : 'dropdown',
14311468
fluid : 'fluid',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "semantic-ui-popup",
3-
"version": "2.2.14",
3+
"version": "2.3.0",
44
"title": "Semantic UI - Popup",
55
"description": "Single component release of popup",
66
"homepage": "http://www.semantic-ui.com",

‎popup.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.2.14 - Popup
2+
* # Semantic UI 2.3.0 - Popup
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*

‎popup.js‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.2.14 - Popup
2+
* # Semantic UI 2.3.0 - Popup
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -488,7 +488,7 @@ $.fn.popup = function(parameters) {
488488
},
489489
content: function() {
490490
$module.removeData(metadata.content);
491-
return $module.data(metadata.content) || $module.attr('title') || settings.content;
491+
return $module.data(metadata.content) || settings.content || $module.attr('title');
492492
},
493493
variation: function() {
494494
$module.removeData(metadata.variation);
@@ -502,9 +502,10 @@ $.fn.popup = function(parameters) {
502502
},
503503
calculations: function() {
504504
var
505-
targetElement = $target[0],
506-
isWindow = ($boundary[0] == window),
507-
targetPosition = (settings.inline || (settings.popup && settings.movePopup))
505+
$popupOffsetParent = module.get.offsetParent($popup),
506+
targetElement = $target[0],
507+
isWindow = ($boundary[0] == window),
508+
targetPosition = (settings.inline || (settings.popup && settings.movePopup))
508509
? $target.position()
509510
: $target.offset(),
510511
screenPosition = (isWindow)
@@ -549,6 +550,17 @@ $.fn.popup = function(parameters) {
549550
}
550551
};
551552

553+
// if popup offset context is not same as target, then adjust calculations
554+
if($popupOffsetParent.get(0) !== $offsetParent.get(0)) {
555+
var
556+
popupOffset = $popupOffsetParent.offset()
557+
;
558+
calculations.target.top -= popupOffset.top;
559+
calculations.target.left -= popupOffset.left;
560+
calculations.parent.width = $popupOffsetParent.outerWidth();
561+
calculations.parent.height = $popupOffsetParent.outerHeight();
562+
}
563+
552564
// add in container calcs if fluid
553565
if( settings.setFluidWidth && module.is.fluid() ) {
554566
calculations.container = {
@@ -637,14 +649,14 @@ $.fn.popup = function(parameters) {
637649
var
638650
is2D = ($node.css('transform') === 'none'),
639651
isStatic = ($node.css('position') === 'static'),
640-
isHTML = $node.is('html')
652+
isBody = $node.is('body')
641653
;
642-
while(parentNode && !isHTML && isStatic && is2D) {
654+
while(parentNode && !isBody && isStatic && is2D) {
643655
parentNode = parentNode.parentNode;
644656
$node = $(parentNode);
645657
is2D = ($node.css('transform') === 'none');
646658
isStatic = ($node.css('position') === 'static');
647-
isHTML = $node.is('html');
659+
isBody = $node.is('body');
648660
}
649661
}
650662
return ($node && $node.length > 0)
@@ -753,6 +765,18 @@ $.fn.popup = function(parameters) {
753765
popup = calculations.popup;
754766
parent = calculations.parent;
755767

768+
if(module.should.centerArrow(calculations)) {
769+
module.verbose('Adjusting offset to center arrow on small target element');
770+
if(position == 'top left' || position == 'bottom left') {
771+
offset += (target.width / 2)
772+
offset -= settings.arrowPixelsFromEdge;
773+
}
774+
if(position == 'top right' || position == 'bottom right') {
775+
offset -= (target.width / 2)
776+
offset += settings.arrowPixelsFromEdge;
777+
}
778+
}
779+
756780
if(target.width === 0 && target.height === 0 && !module.is.svg(target.element)) {
757781
module.debug('Popup target is hidden, no action taken');
758782
return false;
@@ -1046,6 +1070,12 @@ $.fn.popup = function(parameters) {
10461070
}
10471071
},
10481072

1073+
should: {
1074+
centerArrow: function(calculations) {
1075+
return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2);
1076+
}
1077+
},
1078+
10491079
is: {
10501080
offstage: function(distanceFromBoundary, position) {
10511081
var
@@ -1068,6 +1098,9 @@ $.fn.popup = function(parameters) {
10681098
svg: function(element) {
10691099
return module.supports.svg() && (element instanceof SVGGraphicsElement);
10701100
},
1101+
basic: function() {
1102+
return $module.hasClass(className.basic);
1103+
},
10711104
active: function() {
10721105
return $module.hasClass(className.active);
10731106
},
@@ -1380,8 +1413,11 @@ $.fn.popup.settings = {
13801413
// specify position to appear even if it doesn't fit
13811414
lastResort : false,
13821415

1416+
// number of pixels from edge of popup to pointing arrow center (used from centering)
1417+
arrowPixelsFromEdge: 20,
1418+
13831419
// delay used to prevent accidental refiring of animations due to user error
1384-
delay : {
1420+
delay : {
13851421
show : 50,
13861422
hide : 70
13871423
},
@@ -1425,6 +1461,7 @@ $.fn.popup.settings = {
14251461

14261462
className : {
14271463
active : 'active',
1464+
basic : 'basic',
14281465
animating : 'animating',
14291466
dropdown : 'dropdown',
14301467
fluid : 'fluid',

‎popup.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎popup.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)