Skip to content

Commit

Permalink
Linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@janfaracik
janfaracik committed Oct 1, 2022
1 parent 113aa94 commit d77c2dd
Show file tree
Hide file tree
Showing 9 changed files with 212 additions and 145 deletions.
4 changes: 3 additions & 1 deletion war/src/main/js/api/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
* @param {string} searchTerm
*/
async function search(searchTerm) {
const address = document.getElementById("page-header").dataset.searchUrl.escapeHTML();
const address = document
.getElementById("page-header")
.dataset.searchUrl.escapeHTML();
return fetch(`${address}?query=${searchTerm}`);
}

Expand Down
10 changes: 7 additions & 3 deletions war/src/main/js/api/symbols.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import jenkins from "@/util/jenkins";

export function getSymbol(symbol, handler) {
jenkins.get("/symbols?symbol=" + symbol, function(res) {
handler(res.data["symbol"])
}, {async: false});
jenkins.get(
"/symbols?symbol=" + symbol,
function (res) {
handler(res.data["symbol"]);
},
{ async: false }
);
}
197 changes: 110 additions & 87 deletions war/src/main/js/components/command-palette/command-palette.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,50 @@
import {LinkResult} from "@/components/command-palette/models"
import {JenkinsSearchSource, SidebarSource} from "./datasources"
import Helpers from './helpers'
import debounce from "lodash/debounce"

const datasources = [JenkinsSearchSource, SidebarSource]

window.addEventListener('load', () => {
const i18n = document.getElementById("command-palette-i18n")
const headerCommandPaletteButton = document.getElementById("button-open-command-palette")
const commandPalette = document.getElementById("command-palette")
const commandPaletteWrapper = commandPalette.querySelector(".jenkins-command-palette__wrapper")
const commandPaletteInput = document.getElementById("command-bar")
const commandPaletteSearchBarContainer = commandPalette.querySelector(".jenkins-command-palette__search")
const searchResults = document.getElementById("search-results")
const searchResultsContainer = document.getElementById("search-results-container")

const hoverClass = "jenkins-command-palette__results__item--hover"
import { LinkResult } from "@/components/command-palette/models";
import { JenkinsSearchSource, SidebarSource } from "./datasources";
import Helpers from "./helpers";
import debounce from "lodash/debounce";

const datasources = [JenkinsSearchSource, SidebarSource];

window.addEventListener("load", () => {
const i18n = document.getElementById("command-palette-i18n");
const headerCommandPaletteButton = document.getElementById(
"button-open-command-palette"
);
const commandPalette = document.getElementById("command-palette");
const commandPaletteWrapper = commandPalette.querySelector(
".jenkins-command-palette__wrapper"
);
const commandPaletteInput = document.getElementById("command-bar");
const commandPaletteSearchBarContainer = commandPalette.querySelector(
".jenkins-command-palette__search"
);
const searchResults = document.getElementById("search-results");
const searchResultsContainer = document.getElementById(
"search-results-container"
);

const hoverClass = "jenkins-command-palette__results__item--hover";

// Events
headerCommandPaletteButton.addEventListener("click", async function () {
if (commandPalette.hasAttribute("open")) {
hideCommandPalette()
hideCommandPalette();
} else {
await showCommandPalette()
await showCommandPalette();
}
})
});

commandPaletteWrapper.addEventListener("click", function (e) {
if (e.target !== e.currentTarget) {
return
return;
}

hideCommandPalette()
})
hideCommandPalette();
});

async function renderResults() {
const query = commandPaletteInput.value
let results
const query = commandPaletteInput.value;
let results;

if (query.length === 0) {
results = [
Expand All @@ -45,137 +53,152 @@ window.addEventListener('load', () => {
i18n.dataset.getHelp,
undefined,
"Help",
document.getElementById("page-header").dataset.searchHelpUrl.escapeHTML(),
document
.getElementById("page-header")
.dataset.searchHelpUrl.escapeHTML(),
true
)
]
),
];
} else {
await Promise.all(datasources.map(ds => ds.execute(query))).then(response => {
results = response.flat()
})
await Promise.all(datasources.map((ds) => ds.execute(query))).then(
(response) => {
results = response.flat();
}
);
}

