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-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.OxMenu.OxLeft {
border-top-left-radius: 4px;
}
.OxMenu.OxRight { .OxMenu.OxRight {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
.OxMenu .OxTop { .OxMenu .OxTop {
height: 4px; height: 4px;
} }
.OxMenu.OxLeft .OxTop {
border-top-left-radius: 4px;
}
.OxMenu.OxRight .OxTop { .OxMenu.OxRight .OxTop {
border-top-right-radius: 4px; 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(), var offset = self.options.element.offset(),
width = self.options.element.outerWidth(), width = self.options.element.outerWidth(),
height = self.options.element.outerHeight(), height = self.options.element.outerHeight(),
left = Ox.limit( menuWidth = that.width(),
offset.left + self.options.offset.left + (self.options.edge == 'bottom' ? 0 : width), windowWidth = Ox.UI.$window.width(),
0, Ox.UI.$window.width() - that.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), top = offset.top + self.options.offset.top + (self.options.edge == 'bottom' ? height : 0),
menuHeight = that.$content.outerHeight(), // fixme: why is outerHeight 0 when hidden? menuHeight = that.$content.outerHeight(), // fixme: why is outerHeight 0 when hidden?
menuMaxHeight = Math.floor(Ox.UI.$window.height() - top - 16); 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 (self.options.parent) {
if (menuHeight > menuMaxHeight) { if (menuHeight > menuMaxHeight) {
top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top); 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({ that.css({