Some styling on search results. New EOL
This commit is contained in:
derv82
parent
764d7f627e
commit
f35271f6de
46
popup.html
46
popup.html
|
|
@ -82,27 +82,12 @@
|
|||
|
||||
<template data-id="searchResult">
|
||||
<div class="searchResult">
|
||||
<img class="searchResult-screenshot"
|
||||
src="https://userstyles.org/style_screenshot_thumbnails/118959_after.png"
|
||||
title="Style screenshot" />
|
||||
<a class="searchResult-title"
|
||||
href="https://userstyles.org/styles/118959/darksearch-for-google"
|
||||
target="_blank"
|
||||
title="DarkSearch for Google">
|
||||
DarkSearch for Google
|
||||
</a>
|
||||
<div class="searchResult-description"
|
||||
title="The best Dark theme for Google.">
|
||||
The best Dark theme for Google.
|
||||
</div>
|
||||
<img class="searchResult-screenshot" />
|
||||
<a class="searchResult-title" target="_blank"></a>
|
||||
<div class="searchResult-description"></div>
|
||||
<div class="searchResult-author">
|
||||
By:
|
||||
<a class="searchResult-authorLink"
|
||||
href="https://userstyles.org/users/280080"
|
||||
target="_blank"
|
||||
title="Nass O">
|
||||
Nass O
|
||||
</a>
|
||||
<a class="searchResult-authorLink" target="_blank"></a>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="remote-style-install" i18n-text="remoteStyleInstall" i18n-title="remoteStyleInstallTooltip"></button>
|
||||
|
|
@ -143,22 +128,25 @@
|
|||
<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="remote-styles" class="hidden">
|
||||
<h3>Search Results for <span id="searchResults-terms">-</span></h3>
|
||||
<div id="searchResults"></div>
|
||||
<div id="searchResultsNav">
|
||||
<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>></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="load-remote-styles">
|
||||
<a id="load-remote-styles-link" href="#"
|
||||
i18n-text="loadStylesForSite"></a>
|
||||
</div>
|
||||
<div id="remote-styles">
|
||||
<div id="searchResults"></div>
|
||||
<div id="searchResultsNav">
|
||||
<button id="searchResultsNav-prev"><</button>
|
||||
<span id="searchResultsNav-currentPage">1</span>
|
||||
/
|
||||
<span id="searchResultsNav-totalPages">200</span>
|
||||
<button id="searchResultsNav-next">></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" href="https://userstyles.org/styles/browse/"
|
||||
i18n-text="findStylesForSite"></a>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,63 @@
|
|||
#remote-styles {
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(150,150,150,0.3);
|
||||
}
|
||||
|
||||
#remote-styles-list {
|
||||
padding-inline-start: 0;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.remote-style img {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 99px;
|
||||
}
|
||||
|
||||
li.remote-style {
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
}
|
||||
li.remote-style:hover {
|
||||
background-color: rgba(50, 150, 255, 0.5);
|
||||
}
|
||||
|
||||
li.remote-style > .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.remote-style > .description {
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
li.remote-style > * {
|
||||
width: 180px;
|
||||
overflow-x: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#disable-all-wrapper {
|
||||
border-bottom: solid 1px #000;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#remote-styles.hidden,
|
||||
#load-remote-styles.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#remote-styles, #searchResults {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
padding: 5px;
|
||||
}
|
||||
.searchResult:hover {
|
||||
background-color: rgba(50, 150, 255, 0.5);
|
||||
}
|
||||
|
||||
.searchResult img {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.searchResult-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.searchResult-description {
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.searchResult > * {
|
||||
max-width: 108px;
|
||||
overflow-x: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#searchResultsNav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#searchResultsNav label {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#searchResultsNav button {
|
||||
text-align: center;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#searchResultsNav-prev[disabled],
|
||||
#searchResultsNav-next[disabled] {
|
||||
cursor: not-allowed;
|
||||
background-image: linear-gradient(rgba(90, 90, 90, 0.5), rgba(90, 90, 90, 0.5));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,160 +1,156 @@
|
|||
'use strict';
|
||||
|
||||
let currentPage = 1;
|
||||
|
||||
/**
|
||||
* Fetches and parses search results (in JSON) from userstyles.org
|
||||
* @return {Object} Search results from userstyles.org
|
||||
* @param {string} queryParams Query parameters to send in search request.
|
||||
*/
|
||||
function fetchSearchResults(queryParams) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
const TIMEOUT = 10000;
|
||||
const headers = {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
};
|
||||
const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
|
||||
console.log("fetchSearchResults url:", url);
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.timeout = TIMEOUT;
|
||||
xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
|
||||
? resolve(JSON.parse(xhr.responseText))
|
||||
: reject(xhr.status));
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', url, true);
|
||||
for (const key of Object.keys(headers)) {
|
||||
xhr.setRequestHeader(key, headers[key]);
|
||||
}
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function createSearchResultElement(searchResult) {
|
||||
/*
|
||||
searchResult format:
|
||||
{
|
||||
id: 100835,
|
||||
name: "Reddit Flat Dark",
|
||||
screenshot_url: "19339_after.png",
|
||||
description: "...",
|
||||
user: {
|
||||
id: 48470,
|
||||
name: "holloh"
|
||||
}
|
||||
}
|
||||
*/
|
||||
console.log("createSearchResultElement searchResult:", searchResult);
|
||||
|
||||
const entry = template.searchResult.cloneNode(true);
|
||||
Object.assign(entry, {
|
||||
id: ENTRY_ID_PREFIX_RAW + searchResult.id,
|
||||
styleId: searchResult.id
|
||||
});
|
||||
console.log("createSearchResultElement entry:", entry);
|
||||
|
||||
const title = $('.searchResult-title', entry);
|
||||
Object.assign(title, {
|
||||
textContent: searchResult.name,
|
||||
title: searchResult.name,
|
||||
href: searchResult.url
|
||||
});
|
||||
|
||||
const screenshot = $('.searchResult-screenshot', entry);
|
||||
let ss_url = searchResult.screenshot_url;
|
||||
if (RegExp(/^[0-9]*_after.png$/i).test(ss_url)) {
|
||||
ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
|
||||
}
|
||||
Object.assign(screenshot, {
|
||||
src: ss_url,
|
||||
title: 'Screenshot of ' + searchResult.name
|
||||
});
|
||||
|
||||
const description = $('.searchResult-description', entry);
|
||||
Object.assign(description, {
|
||||
innerHTML: searchResult.description,
|
||||
title: searchResult.description,
|
||||
});
|
||||
|
||||
const authorLink = $('.searchResult-authorLink', entry);
|
||||
Object.assign(authorLink, {
|
||||
textContent: searchResult.user.name,
|
||||
title: searchResult.user.name,
|
||||
href: 'https://userstyles.org/users/' + searchResult.user.id
|
||||
});
|
||||
|
||||
$('#searchResults').appendChild(entry);
|
||||
}
|
||||
|
||||
function updateSearchResultsNav(currentPage, totalPages) {
|
||||
// Update 'next' button
|
||||
if (currentPage >= searchResults.total_pages) {
|
||||
currentPage = searchResults.total_pages;
|
||||
$('#searchResultsNav-next').classList.add("disabled");
|
||||
} else {
|
||||
$('#searchResultsNav-next').classList.remove("disabled");
|
||||
}
|
||||
|
||||
// Update 'prev' button
|
||||
if (currentPage <= 1) {
|
||||
currentPage = 1;
|
||||
$('#searchResultsNav-prev').classList.add("disabled");
|
||||
} else {
|
||||
$('#searchResultsNav-prev').classList.remove("disabled");
|
||||
}
|
||||
$('#searchResultsNav-currentPage').textContent = currentPage;
|
||||
$('#searchResultsNav-totalPages').textContent = searchResults.total_pages;
|
||||
}
|
||||
|
||||
function insertRemoteStyles(searchResults) {
|
||||
/*
|
||||
searchResults: {
|
||||
data: [...],
|
||||
current_page: 1,
|
||||
per_page: 15;
|
||||
total_pages: 6,
|
||||
total_entries: 85
|
||||
}
|
||||
*/
|
||||
console.log("insertRemoteStyles(searchResults):", searchResults);
|
||||
currentPage = searchResults.current_page;
|
||||
updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
|
||||
searchResults.data.forEach((searchResult) => {
|
||||
console.log("searchResult:", searchResult);
|
||||
createSearchResultElement(searchResult);
|
||||
});
|
||||
}
|
||||
|
||||
function loadRemoteStyles(event) {
|
||||
event.preventDefault();
|
||||
getActiveTab().then(tab => {
|
||||
console.log("tab.url:", tab.url);
|
||||
|
||||
const url = new URL(tab.url);
|
||||
console.log("url:", url);
|
||||
|
||||
const hostname = url.hostname;
|
||||
console.log("hostname:", hostname);
|
||||
|
||||
const queryParams = [
|
||||
"search=" + encodeURIComponent(hostname),
|
||||
"page=" + currentPage,
|
||||
"per_page=3"
|
||||
].join("&");
|
||||
|
||||
fetchSearchResults(queryParams)
|
||||
.then(insertRemoteStyles)
|
||||
.catch(reason => {
|
||||
throw reason;
|
||||
});
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function initRemoteStyles() {
|
||||
$('#load-remote-styles-link').onclick = loadRemoteStyles;
|
||||
}
|
||||
|
||||
onDOMready().then(() => {
|
||||
initRemoteStyles();
|
||||
});
|
||||
'use strict';
|
||||
|
||||
let currentPage = 1;
|
||||
let hostname;
|
||||
|
||||
/**
|
||||
* Fetches and parses search results (in JSON) from userstyles.org
|
||||
* @return {Object} Search results from userstyles.org
|
||||
* @param {string} queryParams Query parameters to send in search request.
|
||||
*/
|
||||
function fetchSearchResults(queryParams) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
const TIMEOUT = 10000;
|
||||
const headers = {
|
||||
'Content-type': 'application/json',
|
||||
'Accept': '*/*'
|
||||
};
|
||||
const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
|
||||
console.log('fetchSearchResults url:', url);
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.timeout = TIMEOUT;
|
||||
xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
|
||||
? resolve(JSON.parse(xhr.responseText))
|
||||
: reject(xhr.status));
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', url, true);
|
||||
for (const key of Object.keys(headers)) {
|
||||
xhr.setRequestHeader(key, headers[key]);
|
||||
}
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function createSearchResultElement(searchResult) {
|
||||
/*
|
||||
searchResult format:
|
||||
{
|
||||
id: 100835,
|
||||
name: "Reddit Flat Dark",
|
||||
screenshot_url: "19339_after.png",
|
||||
description: "...",
|
||||
user: {
|
||||
id: 48470,
|
||||
name: "holloh"
|
||||
}
|
||||
}
|
||||
*/
|
||||
console.log('createSearchResultElement searchResult:', searchResult);
|
||||
|
||||
const entry = template.searchResult.cloneNode(true);
|
||||
Object.assign(entry, {
|
||||
id: ENTRY_ID_PREFIX_RAW + searchResult.id,
|
||||
styleId: searchResult.id
|
||||
});
|
||||
console.log('createSearchResultElement entry:', entry);
|
||||
|
||||
const title = $('.searchResult-title', entry);
|
||||
Object.assign(title, {
|
||||
textContent: searchResult.name,
|
||||
title: searchResult.name,
|
||||
href: 'https://userstyles.org' + searchResult.url,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
const screenshot = $('.searchResult-screenshot', entry);
|
||||
let ss_url = searchResult.screenshot_url;
|
||||
if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(ss_url)) {
|
||||
ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
|
||||
}
|
||||
Object.assign(screenshot, {
|
||||
src: ss_url,
|
||||
title: 'Screenshot of ' + searchResult.name
|
||||
});
|
||||
|
||||
// TODO: Expand/collapse description
|
||||
const description = $('.searchResult-description', entry);
|
||||
Object.assign(description, {
|
||||
textContent: searchResult.description.replace(/<.*?>/g, ""),
|
||||
title: searchResult.description.replace(/<.*?>/g, ""),
|
||||
});
|
||||
|
||||
const authorLink = $('.searchResult-authorLink', entry);
|
||||
Object.assign(authorLink, {
|
||||
textContent: searchResult.user.name,
|
||||
title: searchResult.user.name,
|
||||
href: 'https://userstyles.org/users/' + searchResult.user.id,
|
||||
onclick: handleEvent.openURLandHide
|
||||
});
|
||||
|
||||
$('#searchResults').appendChild(entry);
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
$('#searchResultsNav-currentPage').textContent = currentPage;
|
||||
$('#searchResultsNav-totalPages').textContent = totalPages;
|
||||
}
|
||||
|
||||
function insertRemoteStyles(searchResults) {
|
||||
/*
|
||||
searchResults: {
|
||||
data: [...],
|
||||
current_page: 1,
|
||||
per_page: 15;
|
||||
total_pages: 6,
|
||||
total_entries: 85
|
||||
}
|
||||
*/
|
||||
currentPage = searchResults.current_page;
|
||||
updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
|
||||
searchResults.data.forEach(createSearchResultElement);
|
||||
}
|
||||
|
||||
function loadRemoteStyles(event) {
|
||||
event.preventDefault();
|
||||
getActiveTab().then(tab => {
|
||||
hostname = new URL(tab.url).hostname;
|
||||
const queryParams = [
|
||||
'search=' + encodeURIComponent(hostname),
|
||||
'page=' + currentPage,
|
||||
'per_page=3'
|
||||
].join('&');
|
||||
|
||||
$('#searchresults-terms').textContent = hostname;
|
||||
$('#remote-styles').classList.remove("hidden");
|
||||
$('#load-remote-styles').classList.add("hidden");
|
||||
fetchSearchResults(queryParams)
|
||||
.then(insertRemoteStyles)
|
||||
.catch(reason => {
|
||||
throw reason;
|
||||
});
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function initRemoteStyles() {
|
||||
$('#load-remote-styles-link').onclick = loadRemoteStyles;
|
||||
}
|
||||
|
||||
onDOMready().then(() => {
|
||||
initRemoteStyles();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user