-
-
-
-
diff --git a/popup/remoteStyles.css b/popup/remoteStyles.css
index f5f92fe3..c94be8aa 100755
--- a/popup/remoteStyles.css
+++ b/popup/remoteStyles.css
@@ -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));
+}
diff --git a/popup/remoteStyles.js b/popup/remoteStyles.js
index 32271696..cc9b4eb3 100755
--- a/popup/remoteStyles.js
+++ b/popup/remoteStyles.js
@@ -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();
+});