Some styling on search results. New EOL

popup.html

@@ -82,27 +82,12 @@
 
   <template data-id="searchResult">
     <div class="searchResult">
-      <img class="searchResult-screenshot"
+      <img class="searchResult-screenshot" />
-          src="https://userstyles.org/style_screenshot_thumbnails/118959_after.png"
+      <a class="searchResult-title" target="_blank"></a>
-          title="Style screenshot" />
+      <div class="searchResult-description"></div>
-      <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"
+        <a class="searchResult-authorLink" target="_blank"></a>
-          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>
@@ -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>

popup/remoteStyles.css

@@ -1,40 +1,63 @@
-#remote-styles {
+#disable-all-wrapper {
-  width: 200px;
+  border-bottom: solid 1px #000;
-  overflow: hidden;
+  margin-bottom: 5px;
-  background-color: rgba(150,150,150,0.3);
+}
-}
+
-
+#remote-styles.hidden,
-#remote-styles-list {
+#load-remote-styles.hidden {
-  padding-inline-start: 0;
+  display: none;
-  margin-block-start: 0;
+}
-  margin-block-end: 0;
+
-  padding: 5px;
+#remote-styles, #searchResults {
-}
+  max-width: 200px;
-.remote-style img {
+  overflow: hidden;
-  display: block;
+}
-  width: 180px;
+
-  height: 99px;
+.searchResult {
-}
+  padding: 5px;
-
+}
-li.remote-style {
+.searchResult:hover {
-  list-style: none;
+  background-color: rgba(50, 150, 255, 0.5);
-  padding: 5px;
+}
-}
+
-li.remote-style:hover {
+.searchResult img {
-  background-color: rgba(50, 150, 255, 0.5);
+  width: 50px;
-}
+  height: 40px;
-
+}
-li.remote-style > .title {
+
-  font-weight: bold;
+.searchResult-title {
-}
+  font-weight: bold;
-
+}
-li.remote-style > .description {
+
-  overflow: hidden;
+.searchResult-description {
-  font-style: italic;
+  overflow: hidden;
-}
+  font-style: italic;
-
+}
-li.remote-style > * {
+
-  width: 180px;
+.searchResult > * {
-  overflow-x: ellipsis;
+  max-width: 108px;
-  white-space: nowrap;
+  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));
+}

popup/remoteStyles.js

