From 764d7f627e35b57905663c7c69f609f80e95cdde Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Sat, 18 Nov 2017 03:03:29 -0800
Subject: [PATCH] Loads styles from userstyles.org - Cannot 'install', needs
 cosmetic improvements

---
 .gitignore                |   1 +
 _locales/en/messages.json |   8 ++
 popup.html                |  46 ++++++++++-
 popup/popup.js            |   2 -
 popup/remoteStyles.css    |  40 ++++++++++
 popup/remoteStyles.js     | 160 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 253 insertions(+), 4 deletions(-)
 create mode 100755 popup/remoteStyles.css
 create mode 100755 popup/remoteStyles.js
diff --git a/.gitignore b/.gitignore
index 1708dc40..ac8fd4e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 pull_locales_login.rb
+.vscode
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 0e109179..b19da47a 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -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"
diff --git a/popup.html b/popup.html
index 0d0e959c..4573ab94 100644
--- a/popup.html
+++ b/popup.html
@@ -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>
diff --git a/popup/popup.js b/popup/popup.js
index a70767ed..45ac6f44 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -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) ?
diff --git a/popup/remoteStyles.css b/popup/remoteStyles.css
new file mode 100755
index 00000000..f5f92fe3
--- /dev/null
+++ b/popup/remoteStyles.css
@@ -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;
+}
diff --git a/popup/remoteStyles.js b/popup/remoteStyles.js
new file mode 100755
index 00000000..32271696
--- /dev/null
+++ b/popup/remoteStyles.js
@@ -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();
+});
