Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed #70 - user now stays in the same tab while navigating around th… #289

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ All notable changes to AET will be documented in this file.
## Unreleased
**List of changes that are finished but not yet released in any final version.**

- [PR-289](https://github.com/Cognifide/aet/pull/289) User now stays on the same tab while navigating between URLs
- [PR-271](https://github.com/Cognifide/aet/pull/271) Added possibility to override name parameter from the aet client
- [PR-268](https://github.com/Cognifide/aet/pull/268) Bobcat upgrade to version 1.4.0
- [PR-279](https://github.com/Cognifide/aet/pull/279) Upgrade for some of libraries used by AET
Expand Down
125 changes: 93 additions & 32 deletions report/src/main/webapp/app/components/keyboardShortcuts.directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,11 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {

function traverseTreeDown(currentItem, testContainer, suiteContainer,
testUrlSelector) {
var currentTest,
currentLocation = window.location.hash,
$nextElement,
$firstElementInTest;
var currentTest;
var currentLocation = window.location.hash;
var $nextElement;
var $firstElementInTest;
var currentTabLabel;

if (!(ifRootPage(currentLocation, '/url/') || ifRootPage(
currentLocation, '/test/') || ifRootPage(currentLocation,
Expand All @@ -141,36 +142,36 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
if (!_.isEmpty($(suiteContainer).nextAll(
'.aside-report:not(.is-hidden)').first().find(
'.test-name'))) {
testContainer.removeClass('is-active');
currentItem.removeClass('is-active');
toggleNextTest(suiteContainer);
currentTabLabel = getCurrentTabLabel();
$nextElement = suiteContainer.nextAll(
'.aside-report:not(.is-hidden)').first();
$nextElement.addClass('is-expanded');
$nextElement.children().first().addClass('is-active');
scrollTo($nextElement.find('.is-active'));
'.aside-report:not(.is-hidden)').first();
handleStyling(testContainer, currentItem, $nextElement);
toggleNextTestItem(suiteContainer);
userSettingsService.setLastTab(currentTabLabel);
}

} else {
currentTabLabel = getCurrentTabLabel();
userSettingsService.setLastTab(currentTabLabel);
nextUrl.click();
scrollTo(nextUrl);
$(testUrlSelector).not(nextUrl).removeClass('is-active');
}
} else {
currentTest = findCurrentTest(currentLocation.split('/').pop());
$firstElementInTest = currentTest.find('.url-name:not(.is-hidden)').find(
testUrlSelector).first();
currentTest.addClass('is-expanded');
$firstElementInTest.click();
scrollTo($firstElementInTest);
currentTest = findCurrentTest(currentLocation.split('/').pop());
$firstElementInTest = currentTest.find('.url-name:not(.is-hidden)').find(
testUrlSelector).first();
currentTest.addClass('is-expanded');
$firstElementInTest.click();
scrollTo($firstElementInTest);
}
}

function traverseTreeUp(currentItem, testContainer, suiteContainer,
testUrlSelector) {
var previousTest,
currentLocation = window.location.hash,
$previousElement;
var previousTest;
var currentLocation = window.location.hash;
var $previousElement;
var currentTabLabel;

if (!(ifRootPage(currentLocation, '/url/') || ifRootPage(
currentLocation, '/test/') || ifRootPage(currentLocation,
Expand All @@ -183,12 +184,19 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
'.url-name:not(.is-hidden)').filter(':first').find(
testUrlSelector);
if (_.isEmpty(previousTest)) {
$previousElement = suiteContainer.find('.test-name');
scrollTo($previousElement);
$previousElement.click();
currentItem.parents('.url-name').removeClass('is-active');
suiteContainer.addClass('is-expanded');
if (!_.isEmpty($(suiteContainer).prevAll(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it would be worth to put following 20 lines into a separate method? traverseTreeUp is a little to long now.

'.aside-report:not(.is-hidden)').first()
.find('.test-name'))) {
currentTabLabel = getCurrentTabLabel();
$previousElement = suiteContainer.prevAll(
'.aside-report:not(.is-hidden)').first();
handleStyling(testContainer, currentItem, $previousElement);
togglePrevTestItem(suiteContainer);
userSettingsService.setLastTab(currentTabLabel);
}
} else {
currentTabLabel = getCurrentTabLabel();
userSettingsService.setLastTab(currentTabLabel);
scrollTo(previousTest);
previousTest.click();
}
Expand All @@ -208,13 +216,66 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
}
}

function toggleNextTest(currentTest) {
$(currentTest).nextAll('.aside-report:not(.is-hidden)')
.first()
.find('.test-name')
.click();
function handleStyling(testContainer, currentItem, $element) {
testContainer.removeClass('is-active');
currentItem.removeClass('is-active');
$element.addClass('is-expanded');
$element.children().first().addClass('is-active');
scrollTo($element.find('.is-active'));
}

function toggleNextTestItem(currentTest) {
$(currentTest).nextAll(
'.aside-report:not(.is-hidden)')
.first()
.find('.test-url')
.first()
.click();
}

function togglePrevTestItem(currentTest) {
$(currentTest).prevAll(
'.aside-report:not(.is-hidden)')
.first()
.find('.test-url')
.last()
.click();
}

function getCurrentTabLabel() {
return $('.nav-tabs > .nav-item').filter('.active').text().replace(/\s/g, '');
}

function clickOnTab() {
var currentTabLabel = userSettingsService.getLastTab();
var $nextTestTabs = $('.nav-tabs').children();
Copy link

@oliwerin oliwerin Jul 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In some places you use multiple var notation (here) and in others one var and variables declarations separated out by a comma. I'd be good to stick with just one of them.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed, but I still got some stuff to do (with MutationObserver) so I will commit tomorrow.

$nextTestTabs.each(function() {
if($(this).text().replace(/\s/g, '') === currentTabLabel) {
$(this).find('a').click();
currentTabLabel = null;
}
});
}

//MutationObserver fires a callback every time something changes on the page
//and here it's used to click a tab before the page is actually rendered to get rid of flickering effect
var mutationObserver = new MutationObserver(callback);

function callback(mutList) {
function findElement(element) {
if($(element.target).hasClass('nav-tabs')) {
clickOnTab();
return true;
}
}
mutList.find(findElement);
}

mutationObserver.observe(document, {
childList: true,
subtree: true,
});

function ifRootPage(url, type) {
return url.search(type) > 0;
}
Expand Down Expand Up @@ -252,4 +313,4 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
}
}
}
});
});
18 changes: 16 additions & 2 deletions report/src/main/webapp/app/services/userSettings.service.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,17 @@ define(['angularAMD', 'localStorageService'], function (angularAMD) {
isScreenshotMaskVisible: isScreenshotMaskVisible,
toggleScreenshotMask: toggleScreenshotMask,
isFullSourceVisible: isFullSourceVisible,
toggleFullSource: toggleFullSource
toggleFullSource: toggleFullSource,
setLastTab: setLastTab,
getLastTab: getLastTab,
},
SCREENSHOT_MASK_STORAGE_KEY = 'aet:settings.visibility.screenshotMask',
FULL_SOURCE_MASK_STORAGE_KEY = 'aet:settings.visibility.fullSource',
USER_TAB_MASK_STORAGE_KEY = 'aet:settings.raport.lastTab',
settings = {
screenshotMaskVisible: true,
fullSourceMaskVisible: false
fullSourceMaskVisible: false,
lastUserTab: null,
};

setupService();
Expand All @@ -45,6 +49,8 @@ define(['angularAMD', 'localStorageService'], function (angularAMD) {
true);
settings.fullSourceMaskVisible = getSetting(FULL_SOURCE_MASK_STORAGE_KEY,
false);
settings.lastUserTab = getSetting(USER_TAB_MASK_STORAGE_KEY,
null);
}

function isScreenshotMaskVisible() {
Expand All @@ -67,6 +73,14 @@ define(['angularAMD', 'localStorageService'], function (angularAMD) {
return settings.fullSourceMaskVisible;
}

function setLastTab(val) {
settings.userTab = val;
}

function getLastTab() {
return settings.userTab;
}

/***************************************
*********** Private methods *********
***************************************/
Expand Down