open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch camelCase to dash-case in DOM classes and IDs

Browse Source
This commit is contained in:
derv82 2017-12-06 22:38:35 -08:00
parent 0c4f4844b6
commit 0e63896f4f
3 changed files with 73 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
popup.html
View File

@ -84,34 +84,34 @@
</template> </template>
<template data-id="searchResult"> <template data-id="searchResult">
<div class="searchResult"> <div class="search-result">
<img class="searchResult-screenshot" /> <img class="search-result-screenshot" />
<h3 class="searchResult-title"></h3> <h3 class="search-result-title"></h3>
<div class="searchResult-description-group"> <div class="search-result-description-group">
<div class="searchResult-description"></div> <div class="search-result-description"></div>
<div class="searchResult-description-info"> <div class="search-result-description-info">
<svg class="svg-icon info" viewBox="0 0 14 16"> <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> <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> </svg>
</div> </div>
</div> </div>
<div class="searchResult-author"> <div class="search-result-author">
<label i18n-text="author"></label> <label i18n-text="author"></label>
<a class="searchResult-authorLink" target="_blank"></a> <a class="search-result-authorLink" target="_blank"></a>
</div> </div>
<div class="searchResult-meta"> <div class="search-result-meta">
<div class="searchResult-metaRating"> <div class="search-result-metaRating">
<span i18n-text="searchResultRating"></span>: <span i18n-text="searchResultRating"></span>:
<span class="searchResult-rating"></span> <span class="search-result-rating"></span>
</div> </div>
<div class="searchResult-metaInstallCounts"> <div class="search-result-meta-install-count">
<span i18n-text="searchResultInstallCount"></span>: <span i18n-text="searchResultInstallCount"></span>:
<span class="searchResult-installCount"></span> <span class="search-result-install-count"></span>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="searchResult-install" i18n-text="installButton"></button> <button class="search-result-install" i18n-text="installButton"></button>
<button class="searchResult-customize hidden" <button class="search-result-customize hidden"
i18n-text="searchResultCustomize" i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button> i18n-title="searchResultCustomizeTooltip"></button>
</div> </div>
@ -169,20 +169,20 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div id="searchResults" class="hidden"> <div id="search-results" class="hidden">
<h2> <h2>
<span i18n-text="searchResultsHeader"></span> <span i18n-text="searchResultsHeader"></span>
<span id="searchResults-terms">...</span> <span id="search-results-terms">...</span>
</h2> </h2>
<div id="searchResults-list"></div> <div id="search-results-list"></div>
<div id="searchResultsNav"> <div id="search-results-nav">
<button id="searchResultsNav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button> <button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
<label> <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> </label>
<button id="searchResultsNav-next" i18n-title="paginationNext" disabled>&#8594;</button> <button id="search-results-nav-next" i18n-title="paginationNext" disabled>&#8594;</button>
</div> </div>
</div> </div>
<div class="left-gutter"></div> <div class="left-gutter"></div>
@ -199,7 +199,7 @@
</label> </label>
</span> </span>
</div> </div>
<div id="searchResults-error" class="hidden"></div> <div id="search-results-error" class="hidden"></div>
<div id="write-style"> <div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor"></span> <span id="write-style-for" i18n-text="writeStyleFor"></span>
</div> </div>

51
popup/search-results.css
View File

