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

Loads styles from userstyles.org - Cannot 'install', needs cosmetic improvements

Browse Source
This commit is contained in:
derv82 2017-11-18 03:03:29 -08:00
parent d23342b171
commit 764d7f627e
6 changed files with 253 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.DS_Store
pull_locales_login.rb
.vscode

8
_locales/en/messages.json
View File

@ -337,6 +337,14 @@
"message": "Load Styles",
"description": "Text for a link that loads styles within the popup"
},
"remoteStyleInstall": {
"message": "Install",
"description": "Text for a button that installs a remote style"
},
"remoteStyleInstallTooltip": {
"message": "Install this style permanently",
"description": "Tooltip for a button that installs a remote style"
},
"findStylesForSite": {
"message": "Find more styles for this site",
"description": "Text for a link that gets a list of styles for the current site"

46
popup.html
View File

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="popup/popup.css">
<link rel="stylesheet" href="popup/remoteStyles.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@ -79,12 +80,43 @@
</div>
</template>
<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>
<div class="searchResult-author">
By:
<a class="searchResult-authorLink"
href="https://userstyles.org/users/280080"
target="_blank"
title="Nass O">
Nass O
</a>
</div>
<div class="actions">
<button class="remote-style-install" i18n-text="remoteStyleInstall" i18n-title="remoteStyleInstallTooltip"></button>
</div>
</div>
</template>
<script src="js/dom.js"></script>
<script src="js/messaging.js"></script>
<script src="js/localization.js"></script>
<script src="js/prefs.js"></script>
<script src="content/apply.js"></script>
<script src="popup/popup.js"></script>
<script src="popup/remoteStyles.js"></script>
</head>
<body id="stylus-popup">
@ -113,10 +145,20 @@
</div>
<div class="left-gutter"></div>
<div class="main-controls">
<div id="load-styles">
<a id="load-styles-link" href="#"
<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>

2
popup/popup.js
View File

@ -106,8 +106,6 @@ function initPopup(url) {
installed);
}
$('#load-styles-link').onclick = handleEvent.loadRemoteStyles;
$('#find-styles-link').onclick = handleEvent.openURLandHide;
$('#find-styles-link').href +=
url.startsWith(location.protocol) ?

40
popup/remoteStyles.css Executable file
View File

@ -0,0 +1,40 @@
#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;
}

160
popup/remoteStyles.js Executable file
View File

@ -0,0 +1,160 @@
'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();
});