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

16
popup/search-results.css
View File

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

221
popup/search-results.js
View File

@ -1,18 +1,15 @@
/* global handleEvent tryJSONparse getStylesSafe BG */
'use strict';
// TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
/**
* Library for interacting with userstyles.org
* @returns {Object} Exposed methods representing the search results on userstyles.org
*/
function SearchUserstyles() {
const RESULTS_PER_PAGE = 20;
let totalPages, totalResults;
let currentPage = 1;
return {getCurrentPage, getTotalPages, getTotalResults, search, fetchStyleJson};
return {getCurrentPage, getTotalPages, getTotalResults, getCategory, search, fetchStyleJson};
function getCurrentPage() {
return currentPage;
@ -26,6 +23,27 @@ function SearchUserstyles() {
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).
* This is fetched from the /styles/chrome/ID.json endpoint.
@ -34,7 +52,7 @@ function SearchUserstyles() {
*/
function fetchStyleJson(userstylesId) {
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)
.then(responseText => {
resolve(tryJSONparse(responseText));
@ -46,21 +64,25 @@ function SearchUserstyles() {
/**
* Fetches (and JSON-parses) search results from a userstyles.org search API.
* 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
*/
function search(searchText) {
function search(category) {
return new Promise((resolve, reject) => {
if (totalPages !== undefined && currentPage > totalPages) {
resolve({'data':[]});
}
const TIMEOUT = 10000;
const headers = {
'Content-type': 'application/json',
'Accept': '*/*'
};
const searchUrl = new URL('https://userstyles.org/api/v1/styles/search');
let queryParams = 'search=' + encodeURIComponent(searchText);
const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
let queryParams = 'search=' + encodeURIComponent(category);
queryParams += '&page=' + currentPage;
queryParams += '&per_page=' + RESULTS_PER_PAGE;
queryParams += '&country=NA';
searchUrl.search = '?' + queryParams;
const xhr = new XMLHttpRequest();
xhr.timeout = TIMEOUT;
@ -90,52 +112,84 @@ function SearchUserstyles() {
* @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
*/
const SearchResults = (() => {
const RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
const DELAY_BETWEEN_RESULTS_MS = 500;
const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
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 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).
let loading = false;
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 alreadyInstalledResults = 0; // Number of results that are already installed.
return {load, next, prev};
function render() {
// Clear search results
$('#searchResults-list').innerHTML = '';
$('#searchResults-list').innerHTML = ''; // Clear search results
// Show search results for current page
const startIndex = (currentPage - 1) * RESULTS_PER_PAGE;
const endIndex = currentPage * RESULTS_PER_PAGE;
const resultSubset = processedResults.slice(startIndex, endIndex);
console.log('Render processedResults[' + startIndex + ':' + endIndex + '] = ', resultSubset);
resultSubset.forEach(index => {
createSearchResult(index);
const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
const displayedResults = processedResults.slice(startIndex, endIndex);
displayedResults.forEach(resultToDisplay => {
createSearchResultNode(resultToDisplay);
});
if (resultSubset.length < RESULTS_PER_PAGE) {
// TODO: Show "Results are still loading" message.
if (currentDisplayedPage <= 1 || loading) {
$('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
} 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() {
if (processedResults.length < (currentPage + 1) * RESULTS_PER_PAGE) {
console.log('loadMoreIfNeeded: YES. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length);
if (shouldLoadMore()) {
console.log('loadMoreIfNeeded: YES.');
loading = true;
render();
setTimeout(load, 1000);
} 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) {
if (event) {
event.preventDefault();
}
currentPage += 1;
currentDisplayedPage += 1;
render();
loadMoreIfNeeded();
}
@ -145,7 +199,7 @@ const SearchResults = (() => {
if (event) {
event.preventDefault();
}
currentPage = Math.max(1, currentPage - 1);
currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
render();
}
@ -175,6 +229,15 @@ const SearchResults = (() => {
if (event) {
event.preventDefault();
}
loading = true;
render();
if (unprocessedResults.length > 0) {
processNextResult();
return true;
}
$('#load-search-results').classList.add('hidden');
$('#searchResults').classList.remove('hidden');
$('#searchResults-error').classList.add('hidden');
@ -182,26 +245,38 @@ const SearchResults = (() => {
// Find styles for the current active tab
getActiveTab().then(tab => {
tabURL = tab.url;
const hostname = new URL(tabURL).hostname.replace(/^(?:.*\.)?([^.]*\.(co\.)?[^.]*)$/i, '$1');
$('#searchResults-terms').textContent = hostname;
searchAPI.getCategory(tabURL)
.then(category => {
console.log('userstyles.org "category" for URL ' + tabURL + ' is ' + category);
$('#searchResults-terms').textContent = category;
console.log('load#searchAPI.search(' + hostname + ')');
searchAPI.search(hostname)
.then(searchResults => {
if (searchResults.data.length === 0) {
throw 404;
}
unprocessedResults.push.apply(unprocessedResults, searchResults.data);
processNextResult();
})
.catch(error);
searchAPI.search(category)
.then(searchResults => {
console.log('load#searchAPI.search(', category, ') => ',
searchResults.data.length, 'results');
if (searchResults.data.length === 0) {
throw 404;
}
unprocessedResults.push.apply(unprocessedResults, searchResults.data);
processNextResult();
})
.catch(error);
});
});
return true;
}
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) {
console.log('processNextResult:unprocessedResults === 0');
loadMoreIfNeeded();
return;
}
@ -212,16 +287,17 @@ const SearchResults = (() => {
if (matchingStyles.length > 0) {
// Style already installed, skip it.
// 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;
setTimeout(processNextResult, 0); // Keep processing
setTimeout(processNextResult, DELAY_BETWEEN_FETCHING_STYLES); // Keep processing
} else if (nextResult.category !== 'site') {
// 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;
setTimeout(processNextResult, 0); // Keep processing
} else {
// 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)
.then(userstyleJson => {
// Extract applicable sections (i.e. styles that apply to the current site)
@ -239,42 +315,20 @@ const SearchResults = (() => {
processedResults.push(nextResult);
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
})
.catch(reason => {
console.log('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 + ')');
console.log('[' + unprocessedResults.length + '] Error while loading style ID ' + nextResult.id + ': ' + reason);
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.
* @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.
* @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
*/
function createSearchResult(userstyleSearchResult) {
function createSearchResultNode(userstyleSearchResult) {
/*
userstyleSearchResult format: {
id: 100835,
@ -315,6 +369,7 @@ const SearchResults = (() => {
}
}
*/
console.log('createSearchResultNode(', userstyleSearchResult, ')');
const entry = template.searchResult.cloneNode(true);
Object.assign(entry, {
@ -333,8 +388,13 @@ const SearchResults = (() => {
const screenshot = $('.searchResult-screenshot', entry);
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;
screenshot.classList.remove('no-screenshot');
} else {
screenshot.classList.remove('no-screenshot');
}
Object.assign(screenshot, {
src: screenshotUrl,
@ -365,7 +425,8 @@ const SearchResults = (() => {
/** Installs the current userstyleSearchResult into stylus. */
function install() {
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 url = 'https://userstyles.org/styles/chrome/' + styleId + '.json';
download(url)
@ -377,8 +438,8 @@ const SearchResults = (() => {
});
})
.catch(reason => {
console.log('Error while installing from ' + url + ': ' + reason);
alert('Error while installing from ' + url + ': ' + reason);
console.log('install:download(', url, ') => [ERROR]: ', reason);
alert('Error while downloading ' + url + '\nReason: ' + reason);
});
return true;
}