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

Some styling on search results. New EOL

Browse Source
This commit is contained in:
derv82 2017-11-18 04:32:16 -08:00
parent 764d7f627e
commit f35271f6de
3 changed files with 236 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
popup.html
View File

@ -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>&lt;</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>&gt;</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">&lt;</button>
<span id="searchResultsNav-currentPage">1</span>
/
<span id="searchResultsNav-totalPages">200</span>
<button id="searchResultsNav-next">&gt;</button>
</div>
</div>
<div id="find-styles">
<a id="find-styles-link" href="https://userstyles.org/styles/browse/"
i18n-text="findStylesForSite"></a>

67
popup/remoteStyles.css
View File

@ -1,40 +1,63 @@
#remote-styles {
width: 200px;
#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;
background-color: rgba(150,150,150,0.3);
}
#remote-styles-list {
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
.searchResult {
padding: 5px;
}
.remote-style img {
display: block;
width: 180px;
height: 99px;
}
li.remote-style {
list-style: none;
padding: 5px;
}
li.remote-style:hover {
.searchResult:hover {
background-color: rgba(50, 150, 255, 0.5);
}
li.remote-style > .title {
.searchResult img {
width: 50px;
height: 40px;
}
.searchResult-title {
font-weight: bold;
}
li.remote-style > .description {
.searchResult-description {
overflow: hidden;
font-style: italic;
}
li.remote-style > * {
width: 180px;
.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));
}

60
popup/remoteStyles.js
View File

@ -1,6 +1,7 @@
'use strict';
let currentPage = 1;
let hostname;
/**
* Fetches and parses search results (in JSON) from userstyles.org
@ -15,7 +16,7 @@ function fetchSearchResults(queryParams) {
'Accept': '*/*'
};
const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
console.log("fetchSearchResults url:", url);
console.log('fetchSearchResults url:', url);
const xhr = new XMLHttpRequest();
xhr.timeout = TIMEOUT;
xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
@ -44,25 +45,26 @@ function createSearchResultElement(searchResult) {
}
}
*/
console.log("createSearchResultElement searchResult:", searchResult);
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);
console.log('createSearchResultElement entry:', entry);
const title = $('.searchResult-title', entry);
Object.assign(title, {
textContent: searchResult.name,
title: searchResult.name,
href: searchResult.url
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.png$/i).test(ss_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, {
@ -70,17 +72,19 @@ function createSearchResultElement(searchResult) {
title: 'Screenshot of ' + searchResult.name
});
// TODO: Expand/collapse description
const description = $('.searchResult-description', entry);
Object.assign(description, {
innerHTML: searchResult.description,
title: searchResult.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
href: 'https://userstyles.org/users/' + searchResult.user.id,
onclick: handleEvent.openURLandHide
});
$('#searchResults').appendChild(entry);
@ -88,22 +92,22 @@ function createSearchResultElement(searchResult) {
function updateSearchResultsNav(currentPage, totalPages) {
// Update 'next' button
if (currentPage >= searchResults.total_pages) {
currentPage = searchResults.total_pages;
$('#searchResultsNav-next').classList.add("disabled");
if (currentPage >= totalPages) {
currentPage = totalPages;
$('#searchResultsNav-next').setAttribute('disabled', 'disabled');
} else {
$('#searchResultsNav-next').classList.remove("disabled");
$('#searchResultsNav-next').removeAttribute('disabled');
}
// Update 'prev' button
if (currentPage <= 1) {
currentPage = 1;
$('#searchResultsNav-prev').classList.add("disabled");
$('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
} else {
$('#searchResultsNav-prev').classList.remove("disabled");
$('#searchResultsNav-prev').removeAttribute('disabled');
}
$('#searchResultsNav-currentPage').textContent = currentPage;
$('#searchResultsNav-totalPages').textContent = searchResults.total_pages;
$('#searchResultsNav-totalPages').textContent = totalPages;
}
function insertRemoteStyles(searchResults) {
@ -116,32 +120,24 @@ function insertRemoteStyles(searchResults) {
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);
});
searchResults.data.forEach(createSearchResultElement);
}
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);
hostname = new URL(tab.url).hostname;
const queryParams = [
"search=" + encodeURIComponent(hostname),
"page=" + currentPage,
"per_page=3"
].join("&");
'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 => {