@ -13,7 +13,7 @@ body.search-results-shown {
display: none !important; display: none !important;
} }
#searchResults-error { #search-results-error {
background-color: rgba(255, 0, 0, 0.4); background-color: rgba(255, 0, 0, 0.4);
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
@ -21,29 +21,25 @@ body.search-results-shown {
margin-right: 20px; margin-right: 20px;
} }
.searchResult { .search-result {
padding: 5px; padding: 5px;
} }
.searchResult:hover { .search-result:hover {
background-color: rgba(50, 150, 255, 0.5); 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; max-height: 120px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
.searchResult-title { .search-result-title {
padding: 3px; padding: 3px;
margin: 0; margin: 0;
} }
.searchResult-description { .search-result-description {
width: 90%; width: 90%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -51,7 +47,7 @@ body.search-results-shown {
display: inline-block; display: inline-block;
} }
.searchResult-description.expanded { .search-result-description.expanded {
width: 100%; width: 100%;
white-space: pre-wrap; white-space: pre-wrap;
overflow: auto; overflow: auto;
@ -59,73 +55,70 @@ body.search-results-shown {
display: block; display: block;
} }
.searchResult-description-info { .search-result-description-info {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
.searchResult-author { .search-result-author {
display: none; display: none;
} }
.searchResult-meta { .search-result-meta {
display: table; display: table;
width: 100%; width: 100%;
} }
.searchResult-metaRating, .searchResult-metaInstallCount { .search-result-meta-rating, .search-result-meta-install-count {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
} }
.searchResult-rating { .search-result-rating {
font-weight: 600; font-weight: 600;
padding: 1px 2px 1px 2px; padding: 1px 2px 1px 2px;
color: #fff; color: #fff;
} }
.searchResult-rating.good { .search-result-rating.good {
background-color: darkgreen; background-color: darkgreen;
} }
.searchResult-rating.okay { .search-result-rating.okay {
background-color: darkorange; background-color: darkorange;
} }
.searchResult-rating.bad { .search-result-rating.bad {
background-color: darkred; background-color: darkred;
} }
.searchResult-rating.none { .search-result-rating.none {
background-color: #333; background-color: #333;
} }
.searchResult-installCount { .search-result-install-count {
font-weight: 600; font-weight: 600;
} }
.searchResult-install { .search-result-install {
width: 100%; width: 100%;
} }
.searchResult-install.customize, .searchResult-customize { .search-result-install.customize, .search-result-customize {
width: 50%; width: 50%;
} }
#searchResultsNav { #search-results-nav {
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
word-break: keep-all; word-break: keep-all;
opacity: 1.0; opacity: 1.0;
} }
#searchResultsNav.loading {
opacity: 0.5;
}
#searchResultsNav label { #search-results-nav label {
width: 40px; width: 40px;
display: inline-block; display: inline-block;
word-break: keep-all; word-break: keep-all;
} }
#searchResultsNav button { #search-results-nav button {
text-align: center; text-align: center;
} }

54
popup/search-results.js
View File