results = Helpers.groupResultsByCategory(results)
results = Helpers.groupResultsByCategory(results);

// Clear current search results
searchResults.innerHTML = ""
searchResults.innerHTML = "";

if (query.length === 0 || Object.keys(results).length > 0) {
for (const [category, items] of Object.entries(results)) {
const heading = document.createElement("p")
heading.className = "jenkins-command-palette__results__heading"
heading.innerText = category
searchResults.append(heading)
const heading = document.createElement("p");
heading.className = "jenkins-command-palette__results__heading";
heading.innerText = category;
searchResults.append(heading);

items.forEach(function (obj) {
const renderedObject = obj.render()
const renderedObject = obj.render();

let link = document.createElement("DIV")
let link = document.createElement("DIV");
if (renderedObject instanceof HTMLElement) {
link = renderedObject
link = renderedObject;
} else {
link.innerHTML = renderedObject
link = link.firstChild
link.innerHTML = renderedObject;
link = link.firstChild;
}
link.addEventListener("mouseenter", e => itemMouseEnter(e))
searchResults.append(link)
})
link.addEventListener("mouseenter", (e) => itemMouseEnter(e));
searchResults.append(link);
});
}

updateSelectedItem(0)
updateSelectedItem(0);
} else {
const label = document.createElement("p")
label.className = "jenkins-command-palette__info"
label.innerHTML = "<span>" + i18n.dataset.noResultsFor.escapeHTML() + "</span> " + commandPaletteInput.value.escapeHTML()
searchResults.append(label)
const label = document.createElement("p");
label.className = "jenkins-command-palette__info";
label.innerHTML =
"<span>" +
i18n.dataset.noResultsFor.escapeHTML() +
"</span> " +
commandPaletteInput.value.escapeHTML();
searchResults.append(label);
}

searchResultsContainer.style.height = searchResults.offsetHeight + "px"
commandPaletteSearchBarContainer.classList.remove("jenkins-search--loading")
searchResultsContainer.style.height = searchResults.offsetHeight + "px";
commandPaletteSearchBarContainer.classList.remove(
"jenkins-search--loading"
);
}

commandPaletteInput.addEventListener("input", () => {
commandPaletteSearchBarContainer.classList.add("jenkins-search--loading")
debounce(renderResults, 300)()
})
commandPaletteSearchBarContainer.classList.add("jenkins-search--loading");
debounce(renderResults, 300)();
});

commandPaletteInput.addEventListener("keyup", function (event) {
const maxLength = searchResults.getElementsByTagName("a").length
let selectedIndex = -1
let hoveredItem = document.querySelector("." + hoverClass)
const maxLength = searchResults.getElementsByTagName("a").length;
let selectedIndex = -1;
let hoveredItem = document.querySelector("." + hoverClass);

if (hoveredItem) {
selectedIndex = [...hoveredItem.parentElement.getElementsByTagName("a")].indexOf(hoveredItem)
selectedIndex = [
...hoveredItem.parentElement.getElementsByTagName("a"),
].indexOf(hoveredItem);
}

switch (event.code) {
case "Enter":
if (hoveredItem) {
window.location.href = hoveredItem.href
window.location.href = hoveredItem.href;
}
return false
return false;
case "ArrowUp":
if (selectedIndex !== -1) {
if (selectedIndex - 1 < 0) {
selectedIndex = maxLength - 1
selectedIndex = maxLength - 1;
} else {
selectedIndex--
selectedIndex--;
}

updateSelectedItem(selectedIndex, selectedIndex + 1 >= maxLength)
updateSelectedItem(selectedIndex, selectedIndex + 1 >= maxLength);
}
return false
return false;
case "ArrowDown":
if (selectedIndex !== -1) {
if (selectedIndex + 1 >= maxLength) {
selectedIndex = 0
selectedIndex = 0;
} else {
selectedIndex++
selectedIndex++;
}

updateSelectedItem(selectedIndex, selectedIndex + 1 >= maxLength)
updateSelectedItem(selectedIndex, selectedIndex + 1 >= maxLength);
}
return false
return false;
}
})
});

