Switch camelCase to dash-case in DOM classes and IDs
This commit is contained in:
derv82
parent
0c4f4844b6
commit
0e63896f4f
48
popup.html
48
popup.html
|
|
@ -84,34 +84,34 @@
|
|||
</template>
|
||||
|
||||
<template data-id="searchResult">
|
||||
<div class="searchResult">
|
||||
<img class="searchResult-screenshot" />
|
||||
<h3 class="searchResult-title"></h3>
|
||||
<div class="searchResult-description-group">
|
||||
<div class="searchResult-description"></div>
|
||||
<div class="searchResult-description-info">
|
||||
<div class="search-result">
|
||||
<img class="search-result-screenshot" />
|
||||
<h3 class="search-result-title"></h3>
|
||||
<div class="search-result-description-group">
|
||||
<div class="search-result-description"></div>
|
||||
<div class="search-result-description-info">
|
||||
<svg class="svg-icon info" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchResult-author">
|
||||
<div class="search-result-author">
|
||||
<label i18n-text="author"></label>
|
||||
<a class="searchResult-authorLink" target="_blank"></a>
|
||||
<a class="search-result-authorLink" target="_blank"></a>
|
||||
</div>
|
||||
<div class="searchResult-meta">
|
||||
<div class="searchResult-metaRating">
|
||||
<div class="search-result-meta">
|
||||
<div class="search-result-metaRating">
|
||||
<span i18n-text="searchResultRating"></span>:
|
||||
<span class="searchResult-rating"></span>
|
||||
<span class="search-result-rating"></span>
|
||||
</div>
|
||||
<div class="searchResult-metaInstallCounts">
|
||||
<div class="search-result-meta-install-count">
|
||||
<span i18n-text="searchResultInstallCount"></span>:
|
||||
<span class="searchResult-installCount"></span>
|
||||
<span class="search-result-install-count"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="searchResult-install" i18n-text="installButton"></button>
|
||||
<button class="searchResult-customize hidden"
|
||||
<button class="search-result-install" i18n-text="installButton"></button>
|
||||
<button class="search-result-customize hidden"
|
||||
i18n-text="searchResultCustomize"
|
||||
i18n-title="searchResultCustomizeTooltip"></button>
|
||||
</div>
|
||||
|
|
@ -169,20 +169,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div id="searchResults" class="hidden">
|
||||
<div id="search-results" class="hidden">
|
||||
<h2>
|
||||
<span i18n-text="searchResultsHeader"></span>
|
||||
<span id="searchResults-terms">...</span>
|
||||
<span id="search-results-terms">...</span>
|
||||
</h2>
|
||||
<div id="searchResults-list"></div>
|
||||
<div id="searchResultsNav">
|
||||
<button id="searchResultsNav-prev" i18n-title="paginationPrevious" disabled>←</button>
|
||||
<div id="search-results-list"></div>
|
||||
<div id="search-results-nav">
|
||||
<button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>←</button>
|
||||
<label>
|
||||
<span id="searchResultsNav-currentPage" i18n-title="paginationCurrent">-</span>
|
||||
<span id="search-results-nav-current-page" i18n-title="paginationCurrent">-</span>
|
||||
/
|
||||
<span id="searchResultsNav-totalPages" i18n-title="paginationTotal">-</span>
|
||||
<span id="search-results-nav-total-pages" i18n-title="paginationTotal">-</span>
|
||||
</label>
|
||||
<button id="searchResultsNav-next" i18n-title="paginationNext" disabled>→</button>
|
||||
<button id="search-results-nav-next" i18n-title="paginationNext" disabled>→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div id="searchResults-error" class="hidden"></div>
|
||||
<div id="search-results-error" class="hidden"></div>
|
||||
<div id="write-style">
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ body.search-results-shown {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
#searchResults-error {
|
||||
#search-results-error {
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
|
|
@ -21,29 +21,25 @@ body.search-results-shown {
|
|||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
.search-result {
|
||||
padding: 5px;
|
||||
}
|
||||
.searchResult:hover {
|
||||
.search-result:hover {
|
||||
background-color: rgba(50, 150, 255, 0.5);
|
||||
}
|
||||
.searchResult.loading {
|
||||
background-color: rgba(90, 90, 90, 0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.searchResult-screenshot {
|
||||
.search-result-screenshot {
|
||||
max-height: 120px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.searchResult-title {
|
||||
.search-result-title {
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.searchResult-description {
|
||||
.search-result-description {
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -51,7 +47,7 @@ body.search-results-shown {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.searchResult-description.expanded {
|
||||
.search-result-description.expanded {
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
|
|
@ -59,73 +55,70 @@ body.search-results-shown {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.searchResult-description-info {
|
||||
.search-result-description-info {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.searchResult-author {
|
||||
.search-result-author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchResult-meta {
|
||||
.search-result-meta {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.searchResult-metaRating, .searchResult-metaInstallCount {
|
||||
.search-result-meta-rating, .search-result-meta-install-count {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.searchResult-rating {
|
||||
.search-result-rating {
|
||||
font-weight: 600;
|
||||
padding: 1px 2px 1px 2px;
|
||||
color: #fff;
|
||||
}
|
||||
.searchResult-rating.good {
|
||||
.search-result-rating.good {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
.searchResult-rating.okay {
|
||||
.search-result-rating.okay {
|
||||
background-color: darkorange;
|
||||
}
|
||||
.searchResult-rating.bad {
|
||||
.search-result-rating.bad {
|
||||
background-color: darkred;
|
||||
}
|
||||
.searchResult-rating.none {
|
||||
.search-result-rating.none {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.searchResult-installCount {
|
||||
.search-result-install-count {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.searchResult-install {
|
||||
.search-result-install {
|
||||
width: 100%;
|
||||
}
|
||||
.searchResult-install.customize, .searchResult-customize {
|
||||
.search-result-install.customize, .search-result-customize {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#searchResultsNav {
|
||||
#search-results-nav {
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
opacity: 1.0;
|
||||
}
|
||||
#searchResultsNav.loading {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#searchResultsNav label {
|
||||
#search-results-nav label {
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
#searchResultsNav button {
|
||||
#search-results-nav button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
return {init, load, next, prev};
|
||||
|
||||
function init() {
|
||||
$('#searchResultsNav-prev').onclick = prev;
|
||||
$('#searchResultsNav-next').onclick = next;
|
||||
$('#search-results-nav-prev').onclick = prev;
|
||||
$('#search-results-nav-next').onclick = next;
|
||||
document.body.classList.add('search-results-shown');
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
|
@ -65,20 +65,20 @@
|
|||
|
||||
if (isLoading) {
|
||||
// Show spinner
|
||||
$('#searchResults').appendChild(
|
||||
$('#search-results').appendChild(
|
||||
$create(
|
||||
'.lds-spinner',
|
||||
new Array(12).fill($create('div')).map(e => e.cloneNode()))
|
||||
);
|
||||
} else {
|
||||
// Hide spinner
|
||||
$.remove('#searchResults > .lds-spinner');
|
||||
$.remove('#search-results > .lds-spinner');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
$('#searchResults-list').textContent = ''; // Clear search results
|
||||
$('#search-results-list').textContent = ''; // Clear search results
|
||||
|
||||
const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
|
||||
const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
createSearchResultNode(resultToDisplay);
|
||||
});
|
||||
|
||||
$('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1 || loading);
|
||||
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
|
||||
$('#search-results-nav-prev').disabled = (currentDisplayedPage <= 1 || loading);
|
||||
$('#search-results-nav-current-page').textContent = currentDisplayedPage;
|
||||
|
||||
let totalResultsCount = processedResults.length;
|
||||
if (unprocessedResults.length > 0) {
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
|
||||
}
|
||||
const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
|
||||
$('#searchResultsNav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
|
||||
$('#searchResultsNav-totalPages').textContent = totalPageCount;
|
||||
$('#search-results-nav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
|
||||
$('#search-results-nav-total-pages').textContent = totalPageCount;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -143,9 +143,9 @@
|
|||
} else {
|
||||
message = 'Error loading search results: ' + reason;
|
||||
}
|
||||
$('#searchResults').classList.add('hidden');
|
||||
$('#searchResults-error').textContent = message;
|
||||
$('#searchResults-error').classList.remove('hidden');
|
||||
$('#search-results').classList.add('hidden');
|
||||
$('#search-results-error').textContent = message;
|
||||
$('#search-results-error').classList.remove('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -161,13 +161,13 @@
|
|||
} else {
|
||||
setLoading(true);
|
||||
// Search for more results.
|
||||
$('#searchResults').classList.remove('hidden');
|
||||
$('#searchResults-error').classList.add('hidden');
|
||||
$('#search-results').classList.remove('hidden');
|
||||
$('#search-results-error').classList.add('hidden');
|
||||
|
||||
// Discover current tab's URL & the "category" for the URL, then search.
|
||||
getActiveTab().then(tab => {
|
||||
category = searchAPI.getCategory(tab.url);
|
||||
$('#searchResults-terms').textContent = category;
|
||||
$('#search-results-terms').textContent = category;
|
||||
searchAPI.search(category)
|
||||
.then(searchResults => {
|
||||
if (searchResults.data.length === 0) {
|
||||
|
|
@ -290,19 +290,19 @@
|
|||
|
||||
const entry = template.searchResult.cloneNode(true);
|
||||
Object.assign(entry, {
|
||||
id: 'searchResult-' + userstyleSearchResult.id,
|
||||
id: 'search-result-' + userstyleSearchResult.id,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
|
||||
$('#searchResults-list').appendChild(entry);
|
||||
$('#search-results-list').appendChild(entry);
|
||||
|
||||
const searchResultName = userstyleSearchResult.name;
|
||||
const title = $('.searchResult-title', entry);
|
||||
const title = $('.search-result-title', entry);
|
||||
Object.assign(title, {
|
||||
textContent: searchResultName
|
||||
});
|
||||
|
||||
const screenshot = $('.searchResult-screenshot', entry);
|
||||
const screenshot = $('.search-result-screenshot', entry);
|
||||
let screenshotUrl = userstyleSearchResult.screenshot_url;
|
||||
if (screenshotUrl === null) {
|
||||
screenshotUrl = BLANK_PIXEL_DATA;
|
||||
|
|
@ -315,11 +315,11 @@
|
|||
title: searchResultName
|
||||
});
|
||||
|
||||
const description = $('.searchResult-description', entry);
|
||||
const description = $('.search-result-description', entry);
|
||||
Object.assign(description, {
|
||||
textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
|
||||
});
|
||||
const descriptionExpand = $('.searchResult-description-info', entry);
|
||||
const descriptionExpand = $('.search-result-description-info', entry);
|
||||
Object.assign(descriptionExpand, {
|
||||
onclick: e => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
const authorLink = $('.searchResult-authorLink', entry);
|
||||
const authorLink = $('.search-result-authorLink', entry);
|
||||
Object.assign(authorLink, {
|
||||
textContent: userstyleSearchResult.user.name,
|
||||
title: userstyleSearchResult.user.name,
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const rating = $('.searchResult-rating', entry);
|
||||
const rating = $('.search-result-rating', entry);
|
||||
let ratingClass;
|
||||
let ratingValue = userstyleSearchResult.rating;
|
||||
if (ratingValue === null) {
|
||||
|
|
@ -354,21 +354,21 @@
|
|||
}
|
||||
Object.assign(rating, {
|
||||
textContent: ratingValue,
|
||||
className: 'searchResult-rating ' + ratingClass
|
||||
className: 'search-result-rating ' + ratingClass
|
||||
});
|
||||
|
||||
const installCount = $('.searchResult-installCount', entry);
|
||||
const installCount = $('.search-result-install-count', entry);
|
||||
Object.assign(installCount, {
|
||||
textContent: userstyleSearchResult.total_install_count.toLocaleString()
|
||||
});
|
||||
|
||||
const installButton = $('.searchResult-install', entry);
|
||||
const installButton = $('.search-result-install', entry);
|
||||
installButton.onclick = install;
|
||||
|
||||
if (userstyleSearchResult.style_settings.length > 0) {
|
||||
// Style has customizations
|
||||
installButton.classList.add('customize');
|
||||
const customizeButton = $('.searchResult-customize', entry);
|
||||
const customizeButton = $('.search-result-customize', entry);
|
||||
customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
|
||||
customizeButton.classList.remove('hidden');
|
||||
customizeButton.onclick = event => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user