Skip to content

Commit

Permalink
Update: (liferay#481) Side Navigation JS that is type relative shou…
Browse files Browse the repository at this point in the history 
…ld push over content based on menu size and position of content on the page

Update: Side Navigation JS `.sidenav-menu` should adjust if `.sidenav-content` becomes taller than the menu

Update: Side Navigation JS `clearStyle` should accept multiple css properties

New: Side Navigation JS added option to configure `heightType`, a full height `sidenav-menu` that is as tall as the document, and deprecate `equalHeight` option
  • Loading branch information
@pat270
pat270 committed Feb 20, 2018
1 parent 1804c0c commit 28bbe60
Showing 1 changed file with 125 additions and 38 deletions.
163 changes: 125 additions & 38 deletions packages/clay/src/js/side-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@
options.breakpoint = toInt(options.breakpoint);
options.container = options.container || toggler.data('target') || toggler.attr('href');
options.gutter = toInt(options.gutter);
options.heightType = options.heightType || (options.equalHeight ? 'equalHeight' : false);
options.rtl = doc.attr('dir') === 'rtl';
options.width = toInt(options.width);
options.widthOriginal = options.width;
Expand All @@ -116,7 +117,7 @@
if (useDataAttribute) {
options.closedClass = toggler.data('closed-class') || 'closed';
options.content = toggler.data('content');
options.equalHeight = false;
options.equalHeight = false; // equalHeight option is deprecated
options.loadingIndicatorTPL = toggler.data('loading-indicator-tpl') || options.loadingIndicatorTPL;
options.openClass = toggler.data('open-class') || 'open';
options.toggler = toggler;
Expand Down Expand Up @@ -152,7 +153,14 @@

var els = content.add(navigation).add(menu);

els.css(attribute, '');
if (Array.isArray(attribute)) {
for (var i = 0; i < attribute.length; i++) {
els.css(attribute[i], '');
}
}
else {
els.css(attribute, '');
}
},

destroy: function() {
Expand Down Expand Up @@ -213,6 +221,7 @@
var paddingDirection = 'padding-' + positionDirection;

content.css(paddingDirection, '').css(positionDirection, '');

navigation.css('width', '');

if (sidenavRight) {
Expand Down Expand Up @@ -272,25 +281,75 @@

var options = instance.options;

if (options.equalHeight) {
var container = $(options.container);
var container = $(options.container);
var content = options.content;
var navigation = options.navigation;

var type = instance.mobile ? options.typeMobile : options.type;

if (type !== 'fixed' && type !== 'fixed-push') {
var contentNode = container.find(content).first();
var navNode = container.find(navigation).first();
var sideNavMenuNode = container.find('.sidenav-menu').first();

var tallest = Math.max(contentNode.outerHeight(), navNode.outerHeight());

contentNode.css('min-height', tallest);

navNode.css({
'min-height': tallest,
'height': '100%'
});

sideNavMenuNode.css({
'min-height': tallest,
'height': '100%'
});
}
},

setFullHeight: function() {
var instance = this;

var content = options.content;
var navigation = options.navigation;
var options = instance.options;

var container = $(options.container);
var navigation = options.navigation;

var type = instance.mobile ? options.typeMobile : options.type;
var type = instance.mobile ? options.typeMobile : options.type;

if (type !== 'fixed' && type !== 'fixed-push') {
var contentNode = container.find(content).first();
var navNode = container.find(navigation).first();
var sideNavMenuNode = container.find('.sidenav-menu').first();
if (type === 'relative') {
var navNode = container.find(navigation).first();
var sidenavMenuNode = container.find('.sidenav-menu').first();

var tallest = Math.max(contentNode.outerHeight(), navNode.outerHeight());
var minHeight = doc.innerHeight() - navNode.offset().top;

contentNode.css('min-height', tallest);
navNode.css('min-height', tallest);
sideNavMenuNode.css('min-height', tallest);
if (sidenavMenuNode.innerHeight() + navNode.offset().top > doc.innerHeight()) {
minHeight = sidenavMenuNode.innerHeight();
}

navNode.css({
'min-height': minHeight,
'height': '100%'
});

sidenavMenuNode.css({
'min-height': minHeight,
'height': '100%'
});
}
},

setHeight: function() {
var instance = this;

var options = instance.options;

if (options.heightType === 'equalHeight') {
instance.setEqualHeight();
}
else if (options.heightType === 'fullHeight') {
instance.setFullHeight();
}
},

Expand Down Expand Up @@ -326,13 +385,16 @@
container.one(
'urlLoaded.lexicon.sidenav',
function(event) {
instance.setEqualHeight();
instance.setHeight();
}
);

instance._loadUrl(menu, url, container);
}

navigation.css('width', width);
menu.css('width', width);

var positionDirection = options.rtl ? 'right' : 'left';

if (sidenavRight) {
Expand All @@ -345,11 +407,32 @@
var type = mobile ? options.typeMobile : options.type;

if (type !== 'fixed') {
content.css(pushContentCssProperty, offset);
}
var navigationStartX = container.hasClass('open') ? navigation.offset().left - options.gutter : navigation.offset().left - offset;

navigation.css('width', width);
menu.css('width', width);
var contentStartX = content.offset().left;
var contentWidth = content.innerWidth();

var padding = '';

if ((options.rtl && sidenavRight) || (!options.rtl && options.position === 'left')) {
navigationStartX = navigation.offset().left + offset;

if (navigationStartX > contentStartX) {
padding = navigationStartX - contentStartX;
}
}
else if ((options.rtl && options.position === 'left') || (!options.rtl && sidenavRight)) {
if (navigationStartX < contentStartX + contentWidth) {
padding = (contentStartX + contentWidth) - navigationStartX;

if (padding >= offset) {
padding = offset;
}
}
}

content.css(pushContentCssProperty, padding);
}
},

showSimpleSidenav: function() {
Expand Down Expand Up @@ -441,7 +524,7 @@
var menu = container.find('.sidenav-menu').first();

if (container.hasClass('closed')) {
instance.clearStyle('min-height');
instance.clearStyle(['min-height', 'height']);

toggler.removeClass('open').removeClass('sidenav-transition');

Expand All @@ -465,7 +548,7 @@
});

if (closed) {
instance.setEqualHeight();
instance.setHeight();

menu.css('width', width);

Expand Down Expand Up @@ -726,7 +809,8 @@

if ((!desktop && screenStartDesktop) || (desktop && !screenStartDesktop)) {
instance.hideSidenav();
instance.clearStyle('min-height');

instance.clearStyle([ 'min-height', 'height' ]);

container.addClass('closed').removeClass('open');
toggler.removeClass('active').removeClass('open');
Expand Down Expand Up @@ -763,9 +847,10 @@
}

if (!closed) {
instance.clearStyle('min-height');
instance.clearStyle([ 'min-height', 'height' ]);

instance.showSidenav();
instance.setEqualHeight();
instance.setHeight();
}
});
},
Expand Down Expand Up @@ -817,7 +902,7 @@
}
else {
instance.showSidenav();
instance.setEqualHeight();
instance.setHeight();
}

