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

Search userstyles by-category. Fetch only when needed.

Browse Source 
* Discovers category via userstyles request.
* Disables navigation while loading results.
* Navigation above search results
* Handles styles without screenshots (blank img).
This commit is contained in:
derv82 2017-12-02 03:29:12 -08:00
parent e8f793b16a
commit 1daa12b59f
3 changed files with 155 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
popup.html
View File

@ -82,7 +82,7 @@
<template data-id="searchResult"> <template data-id="searchResult">
<div class="searchResult"> <div class="searchResult">
<img class="searchResult-screenshot" /> <img class="searchResult-screenshot no-screenshot" />
<a class="searchResult-title" target="_blank"></a> <a class="searchResult-title" target="_blank"></a>
<div class="searchResult-description"></div> <div class="searchResult-description"></div>
<div class="searchResult-author"> <div class="searchResult-author">
@ -130,7 +130,6 @@
</div> </div>
<div id="searchResults" class="hidden"> <div id="searchResults" class="hidden">
<h3>Search Results for <span id="searchResults-terms">-</span></h3> <h3>Search Results for <span id="searchResults-terms">-</span></h3>
<div id="searchResults-list"></div>
<div id="searchResultsNav"> <div id="searchResultsNav">
<button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button> <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
<label> <label>
@ -140,6 +139,7 @@
</label> </label>
<button id="searchResultsNav-next" title="Next page" disabled>Next</button> <button id="searchResultsNav-next" title="Next page" disabled>Next</button>
</div> </div>
<div id="searchResults-list"></div>
</div> </div>
<div class="left-gutter"></div> <div class="left-gutter"></div>
<div class="main-controls"> <div class="main-controls">

16
popup/search-results.css
View File

@ -42,6 +42,10 @@
max-width: 180px; max-width: 180px;
max-height: 180px; max-height: 180px;
} }
.searchResult-screenshot.no-screenshot {
width: 180px;
height: 40px;
}
.searchResult-title { .searchResult-title {
display: block; display: block;
@ -58,10 +62,18 @@
white-space: nowrap; white-space: nowrap;
} }
.searchResult-install {
width: 100%;
}
#searchResultsNav { #searchResultsNav {
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
word-break: keep-all; word-break: keep-all;
opacity: 1.0;
}
#searchResultsNav.loading {
opacity: 0.5;
} }
#searchResultsNav label { #searchResultsNav label {
@ -74,10 +86,6 @@
text-align: center; text-align: center;
} }
.searchResult-install {
width: 100%;
}
#searchResultsNav-prev[disabled], #searchResultsNav-prev[disabled],
#searchResultsNav-next[disabled] { #searchResultsNav-next[disabled] {
cursor: not-allowed; cursor: not-allowed;

205
popup/search-results.js
View File