// Helper methods for visibility of command palette
async function showCommandPalette() {
commandPalette.showModal()
commandPaletteInput.focus()
commandPaletteInput.setSelectionRange(commandPaletteInput.value.length, commandPaletteInput.value.length)

await renderResults()
commandPalette.showModal();
commandPaletteInput.focus();
commandPaletteInput.setSelectionRange(
commandPaletteInput.value.length,
commandPaletteInput.value.length
);

await renderResults();
}

function hideCommandPalette() {
commandPalette.close()
commandPalette.close();
}

function itemMouseEnter(item) {
let hoveredItems = document.querySelector("." + hoverClass)
let hoveredItems = document.querySelector("." + hoverClass);
if (hoveredItems) {
hoveredItems.classList.remove(hoverClass)
hoveredItems.classList.remove(hoverClass);
}

item.target.classList.add(hoverClass)
item.target.classList.add(hoverClass);
}

function updateSelectedItem(index, scrollIntoView = false) {
const maxLength = searchResults.getElementsByTagName("a").length
const hoveredItem = document.querySelector("." + hoverClass)
const maxLength = searchResults.getElementsByTagName("a").length;
const hoveredItem = document.querySelector("." + hoverClass);

if (hoveredItem) {
hoveredItem.classList.remove(hoverClass)
hoveredItem.classList.remove(hoverClass);
}

if (index < maxLength) {
const element = [...searchResults.getElementsByTagName("a")][index]
element.classList.add(hoverClass)
const element = [...searchResults.getElementsByTagName("a")][index];
element.classList.add(hoverClass);

if (scrollIntoView) {
element.scrollIntoView()
element.scrollIntoView();
}
}
}
})
});
51 changes: 37 additions & 14 deletions war/src/main/js/components/command-palette/datasources.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,49 @@
import {LinkResult} from "./models";
import { LinkResult } from "./models";
import Search from "@/api/search";

export const JenkinsSearchSource = {
async execute(query) {
const rootUrl = document.getElementById("page-header").dataset.rootUrl.escapeHTML();
const rootUrl = document
.getElementById("page-header")
.dataset.rootUrl.escapeHTML();
const response = await Search.search(query);
return await response.json().then(data => {
return [...data["suggestions"]].map(e => new LinkResult(e.icon, e.name, e.description, e.category,
e.url.startsWith("/") ? `${rootUrl}${e.url}` : `${rootUrl}`));
return await response.json().then((data) => {
return [...data["suggestions"]].map(
(e) =>
new LinkResult(
e.icon,
e.name,
e.description,
e.category,
e.url.startsWith("/") ? `${rootUrl}${e.url}` : `${rootUrl}`
)
);
});
}
}
},
};

export const SidebarSource = {
async execute(query) {
const sidebarLinks = document.querySelectorAll(".task-link");

return [...sidebarLinks]
.filter(link => link.dataset.post !== "true")
.filter(link => !link.classList.contains("task-link--active"))
.filter(link => link.querySelector(".task-link-text").textContent.toLowerCase().includes(query.toLowerCase()))
.map(link => new LinkResult(undefined, link.querySelector(".task-link-text").textContent, undefined,
"Sidebar", link.href));
}
}
.filter((link) => link.dataset.post !== "true")
.filter((link) => !link.classList.contains("task-link--active"))
.filter((link) =>
link
.querySelector(".task-link-text")
.textContent.toLowerCase()
.includes(query.toLowerCase())
)
.map(
(link) =>
new LinkResult(
undefined,
link.querySelector(".task-link-text").textContent,
undefined,
"Sidebar",
link.href
)
);
},
};
13 changes: 7 additions & 6 deletions war/src/main/js/components/command-palette/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
// Group results by 'category' field into map
function groupResultsByCategory(array) {
return array
.reduce((hash, obj) => {
if (obj.category === undefined) return hash
return Object.assign(hash, {[obj.category]: (hash[obj.category] || []).concat(obj)})
}, {})
return array.reduce((hash, obj) => {
if (obj.category === undefined) {return hash;}
return Object.assign(hash, {
[obj.category]: (hash[obj.category] || []).concat(obj),
});
}, {});
}

export default {groupResultsByCategory: groupResultsByCategory};
export default { groupResultsByCategory: groupResultsByCategory };
Loading

0 comments on commit d77c2dd

Please sign in to comment.