0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make bottom menus right-aligned if they wouldn't fit the window when left-aligned

Browse source
This commit is contained in:
rolux 2014-05-24 16:16:08 +02:00
parent af345b3514
commit 97233d417d
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/Ox.UI/css/Ox.UI.css
View file

@ -1873,12 +1873,18 @@ Menus
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.OxMenu.OxLeft {
border-top-left-radius: 4px;
}
.OxMenu.OxRight {
border-top-right-radius: 4px;
}
.OxMenu .OxTop {
height: 4px;
}
.OxMenu.OxLeft .OxTop {
border-top-left-radius: 4px;
}
.OxMenu.OxRight .OxTop {
border-top-right-radius: 4px;
}

15
source/Ox.UI/js/Menu/Menu.js
View file

@ -802,17 +802,22 @@ Ox.Menu = function(options, self) {
var offset = self.options.element.offset(),
width = self.options.element.outerWidth(),
height = self.options.element.outerHeight(),
left = Ox.limit(
offset.left + self.options.offset.left + (self.options.edge == 'bottom' ? 0 : width),
0, Ox.UI.$window.width() - that.width()
),
menuWidth = that.width(),
windowWidth = Ox.UI.$window.width(),
windowHeight = Ox.UI.$window.height(),
left = offset.left + self.options.offset.left + (self.options.edge == 'bottom' ? 0 : width),
right,
top = offset.top + self.options.offset.top + (self.options.edge == 'bottom' ? height : 0),
menuHeight = that.$content.outerHeight(), // fixme: why is outerHeight 0 when hidden?
menuMaxHeight = Math.floor(Ox.UI.$window.height() - top - 16);
if (self.options.edge == 'bottom' && left + menuWidth > windowWidth) {
left = offset.left + width - menuWidth;
that.is('.OxRight') && that.removeClass('OxRight') && that.addClass('OxLeft');
}
if (self.options.parent) {
if (menuHeight > menuMaxHeight) {
top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top);
menuMaxHeight = Math.floor(Ox.UI.$window.height() - top - 16);
menuMaxHeight = Math.floor(windowHeight - top - 16);
}
}
that.css({