container.removeClass('sidenav-js-fouc');
Expand Down Expand Up @@ -953,25 +1038,27 @@

/**
* Plugin options
* @property {String|Number} breakpoint The window width that defines the desktop size.
* @property {String} content The class or ID of the content container.
* @property {String|Number} breakpoint The window width that defines the desktop size.
* @property {String} content The class or ID of the content container.
* @property {String} container The class or ID of the sidenav container.
* @property {String|Number} gutter The space between the sidenav-slider and the sidenav-content.
* @property {String|Boolean} equalHeight The height of content and navigation should be equal.
* @property {String} navigation The class or ID of the navigation container.
* @property {String} position The position of the sidenav-slider. Possible values: left, right
* @property {String} type The type of sidenav in desktop. Possible values: relative, fixed, fixed-push
* @property {String} typeMobile The type of sidenav in mobile. Possible values: relative, fixed, fixed-push
* @property {String|Boolean} useDelegate The type of reference to use on the toggler event handler. Value false, directly binds click to the toggler.
* @property {String|Object} url The URL or $.ajax config object to fetch the content to inject into .sidebar-body
* @property {String|Number} width The width of the side navigation.
* @property {String|Number} gutter The space between the sidenav-slider and the sidenav-content.
* @property {String|Boolean} equalHeight The height of content and navigation should be equal. This is deprecated.
* @property {String} heightType Calculates the height of sidenav when type is relative. Possible values: `fullHeight`, `equalHeight`
* @property {String} navigation The class or ID of the navigation container.
* @property {String} position The position of the sidenav-slider. Possible values: left, right
* @property {String} type The type of sidenav in desktop. Possible values: relative, fixed, fixed-push
* @property {String} typeMobile The type of sidenav in mobile. Possible values: relative, fixed, fixed-push
* @property {String|Boolean} useDelegate The type of reference to use on the toggler event handler. Value false, directly binds click to the toggler.
* @property {String|Object} url The URL or $.ajax config object to fetch the content to inject into .sidebar-body
* @property {String|Number} width The width of the side navigation.
*/

Plugin.defaults = {
breakpoint: 768,
content: '.sidenav-content',
equalHeight: true,
equalHeight: true, // equalHeight option is deprecated, use heightType instead
gutter: '15px',
heightType: null,
loadingIndicatorTPL: '<div class="loading-animation loading-animation-md"></div>',
navigation: '.sidenav-menu-slider',
position: 'left',
Expand Down

0 comments on commit 28bbe60

Please sign in to comment.