revert: add sorting kinds of pushed_at and stars for themes. (#285)

This reverts commit 7c2a76a.

Author: BeyondMagic

.github/ISSUE_TEMPLATE/-send-your-theme.md

@@ -1,9 +1,9 @@
 ---
-name: "❤  Send Your Theme"
+name: "❤ Send Your Theme"
 about: An easy way to submit your theme if you don't know how to do it via pull request.
 title: "[NEWTHEME] Name of your theme"
 labels: new theme
-assignees: Neikon, BeyondMagic
+assignees: Neikon
 
 ---
 
@@ -12,11 +12,10 @@ Replace the .......... with the corresponding information. Example:
 ```
 {
 		"title": "the best dark theme",
-		"link": "https://github.com/myuser/myTheme",
+		"link": "https://github.com/myTheme",
 		"description": "a dark theme",
-		"image": "https://raw.githubusercontent.com/previewthemepicture.png",
-		"tags": [ "John", "dark", "minimal","oneline", "............." ],
-		"repository": "https://github.com/myuser/myTheme"
+		"image": "https://raw.githubusercontent.com/previewthemepicture.png"
+                "tags": [ "John", "dark", "minimal","oneline", "............." ]
 	}
 ```
 ################# DELETE UNTIL HERE #################
@@ -26,8 +25,7 @@ Replace the .......... with the corresponding information. Example:
 		"title": "..........",
 		"link": "..........",
 		"description": "..........",
-		"image": "..........",
-		"tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ],
-		"repository": ".........."
+		"image": ".........."
+                "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ]
 }
 ```

README.md

@@ -36,15 +36,13 @@ A collection site of Firefox userchrome themes, mostly from FirefoxCSS Reddit.<b
 
 ---
 
-## Contribution
-
-### Add your theme <3
+## Add your theme <3
 
 + If you have a Github account:
   1. Fork this repository
   2. Look for a file called `themes.json`, open and edit it
   3. Below the last `}` add `,` right after a copy the [code below](#code) and paste it in the file
-  4. Add the properties of your theme: **title**, **link**, **description**, **image**, **tag** (cannot be left empty), and **repository**.
+  4. Add the properties of your theme: **title**, **link**, **description**, **image** and **tag** (Cannot be left empty)
   5. **Avoid the use of escaped characters, and the order matters**
   6. Please, do not use a very big image, preferably (650x500)
   7. Image property:
@@ -56,42 +54,20 @@ A collection site of Firefox userchrome themes, mostly from FirefoxCSS Reddit.<b
   1. When creating an issue, you will find a template for submitting a theme. Use that one. It's easy.
 
 + If you have a Twitter account:
-  1. Send **at least** the following properties: **title**, **link**, **description**, **image**, **tags**, and **repository** to [@Neikon66](https://twitter.com/Neikon66). 
+  1. Send **at least** the following properties: **tags**, **title**, **link**, **description**, and **picture** to [@Neikon66](https://twitter.com/Neikon66). 
 
 ```
   {
     "title": "..........",
     "link": "..........",
     "description": "..........",
     "image": "..........",
-    "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ],
-    "repository": ".........."
+    "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ]
   }
 ```
 
 ---
 
-### Contribution: themes information
-
-1. Install [nushell](https://www.nushell.sh/) in your machine.
-2. Generate a [Github token API](https://github.com/settings/tokens) for your account and save it;
-2. Clone the repository;
-3. In your terminal, change directory into the `/scripts/` folder.
-4. Run `nu`.
-5. Run `use sort_themes.nu`;
-6. Run `sort_themes --help` and read and understand the flags;
-7. Run `sort_themes --github YOUR_GITHUB_TOKEN`;
-8. Check if everything ran fine, if yes, replace the new generated `themes.json` file.
-9. Commit your changes.
-10. Open a pull request and send your contribution for us to review.
-11. Thank you :)
-
-**Why generate a token API for only Github?**
-
-Most themes' repositories are in Gitub, so it's pretty easy to hit the anonymous rate limit for API calls. With a token, that limit is higher, making it easier to contribute.
-
----
-
 <h1 align="center">What do you think =?</h1>
 
 <p align="center">Feel free to send me any feedback via issue or my twitter <a href="https://twitter.com/Neikon66">@Neikon66</a>.</p>

dev/js/main.js

@@ -81,134 +81,109 @@ function createLightbox (id) {
    *  ======================
    */
 
-	const search = /** @type {HTMLInputElement} */ (document.getElementById('searchInput'))
+  document.getElementById('searchInput').addEventListener('keydown', e => {
 
-	search.addEventListener('keydown', e => {
-
-	if (e.key === "Enter")
-		sort(localStorage.sort, search.value)
+    if (e.key === "Enter") toggleSortType(false)
 
   })
 
-	const search_button = /** @type {HTMLInputElement} */ (document.getElementById('searchButton'))
-	search_button.addEventListener('click', () => sort(localStorage.sort, search.value))
+  document.getElementById('searchButton').addEventListener('click', () => toggleSortType(false))
 
   /*  Load Content
    *  ============
    */
 
-	/*
-	 * If sorting is not set yet in `localStorage`,
-	 * then use as default `latest` kind.
-	 */
-	if (!localStorage.sort)
-		localStorage.sort = 'latest'
-
-	/*
-	 * Add event to sort when an option is chosen..
-	 */
-	const sort_menu = /** @type {HTMLSelectElement} */ (document.getElementById('js-sort-menu'))
-	sort_menu.addEventListener('change', () => {
-		const name = /** @type {string} */ (sort_menu.selectedOptions[0].getAttribute('name'))
-		sort(name)
-	})
-
-	sort(localStorage.sort)
-	const current_option = sort_menu.options.namedItem(localStorage.sort)
-	if (current_option)
-		current_option.selected = true
-
-	/**
-	 * Toggle the sorting type of the themes.
-	 *
-	 * @param {string} kind How to sort the themes.
-	 * @param {string=} filter Term to filter the themes.
-	 **/
-	function sort (kind, filter) {
-
-		localStorage.sort = kind
-
-		// Remove all themes cards from the page.
-		const cards_container = document.getElementById('themes_container')
-		if (cards_container)
-			cards_container.innerHTML = ''
-
-		fetch('themes.json')
-			.then(data => data.json())
-			.then(async data => {
-
-				data = Object.entries(data)
-
-				if (filter) {
-
-					/**
-					 * Match any substring (partial) from a string (text).
-					 * @param {string} text
-					 * @param {string} partial
-					 */
-					function matches (text, partial) {
-						return text.toLowerCase().indexOf(partial.toLowerCase()) > -1
-					}
-
-					data = data.filter(element => matches(`${element[1].title}, ${element[1].tags}`, search.value))
-
-				}
-
-				switch (localStorage.sort) {
-
-					/*
-					 * Sort from the most recent theme added.
-					 */
-					case 'latest':
-						data.reverse()
-					break
-
-					/*
-					 * Ascending sorting of stars from repositories.
-					 */
-					case 'updated':
-						// item1.attr.localeCompare(item2.attr);
-						data.sort((a, b) => b[1].pushed_at.localeCompare(a[1].pushed_at))
-					break
-
-					/*
-					 * Ascending sorting of stars from repositories.
-					 */
-					case 'stars':
-						data.sort((a, b) => b[1].stargazers_count - a[1].stargazers_count)
-					break
-
-					/*
-					 * Randomly sorting of themes.
-					 */
-					case 'random':
-						for (let i = data.length - 1; i > 0; i--) {
-							const j = Math.floor(Math.random() * (i + 1));
-							[data[i], data[j]] = [data[j], data[i]]
-						}
-					break
-
-					/*
-					 * Sort from the least recent theme added (oldest).
-					 * Since it's sorted like this by default from the file, do nothing.
-					 */
-					default:
-
-				}
-
-				for (const [index, entry] of data)
-				{
-					const card = new Card(entry, index)
-					card.render(outputContainer)
-					await new Promise(r => setTimeout(r, 666));
-				}
-
-			})
-}
+  // add our sorting button
+  const sortTrigger = document.getElementById('js-sortSwitcher')
+  sortTrigger.addEventListener('click', () => toggleSortType(true))
+
+  // When localstorage is not set, use "latest" order type
+  if (!localStorage['sort']) localStorage['sort'] = 'latest'
+
+  function repeatToggle (nextType) {
+
+    localStorage['sort'] = nextType
+    return toggleSortType(false)
+
+  }
+
+  function toggleSortType (change) {
+
+    if (document.querySelectorAll('.card'))
+      document.querySelectorAll('.card').forEach(e => e.remove());
+
+    fetch('themes.json')
+    .then(data => data.json())
+    .then(parsedData => {
+
+      const search = document.getElementById('searchInput').value
+
+      if (search) {
+
+        function matches (text, partial) { return text.toLowerCase().indexOf(partial.toLowerCase()) > -1 }
+
+        const parsedAsArray = Object.entries(parsedData)
+        let   searchResults = parsedAsArray.filter(element => matches(`${element[1].title}, ${element[1].tags}`, search))
+
+        searchResults.forEach(result => {
+
+          const card = new Card(result[1], +result[0])
+          card.render(outputContainer)
+
+        })
+
+        sortTrigger.title = `"${search}"`
 
+        return 
+
+      }
+
+      switch (localStorage['sort']) {
+
+        // sort from the oldest theme added
+        case 'latest':
+          if (change) return repeatToggle('random')
+          parsedData.reverse()
+          break;
+
+        // sort randomly
+        case 'random':
+          if (change) return repeatToggle('oldest')
+          for (let i = parsedData.length - 1; i > 0; i--) {
+
+            const j = Math.floor(Math.random() * (i + 1));
+            [parsedData[i], parsedData[j]] = [parsedData[j], parsedData[i]]
+
+          }
+          break;
+
+        // sort from the most recent theme added
+        default:
+          if (change) return repeatToggle('latest');
+
+      }
+
+      // TODO: make a better way to preview the current sorting
+      sortTrigger.title = localStorage['sort']
+
+      parsedData.forEach((entry, index)  => {
+
+        const card = new Card (entry, index)
+        card.render(outputContainer)
+
+      })
+      
+    })
+  }
+  
   // add themes
   const outputContainer = document.getElementById('themes_container')
 
+  if (outputContainer) toggleSortType(false);
+
+
+
+
   /*  Theme Handling
    *  ==============
    */

dev/pug/disclaimer.pug

@@ -1,13 +1,5 @@
 extends layout/default
 
-block header
-  header#main_header
-    h3.header-branding FirefoxCSS Store
-  
-    nav#main_nav
-      a(href='index.html') Theme List
-      a#js-themeSwitcher(href='#')
-        i.fas.fa-moon
 
 block content
 

dev/pug/includes/header.pug

@@ -5,12 +5,8 @@ header#main_header
       a(href='index.html') Theme List
       a#js-themeSwitcher(href='#')
         i.fas.fa-moon
-      select#js-sort-menu
-        option(name='updated') Updated
-        option(name='stars') Stars
-        option(name='latest') Latest
-        option(name='oldest') Oldest
-        option(name='random') Random
+      a#js-sortSwitcher(href='#')
+        i.fas.fa-sort
       div.searchform(method='get')
         .inputgroup
           input.searchinput#searchInput(type='text', placeholder='Search')

dev/scss/base/_typography.scss

@@ -13,6 +13,7 @@ body {
 }
 
 
+
 a {
 
   text-decoration: none;
@@ -24,7 +25,6 @@ a {
   &:hover { color: var(--linkc-hover) }
   &:focus { outline: var(--focus-thickness) solid var(--focus-colour); }
 
-
 }