Skip to content

Commit

Permalink
TBX-3778: Refactored code of github and gitlab
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximmig
maximmig committed Sep 4, 2019
1 parent 6674a9f commit 684822e
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 65 deletions.
87 changes: 52 additions & 35 deletions github.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,44 +148,58 @@ if (!window.hasRun) {
resolve();
});

const renderCloneActions = (githubMetadata, tools) => new Promise(resolve => {
const addCloneActionEventHandler = (btn, githubMetadata) => {
btn.addEventListener('click', e => {
e.preventDefault();

const {toolTag} = e.currentTarget.dataset;
getProtocol().then(protocol => {
const cloneUrl = protocol === CLONE_PROTOCOLS.HTTPS
? getHttpsCloneUrl(githubMetadata)
: getSshCloneUrl(githubMetadata);
const action = getToolboxURN(toolTag, cloneUrl);

callToolbox(action);
});
});
};

const createCloneAction = (tool, githubMetadata) => {
const action = document.createElement('a');
action.setAttribute('class', 'btn btn-sm tooltipped tooltipped-s tooltipped-multiline BtnGroup-item');
action.setAttribute('href', '#');
action.setAttribute('aria-label', `Clone in ${tool.name}`);
action.dataset.toolTag = tool.tag;
action.innerHTML =
`<img alt="${tool.name}" src="${tool.icon}" width="16" height="16" style="vertical-align: text-top;">`;

addCloneActionEventHandler(action, githubMetadata);

return action;
};

const renderCloneActionsSync = (tools, githubMetadata) => {
const getRepoSelectMenu = document.querySelector('.js-get-repo-select-menu');

if (getRepoSelectMenu) {
const buttonGroup = document.createElement('div');
buttonGroup.classList.add('BtnGroup');

tools.forEach(tool => {
const btn = document.createElement('a');
btn.setAttribute('class', 'btn btn-sm tooltipped tooltipped-s tooltipped-multiline BtnGroup-item');
btn.setAttribute('href', '#');
btn.setAttribute('aria-label', `Clone in ${tool.name}`);
btn.dataset.toolTag = tool.tag;
btn.innerHTML =
`<img alt="${tool.name}" src="${tool.icon}" width="16" height="16" style="vertical-align: text-top;">`;
btn.addEventListener('click', e => {
e.preventDefault();

const {toolTag} = e.currentTarget.dataset;
getProtocol().then(protocol => {
const cloneUrl =
protocol === CLONE_PROTOCOLS.HTTPS ? getHttpsCloneUrl(githubMetadata) : getSshCloneUrl(githubMetadata);
const action = getToolboxURN(toolTag, cloneUrl);

callToolbox(action);
});
});

const btn = createCloneAction(tool, githubMetadata);
buttonGroup.appendChild(btn);
});

getRepoSelectMenu.insertAdjacentElement('beforebegin', buttonGroup);
}
};

const renderCloneActions = (tools, githubMetadata) => new Promise(resolve => {
renderCloneActionsSync(tools, githubMetadata);
resolve();
});

const addToolboxActionEventHandler = (domElement, tool, githubMetadata) => {
const addNavigateActionEventHandler = (domElement, tool, githubMetadata) => {
domElement.addEventListener('click', e => {
e.preventDefault();

Expand All @@ -201,19 +215,19 @@ if (!window.hasRun) {
});
};

const createOpenAction = (githubMetadata, tool) => {
const createOpenAction = (tool, githubMetadata) => {
const action = document.createElement('a');
action.setAttribute('class', 'btn-octicon tooltipped tooltipped-nw');
action.setAttribute('aria-label', `Open this file in ${tool.name}`);
action.setAttribute('href', '#');
action.innerHTML = `<img alt="${tool.name}" src="${tool.icon}" width="16" height="16">`;

addToolboxActionEventHandler(action, tool, githubMetadata);
addNavigateActionEventHandler(action, tool, githubMetadata);

return action;
};

const createOpenMenuItem = (githubMetadata, tool, first) => {
const createOpenMenuItem = (tool, first, githubMetadata) => {
const menuItem = document.createElement('a');
menuItem.setAttribute('class', 'dropdown-item');
menuItem.setAttribute('role', 'menu-item');
Expand All @@ -223,7 +237,7 @@ if (!window.hasRun) {
}
menuItem.textContent = `Open in ${tool.name}`;

addToolboxActionEventHandler(menuItem, tool, githubMetadata);
addNavigateActionEventHandler(menuItem, tool, githubMetadata);
menuItem.addEventListener('click', () => {
const blobToolbar = document.querySelector('.BlobToolbar');
if (blobToolbar) {
Expand All @@ -237,13 +251,13 @@ if (!window.hasRun) {
return menuItemContainer;
};

const renderOpenActions = (githubMetadata, tools) => new Promise(resolve => {
const renderOpenActionsSync = (tools, githubMetadata) => {
const actionAnchorElement =
document.querySelector('.repository-content .Box-header .BtnGroup + div > .btn-octicon');

if (actionAnchorElement) {
tools.forEach(tool => {
const action = createOpenAction(githubMetadata, tool);
const action = createOpenAction(tool, githubMetadata);
actionAnchorElement.insertAdjacentElement('beforebegin', action);
});
}
Expand All @@ -259,18 +273,21 @@ if (!window.hasRun) {
const blobToolbarDropdown = document.querySelector('.BlobToolbar-dropdown');
if (blobToolbarDropdown.dataset.toolboxified == null) {
tools.forEach((tool, toolIndex) => {
const menuItem = createOpenMenuItem(githubMetadata, tool, toolIndex === 0);
const menuItem = createOpenMenuItem(tool, toolIndex === 0, githubMetadata);
blobToolbarDropdown.appendChild(menuItem);
});
}
blobToolbarDropdown.dataset.toolboxified = 'true';
}
});
};

const renderOpenActions = (tools, githubMetadata) => new Promise(resolve => {
renderOpenActionsSync(tools, githubMetadata);
resolve();
});

const startTrackingDOMChanges = (githubMetadata, tools) => new Promise(resolve => {
const startTrackingDOMChanges = (tools, githubMetadata) => new Promise(resolve => {
const applicationMainElement = document.querySelector('.application-main');
if (applicationMainElement) {
// eslint-disable-next-line complexity
Expand All @@ -284,8 +301,8 @@ if (!window.hasRun) {
continue;
}
if (node.matches('.new-discussion-timeline')) {
renderCloneActions(githubMetadata, tools);
renderOpenActions(githubMetadata, tools);
renderCloneActionsSync(tools, githubMetadata);
renderOpenActionsSync(tools, githubMetadata);
}
}
}
Expand All @@ -300,9 +317,9 @@ if (!window.hasRun) {
then(metadata => fetchLanguages(metadata).
then(selectTools).
then(tools => renderPopupCloneActions(tools).
then(() => renderCloneActions(metadata, tools)).
then(() => renderOpenActions(metadata, tools)).
then(() => startTrackingDOMChanges(metadata, tools))
then(() => renderCloneActions(tools, metadata)).
then(() => renderOpenActions(tools, metadata)).
then(() => startTrackingDOMChanges(tools, metadata))
).
then(() => {
chrome.runtime.sendMessage({
Expand Down
69 changes: 39 additions & 30 deletions gitlab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,36 +125,45 @@ if (!window.hasRun) {
resolve();
});

const renderCloneActions = (gitlabMetadata, tools) => new Promise(resolve => {
const addCloneActionEventHandler = (btn, gitlabMetadata) => {
btn.addEventListener('click', e => {
e.preventDefault();

const {toolTag} = e.currentTarget.dataset;
getProtocol().then(protocol => {
const cloneUrl = protocol === CLONE_PROTOCOLS.HTTPS ? gitlabMetadata.https : gitlabMetadata.ssh;
const action = getToolboxURN(toolTag, cloneUrl);

callToolbox(action);
});
});
};

const createCloneAction = (tool, gitlabMetadata) => {
const action = document.createElement('a');
action.setAttribute('class', 'input-group-text btn btn-xs has-tooltip');
action.setAttribute('style', 'cursor:pointer');
action.dataset.title = `Clone in ${tool.name}`;
action.dataset.originalTitle = action.dataset.title;
action.setAttribute('aria-label', action.dataset.title);
action.dataset.toolTag = tool.tag;
action.innerHTML =
`<img alt="${tool.name}" src="${tool.icon}" width="16" height="16" style="vertical-align:text-top">`;

addCloneActionEventHandler(action, gitlabMetadata);

return action;
};

const renderCloneActions = (tools, gitlabMetadata) => new Promise(resolve => {
const gitCloneHolder = document.querySelector('.js-git-clone-holder');
const gitCloneHolderParent = gitCloneHolder ? gitCloneHolder.parentElement : null;
if (gitCloneHolderParent) {
const buttonGroup = document.createElement('div');
buttonGroup.setAttribute('class', 'd-inline-flex append-right-8');
buttonGroup.setAttribute('style', 'margin-top: 16px;');
tools.forEach(tool => {
const btn = document.createElement('a');
btn.setAttribute('class', 'input-group-text btn btn-xs has-tooltip');
btn.setAttribute('style', 'cursor:pointer');
btn.dataset.title = `Clone in ${tool.name}`;
btn.dataset.originalTitle = btn.dataset.title;
btn.setAttribute('aria-label', btn.dataset.title);
btn.dataset.toolTag = tool.tag;
btn.innerHTML =
`<img alt="${tool.name}" src="${tool.icon}" width="16" height="16" style="vertical-align:text-top">`;

btn.addEventListener('click', e => {
e.preventDefault();

const {toolTag} = e.currentTarget.dataset;
getProtocol().then(protocol => {
const cloneUrl = protocol === CLONE_PROTOCOLS.HTTPS ? gitlabMetadata.https : gitlabMetadata.ssh;
const action = getToolboxURN(toolTag, cloneUrl);

callToolbox(action);
});
});

const btn = createCloneAction(tool, gitlabMetadata);
buttonGroup.appendChild(btn);
});

Expand All @@ -164,7 +173,7 @@ if (!window.hasRun) {
resolve();
});

const addToolboxActionEventHandler = (domElement, tool, gitlabMetadata) => {
const addNavigateActionEventHandler = (domElement, tool, gitlabMetadata) => {
domElement.addEventListener('click', e => {
e.preventDefault();

Expand All @@ -179,7 +188,7 @@ if (!window.hasRun) {
});
};

const createOpenAction = (gitlabMetadata, tool) => {
const createOpenAction = (tool, gitlabMetadata) => {
const action = document.createElement('button');
action.setAttribute('class', 'btn btn-sm');
action.setAttribute('type', 'button');
Expand All @@ -193,20 +202,20 @@ if (!window.hasRun) {
action.innerHTML =
`<img alt="${tool.name}" src="${tool.icon}" width="15" height="15" style="position:relative;top:-2px">`;

addToolboxActionEventHandler(action, tool, gitlabMetadata);
addNavigateActionEventHandler(action, tool, gitlabMetadata);

return action;
};

const renderOpenActions = (gitlabMetadata, tools) => new Promise(resolve => {
const renderOpenActions = (tools, gitlabMetadata) => new Promise(resolve => {
const buttonGroupAnchorElement = document.querySelector('.file-holder .file-actions .btn-group:last-child');
if (buttonGroupAnchorElement) {
const toolboxButtonGroup = document.createElement('div');
toolboxButtonGroup.setAttribute('class', 'btn-group');
toolboxButtonGroup.setAttribute('role', 'group');

tools.forEach(tool => {
const action = createOpenAction(gitlabMetadata, tool);
const action = createOpenAction(tool, gitlabMetadata);
toolboxButtonGroup.appendChild(action);
});

Expand All @@ -222,8 +231,8 @@ if (!window.hasRun) {
then(metadata => fetchLanguages(metadata).
then(selectTools).
then(tools => renderPopupCloneActions(tools).
then(() => renderCloneActions(metadata, tools)).
then(() => renderOpenActions(metadata, tools))
then(() => renderCloneActions(tools, metadata)).
then(() => renderOpenActions(tools, metadata))
).
then(() => {
chrome.runtime.sendMessage({
Expand Down

0 comments on commit 684822e

Please sign in to comment.