Skip to content

Commit

Permalink
Merge branch 'develop' into highcharts
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesjacobs
jamesjacobs authored Nov 16, 2020
2 parents 34da94f + f8595ba commit 1ca535f
Show file tree
Hide file tree
Showing 17 changed files with 290 additions and 166 deletions.
8 changes: 4 additions & 4 deletions js/HelpTextComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@ HelpTextComponent.prototype.updateHelpSidebar = function () {
var component = this,
$activeTabContainer = component.$html.find('.tab__pane.is-active .tab__container'),
activeTabSideBarContentHtml = component.$html.find('.tab__pane.is-active .tab__sidebar').html(),
$mobileToggleHelpButton = $('<button class="show-page-help js-show-page-help"><i class="icon-question-sign" aria-hidden="true"></i><span class="hide">Show on-page help</span></button>'),
$mobileToggleContainer = component.$html.find('.toolbar'),
$mobileToggleHelpButton = $('<button type="button" class="btn show-page-help js-show-page-help">Show Page Help</button>'),
$mobileToggleContainer = component.$html.find('.tab__pane.is-active .tab__content'),
$tabHelp = component.$html.find('.tab-help'),
isMobile,
mobileCloseHelpButton = '<button class="close-page-help js-close-page-help"><i class="icon-remove-sign" aria-hidden="true"></i><span class="hide">Close on-page help</span></button>';
mobileCloseHelpButton = '<button type="button" class="close-page-help js-close-page-help"><i class="icon-remove-sign" aria-hidden="true"></i><span class="hide">Close on-page help</span></button>';

// Check if active tab has help text
if (activeTabSideBarContentHtml && activeTabSideBarContentHtml.length > 0) {
Expand All @@ -111,7 +111,7 @@ HelpTextComponent.prototype.updateHelpSidebar = function () {

// If mobile help button doesn't already exist add it if help text exists
if (!$mobileToggleContainer.find('.js-show-page-help').length) {
$mobileToggleHelpButton.appendTo($mobileToggleContainer);
$mobileToggleHelpButton.prependTo($mobileToggleContainer);
}

// Add class used for setting desktop column widths
Expand Down
9 changes: 6 additions & 3 deletions js/Modals/ModalFocusService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,18 @@ class ModalFocusService {
/**
* Manage focus
* If modal has focusable elements in body, focus the first
* if not, focus the X close button
* if for some reason it doesn't have that, focus the cancel button in footer
* If not, focus the X close button
* If for some reason it doesn't have that, focus the cancel button in footer
* As a last resort, search for anything to focus
*/
if ($modalBodyFocusableElements.length) {
$modalBodyFocusableElements.first().trigger('focus');
} else if ($modalCloseButton.length) {
$modalCloseButton.trigger('focus');
} else {
} else if ($modalFooterCancelButton.length) {
$modalFooterCancelButton.trigger('focus');
} else {
$modalFocusableElements.first().trigger('focus');
}

/**
Expand Down
94 changes: 74 additions & 20 deletions js/NavMainComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ function NavMainComponent ($html, rootWindow, focusManagementService) {
};

NavMainComponent.MISSING_ATTR_ERROR = 'A nav link must have a href or data-target attribute';
NavMainComponent.CLOSE_WITH_ESCAPE = "CLOSE_WITH_ESCAPE";
NavMainComponent.CLOSE_WITH_CLICK = "CLOSE_WITH_CLICK";

/**
* Initialise
Expand All @@ -27,7 +29,6 @@ NavMainComponent.prototype.init = function () {

component.$body = this.$html.find('body');
component.$navMain = this.$html.find('.nav-main');
component.$contentMain = this.$html.find('.content-main');
component.$brandingLink = this.$html.find('.jadu-branding');
component.$navPrimary = this.$html.find('.nav-primary');
component.$navSecondary = this.$html.find('.nav-secondary');
Expand Down Expand Up @@ -82,9 +83,11 @@ NavMainComponent.prototype.init = function () {
}
});

// Close navs on main content click
component.$contentMain.on('click', function () {
component.closeNavs($(this));
// Close navs when element outside of nav is clicked
component.$body.find('.toolbar, .content-main, .footer').on('click', function () {
if (component.isNavOpen()) {
component.closeNavs($(this));
}
});

// Open secondary nav on primary nav item click
Expand Down Expand Up @@ -126,18 +129,39 @@ NavMainComponent.prototype.init = function () {
this.$html.on('keydown', function (event) {
if (event.keyCode === 27) {
if (component.$navQuaternary.hasClass('is-open')) {
component.closeQuaternaryNav();
component.closeQuaternaryNav({ type: NavMainComponent.CLOSE_WITH_ESCAPE });
} else if (component.$navTertiary.hasClass('is-open')) {
component.closeTertiaryNav();
} else if (component.$navSecondary.hasClass('is-open')) {
component.closeSecondaryNav();
component.closeSecondaryNav({ type: NavMainComponent.CLOSE_WITH_ESCAPE });
} else if (isMobile && component.$body.hasClass('open-nav')) {
component.showMobileNav(false)
}
}
});
}

/**
* Check if any navs are open
* @returns {boolean}
*/
NavMainComponent.prototype.isNavOpen = function () {
var component = this,
isMobile = !component.window.matchMedia('(min-width: 992px)').matches;

if (isMobile && component.$body.hasClass('open-nav')) {
return true;
} else if (component.$navSecondary.hasClass('is-open')) {
return true;
} else if (component.$navTertiary.hasClass('is-open')) {
return true;
} else if (component.$navQuaternary.hasClass('is-open')) {
return true;
} else {
return false;
}
}

/**
* Unto the tabindex if the main nav is in responsive mode
* This maintains the tab order to ensure WCAG compliance
Expand All @@ -157,7 +181,7 @@ NavMainComponent.prototype.manageTabIndexes = function () {

/**
* Open secondary navigation, close all other navs and highlight primary nav item parent
* @param {jQuery} $linkClicked - the element clicked to open secondary nav
* @param {jQuery} $triggeringElement - the element clicked to open secondary nav
* @param {Event} event - click event for the primary nav link
*/
NavMainComponent.prototype.openSecondaryNav = function ($triggeringElement, event) {
Expand Down Expand Up @@ -235,28 +259,30 @@ NavMainComponent.prototype.closeNavs = function ($linkClicked) {
$linkParent = $linkClicked.closest('.nav-flyout');

if ($linkParent.hasClass('nav-secondary')) {
component.closeSecondaryNav();
component.closeSecondaryNav({ type: NavMainComponent.CLOSE_WITH_CLICK, trigger: $linkClicked });
}

else if ($linkParent.hasClass('nav-tertiary')) {
component.closeTertiaryNav();
}

else if ($linkParent.hasClass('nav-quaternary')) {
component.closeQuaternaryNav();
component.closeQuaternaryNav({ type: NavMainComponent.CLOSE_WITH_CLICK, trigger: $linkClicked });
}

// like a body click or something outside of navs
else {
component.closeSecondaryNav();
component.closeSecondaryNav({ type: NavMainComponent.CLOSE_WITH_CLICK, trigger: $linkClicked });
component.closeTertiaryNav();
component.closeQuaternaryNav();
component.closeQuaternaryNav({ type: NavMainComponent.CLOSE_WITH_CLICK, trigger: $linkClicked });
}
}

/**
* Close secondary navigation
* @param {Object} [action]
*/
NavMainComponent.prototype.closeSecondaryNav = function () {
NavMainComponent.prototype.closeSecondaryNav = function (action) {
var component = this;

component.$navMain.removeClass('is-open');
Expand All @@ -266,8 +292,23 @@ NavMainComponent.prototype.closeSecondaryNav = function () {
component.$navMain.find('.nav-item.is-active').removeClass('is-active');
component.$navSecondary.find('.nav-list').removeClass('is-active');

if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
if (action === undefined) {
return;
}

switch (action.type) {
case NavMainComponent.CLOSE_WITH_ESCAPE:
if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
}
break;
case NavMainComponent.CLOSE_WITH_CLICK:
if (action.trigger.parents('.nav-secondary').length > 0) {
if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
}
}
break;
}
}

Expand All @@ -288,22 +329,35 @@ NavMainComponent.prototype.closeTertiaryNav = function () {

/**
* Close quaternary navigation
* @param {Object} [action]
*/
NavMainComponent.prototype.closeQuaternaryNav = function () {
NavMainComponent.prototype.closeQuaternaryNav = function (action) {
var component = this;

component.$navQuaternary.removeClass('is-open');
component.$navQuaternary.find('.nav-list.is-active').removeClass('is-active');
component.$navTertiary.find('[aria-expanded=true]').attr('aria-expanded', 'false');

if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
if (action === undefined) {
return;
}

// Reset aria-expanded on tertiary link
component.$navTertiary.find('[aria-expanded=true]').attr('aria-expanded', 'false');
switch (action.type) {
case NavMainComponent.CLOSE_WITH_ESCAPE:
if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
}
break;
case NavMainComponent.CLOSE_WITH_CLICK:
if (action.trigger.parents('.nav-quaternary').length > 0) {
if (component.focusManagementService.hasStoredElement()) {
component.focusManagementService.returnFocusToElement();
}
}
break;
}
}


/**
* Toggle mobile navigation
*/
Expand Down
63 changes: 53 additions & 10 deletions js/Tooltips/TooltipListener.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,16 @@ class TooltipListener {
/**
* Tooltip listener
* @constructor
* @param {jQuery} $html - jQuery wrapper of the html node
* @param {jQuery} $html - jQuery wrapper of the container node
* @param {tippy} TippyJS lib
* @param {hideAll} Tippy hideAll method
*/
constructor ($html, tippy, hideAll) {
this.$html = $html;
this.tippy = tippy;
this.hideAll = hideAll
}

/**
* Initialise
*/
init () {
this.tippy('[data-tippy-content]', {

this.tippys = [];
this.tippyConfig = {
// Default to not allowing html inside of tooltip
allowHTML: false,

Expand All @@ -47,7 +41,14 @@ class TooltipListener {
onMount: this.onMount,
onHide: this.onHide,
onHidden: this.onHidden
});
};
}

/**
* Initialise
*/
init () {
this.tippys = this.tippy('[data-tippy-content]', this.tippyConfig);

// Close ESC button
this.$html.on('keydown', (event) => {
Expand All @@ -57,6 +58,48 @@ class TooltipListener {
});
}

/**
* Listen for new elements with tippys, ignore if already instantiated, create tooltip if not
* @param {jQuery} $html - jQuery wrapper of the container node
*/
listen ($html) {
// Only create new tippys
$html.find('[data-tippy-content]').each((index, element) => {
if (this.isInstantiated(element)) {
return;
}

this.tippys.push(this.tippy(element, this.tippyConfig));
});
}

/**
* Check if element is instantiated
* @param {Element} element - element to check for tippy instance
*/
isInstantiated(element) {
for (const tippy of this.tippys) {
if (tippy.reference === element) {
return true;
}
}
return false;
}

/**
* Get tippy instance of element
* @returns {(object|null)} tippy object relating to an element or null
*/
getInstance(element) {
for (const tippy of this.tippys) {
if (tippy.reference === element) {
return tippy;
}
}

return null;
}

onCreate (instance) {
// Remove unnecessary aria-expanded attribute (added by the interactive option - needed for content hover)
$(instance.reference).removeAttr('aria-expanded');
Expand Down
4 changes: 3 additions & 1 deletion stylesheets/_component.dropdowns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,13 @@

// Dividers (basically an hr) within the dropdown
.divider {
background-color: $dropdown-divider-bg;
display: block;
height: 1px;
margin: ($line-height-base / 4) 0;
min-width: 160px;
overflow: hidden;
background-color: $dropdown-divider-bg;
padding: 0;
}

> li {
Expand Down Expand Up @@ -312,6 +313,7 @@

&:focus {
@include pulsar-dropdown-item-focused;
background-color: color(background, focus) !important;
color: color(black) !important;
}

Expand Down
Loading

0 comments on commit 1ca535f

Please sign in to comment.