richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'popup' of github.com:Semantic-Org/Semantic-UI into next

pull/1627/head
jlukic 9 years ago
parent
c079984a91 81ab3b98a6
commit
4364167ced
4 changed files with 106 additions and 37 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      RELEASE-NOTES.md
  2. 54
      src/definitions/collections/grid.less
  3. 80
      src/definitions/modules/popup.js
  4. 2
      src/definitions/modules/transition.js

7
RELEASE-NOTES.md
View File

@ -6,8 +6,7 @@
- **Project** - Right-to-left (RTL) support added. New gulp tasks for RTL file generation. Docs do not yet support RTL.*Thanks @MohammadYounes!*.
- **Project** - Install now let you specify the outputted file permissions and RTL use (express/custom install)
**Enhancements**
- **Grid** - Grid's ``equal height row` now uses a combination of `flexbox` and ``display: table-cell`` for older browsers
**Enhancements / Changes**
- **Site** - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue.
- **Dropdown** - Dropdown can now be disabled by adding ``disabled` class without requiring `destroy`. **Thanks Psyton**
- **Dropdown** - Search dropdown input can now have backgrounds. Fixes issues with autocompleted search dropdowns which have forced yellow "autocompleted" bg.
@ -16,6 +15,9 @@
- **Progress* - Progress bars can now display percent or amount left using `{value}` in text templates
- **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction
- **Dropdown** - Dropdown matching fields without values now trims whitespace by default
- **Checkbox** - Checkbox now toggles on spacebar when focused (previously only toggled on enter key).
- **Popup** - Popup now uses its own custom method for determining `offsetParent` meaning 3D contexts (like inside an animation) no longer should break positioning
- **Popup** - Popup now uses `preserve: false` by default, this is slightly less performant but will reduce page clutter caused by leaving generated elements in the DOM
**Code / Build**
- **Build** - `Dist/` files now set file permissions in build. `644` by default. Can adjust in `semantic.json` or during gulp install. You will need to run `npm install` to add the new gulp-chmod dependency *Thanks @PeterDaveHello*
@ -27,6 +29,7 @@
- **Video** - Video component now uses `//` instead of defaulting to `http`
- **Dropdown** - Fixed bug where sub menus may sometimes have dropdown icon overlap text
- **Dropdown** - Fixes dropdown search input from filtering text values when input is inside menu, i.e "In-Menu Search"
- **Dropdown** - Fix issue with search selection not correctly creating RegExp when select values are not strings **Thanks @alufers**
- **Popup** - `wide` and `very wide` popup will now appear when screen size is below their `max-width`
- **Popup** - Popup no longer blurs element on popup hide
- **Segment** - ``ui tabular menu`` now correctly aligns with attached segment when using fluid variation *Thanks @MohammadYounes*

54
src/definitions/collections/grid.less
View File

