converted last method to jQuery
This commit is contained in:
parent
c1be12d0fc
commit
599f1cb023
2 changed files with 20 additions and 13 deletions
6
app/assets/javascripts/extensions/element.js.es6
Normal file
6
app/assets/javascripts/extensions/element.js.es6
Normal file
|
@ -0,0 +1,6 @@
|
|||
Element.prototype.matches = Element.prototype.matches || Element.prototype.msMatches;
|
||||
|
||||
Element.prototype.closest = function closest(selector, selectedElement = this) {
|
||||
if (!selectedElement) return;
|
||||
return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
|
||||
};
|
|
@ -7,9 +7,9 @@
|
|||
}
|
||||
|
||||
initGraphToggle() {
|
||||
this.pipelineGraph = document.querySelector('.pipeline-graph');
|
||||
this.toggleButton = document.querySelector('.toggle-pipeline-btn');
|
||||
this.toggleButtonText = this.toggleButton.querySelector('.toggle-btn-text');
|
||||
this.pipelineGraph = document.querySelector('.pipeline-graph');
|
||||
this.toggleButton.addEventListener('click', this.toggleGraph.bind(this));
|
||||
}
|
||||
|
||||
|
@ -17,21 +17,22 @@
|
|||
const graphCollapsed = this.pipelineGraph.classList.contains('graph-collapsed');
|
||||
this.toggleButton.classList.toggle('graph-collapsed');
|
||||
this.pipelineGraph.classList.toggle('graph-collapsed');
|
||||
graphCollapsed ? this.toggleButtonText.textContent = 'Hide' : this.toggleButtonText.textContent = 'Expand';
|
||||
this.toggleButtonText.textContent = graphCollapsed ? 'Hide' : 'Expand';
|
||||
}
|
||||
|
||||
addMarginToBuildColumns() {
|
||||
const $secondChildBuildNode = $('.build:nth-child(2)');
|
||||
if ($secondChildBuildNode.length) {
|
||||
const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
|
||||
const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
|
||||
const $previousColumn = $multiBuildColumn.prev('.stage-column');
|
||||
$multiBuildColumn.addClass('left-margin');
|
||||
$firstChildBuildNode.addClass('left-connector');
|
||||
$previousColumn.each(function() {
|
||||
$this = $(this);
|
||||
if ($('.build', $this).length === 1) $this.addClass('no-margin');
|
||||
});
|
||||
const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
|
||||
for (buildNodeIndex in secondChildBuildNodes) {
|
||||
const buildNode = secondChildBuildNodes[buildNodeIndex];
|
||||
const firstChildBuildNode = buildNode.previousElementSibling;
|
||||
if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
|
||||
const multiBuildColumn = buildNode.closest('.stage-column');
|
||||
const previousColumn = multiBuildColumn.previousElementSibling;
|
||||
if (!previousColumn || !previousColumn.matches('.stage-column')) continue;
|
||||
multiBuildColumn.classList.add('left-margin');
|
||||
firstChildBuildNode.classList.add('left-connector');
|
||||
const columnBuilds = previousColumn.querySelectorAll('.build');
|
||||
if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
|
||||
}
|
||||
this.pipelineGraph.classList.remove('hidden');
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue