Skip to content

Commit

Permalink
Fix for joomla#11521 : Isis admin menu on small viewport width devices (
Browse files Browse the repository at this point in the history 
joomla#11528)

* Fix for joomla#11521 : Isis admin menu on small viewport width devices

Do not run auto-scrolling on small devices for Isis admin menu

* Adjust min-width for auto-scrolling

* Remove extra empty line
  • Loading branch information
@cyrezdev @rdeutz
cyrezdev authored and rdeutz committed Aug 16, 2016
1 parent 68115ca commit 261c63d
Showing 1 changed file with 90 additions and 83 deletions.
173 changes: 90 additions & 83 deletions administrator/templates/isis/js/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,108 +69,115 @@
/**
* Append submenu items to empty UL on hover allowing a scrollable dropdown
*/
var menuScroll = $('#menu > li > ul'),
emptyMenu = $('#nav-empty');

$('#menu > li').on('click mouseenter', function() {

// Set max-height (and width if scroll) for dropdown menu, depending of window height
var $dropdownMenu = $(this).children('ul'),
windowHeight = $w.height(),
linkHeight = $(this).outerHeight(true),
statusHeight = $('#status').outerHeight(true),
menuHeight = $dropdownMenu.height(),
menuOuterHeight = $dropdownMenu.outerHeight(true),
scrollMenuWidth = $dropdownMenu.width() + 15,
maxHeight = windowHeight - (linkHeight + statusHeight + (menuOuterHeight - menuHeight) + 20);

if (maxHeight < menuHeight) {
$dropdownMenu.css('width', scrollMenuWidth);
} else if (maxHeight > menuHeight) {
$dropdownMenu.css('width', 'auto');
}
if ($w.width() > 767) {

var menuScroll = $('#menu > li > ul'),
emptyMenu = $('#nav-empty');

$('#menu > li').on('click mouseenter', function() {

// Set max-height (and width if scroll) for dropdown menu, depending of window height
var $dropdownMenu = $(this).children('ul'),
windowHeight = $w.height(),
linkHeight = $(this).outerHeight(true),
statusHeight = $('#status').outerHeight(true),
menuHeight = $dropdownMenu.height(),
menuOuterHeight = $dropdownMenu.outerHeight(true),
scrollMenuWidth = $dropdownMenu.width() + 15,
maxHeight = windowHeight - (linkHeight + statusHeight + (menuOuterHeight - menuHeight) + 20);

if (maxHeight < menuHeight) {
$dropdownMenu.css('width', scrollMenuWidth);
} else if (maxHeight > menuHeight) {
$dropdownMenu.css('width', 'auto');
}

$dropdownMenu.css('max-height', maxHeight);
$dropdownMenu.css('max-height', maxHeight);

// Get the submenu position
linkWidth = $(this).outerWidth(true);
menuWidth = $dropdownMenu.width();
linkPaddingLeft = $(this).children('a').css('padding-left');
offsetLeft = Math.round($(this).offset().left) - parseInt(linkPaddingLeft);
// Get the submenu position
linkWidth = $(this).outerWidth(true);
menuWidth = $dropdownMenu.width();
linkPaddingLeft = $(this).children('a').css('padding-left');
offsetLeft = Math.round($(this).offset().left) - parseInt(linkPaddingLeft);

emptyMenu.empty().hide();
emptyMenu.empty().hide();

});
});

menuScroll.find('.dropdown-submenu > a').on('mouseover', function() {
menuScroll.find('.dropdown-submenu > a').on('mouseover', function() {

var $self = $(this),
dropdown = $self.next('ul'),
submenuWidth = dropdown.outerWidth(),
offsetTop = $self.offset().top,
linkPaddingTop = parseInt(dropdown.css('padding-top')) + parseInt($(this).css('padding-top')),
scroll = $w.scrollTop() + linkPaddingTop;
var $self = $(this),
dropdown = $self.next('ul'),
submenuWidth = dropdown.outerWidth(),
offsetTop = $self.offset().top,
linkPaddingTop = parseInt(dropdown.css('padding-top')) + parseInt($(this).css('padding-top')),
scroll = $w.scrollTop() + linkPaddingTop;

// Set the submenu position
if ($('html').attr('dir') == 'rtl')
{
emptyMenu.css({
top : offsetTop - scroll,
left: offsetLeft - (menuWidth - linkWidth) - submenuWidth
});
}
else
{
emptyMenu.css({
top : offsetTop - scroll,
left: offsetLeft + menuWidth
});
}
// Set the submenu position
if ($('html').attr('dir') == 'rtl')
{
emptyMenu.css({
top : offsetTop - scroll,
left: offsetLeft - (menuWidth - linkWidth) - submenuWidth
});
}
else
{
emptyMenu.css({
top : offsetTop - scroll,
left: offsetLeft + menuWidth
});
}

// Append items to empty <ul> and show it
dropdown.hide();
emptyMenu.show().html(dropdown.html());
// Append items to empty <ul> and show it
dropdown.hide();
emptyMenu.show().html(dropdown.html());

// Check if the full element is visible. If not, adjust the position
if (emptyMenu.Jvisible() !== true)
{
emptyMenu.css({
top : ($w.height() - emptyMenu.outerHeight()) - $('#status').height()
});
}
// Check if the full element is visible. If not, adjust the position
if (emptyMenu.Jvisible() !== true)
{
emptyMenu.css({
top : ($w.height() - emptyMenu.outerHeight()) - $('#status').height()
});
}

});
menuScroll.find('a.no-dropdown').on('mouseenter', function() {
});

emptyMenu.empty().hide();
menuScroll.find('a.no-dropdown').on('mouseenter', function() {

});
$(document).on('click', function() {
emptyMenu.empty().hide();

emptyMenu.empty().hide();
});

});
$(document).on('click', function() {

$.fn.Jvisible = function(partial,hidden)
{
if (this.length < 1)
emptyMenu.empty().hide();

});

$.fn.Jvisible = function(partial,hidden)
{
return;
}
if (this.length < 1)
{
return;
}

var $t = this.length > 1 ? this.eq(0) : this,
t = $t.get(0)

var $t = this.length > 1 ? this.eq(0) : this,
t = $t.get(0)
var viewTop = $w.scrollTop(),
viewBottom = (viewTop + $w.height()) - $('#status').height(),
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

var viewTop = $w.scrollTop(),
viewBottom = (viewTop + $w.height()) - $('#status').height(),
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return !!t.offsetWidth * t.offsetHeight && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};

}

return !!t.offsetWidth * t.offsetHeight && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};

/**
* USED IN: All views with toolbar and sticky bar enabled
Expand Down

0 comments on commit 261c63d

Please sign in to comment.