@ -1182,7 +1182,7 @@
.ui[class*="left aligned"].grid > .row > .column,
.ui[class*="left aligned"].grid > .column,
.ui.grid [class*="left aligned"].column,
.ui.grid > [class*="left aligned"].aligned.row > .column {
.ui.grid > [class*="left aligned"].row > .column {
text-align: left;
}
.ui.grid [class*="left aligned"].column{
@ -1193,7 +1193,7 @@
.ui[class*="center aligned"].grid,
.ui[class*="center aligned"].grid > .row > .column,
.ui[class*="center aligned"].grid > .column,
.ui.grid > [class*="center aligned"].aligned.row > .column {
.ui.grid > [class*="center aligned"].row > .column {
text-align: center;
}
.ui.grid [class*="center aligned"].column{
@ -1204,7 +1204,7 @@
.ui[class*="right aligned"].grid,
.ui[class*="right aligned"].grid > .row > .column,
.ui[class*="right aligned"].grid > .column,
.ui.grid > [class*="right aligned"].aligned.row > .column {
.ui.grid > [class*="right aligned"].row > .column {
text-align: right;
}
.ui.grid [class*="right aligned"].column{
@ -1234,19 +1234,20 @@
.ui[class*="top aligned"].grid > .row > .column,
.ui[class*="top aligned"].grid > .column,
.ui.grid [class*="top aligned"].column,
.ui.grid > [class*="top aligned"].aligned.row > .column {
.ui.grid > [class*="top aligned"].row > .column {
vertical-align: top;
}
.ui.grid [class*="top aligned"].column{
.ui.grid [class*="top aligned"].column {
vertical-align: top !important;
}
/* Middle Aligned */
.ui[class*="center aligned"].grid,
.ui[class*="middle aligned"].grid,
.ui[class*="middle aligned"].grid > .row > .column,
.ui[class*="middle aligned"].grid > .column,
.ui.grid > [class*="middle aligned"].aligned.row > .column {
.ui.grid > [class*="middle aligned"].row > .column {
vertical-align: middle;
align-items: center;
}
.ui.grid [class*="middle aligned"].column{
vertical-align: middle !important;
@ -1256,13 +1257,29 @@
.ui[class*="bottom aligned"].grid,
.ui[class*="bottom aligned"].grid > .row > .column,
.ui[class*="bottom aligned"].grid > .column,
.ui.grid > [class*="bottom aligned"].aligned.row > .column {
.ui.grid > [class*="bottom aligned"].row > .column {
vertical-align: bottom;
align-items: flex-end;
}
.ui.grid [class*="bottom aligned"].column{
vertical-align: bottom !important;
}
/* Flex
.ui[class*="top aligned"].grid,
.ui.grid > [class*="top aligned"].row {
align-items: flex-start;
}
.ui[class*="middle aligned"].grid,
.ui.grid > [class*="middle aligned"].row {
align-items: center;
}
.ui[class*="bottom aligned"].grid,
.ui.grid > [class*="bottom aligned"].row {
align-items: flex-end;
}
*/
/*----------------------
Colored
-----------------------*/
@ -1396,23 +1413,38 @@
.ui[class*="equal height"].grid {
display: table;
table-layout: fixed;
}
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: table;
table-layout: fixed;
display: flex;
flex-direction: row;
width: 100% !important;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: table-cell;
}
/* Flexbox (Experimental / Overrides Where Supported)
.ui[class*="equal height"].grid {
display: flex;
flex-direction: row;
}
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: flex;
flex-direction: row;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: inline-flex;
flex-direction: column;
flex: 1 0 auto;
}
*/
/*-------------------
Doubling

80
src/definitions/modules/popup.js
View File

@ -70,7 +70,6 @@ $.fn.popup = function(parameters) {
// binds events
initialize: function() {
module.debug('Initializing module', $module);
module.refresh();
if(settings.on == 'click') {
$module
.on('click' + eventNamespace, module.toggle)
@ -88,12 +87,9 @@ $.fn.popup = function(parameters) {
$window
.on('resize' + eventNamespace, module.event.resize)
;
if( !module.exists() ) {
if( !module.exists() && settings.preserve) {
module.create();
}
else if(settings.hoverable) {
module.bind.popup();
}
module.instantiate();
},
@ -111,29 +107,31 @@ $.fn.popup = function(parameters) {
}
else {
if(settings.inline) {
$popup = $target.next(settings.selector.popup);
$popup = $target.next(selector.popup);
}
}
if(settings.popup) {
$popup.addClass(className.loading);
$offsetParent = $module.offsetParent();
if($popup.offsetParent()[0] !== $offsetParent[0]) {
$offsetParent = module.get.offsetParent();
$popup.removeClass(className.loading);
if(module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
module.debug('Moving popup to the same offset parent as activating element');
$popup
.detach()
.appendTo($offsetParent)
;
}
$popup.removeClass(className.loading);
}
else {
$offsetParent = (settings.inline)
? $target.offsetParent()
: $body
? module.get.offsetParent($target)
: module.has.popup()
? module.get.offsetParent($popup)
: $body
;
}
if( $offsetParent.is('html') ) {
module.debug('Page is popups offset parent');
module.debug('Setting page as offset parent');
$offsetParent = $body;
}
},
@ -228,14 +226,23 @@ $.fn.popup = function(parameters) {
.appendTo( $context )
;
}
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
settings.onCreate.call($popup, element);
}
else if($target.next(settings.selector.popup).length !== 0) {
module.verbose('Pre-existing popup found, reverting to inline');
else if($target.next(selector.popup).length !== 0) {
module.verbose('Pre-existing popup found');
settings.inline = true;
settings.popup = $target.next(selector.popup);
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
}
else if(settings.popup) {
module.verbose('Used popup specified in settings');
module.refresh();
if(settings.hoverable) {
module.bind.popup();
@ -264,12 +271,12 @@ $.fn.popup = function(parameters) {
show: function(callback) {
callback = $.isFunction(callback) ? callback : function(){};
module.debug('Showing pop-up', settings.transition);
if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( !module.exists() ) {
module.create();
}
else if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( $popup && module.set.position() ) {
module.save.conditions();
module.animate.show(callback);
@ -322,8 +329,9 @@ $.fn.popup = function(parameters) {
removePopup: function() {
module.debug('Removing popup', $popup);
if( module.has.popup() ) {
if( module.has.popup() && !settings.popup) {
$popup.remove();
$popup = undefined;
}
settings.onRemove.call($popup, element);
},
@ -433,9 +441,35 @@ $.fn.popup = function(parameters) {
}
return false;
},
offsetParent: function($target) {
var
element = ($target !== undefined)
? $target[0]
: $module[0],
parentNode = element.parentNode,
$node = $(parentNode)
;
if(parentNode) {
var
is2D = ($node.css('transform') === 'none'),
isStatic = ($node.css('position') === 'static'),
isHTML = $node.is('html')
;
while(parentNode && !isHTML && isStatic && is2D) {
parentNode = parentNode.parentNode;
$node = $(parentNode);
is2D = ($node.css('transform') === 'none');
isStatic = ($node.css('position') === 'static');
isHTML = $node.is('html');
}
}
return ($node && $node.length > 0)
? $node
: $()
;
},
offstagePosition: function(position) {
var
position = position || false,
boundary = {
top : $(window).scrollTop(),
bottom : $(window).scrollTop() + $(window).height(),
@ -450,6 +484,7 @@ $.fn.popup = function(parameters) {
offstage = {},
offstagePositions = []
;
position = position || false;
if(popup.offset && position) {
module.verbose('Checking if outside viewable area', popup.offset);
offstage = {
@ -610,7 +645,6 @@ $.fn.popup = function(parameters) {
});
module.debug('RTL: Popup positioning updated', computedPosition);
}
switch (computedPosition) {
case 'top left':
positioning = {
@ -801,7 +835,7 @@ $.fn.popup = function(parameters) {
has: {
popup: function() {
return ($popup.length > 0);
return ($popup && $popup.length > 0);
}
},
@ -828,7 +862,7 @@ $.fn.popup = function(parameters) {
reset: function() {
module.remove.visible();
if(settings.preserve || settings.popup) {
if(settings.preserve) {
if($.fn.transition !== undefined) {
$popup
.transition('remove transition')
@ -1057,7 +1091,7 @@ $.fn.popup.settings = {
target : false,
popup : false,
inline : false,
preserve : true,
preserve : false,
hoverable : false,
duration : 200,

2
src/definitions/modules/transition.js
View File

@ -879,7 +879,7 @@ $.fn.transition.settings = {
onHide : function() {},
// whether timeout should be used to ensure callback fires in cases animationend does not
useFailSafe : false,
useFailSafe : true,
// whether EXACT animation can occur twice in a row
allowRepeats : false,

Write Preview
Loading…
Cancel
Save