Address part of PR feedback.
Main diff: Wrapped onDOMready() & SearchResults() function in IIFE closure.
* [X] const SearchResults = ... // should be inside a closure (IIFE @ Top)
* [X] SearchUserstyles should be firstLetterLowercase
* [X] Don't fetch category on load; use regexp to derive category. (left 'HEAD' code commented-out).
* [X] Don't use XMLHttpRequest() anymore (used in 3 places?): Use download() which accepts custom request params.
* [X] Remove unused getters ('getCurrentPage' & others?)
* [X] const BASE_USO_URL = 'https://userstyles.org'; @ top of searchResults closure. Refer elsewhere.
* [X] const searchUrl = new URL... should be a single multiline statement (new URL('...' +\ '...'
* [X] .innerHTML = ... // use .textContent = ... instead
* [X] Don't use `setAttribute` on 'disabled': $('..-prev').disabled = currentDisplayedPage <= 1 || loading
* [X] Don't use .indexOf() on strings, use .includes()
* [X] Move onDOMReady() code to top of file.
This commit is contained in:
derv82
parent
6cdc442986
commit
8d75042f02
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
<template data-id="searchResult">
|
||||
<div class="searchResult">
|
||||
<img class="searchResult-screenshot no-screenshot" />
|
||||
<img class="searchResult-screenshot" />
|
||||
<a class="searchResult-title" target="_blank"></a>
|
||||
<div class="searchResult-description"></div>
|
||||
<div class="searchResult-author">
|
||||
|
|
@ -151,6 +151,7 @@
|
|||
<span i18n-text="searchResultsHeader"></span>
|
||||
<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>
|
||||
|
|
@ -160,7 +161,6 @@
|
|||
</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">
|
||||
|
|
|
|||
|
|
@ -1,30 +1,404 @@
|
|||
/* global handleEvent tryJSONparse getStylesSafe BG */
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
onDOMready().then(() => {
|
||||
const searchResults = searchResultsController();
|
||||
$('#find-styles-link').onclick = searchResults.load;
|
||||
$('#searchResultsNav-prev').onclick = searchResults.prev;
|
||||
$('#searchResultsNav-next').onclick = searchResults.next;
|
||||
});
|
||||
|
||||
/**
|
||||
* Represents the search results within the Stylus popup.
|
||||
* @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
|
||||
*/
|
||||
function searchResultsController() {
|
||||
const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
|
||||
const DELAY_AFTER_FETCHING_STYLES = 0; // Millisecs to wait before fetching next batch of search results.
|
||||
const DELAY_BEFORE_SEARCHING_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).
|
||||
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
|
||||
|
||||
return {load, next, prev};
|
||||
|
||||
function render() {
|
||||
$('#searchResults-list').textContent = ''; // Clear search results
|
||||
|
||||
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 (currentDisplayedPage <= 1 || loading) {
|
||||
$('#searchResultsNav-prev').disabled = true;
|
||||
} else {
|
||||
$('#searchResultsNav-prev').disabled = false;
|
||||
}
|
||||
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
|
||||
|
||||
let totalResultsCount = processedResults.length;
|
||||
if (unprocessedResults.length > 0) {
|
||||
// Add 1 page if there's results left to process.
|
||||
totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
|
||||
}
|
||||
const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
|
||||
if (currentDisplayedPage >= totalPageCount || loading) {
|
||||
$('#searchResultsNav-next').disabled = true;
|
||||
} else {
|
||||
$('#searchResultsNav-next').disabled = false;
|
||||
}
|
||||
$('#searchResultsNav-totalPages').textContent = totalPageCount;
|
||||
|
||||
const navNode = $('#searchResultsNav');
|
||||
if (loading && !navNode.classList.contains('loading')) {
|
||||
navNode.classList.add('loading');
|
||||
} else {
|
||||
navNode.classList.remove('loading');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Boolean} If we should process more results.
|
||||
*/
|
||||
function shouldLoadMore() {
|
||||
return (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE);
|
||||
}
|
||||
|
||||
function loadMoreIfNeeded() {
|
||||
if (shouldLoadMore()) {
|
||||
loading = true;
|
||||
render();
|
||||
setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
|
||||
} else {
|
||||
loading = false;
|
||||
render();
|
||||
}
|
||||
}
|
||||
|
||||
/** Increments currentDisplayedPage and loads results. */
|
||||
function next(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
currentDisplayedPage += 1;
|
||||
render();
|
||||
loadMoreIfNeeded();
|
||||
}
|
||||
|
||||
/** Decrements currentPage and loads results. */
|
||||
function prev(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
|
||||
render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Display error message to user.
|
||||
* @param {string} message Message to display to user.
|
||||
*/
|
||||
function error(reason) {
|
||||
let message;
|
||||
if (reason === 404) {
|
||||
// TODO: i18n message
|
||||
message = 'No results found';
|
||||
} else {
|
||||
message = 'Error loading search results: ' + reason;
|
||||
}
|
||||
$('#searchResults').classList.add('hidden');
|
||||
$('#searchResults-error').textContent = message;
|
||||
$('#searchResults-error').classList.remove('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes search results container, starts fetching results.
|
||||
* @param {Object} event The click event
|
||||
*/
|
||||
function load(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
loading = true;
|
||||
render();
|
||||
|
||||
if (unprocessedResults.length > 0) {
|
||||
processNextResult();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (searchAPI.isExhausted()) {
|
||||
loading = false;
|
||||
render();
|
||||
return true;
|
||||
}
|
||||
|
||||
$('#find-styles').classList.add('hidden');
|
||||
$('#open-search').classList.remove('hidden');
|
||||
$('#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);
|
||||
$('#searchResults-terms').textContent = category;
|
||||
searchAPI.search(category)
|
||||
.then(searchResults => {
|
||||
if (searchResults.data.length === 0) {
|
||||
throw 404;
|
||||
}
|
||||
unprocessedResults.push.apply(unprocessedResults, searchResults.data);
|
||||
processNextResult();
|
||||
})
|
||||
.catch(error);
|
||||
});
|
||||
// Find styles for the current active tab
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes the next search result in `unprocessedResults` and adds to `processedResults`.
|
||||
* Skips installed/non-applicable styles.
|
||||
* Fetches more search results if unprocessedResults is empty.
|
||||
* Recurses until shouldLoadMore() is false.
|
||||
*/
|
||||
function processNextResult() {
|
||||
if (!shouldLoadMore()) {
|
||||
loading = false;
|
||||
render();
|
||||
return;
|
||||
}
|
||||
|
||||
if (unprocessedResults.length === 0) {
|
||||
loadMoreIfNeeded();
|
||||
return;
|
||||
}
|
||||
|
||||
// Process the next result in the queue.
|
||||
const nextResult = unprocessedResults.shift();
|
||||
isStyleInstalled(nextResult)
|
||||
.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]) => {
|
||||
// Extract applicable sections (i.e. styles that apply to the current site)
|
||||
const applicableSections = BG.getApplicableSections({
|
||||
style: userstyleJson,
|
||||
matchUrl: tabURL,
|
||||
stopOnFirst: true
|
||||
});
|
||||
if (applicableSections.length > 0) {
|
||||
// Style is valid (can apply to this site).
|
||||
nextResult.json = userstyleJson; // Store Style JSON for easy installing later.
|
||||
|
||||
// Store style settings for detecting customization later.
|
||||
nextResult.style_settings = userstyleObject.style_settings;
|
||||
|
||||
processedResults.push(nextResult);
|
||||
render();
|
||||
}
|
||||
setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
|
||||
})
|
||||
.catch(reason => {
|
||||
console.log('processNextResult(', nextResult.id, ') => [ERROR]: ', reason);
|
||||
setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Promises if the given searchResult matches an already-installed style.
|
||||
* @param {Object} userstyleSearchResult Search result object from userstyles.org
|
||||
* @returns {Promise<boolean>} Resolves if the style is installed.
|
||||
*/
|
||||
function isStyleInstalled(userstyleSearchResult) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
getStylesSafe()
|
||||
.then(installedStyles => {
|
||||
const matchingStyles = installedStyles.filter(installedStyle => {
|
||||
// Compare installed name to search result name.
|
||||
let isMatch = installedStyle.name === userstyleSearchResult.name;
|
||||
// Compare if search result ID (userstyles ID) is mentioned in the installed updateUrl.
|
||||
if (installedStyle.updateUrl) {
|
||||
isMatch &= installedStyle.updateUrl.includes('/' + userstyleSearchResult.id + '.json');
|
||||
}
|
||||
return isMatch;
|
||||
});
|
||||
resolve(matchingStyles.length > 0);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructs and adds the given search result to the popup's Search Results container.
|
||||
* @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
|
||||
*/
|
||||
function createSearchResultNode(userstyleSearchResult) {
|
||||
/*
|
||||
userstyleSearchResult format: {
|
||||
id: 100835,
|
||||
name: "Reddit Flat Dark",
|
||||
screenshot_url: "19339_after.png",
|
||||
description: "...",
|
||||
user: {
|
||||
id: 48470,
|
||||
name: "holloh"
|
||||
},
|
||||
style_settings: [...]
|
||||
}
|
||||
*/
|
||||
if (userstyleSearchResult.installed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entry = template.searchResult.cloneNode(true);
|
||||
Object.assign(entry, {
|
||||
id: 'searchResult-' + userstyleSearchResult.id
|
||||
});
|
||||
$('#searchResults-list').appendChild(entry);
|
||||
|
||||
const searchResultName = userstyleSearchResult.name;
|
||||
const title = $('.searchResult-title', entry);
|
||||
Object.assign(title, {
|
||||
textContent: searchResultName,
|
||||
title: searchResultName,
|
||||
href: searchAPI.BASE_URL + userstyleSearchResult.url,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const screenshot = $('.searchResult-screenshot', entry);
|
||||
let screenshotUrl = userstyleSearchResult.screenshot_url;
|
||||
if (screenshotUrl === null) {
|
||||
screenshotUrl = BLANK_PIXEL_DATA;
|
||||
screenshot.classList.add('no-screenshot');
|
||||
} else if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
|
||||
screenshotUrl = searchAPI.BASE_URL + '/style_screenshot_thumbnails/' + screenshotUrl;
|
||||
}
|
||||
Object.assign(screenshot, {
|
||||
src: screenshotUrl,
|
||||
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 authorLink = $('.searchResult-authorLink', entry);
|
||||
Object.assign(authorLink, {
|
||||
textContent: userstyleSearchResult.user.name,
|
||||
title: userstyleSearchResult.user.name,
|
||||
href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const rating = $('.searchResult-rating', entry);
|
||||
let ratingClass;
|
||||
let ratingValue = userstyleSearchResult.rating;
|
||||
if (ratingValue === null) {
|
||||
ratingClass = 'none';
|
||||
ratingValue = 'n/a';
|
||||
} else if (ratingValue >= 2.5) {
|
||||
ratingClass = 'good';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
} else if (ratingValue >= 1.5) {
|
||||
ratingClass = 'okay';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
} else {
|
||||
ratingClass = 'bad';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
}
|
||||
Object.assign(rating, {
|
||||
textContent: ratingValue,
|
||||
className: 'searchResult-rating ' + ratingClass
|
||||
});
|
||||
|
||||
const installCount = $('.searchResult-installCount', entry);
|
||||
Object.assign(installCount, {
|
||||
textContent: userstyleSearchResult.total_install_count.toLocaleString()
|
||||
});
|
||||
|
||||
const installButton = $('.searchResult-install', entry);
|
||||
installButton.onclick = install;
|
||||
|
||||
if (userstyleSearchResult.style_settings.length > 0) {
|
||||
// Style has customizations
|
||||
installButton.classList.add('customize');
|
||||
const customizeButton = $('.searchResult-customize', entry);
|
||||
customizeButton.classList.remove('hidden');
|
||||
customizeButton.href = searchAPI.BASE_URL + userstyleSearchResult.url;
|
||||
customizeButton.onclick = handleEvent.openURLandHide;
|
||||
}
|
||||
|
||||
/** 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';
|
||||
saveStyleSafe(userstyleSearchResult.json)
|
||||
.then(() => {
|
||||
// Remove search result after installing
|
||||
let matchingIndex = -1;
|
||||
processedResults.forEach((processedResult, index) => {
|
||||
if (processedResult.id === userstyleSearchResult.id) {
|
||||
matchingIndex = index;
|
||||
}
|
||||
});
|
||||
if (matchingIndex >= 0) {
|
||||
processedResults.splice(matchingIndex, 1);
|
||||
}
|
||||
processNextResult();
|
||||
})
|
||||
.catch(reason => {
|
||||
console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
|
||||
alert('Error while downloading ' + url + '\nReason: ' + reason);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* Library for interacting with userstyles.org
|
||||
* @returns {Object} Exposed methods representing the search results on userstyles.org
|
||||
*/
|
||||
function SearchUserstyles() {
|
||||
function searchUserstyles() {
|
||||
const BASE_URL = 'https://userstyles.org';
|
||||
let totalPages;
|
||||
let currentPage = 1;
|
||||
let exhausted = false;
|
||||
|
||||
return {getCurrentPage, getTotalPages, getCategory, isExhausted, search, fetchStyleJson, fetchStyle};
|
||||
|
||||
/**
|
||||
* @returns {Number} The *Next* page to fetch for styles. Auto-incremented after each search.
|
||||
*/
|
||||
function getCurrentPage() {
|
||||
return currentPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Number} The total number of search result pages.
|
||||
*/
|
||||
function getTotalPages() {
|
||||
return totalPages;
|
||||
}
|
||||
return {BASE_URL, getCategory, isExhausted, search, fetchStyleJson, fetchStyle};
|
||||
|
||||
/**
|
||||
* @returns {Boolean} If there are no more results to fetch from userstyles.org
|
||||
|
|
@ -39,17 +413,24 @@ function SearchUserstyles() {
|
|||
* @returns {Promise<String>} The category for a URL, or the hostname if category is not found.
|
||||
*/
|
||||
function getCategory(url) {
|
||||
const hostname = new URL(url).hostname;
|
||||
let hostname = new URL(url).hostname;
|
||||
// Strip "TLD" (including .com.TLD, .co.TLD, etc)
|
||||
hostname = hostname.replace(/(\.com|\.co|\.org|\.net|\.gov)?\.[a-z0-9]+$/, '');
|
||||
// Strip "subdomains"
|
||||
hostname = hostname.split(/\./g).pop();
|
||||
return hostname;
|
||||
/*
|
||||
// Resolve "category" using userstyles.org's /styles/browse/all/ endpoint:
|
||||
return new Promise(resolve => {
|
||||
const request = new XMLHttpRequest();
|
||||
const browseURL = 'https://userstyles.org/styles/browse/all/' + encodeURIComponent(url);
|
||||
const browseURL = BASE_URL + '/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);
|
||||
const searchCategory = responseURL.searchParams.get('category');
|
||||
if (searchCategory !== null) {
|
||||
resolve(searchCategory);
|
||||
} else {
|
||||
resolve(hostname);
|
||||
}
|
||||
|
|
@ -57,6 +438,7 @@ function SearchUserstyles() {
|
|||
};
|
||||
request.send(null);
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -67,7 +449,7 @@ function SearchUserstyles() {
|
|||
*/
|
||||
function fetchStyleJson(userstylesId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
|
||||
const jsonUrl = BASE_URL + '/styles/chrome/' + userstylesId + '.json';
|
||||
download(jsonUrl)
|
||||
.then(responseText => {
|
||||
resolve(tryJSONparse(responseText));
|
||||
|
|
@ -83,29 +465,16 @@ function SearchUserstyles() {
|
|||
*/
|
||||
function fetchStyle(userstylesId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const TIMEOUT = 10000;
|
||||
const headers = {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
};
|
||||
|
||||
const styleUrl = new URL('https://userstyles.org/api/v1/styles/' + userstylesId);
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.timeout = TIMEOUT;
|
||||
xhr.onload = () => {
|
||||
if (xhr.status === 200) {
|
||||
resolve(tryJSONparse(xhr.responseText));
|
||||
} else {
|
||||
console.log('fetch(' + userstylesId + ') [ERROR] ', xhr);
|
||||
reject(xhr.status);
|
||||
}
|
||||
};
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', styleUrl, true);
|
||||
for (const key of Object.keys(headers)) {
|
||||
xhr.setRequestHeader(key, headers[key]);
|
||||
}
|
||||
xhr.send();
|
||||
download(BASE_URL + '/api/v1/styles/' + userstylesId, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
},
|
||||
body: null
|
||||
}).then(responseText => {
|
||||
resolve(tryJSONparse(responseText));
|
||||
}).catch(reject);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -121,427 +490,29 @@ function SearchUserstyles() {
|
|||
resolve({'data':[]});
|
||||
}
|
||||
|
||||
const TIMEOUT = 10000;
|
||||
const headers = {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
};
|
||||
const searchURL = BASE_URL +
|
||||
'/api/v1/styles/subcategory' +
|
||||
'?search=' + encodeURIComponent(category) +
|
||||
'&page=' + currentPage +
|
||||
'&country=NA';
|
||||
|
||||
const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
|
||||
let queryParams = 'search=' + encodeURIComponent(category);
|
||||
queryParams += '&page=' + currentPage;
|
||||
queryParams += '&country=NA';
|
||||
searchUrl.search = '?' + queryParams;
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.timeout = TIMEOUT;
|
||||
xhr.onload = () => {
|
||||
if (xhr.status === 200) {
|
||||
const responseJson = tryJSONparse(xhr.responseText);
|
||||
currentPage = responseJson.current_page + 1;
|
||||
totalPages = responseJson.total_pages;
|
||||
exhausted = (currentPage > totalPages);
|
||||
resolve(responseJson);
|
||||
} else {
|
||||
exhausted = true;
|
||||
reject(xhr.status);
|
||||
}
|
||||
};
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', searchUrl, true);
|
||||
for (const key of Object.keys(headers)) {
|
||||
xhr.setRequestHeader(key, headers[key]);
|
||||
}
|
||||
xhr.send();
|
||||
download(searchURL, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
},
|
||||
body: null
|
||||
}).then(responseText => {
|
||||
const responseJson = tryJSONparse(responseText);
|
||||
currentPage = responseJson.current_page + 1;
|
||||
totalPages = responseJson.total_pages;
|
||||
exhausted = (currentPage > totalPages);
|
||||
resolve(responseJson);
|
||||
}).catch(reason => {
|
||||
exhausted = true;
|
||||
reject(reason);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents the search results within the Stylus popup.
|
||||
* @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
|
||||
*/
|
||||
const SearchResults = (() => {
|
||||
const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
|
||||
const DELAY_AFTER_FETCHING_STYLES = 0; // Millisecs to wait before fetching next batch of search results.
|
||||
const DELAY_BEFORE_SEARCHING_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).
|
||||
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
|
||||
|
||||
// Discovery current tab's URL & USO "category" for the URL.
|
||||
getActiveTab().then(tab => {
|
||||
tabURL = tab.url;
|
||||
searchAPI.getCategory(tabURL)
|
||||
.then(resolvedCategory => {
|
||||
category = resolvedCategory;
|
||||
$('#searchResults-terms').textContent = category;
|
||||
});
|
||||
});
|
||||
|
||||
return {load, next, prev};
|
||||
|
||||
function render() {
|
||||
$('#searchResults-list').innerHTML = ''; // Clear search results
|
||||
|
||||
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 (currentDisplayedPage <= 1 || loading) {
|
||||
$('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
|
||||
} else {
|
||||
$('#searchResultsNav-prev').removeAttribute('disabled');
|
||||
}
|
||||
$('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
|
||||
|
||||
let totalResultsCount = processedResults.length;
|
||||
if (unprocessedResults.length > 0) {
|
||||
// Add 1 page if there's results left to process.
|
||||
totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Boolean} If we should process more results.
|
||||
*/
|
||||
function shouldLoadMore() {
|
||||
return (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE);
|
||||
}
|
||||
|
||||
function loadMoreIfNeeded() {
|
||||
if (shouldLoadMore()) {
|
||||
loading = true;
|
||||
render();
|
||||
setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
|
||||
} else {
|
||||
loading = false;
|
||||
render();
|
||||
}
|
||||
}
|
||||
|
||||
/** Increments currentDisplayedPage and loads results. */
|
||||
function next(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
currentDisplayedPage += 1;
|
||||
render();
|
||||
loadMoreIfNeeded();
|
||||
}
|
||||
|
||||
/** Decrements currentPage and loads results. */
|
||||
function prev(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
|
||||
render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Display error message to user.
|
||||
* @param {string} message Message to display to user.
|
||||
*/
|
||||
function error(reason) {
|
||||
let message;
|
||||
if (reason === 404) {
|
||||
// TODO: i18n message
|
||||
message = 'No results found';
|
||||
} else {
|
||||
message = 'Error loading search results: ' + reason;
|
||||
}
|
||||
$('#searchResults').classList.add('hidden');
|
||||
$('#searchResults-error').innerHTML = message;
|
||||
$('#searchResults-error').classList.remove('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes search results container, starts fetching results.
|
||||
* @param {Object} event The click event
|
||||
*/
|
||||
function load(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
loading = true;
|
||||
render();
|
||||
|
||||
if (unprocessedResults.length > 0) {
|
||||
processNextResult();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (searchAPI.isExhausted()) {
|
||||
loading = false;
|
||||
render();
|
||||
return true;
|
||||
}
|
||||
|
||||
$('#find-styles').classList.add('hidden');
|
||||
$('#open-search').classList.remove('hidden');
|
||||
$('#searchResults').classList.remove('hidden');
|
||||
$('#searchResults-error').classList.add('hidden');
|
||||
|
||||
// Find styles for the current active tab
|
||||
searchAPI.search(category)
|
||||
.then(searchResults => {
|
||||
if (searchResults.data.length === 0) {
|
||||
throw 404;
|
||||
}
|
||||
unprocessedResults.push.apply(unprocessedResults, searchResults.data);
|
||||
processNextResult();
|
||||
})
|
||||
.catch(error);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes the next search result in `unprocessedResults` and adds to `processedResults`.
|
||||
* Skips installed/non-applicable styles.
|
||||
* Fetches more search results if unprocessedResults is empty.
|
||||
* Recurses until shouldLoadMore() is false.
|
||||
*/
|
||||
function processNextResult() {
|
||||
if (!shouldLoadMore()) {
|
||||
loading = false;
|
||||
render();
|
||||
return;
|
||||
}
|
||||
|
||||
if (unprocessedResults.length === 0) {
|
||||
loadMoreIfNeeded();
|
||||
return;
|
||||
}
|
||||
|
||||
// Process the next result in the queue.
|
||||
const nextResult = unprocessedResults.shift();
|
||||
isStyleInstalled(nextResult)
|
||||
.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]) => {
|
||||
// Extract applicable sections (i.e. styles that apply to the current site)
|
||||
const applicableSections = BG.getApplicableSections({
|
||||
style: userstyleJson,
|
||||
matchUrl: tabURL,
|
||||
stopOnFirst: true
|
||||
});
|
||||
if (applicableSections.length > 0) {
|
||||
// Style is valid (can apply to this site).
|
||||
nextResult.json = userstyleJson; // Store Style JSON for easy installing later.
|
||||
|
||||
// Store style settings for detecting customization later.
|
||||
nextResult.style_settings = userstyleObject.style_settings;
|
||||
|
||||
processedResults.push(nextResult);
|
||||
render();
|
||||
}
|
||||
setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
|
||||
})
|
||||
.catch(reason => {
|
||||
console.log('processNextResult(', nextResult.id, ') => [ERROR]: ', reason);
|
||||
setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Promises if the given searchResult matches an already-installed style.
|
||||
* @param {Object} userstyleSearchResult Search result object from userstyles.org
|
||||
* @returns {Promise<boolean>} Resolves if the style is installed.
|
||||
*/
|
||||
function isStyleInstalled(userstyleSearchResult) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
getStylesSafe()
|
||||
.then(installedStyles => {
|
||||
const matchingStyles = installedStyles.filter(installedStyle => {
|
||||
// Compare installed name to search result name.
|
||||
let isMatch = installedStyle.name === userstyleSearchResult.name;
|
||||
// Compare if search result ID (userstyles ID) is mentioned in the installed updateUrl.
|
||||
if (installedStyle.updateUrl) {
|
||||
isMatch &= installedStyle.updateUrl.indexOf('/' + userstyleSearchResult.id + '.json') >= 0;
|
||||
}
|
||||
return isMatch;
|
||||
});
|
||||
resolve(matchingStyles.length > 0);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructs and adds the given search result to the popup's Search Results container.
|
||||
* @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
|
||||
*/
|
||||
function createSearchResultNode(userstyleSearchResult) {
|
||||
/*
|
||||
userstyleSearchResult format: {
|
||||
id: 100835,
|
||||
name: "Reddit Flat Dark",
|
||||
screenshot_url: "19339_after.png",
|
||||
description: "...",
|
||||
user: {
|
||||
id: 48470,
|
||||
name: "holloh"
|
||||
},
|
||||
style_settings: [...]
|
||||
}
|
||||
*/
|
||||
if (userstyleSearchResult.installed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entry = template.searchResult.cloneNode(true);
|
||||
Object.assign(entry, {
|
||||
id: 'searchResult-' + userstyleSearchResult.id
|
||||
});
|
||||
$('#searchResults-list').appendChild(entry);
|
||||
|
||||
const searchResultName = userstyleSearchResult.name;
|
||||
const title = $('.searchResult-title', entry);
|
||||
Object.assign(title, {
|
||||
textContent: searchResultName + ' (by ' + userstyleSearchResult.user.name + ')',
|
||||
title: searchResultName + ' by: ' + userstyleSearchResult.user.name,
|
||||
href: 'https://userstyles.org' + userstyleSearchResult.url,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const screenshot = $('.searchResult-screenshot', entry);
|
||||
let screenshotUrl = userstyleSearchResult.screenshot_url;
|
||||
if (screenshotUrl === null) {
|
||||
screenshotUrl = BLANK_PIXEL_DATA;
|
||||
} 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,
|
||||
title: '"' + searchResultName + '" by ' + userstyleSearchResult.user.name
|
||||
});
|
||||
|
||||
// TODO: Expand/collapse description
|
||||
const description = $('.searchResult-description', entry);
|
||||
Object.assign(description, {
|
||||
textContent: userstyleSearchResult.description.replace(/<.*?>/g, ''),
|
||||
title: userstyleSearchResult.description.replace(/<.*?>/g, '')
|
||||
});
|
||||
|
||||
const authorLink = $('.searchResult-authorLink', entry);
|
||||
Object.assign(authorLink, {
|
||||
textContent: userstyleSearchResult.user.name,
|
||||
title: userstyleSearchResult.user.name,
|
||||
href: 'https://userstyles.org/users/' + userstyleSearchResult.user.id,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const rating = $('.searchResult-rating', entry);
|
||||
let ratingClass;
|
||||
let ratingValue = userstyleSearchResult.rating;
|
||||
if (ratingValue === null) {
|
||||
ratingClass = 'none';
|
||||
ratingValue = 'n/a';
|
||||
} else if (ratingValue >= 2.5) {
|
||||
ratingClass = 'good';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
} else if (ratingValue >= 1.5) {
|
||||
ratingClass = 'okay';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
} else {
|
||||
ratingClass = 'bad';
|
||||
ratingValue = ratingValue.toFixed(1);
|
||||
}
|
||||
Object.assign(rating, {
|
||||
textContent: ratingValue,
|
||||
className: 'searchResult-rating ' + ratingClass
|
||||
});
|
||||
|
||||
const installCount = $('.searchResult-installCount', entry);
|
||||
Object.assign(installCount, {
|
||||
textContent: userstyleSearchResult.total_install_count.toLocaleString()
|
||||
});
|
||||
|
||||
const installButton = $('.searchResult-install', entry);
|
||||
installButton.onclick = install;
|
||||
|
||||
if (userstyleSearchResult.style_settings.length > 0) {
|
||||
// Style has customizations
|
||||
installButton.classList.add('customize');
|
||||
const customizeButton = $('.searchResult-customize', entry);
|
||||
customizeButton.classList.remove('hidden');
|
||||
customizeButton.href = 'https://userstyles.org' + userstyleSearchResult.url;
|
||||
customizeButton.onclick = handleEvent.openURLandHide;
|
||||
}
|
||||
|
||||
/** Installs the current userstyleSearchResult into stylus. */
|
||||
function install() {
|
||||
entry.classList.add('loading');
|
||||
|
||||
const styleId = userstyleSearchResult.id;
|
||||
const url = 'https://userstyles.org/styles/chrome/' + styleId + '.json';
|
||||
saveStyleSafe(userstyleSearchResult.json)
|
||||
.then(() => {
|
||||
// Remove search result after installing
|
||||
let matchingIndex = -1;
|
||||
processedResults.forEach((processedResult, index) => {
|
||||
if (processedResult.id === userstyleSearchResult.id) {
|
||||
matchingIndex = index;
|
||||
}
|
||||
});
|
||||
if (matchingIndex >= 0) {
|
||||
processedResults.splice(matchingIndex, 1);
|
||||
}
|
||||
processNextResult();
|
||||
})
|
||||
.catch(reason => {
|
||||
console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
|
||||
alert('Error while downloading ' + url + '\nReason: ' + reason);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
onDOMready().then(() => {
|
||||
$('#find-styles-link').onclick = SearchResults.load;
|
||||
$('#searchResultsNav-prev').onclick = SearchResults.prev;
|
||||
$('#searchResultsNav-next').onclick = SearchResults.next;
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user