@ -47,8 +47,8 @@
return {init, load, next, prev}; return {init, load, next, prev};
function init() { function init() {
$('#searchResultsNav-prev').onclick = prev; $('#search-results-nav-prev').onclick = prev;
$('#searchResultsNav-next').onclick = next; $('#search-results-nav-next').onclick = next;
document.body.classList.add('search-results-shown'); document.body.classList.add('search-results-shown');
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
@ -65,20 +65,20 @@
if (isLoading) { if (isLoading) {
// Show spinner // Show spinner
$('#searchResults').appendChild( $('#search-results').appendChild(
$create( $create(
'.lds-spinner', '.lds-spinner',
new Array(12).fill($create('div')).map(e => e.cloneNode())) new Array(12).fill($create('div')).map(e => e.cloneNode()))
); );
} else { } else {
// Hide spinner // Hide spinner
$.remove('#searchResults > .lds-spinner'); $.remove('#search-results > .lds-spinner');
} }
} }
} }
function render() { function render() {
$('#searchResults-list').textContent = ''; // Clear search results $('#search-results-list').textContent = ''; // Clear search results
const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE; const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE; const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
@ -87,8 +87,8 @@
createSearchResultNode(resultToDisplay); createSearchResultNode(resultToDisplay);
}); });
$('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1 || loading); $('#search-results-nav-prev').disabled = (currentDisplayedPage <= 1 || loading);
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage; $('#search-results-nav-current-page').textContent = currentDisplayedPage;
let totalResultsCount = processedResults.length; let totalResultsCount = processedResults.length;
if (unprocessedResults.length > 0) { if (unprocessedResults.length > 0) {
@ -96,8 +96,8 @@
totalResultsCount += DISPLAYED_RESULTS_PER_PAGE; totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
} }
const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE)); const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
$('#searchResultsNav-next').disabled = (currentDisplayedPage >= totalPageCount || loading); $('#search-results-nav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
$('#searchResultsNav-totalPages').textContent = totalPageCount; $('#search-results-nav-total-pages').textContent = totalPageCount;
} }
/** /**
@ -143,9 +143,9 @@
} else { } else {
message = 'Error loading search results: ' + reason; message = 'Error loading search results: ' + reason;
} }
$('#searchResults').classList.add('hidden'); $('#search-results').classList.add('hidden');
$('#searchResults-error').textContent = message; $('#search-results-error').textContent = message;
$('#searchResults-error').classList.remove('hidden'); $('#search-results-error').classList.remove('hidden');
} }
/** /**
@ -161,13 +161,13 @@
} else { } else {
setLoading(true); setLoading(true);
// Search for more results. // Search for more results.
$('#searchResults').classList.remove('hidden'); $('#search-results').classList.remove('hidden');
$('#searchResults-error').classList.add('hidden'); $('#search-results-error').classList.add('hidden');
// Discover current tab's URL & the "category" for the URL, then search. // Discover current tab's URL & the "category" for the URL, then search.
getActiveTab().then(tab => { getActiveTab().then(tab => {
category = searchAPI.getCategory(tab.url); category = searchAPI.getCategory(tab.url);
$('#searchResults-terms').textContent = category; $('#search-results-terms').textContent = category;
searchAPI.search(category) searchAPI.search(category)
.then(searchResults => { .then(searchResults => {
if (searchResults.data.length === 0) { if (searchResults.data.length === 0) {
@ -290,19 +290,19 @@
const entry = template.searchResult.cloneNode(true); const entry = template.searchResult.cloneNode(true);
Object.assign(entry, { Object.assign(entry, {
id: 'searchResult-' + userstyleSearchResult.id, id: 'search-result-' + userstyleSearchResult.id,
onclick: handleEvent.openURLandHide onclick: handleEvent.openURLandHide
}); });
entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url; entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
$('#searchResults-list').appendChild(entry); $('#search-results-list').appendChild(entry);
const searchResultName = userstyleSearchResult.name; const searchResultName = userstyleSearchResult.name;
const title = $('.searchResult-title', entry); const title = $('.search-result-title', entry);
Object.assign(title, { Object.assign(title, {
textContent: searchResultName textContent: searchResultName
}); });
const screenshot = $('.searchResult-screenshot', entry); const screenshot = $('.search-result-screenshot', entry);
let screenshotUrl = userstyleSearchResult.screenshot_url; let screenshotUrl = userstyleSearchResult.screenshot_url;
if (screenshotUrl === null) { if (screenshotUrl === null) {
screenshotUrl = BLANK_PIXEL_DATA; screenshotUrl = BLANK_PIXEL_DATA;
@ -315,11 +315,11 @@
title: searchResultName title: searchResultName
}); });
const description = $('.searchResult-description', entry); const description = $('.search-result-description', entry);
Object.assign(description, { Object.assign(description, {
textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1') 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, { Object.assign(descriptionExpand, {
onclick: e => { onclick: e => {
e.stopPropagation(); e.stopPropagation();
@ -328,7 +328,7 @@
} }
}); });
const authorLink = $('.searchResult-authorLink', entry); const authorLink = $('.search-result-authorLink', entry);
Object.assign(authorLink, { Object.assign(authorLink, {
textContent: userstyleSearchResult.user.name, textContent: userstyleSearchResult.user.name,
title: userstyleSearchResult.user.name, title: userstyleSearchResult.user.name,
@ -336,7 +336,7 @@
onclick: handleEvent.openURLandHide onclick: handleEvent.openURLandHide
}); });
const rating = $('.searchResult-rating', entry); const rating = $('.search-result-rating', entry);
let ratingClass; let ratingClass;
let ratingValue = userstyleSearchResult.rating; let ratingValue = userstyleSearchResult.rating;
if (ratingValue === null) { if (ratingValue === null) {
@ -354,21 +354,21 @@
} }
Object.assign(rating, { Object.assign(rating, {
textContent: ratingValue, 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, { Object.assign(installCount, {
textContent: userstyleSearchResult.total_install_count.toLocaleString() textContent: userstyleSearchResult.total_install_count.toLocaleString()
}); });
const installButton = $('.searchResult-install', entry); const installButton = $('.search-result-install', entry);
installButton.onclick = install; installButton.onclick = install;
if (userstyleSearchResult.style_settings.length > 0) { if (userstyleSearchResult.style_settings.length > 0) {
// Style has customizations // Style has customizations
installButton.classList.add('customize'); installButton.classList.add('customize');
const customizeButton = $('.searchResult-customize', entry); const customizeButton = $('.search-result-customize', entry);
customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url; customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
customizeButton.classList.remove('hidden'); customizeButton.classList.remove('hidden');
customizeButton.onclick = event => { customizeButton.onclick = event => {