Spinner while loading results. Description expando.
This commit is contained in:
derv82
parent
54f6d31146
commit
ca2050d549
13
popup.html
13
popup.html
|
|
@ -86,7 +86,14 @@
|
|||
<div class="searchResult">
|
||||
<img class="searchResult-screenshot" />
|
||||
<a class="searchResult-title" target="_blank"></a>
|
||||
<div class="searchResult-description-group">
|
||||
<div class="searchResult-description"></div>
|
||||
<div class="searchResult-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">
|
||||
<label i18n-text="author"></label>
|
||||
<a class="searchResult-authorLink" target="_blank"></a>
|
||||
|
|
@ -153,13 +160,13 @@
|
|||
</h3>
|
||||
<div id="searchResults-list"></div>
|
||||
<div id="searchResultsNav">
|
||||
<button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
|
||||
<button id="searchResultsNav-prev" title="Previous page" disabled>←</button>
|
||||
<label>
|
||||
<span id="searchResultsNav-currentPage" title="Current page">-</span>
|
||||
/
|
||||
<span id="searchResultsNav-totalPages" title="Total pages of search results">-</span>
|
||||
</label>
|
||||
<button id="searchResultsNav-next" title="Next page" disabled>Next</button>
|
||||
<button id="searchResultsNav-next" title="Next page" disabled>→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
|
|
@ -167,7 +174,7 @@
|
|||
<div id="find-styles">
|
||||
<a id="find-styles-link" i18n-text="findStylesForSite"></a>
|
||||
<span id="find-styles-inline-group">
|
||||
<label id="find-styles-inline-label">
|
||||
<label>
|
||||
<input id="find-styles-inline" class="checker" type="checkbox" checked />
|
||||
<svg class="svg-icon checked" viewBox="0 0 1000 1000">
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,26 @@ body.search-results-shown {
|
|||
}
|
||||
|
||||
.searchResult-description {
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.searchResult-description.expanded {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
overflow: auto;
|
||||
text-overflow: unset;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.searchResult-description-info {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.searchResult-author {
|
||||
|
|
@ -116,3 +133,127 @@ body.search-results-shown {
|
|||
position: relative;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
/* spinner: https://github.com/loadingio/css-spinner */
|
||||
|
||||
.lds-spinner {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.lds-spinner {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
opacity: .2;
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.lds-spinner div {
|
||||
left: 94px;
|
||||
top: 23px;
|
||||
position: absolute;
|
||||
-webkit-animation: lds-spinner linear 1s infinite;
|
||||
animation: lds-spinner linear 1s infinite;
|
||||
background: currentColor;
|
||||
width: 12px;
|
||||
height: 34px;
|
||||
border-radius: 20%;
|
||||
-webkit-transform-origin: 6px 77px;
|
||||
transform-origin: 6px 77px;
|
||||
}
|
||||
.lds-spinner div:nth-child(1) {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-animation-delay: -0.916666666666667s;
|
||||
animation-delay: -0.916666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(2) {
|
||||
-webkit-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
-webkit-animation-delay: -0.833333333333333s;
|
||||
animation-delay: -0.833333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(3) {
|
||||
-webkit-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
-webkit-animation-delay: -0.75s;
|
||||
animation-delay: -0.75s;
|
||||
}
|
||||
.lds-spinner div:nth-child(4) {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-animation-delay: -0.666666666666667s;
|
||||
animation-delay: -0.666666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(5) {
|
||||
-webkit-transform: rotate(120deg);
|
||||
transform: rotate(120deg);
|
||||
-webkit-animation-delay: -0.583333333333333s;
|
||||
animation-delay: -0.583333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(6) {
|
||||
-webkit-transform: rotate(150deg);
|
||||
transform: rotate(150deg);
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.lds-spinner div:nth-child(7) {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
-webkit-animation-delay: -0.416666666666667s;
|
||||
animation-delay: -0.416666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(8) {
|
||||
-webkit-transform: rotate(210deg);
|
||||
transform: rotate(210deg);
|
||||
-webkit-animation-delay: -0.333333333333333s;
|
||||
animation-delay: -0.333333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(9) {
|
||||
-webkit-transform: rotate(240deg);
|
||||
transform: rotate(240deg);
|
||||
-webkit-animation-delay: -0.25s;
|
||||
animation-delay: -0.25s;
|
||||
}
|
||||
.lds-spinner div:nth-child(10) {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
-webkit-animation-delay: -0.166666666666667s;
|
||||
animation-delay: -0.166666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(11) {
|
||||
-webkit-transform: rotate(300deg);
|
||||
transform: rotate(300deg);
|
||||
-webkit-animation-delay: -0.083333333333333s;
|
||||
animation-delay: -0.083333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(12) {
|
||||
-webkit-transform: rotate(330deg);
|
||||
transform: rotate(330deg);
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@
|
|||
const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
|
||||
const BLANK_PIXEL_DATA = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAA' +
|
||||
'C1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
|
||||
let loading = false;
|
||||
let tabURL; // The active tab's URL.
|
||||
let category; // Category for the active tab's URL.
|
||||
let currentDisplayedPage = 1; // Current page number in popup.html
|
||||
|
||||
|
|
@ -52,9 +50,28 @@
|
|||
$('#searchResultsNav-next').onclick = next;
|
||||
document.body.classList.add('search-results-shown');
|
||||
window.scrollTo(0, 0);
|
||||
load();
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds spinner to node.
|
||||
* @param {DOMNode} parentNode The parent node to append/remove the spinner to/from.
|
||||
* @param {Boolean} isLoading If the element is loading or stopped loading.
|
||||
*/
|
||||
function setLoading(parentNode, isLoading) {
|
||||
if (isLoading) {
|
||||
if ($('.lds-spinner', parentNode) === null) {
|
||||
parentNode.appendChild(
|
||||
$create(
|
||||
'.lds-spinner',
|
||||
new Array(12).fill($create('div')).map(e => e.cloneNode()))
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$.remove('.lds-spinner', parentNode);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
$('#searchResults-list').textContent = ''; // Clear search results
|
||||
|
||||
|
|
@ -65,7 +82,7 @@
|
|||
createSearchResultNode(resultToDisplay);
|
||||
});
|
||||
|
||||
$('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1 || loading);
|
||||
$('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1);
|
||||
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
|
||||
|
||||
let totalResultsCount = processedResults.length;
|
||||
|
|
@ -74,15 +91,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-next').disabled = (currentDisplayedPage >= totalPageCount);
|
||||
$('#searchResultsNav-totalPages').textContent = totalPageCount;
|
||||
|
||||
const navNode = $('#searchResultsNav');
|
||||
if (loading && !navNode.classList.contains('loading')) {
|
||||
navNode.classList.add('loading');
|
||||
} else {
|
||||
navNode.classList.remove('loading');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -94,12 +104,9 @@
|
|||
|
||||
function loadMoreIfNeeded() {
|
||||
if (shouldLoadMore()) {
|
||||
loading = true;
|
||||
render();
|
||||
setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
|
||||
} else {
|
||||
loading = false;
|
||||
render();
|
||||
setLoading($('#searchResults'), false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,27 +146,21 @@
|
|||
* Initializes search results container, starts fetching results.
|
||||
*/
|
||||
function load() {
|
||||
loading = true;
|
||||
render();
|
||||
|
||||
if (unprocessedResults.length > 0) {
|
||||
// Keep processing search results if there are any.
|
||||
processNextResult();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (searchAPI.isExhausted()) {
|
||||
loading = false;
|
||||
render();
|
||||
return true;
|
||||
}
|
||||
|
||||
} else if (searchAPI.isExhausted()) {
|
||||
// Stop if no more search results.
|
||||
setLoading($('#searchResults'), false);
|
||||
} else {
|
||||
setLoading($('#searchResults'), true);
|
||||
// Search for more results.
|
||||
$('#searchResults').classList.remove('hidden');
|
||||
$('#searchResults-error').classList.add('hidden');
|
||||
|
||||
// Discover current tab's URL & the "category" for the URL, then search.
|
||||
getActiveTab().then(tab => {
|
||||
tabURL = tab.url;
|
||||
category = searchAPI.getCategory(tabURL);
|
||||
category = searchAPI.getCategory(tab.url);
|
||||
$('#searchResults-terms').textContent = category;
|
||||
searchAPI.search(category)
|
||||
.then(searchResults => {
|
||||
|
|
@ -172,6 +173,7 @@
|
|||
.catch(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes the next search result in `unprocessedResults` and adds to `processedResults`.
|
||||
|
|
@ -181,12 +183,12 @@
|
|||
*/
|
||||
function processNextResult() {
|
||||
if (!shouldLoadMore()) {
|
||||
loading = false;
|
||||
render();
|
||||
setLoading($('#searchResults'), false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (unprocessedResults.length === 0) {
|
||||
// No more results to process
|
||||
loadMoreIfNeeded();
|
||||
return;
|
||||
}
|
||||
|
|
@ -197,23 +199,21 @@
|
|||
.then(isInstalled => {
|
||||
if (isInstalled) {
|
||||
// Style already installed, skip it.
|
||||
// TODO: Include the style anyway with option to "Uninstall" (?)
|
||||
setTimeout(processNextResult, 0); // Keep processing
|
||||
} else if (nextResult.category !== 'site') {
|
||||
// Style is not for a website, skip it.
|
||||
setTimeout(processNextResult, 0); // Keep processing
|
||||
} else {
|
||||
// Style not installed.
|
||||
// 1: Fetch full style (.JSON) to see if it applies to this site.
|
||||
// 2: Fetch full style info to see if it has customizations.
|
||||
Promise.all([
|
||||
searchAPI.fetchStyleJson(nextResult.id), // for "sections" (applicable URLs)
|
||||
searchAPI.fetchStyle(nextResult.id) // for "style_settings" (customizations)
|
||||
]).then(([userstyleJson, userstyleObject]) => {
|
||||
searchAPI.fetchStyle(nextResult.id), // for "style_settings" (customizations)
|
||||
getActiveTab() // for comparing tab.url to sections.
|
||||
]).then(([userstyleJson, userstyleObject, tab]) => {
|
||||
// Extract applicable sections (i.e. styles that apply to the current site)
|
||||
const applicableSections = BG.getApplicableSections({
|
||||
style: userstyleJson,
|
||||
matchUrl: tabURL,
|
||||
matchUrl: tab.url,
|
||||
stopOnFirst: true
|
||||
});
|
||||
if (applicableSections.length > 0) {
|
||||
|
|
@ -310,11 +310,17 @@
|
|||
title: searchResultName
|
||||
});
|
||||
|
||||
// TODO: Expand/collapse description
|
||||
const description = $('.searchResult-description', entry);
|
||||
Object.assign(description, {
|
||||
textContent: userstyleSearchResult.description.replace(/<.*?>/g, ''),
|
||||
title: userstyleSearchResult.description.replace(/<.*?>/g, '')
|
||||
});
|
||||
const descriptionExpand = $('.searchResult-description-info', entry);
|
||||
Object.assign(descriptionExpand, {
|
||||
onclick: e => {
|
||||
descriptionExpand.classList.add('hidden');
|
||||
description.classList.add('expanded');
|
||||
description.innerHTML = userstyleSearchResult.description.replace(/<br\/?>\s*<br\/?>/, '<br/>');
|
||||
}
|
||||
});
|
||||
|
||||
const authorLink = $('.searchResult-authorLink', entry);
|
||||
|
|
@ -365,12 +371,13 @@
|
|||
|
||||
/** Installs the current userstyleSearchResult into stylus. */
|
||||
function install() {
|
||||
entry.classList.add('loading');
|
||||
|
||||
const styleId = userstyleSearchResult.id;
|
||||
const url = searchAPI.BASE_URL + '/styles/chrome/' + styleId + '.json';
|
||||
setLoading(entry, true);
|
||||
saveStyleSafe(userstyleSearchResult.json)
|
||||
.then(() => {
|
||||
setLoading(entry, false);
|
||||
|
||||
// Remove search result after installing
|
||||
let matchingIndex = -1;
|
||||
processedResults.forEach((processedResult, index) => {
|
||||
|
|
@ -381,9 +388,13 @@
|
|||
if (matchingIndex >= 0) {
|
||||
processedResults.splice(matchingIndex, 1);
|
||||
}
|
||||
render();
|
||||
|
||||
// Load more results if needed.
|
||||
processNextResult();
|
||||
})
|
||||
.catch(reason => {
|
||||
setLoading(entry, false);
|
||||
console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
|
||||
alert('Error while downloading ' + url + '\nReason: ' + reason);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user