@ -1,18 +1,15 @@
/* global handleEvent tryJSONparse getStylesSafe BG */ /* global handleEvent tryJSONparse getStylesSafe BG */
'use strict'; 'use strict';
// TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
/** /**
* Library for interacting with userstyles.org * Library for interacting with userstyles.org
* @returns {Object} Exposed methods representing the search results on userstyles.org * @returns {Object} Exposed methods representing the search results on userstyles.org
*/ */
function SearchUserstyles() { function SearchUserstyles() {
const RESULTS_PER_PAGE = 20;
let totalPages, totalResults; let totalPages, totalResults;
let currentPage = 1; let currentPage = 1;
return {getCurrentPage, getTotalPages, getTotalResults, search, fetchStyleJson}; return {getCurrentPage, getTotalPages, getTotalResults, getCategory, search, fetchStyleJson};
function getCurrentPage() { function getCurrentPage() {
return currentPage; return currentPage;
@ -26,6 +23,27 @@ function SearchUserstyles() {
return totalResults; return totalResults;
} }
function getCategory(url) {
const hostname = new URL(url).hostname;
return new Promise(resolve => {
const request = new XMLHttpRequest();
const browseURL = 'https://userstyles.org/styles/browse/all/' + encodeURIComponent(url);
request.open('HEAD', browseURL, true);
request.onreadystatechange = () => {
if (request.readyState === XMLHttpRequest.DONE) {
const responseURL = new URL(request.responseURL);
const category = responseURL.searchParams.get('category');
if (category !== null) {
resolve(category);
} else {
resolve(hostname);
}
}
};
request.send(null);
});
}
/** /**
* Fetches the JSON style object from userstyles.org (containing code, sections, updateUrl, etc). * Fetches the JSON style object from userstyles.org (containing code, sections, updateUrl, etc).
* This is fetched from the /styles/chrome/ID.json endpoint. * This is fetched from the /styles/chrome/ID.json endpoint.
@ -34,7 +52,7 @@ function SearchUserstyles() {
*/ */
function fetchStyleJson(userstylesId) { function fetchStyleJson(userstylesId) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json'; const jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
download(jsonUrl) download(jsonUrl)
.then(responseText => { .then(responseText => {
resolve(tryJSONparse(responseText)); resolve(tryJSONparse(responseText));
@ -46,21 +64,25 @@ function SearchUserstyles() {
/** /**
* Fetches (and JSON-parses) search results from a userstyles.org search API. * Fetches (and JSON-parses) search results from a userstyles.org search API.
* Automatically sets currentPage, totalPages, and totalResults. * Automatically sets currentPage, totalPages, and totalResults.
* @param {string} searchText Text to search for. * @param {string} category The usrestyles.org "category" (subcategory) OR a any search string.
* @return {Object} Response object from userstyles.org * @return {Object} Response object from userstyles.org
*/ */
function search(searchText) { function search(category) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (totalPages !== undefined && currentPage > totalPages) {
resolve({'data':[]});
}
const TIMEOUT = 10000; const TIMEOUT = 10000;
const headers = { const headers = {
'Content-type': 'application/json', 'Content-type': 'application/json',
'Accept': '*/*' 'Accept': '*/*'
}; };
const searchUrl = new URL('https://userstyles.org/api/v1/styles/search'); const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
let queryParams = 'search=' + encodeURIComponent(searchText); let queryParams = 'search=' + encodeURIComponent(category);
queryParams += '&page=' + currentPage; queryParams += '&page=' + currentPage;
queryParams += '&per_page=' + RESULTS_PER_PAGE; queryParams += '&country=NA';
searchUrl.search = '?' + queryParams; searchUrl.search = '?' + queryParams;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.timeout = TIMEOUT; xhr.timeout = TIMEOUT;
@ -90,52 +112,84 @@ function SearchUserstyles() {
* @returns {Object} Includes load(), next(), and prev() methods to alter the search results. * @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
*/ */
const SearchResults = (() => { const SearchResults = (() => {
const RESULTS_PER_PAGE = 3; // Number of results to display in popup.html const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
const DELAY_BETWEEN_RESULTS_MS = 500; const DELAY_BETWEEN_RESULTS_MS = 500; // Millisecs to wait before fetching next batch of search results.
const DELAY_BETWEEN_FETCHING_STYLES = 0; // Millisecs to wait before fetching .JSON for next search result.
const searchAPI = SearchUserstyles(); const searchAPI = SearchUserstyles();
const unprocessedResults = []; // Search results not yet processed. const unprocessedResults = []; // Search results not yet processed.
const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style). const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
let loading = false;
let tabURL; // The active tab's URL. let tabURL; // The active tab's URL.
let currentPage = 1; // Current page number in popup.html let currentDisplayedPage = 1; // Current page number in popup.html
let nonApplicableResults = 0; // Number of results that don't apply to the searched site (thx userstyles.org!) let nonApplicableResults = 0; // Number of results that don't apply to the searched site (thx userstyles.org!)
let alreadyInstalledResults = 0; // Number of results that are already installed. let alreadyInstalledResults = 0; // Number of results that are already installed.
return {load, next, prev}; return {load, next, prev};
function render() { function render() {
// Clear search results $('#searchResults-list').innerHTML = ''; // Clear search results
$('#searchResults-list').innerHTML = '';
// Show search results for current page const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
const startIndex = (currentPage - 1) * RESULTS_PER_PAGE; const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
const endIndex = currentPage * RESULTS_PER_PAGE; const displayedResults = processedResults.slice(startIndex, endIndex);
const resultSubset = processedResults.slice(startIndex, endIndex); displayedResults.forEach(resultToDisplay => {
console.log('Render processedResults[' + startIndex + ':' + endIndex + '] = ', resultSubset); createSearchResultNode(resultToDisplay);
resultSubset.forEach(index => {
createSearchResult(index);
}); });
if (resultSubset.length < RESULTS_PER_PAGE) {
// TODO: Show "Results are still loading" message. if (currentDisplayedPage <= 1 || loading) {
$('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
} else { } else {
// TODO: Hide "results are still loading" message. $('#searchResultsNav-prev').removeAttribute('disabled');
} }
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
// Hack: Add 1 page if there's results left to process.
const totalResultsCount = processedResults.length + (unprocessedResults.length ? DISPLAYED_RESULTS_PER_PAGE : 0);
const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
if (currentDisplayedPage >= totalPageCount || loading) {
$('#searchResultsNav-next').setAttribute('disabled', 'disabled');
} else {
$('#searchResultsNav-next').removeAttribute('disabled');
}
$('#searchResultsNav-totalPages').textContent = totalPageCount;
const navNode = $('#searchResultsNav');
if (loading && !navNode.classList.contains('loading')) {
navNode.classList.add('loading');
} else {
navNode.classList.remove('loading');
}
}
function shouldLoadMore() {
const result = (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE)
console.log('shouldLoadMore:',
result ? 'YES' : 'NO',
' processedResults.length(' + processedResults.length + ')',
'< currentDisplayedPage(' + currentDisplayedPage + ')',
'* DISPLAYED_RESULTS_PER_PAGE(' + DISPLAYED_RESULTS_PER_PAGE + ')');
return result;
} }
function loadMoreIfNeeded() { function loadMoreIfNeeded() {
if (processedResults.length < (currentPage + 1) * RESULTS_PER_PAGE) { if (shouldLoadMore()) {
console.log('loadMoreIfNeeded: YES. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length); console.log('loadMoreIfNeeded: YES.');
loading = true;
render();
setTimeout(load, 1000); setTimeout(load, 1000);
} else { } else {
console.log('loadMoreIfNeeded: NO. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length); console.log('loadMoreIfNeeded: NO.');
loading = false;
render();
} }
} }
/** Increments currentPage and loads results. */ /** Increments currentDisplayedPage and loads results. */
function next(event) { function next(event) {
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
currentPage += 1; currentDisplayedPage += 1;
render(); render();
loadMoreIfNeeded(); loadMoreIfNeeded();
} }
@ -145,7 +199,7 @@ const SearchResults = (() => {
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
currentPage = Math.max(1, currentPage - 1); currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
render(); render();
} }
@ -175,6 +229,15 @@ const SearchResults = (() => {
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
loading = true;
render();
if (unprocessedResults.length > 0) {
processNextResult();
return true;
}
$('#load-search-results').classList.add('hidden'); $('#load-search-results').classList.add('hidden');
$('#searchResults').classList.remove('hidden'); $('#searchResults').classList.remove('hidden');
$('#searchResults-error').classList.add('hidden'); $('#searchResults-error').classList.add('hidden');
@ -182,12 +245,15 @@ const SearchResults = (() => {
// Find styles for the current active tab // Find styles for the current active tab
getActiveTab().then(tab => { getActiveTab().then(tab => {
tabURL = tab.url; tabURL = tab.url;
const hostname = new URL(tabURL).hostname.replace(/^(?:.*\.)?([^.]*\.(co\.)?[^.]*)$/i, '$1'); searchAPI.getCategory(tabURL)
$('#searchResults-terms').textContent = hostname; .then(category => {
console.log('userstyles.org "category" for URL ' + tabURL + ' is ' + category);
$('#searchResults-terms').textContent = category;
console.log('load#searchAPI.search(' + hostname + ')'); searchAPI.search(category)
searchAPI.search(hostname)
.then(searchResults => { .then(searchResults => {
console.log('load#searchAPI.search(', category, ') => ',
searchResults.data.length, 'results');
if (searchResults.data.length === 0) { if (searchResults.data.length === 0) {
throw 404; throw 404;
} }
@ -196,12 +262,21 @@ const SearchResults = (() => {
}) })
.catch(error); .catch(error);
}); });
});
return true; return true;
} }
function processNextResult() { function processNextResult() {
if (!shouldLoadMore()) {
console.log('[' + unprocessedResults.length + '] search results remain to be processed: STOPPED');
loading = false;
render();
return;
} else {
console.log('[' + unprocessedResults.length + '] search results remain to be processed: PROCESSING');
}
if (unprocessedResults.length === 0) { if (unprocessedResults.length === 0) {
console.log('processNextResult:unprocessedResults === 0');
loadMoreIfNeeded(); loadMoreIfNeeded();
return; return;
} }
@ -212,16 +287,17 @@ const SearchResults = (() => {
if (matchingStyles.length > 0) { if (matchingStyles.length > 0) {
// Style already installed, skip it. // Style already installed, skip it.
// TODO: Include the style anyway with option to "Uninstall" (?) // TODO: Include the style anyway with option to "Uninstall" (?)
console.log('style "' + nextResult.name + '" already installed'); console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" already installed: CONTINUING');
alreadyInstalledResults += 1; alreadyInstalledResults += 1;
setTimeout(processNextResult, 0); // Keep processing setTimeout(processNextResult, DELAY_BETWEEN_FETCHING_STYLES); // Keep processing
} else if (nextResult.category !== 'site') { } else if (nextResult.category !== 'site') {
// Style is not for a website, skip it. // Style is not for a website, skip it.
console.log('style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site"'); console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site": CONTINUING');
nonApplicableResults += 1; nonApplicableResults += 1;
setTimeout(processNextResult, 0); // Keep processing setTimeout(processNextResult, 0); // Keep processing
} else { } else {
// Style not installed, fetch full style to see if it applies to this site. // Style not installed, fetch full style to see if it applies to this site.
console.log('[' + unprocessedResults.length + '] fetching "' + nextResult.name + '": CONTINUING');
searchAPI.fetchStyleJson(nextResult.id) searchAPI.fetchStyleJson(nextResult.id)
.then(userstyleJson => { .then(userstyleJson => {
// Extract applicable sections (i.e. styles that apply to the current site) // Extract applicable sections (i.e. styles that apply to the current site)
@ -239,42 +315,20 @@ const SearchResults = (() => {
processedResults.push(nextResult); processedResults.push(nextResult);
render(); render();
} }
console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')'); console.log('[' + unprocessedResults.length + '] Processed "' + nextResult.name + '"',
'processedResults=' + processedResults.length,
'skipped-installed=' + alreadyInstalledResults,
'skipped-irrelevant=' + nonApplicableResults,
'CONTINUING @ sleep=' + DELAY_BETWEEN_RESULTS_MS);
setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
}) })
.catch(reason => { .catch(reason => {
console.log('Error while loading style ID ' + nextResult.id + ': ' + reason); console.log('[' + unprocessedResults.length + '] Error while loading style ID ' + nextResult.id + ': ' + reason);
alert('Error while loading style ID ' + nextResult.id + ': ' + reason);
console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')');
setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
}); });
} }
console.log('processNextResult:alreadyInstalled:' + alreadyInstalledResults,
'nonApplicable:' + nonApplicableResults);
} }
/** Updates prev/next buttons and currentPage/totalPage labels. */
function updateSearchResultsNav(currentPage, totalPages) {
// Update 'next' button
if (currentPage >= totalPages) {
currentPage = totalPages;
$('#searchResultsNav-next').setAttribute('disabled', 'disabled');
} else {
$('#searchResultsNav-next').removeAttribute('disabled');
}
// Update 'prev' button
if (currentPage <= 1) {
currentPage = 1;
$('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
} else {
$('#searchResultsNav-prev').removeAttribute('disabled');
}
// Update current/total counts
$('#searchResultsNav-currentPage').textContent = currentPage;
$('#searchResultsNav-totalPages').textContent = totalPages;
}
/** /**
* Promises a list of installed styles that match the provided search result. * Promises a list of installed styles that match the provided search result.
* @param {Object} userstyleSearchResult Search result object from userstyles.org * @param {Object} userstyleSearchResult Search result object from userstyles.org
@ -302,7 +356,7 @@ const SearchResults = (() => {
* Constructs and adds the given search result to the popup's Search Results container. * Constructs and adds the given search result to the popup's Search Results container.
* @param {Object} userstyleSearchResult The SearchResult object from userstyles.org * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
*/ */
function createSearchResult(userstyleSearchResult) { function createSearchResultNode(userstyleSearchResult) {
/* /*
userstyleSearchResult format: { userstyleSearchResult format: {
id: 100835, id: 100835,
@ -315,6 +369,7 @@ const SearchResults = (() => {
} }
} }
*/ */
console.log('createSearchResultNode(', userstyleSearchResult, ')');
const entry = template.searchResult.cloneNode(true); const entry = template.searchResult.cloneNode(true);
Object.assign(entry, { Object.assign(entry, {
@ -333,8 +388,13 @@ const SearchResults = (() => {
const screenshot = $('.searchResult-screenshot', entry); const screenshot = $('.searchResult-screenshot', entry);
let screenshotUrl = userstyleSearchResult.screenshot_url; let screenshotUrl = userstyleSearchResult.screenshot_url;
if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) { if (screenshotUrl === null) {
screenshotUrl = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
} else if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
screenshotUrl = 'https://userstyles.org/style_screenshot_thumbnails/' + screenshotUrl; screenshotUrl = 'https://userstyles.org/style_screenshot_thumbnails/' + screenshotUrl;
screenshot.classList.remove('no-screenshot');
} else {
screenshot.classList.remove('no-screenshot');
} }
Object.assign(screenshot, { Object.assign(screenshot, {
src: screenshotUrl, src: screenshotUrl,
@ -365,7 +425,8 @@ const SearchResults = (() => {
/** Installs the current userstyleSearchResult into stylus. */ /** Installs the current userstyleSearchResult into stylus. */
function install() { function install() {
entry.classList.add('loading'); entry.classList.add('loading');
// TODO: Detect if style has customizations, point to style page if so.
// TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
const styleId = userstyleSearchResult.id; const styleId = userstyleSearchResult.id;
const url = 'https://userstyles.org/styles/chrome/' + styleId + '.json'; const url = 'https://userstyles.org/styles/chrome/' + styleId + '.json';
download(url) download(url)
@ -377,8 +438,8 @@ const SearchResults = (() => {
}); });
}) })
.catch(reason => { .catch(reason => {
console.log('Error while installing from ' + url + ': ' + reason); console.log('install:download(', url, ') => [ERROR]: ', reason);
alert('Error while installing from ' + url + ': ' + reason); alert('Error while downloading ' + url + '\nReason: ' + reason);
}); });
return true; return true;
} }