@@ -1,160 +1,156 @@
-'use strict';
+'use strict';
-
+
-let currentPage = 1;
+let currentPage = 1;
-
+let hostname;
-/**
+
- * Fetches and parses search results (in JSON) from userstyles.org
+/**
- * @return {Object} Search results from userstyles.org
+ * Fetches and parses search results (in JSON) from userstyles.org
- * @param {string} queryParams Query parameters to send in search request.
+ * @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) {
+function fetchSearchResults(queryParams) {
-    const TIMEOUT = 10000;
+  return new Promise(function(resolve, reject) {
-    const headers = {
+    const TIMEOUT = 10000;
-      'Content-type': 'application/json',
+    const headers = {
-      'Accept': '*/*'
+      'Content-type': 'application/json',
-    };
+      'Accept': '*/*'
-    const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
+    };
-    console.log("fetchSearchResults url:", url);
+    const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
-    const xhr = new XMLHttpRequest();
+    console.log('fetchSearchResults url:', url);
-    xhr.timeout = TIMEOUT;
+    const xhr = new XMLHttpRequest();
-    xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
+    xhr.timeout = TIMEOUT;
-      ? resolve(JSON.parse(xhr.responseText))
+    xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
-      : reject(xhr.status));
+      ? resolve(JSON.parse(xhr.responseText))
-    xhr.onerror = reject;
+      : reject(xhr.status));
-    xhr.open('GET', url, true);
+    xhr.onerror = reject;
-    for (const key of Object.keys(headers)) {
+    xhr.open('GET', url, true);
-      xhr.setRequestHeader(key, headers[key]);
+    for (const key of Object.keys(headers)) {
-    }
+      xhr.setRequestHeader(key, headers[key]);
-    xhr.send();
+    }
-  });
+    xhr.send();
-}
+  });
-
+}
-function createSearchResultElement(searchResult) {
+
-  /*
+function createSearchResultElement(searchResult) {
-    searchResult format:
+  /*
-    {
+    searchResult format:
-      id: 100835,
+    {
-      name: "Reddit Flat Dark",
+      id: 100835,
-      screenshot_url: "19339_after.png",
+      name: "Reddit Flat Dark",
-      description: "...",
+      screenshot_url: "19339_after.png",
-      user: {
+      description: "...",
-        id: 48470,
+      user: {
-        name: "holloh"
+        id: 48470,
-      }
+        name: "holloh"
-    }
+      }
-  */
+    }
-  console.log("createSearchResultElement searchResult:", searchResult);
+  */
-
+  console.log('createSearchResultElement searchResult:', searchResult);
-  const entry = template.searchResult.cloneNode(true);
+
-  Object.assign(entry, {
+  const entry = template.searchResult.cloneNode(true);
-    id: ENTRY_ID_PREFIX_RAW + searchResult.id,
+  Object.assign(entry, {
-    styleId: searchResult.id
+    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, {
+  const title = $('.searchResult-title', entry);
-    textContent: searchResult.name,
+  Object.assign(title, {
-    title: searchResult.name,
+    textContent: searchResult.name,
-    href: searchResult.url
+    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.png$/i).test(ss_url)) {
+  const screenshot = $('.searchResult-screenshot', entry);
-    ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
+  let ss_url = searchResult.screenshot_url;
-  }
+  if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(ss_url)) {
-  Object.assign(screenshot, {
+    ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
-    src: ss_url,
+  }
-    title: 'Screenshot of ' + searchResult.name
+  Object.assign(screenshot, {
-  });
+    src: ss_url,
-
+    title: 'Screenshot of ' + searchResult.name
-  const description = $('.searchResult-description', entry);
+  });
-  Object.assign(description, {
+
-    innerHTML: searchResult.description,
+  // TODO: Expand/collapse description
-    title: searchResult.description,
+  const description = $('.searchResult-description', entry);
-  });
+  Object.assign(description, {
-
+    textContent: searchResult.description.replace(/<.*?>/g, ""),
-  const authorLink = $('.searchResult-authorLink', entry);
+    title: searchResult.description.replace(/<.*?>/g, ""),
-  Object.assign(authorLink, {
+  });
-    textContent: searchResult.user.name,
+
-    title: searchResult.user.name,
+  const authorLink = $('.searchResult-authorLink', entry);
-    href: 'https://userstyles.org/users/' + searchResult.user.id
+  Object.assign(authorLink, {
-  });
+    textContent: searchResult.user.name,
-
+    title: searchResult.user.name,
-  $('#searchResults').appendChild(entry);
+    href: 'https://userstyles.org/users/' + searchResult.user.id,
-}
+    onclick: handleEvent.openURLandHide
-
+  });
-function updateSearchResultsNav(currentPage, totalPages) {
+
-    // Update 'next' button
+  $('#searchResults').appendChild(entry);
-    if (currentPage >= searchResults.total_pages) {
+}
-      currentPage = searchResults.total_pages;
+
-      $('#searchResultsNav-next').classList.add("disabled");
+function updateSearchResultsNav(currentPage, totalPages) {
-    } else {
+    // Update 'next' button
-      $('#searchResultsNav-next').classList.remove("disabled");
+    if (currentPage >= totalPages) {
-    }
+      currentPage = totalPages;
-
+      $('#searchResultsNav-next').setAttribute('disabled', 'disabled');
-    // Update 'prev' button
+    } else {
-    if (currentPage <= 1) {
+      $('#searchResultsNav-next').removeAttribute('disabled');
-      currentPage = 1;
+    }
-      $('#searchResultsNav-prev').classList.add("disabled");
+
-    } else {
+    // Update 'prev' button
-      $('#searchResultsNav-prev').classList.remove("disabled");
+    if (currentPage <= 1) {
-    }
+      currentPage = 1;
-    $('#searchResultsNav-currentPage').textContent = currentPage;
+      $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
-    $('#searchResultsNav-totalPages').textContent = searchResults.total_pages;
+    } else {
-}
+      $('#searchResultsNav-prev').removeAttribute('disabled');
-
+    }
-function insertRemoteStyles(searchResults) {
+    $('#searchResultsNav-currentPage').textContent = currentPage;
-  /*
+    $('#searchResultsNav-totalPages').textContent = totalPages;
-    searchResults: {
+}
-      data: [...],
+
-      current_page: 1,
+function insertRemoteStyles(searchResults) {
-      per_page: 15;
+  /*
-      total_pages: 6,
+    searchResults: {
-      total_entries: 85
+      data: [...],
-    }
+      current_page: 1,
-  */
+      per_page: 15;
-  console.log("insertRemoteStyles(searchResults):", searchResults);
+      total_pages: 6,
-  currentPage = searchResults.current_page;
+      total_entries: 85
-  updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
+    }
-  searchResults.data.forEach((searchResult) => {
+  */
-    console.log("searchResult:", searchResult);
+  currentPage = searchResults.current_page;
-    createSearchResultElement(searchResult);
+  updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
-  });
+  searchResults.data.forEach(createSearchResultElement);
-}
+}
-
+
-function loadRemoteStyles(event) {
+function loadRemoteStyles(event) {
-  event.preventDefault();
+  event.preventDefault();
-  getActiveTab().then(tab => {
+  getActiveTab().then(tab => {
-    console.log("tab.url:", tab.url);
+    hostname = new URL(tab.url).hostname;
-
+    const queryParams = [
-    const url = new URL(tab.url);
+      'search=' + encodeURIComponent(hostname),
-    console.log("url:", url);
+      'page=' + currentPage,
-
+      'per_page=3'
-    const hostname = url.hostname;
+    ].join('&');
-    console.log("hostname:", hostname);
+
-
+    $('#searchresults-terms').textContent = hostname;
-    const queryParams = [
+    $('#remote-styles').classList.remove("hidden");
-      "search=" + encodeURIComponent(hostname),
+    $('#load-remote-styles').classList.add("hidden");
-      "page=" + currentPage,
+    fetchSearchResults(queryParams)
-      "per_page=3"
+      .then(insertRemoteStyles)
-    ].join("&");
+      .catch(reason => {
-
+        throw reason;
-    fetchSearchResults(queryParams)
+      });
-      .then(insertRemoteStyles)
+  });
-      .catch(reason => {
+  return false;
-        throw reason;
+}
-      });
+
-  });
+function initRemoteStyles() {
-  return false;
+  $('#load-remote-styles-link').onclick = loadRemoteStyles;
-}
+}
-
+
-function initRemoteStyles() {
+onDOMready().then(() => {
-  $('#load-remote-styles-link').onclick = loadRemoteStyles;
+  initRemoteStyles();
-}
+});
-
-onDOMready().then(() => {
-  initRemoteStyles();
-});