added a search field 🔍

README.md

@@ -1,4 +1,4 @@
-# MoodleDownloader 
+# MoodleDownloader
 A chrome extension for downloading Moodle resources 💾
 
 ## Download ⬇️
@@ -11,7 +11,7 @@ If you prefer to install manually, you can find the latest binaries [here](https
 2. Open the week (section) from where you would like to download the resources from
 3. Click on the extension icon and select the resources to be downloaded.
     - Click and drag or use ⌘ key to select multiple options:
-4. Hit the `Download` button to get the resources! 
+4. Hit the `Download` button to get the resources!
 
 ## GIFs 🎞
 ### Without MoodleDownloader 😩
@@ -28,7 +28,7 @@ If you prefer to install manually, you can find the latest binaries [here](https
 <br/>
 
 #### Motivation 💡
-Realised in the week 11 that I don't have most of the resources 😭 
+Realised in the week 11 that I don't have most of the resources 😭
 
 <br/>
 

css/style.css

@@ -1,8 +1,7 @@
-#selectedResources {
+#resourceSelector {
   font-size: 1rem;
-  height: 10rem;
+  height: 15rem;
   padding: .2rem .5rem;
   border: 1px solid rgba(0,0,0,.2);
   border-radius: .25rem;
-  }
-
+	}

popup.html

@@ -15,21 +15,28 @@
           background: rgb(231, 242, 255);
         }
       </style> -->
-      
-      
+
+
       <div class="demo-card-wide mdl-card mdl-shadow--2dp">
         <div class="mdl-card__title">
           <h2 class="mdl-card__title-text">moodleDownloader 📚</h2>
-        </div>
+				</div>
 
         <div class="mdl-card__actions mdl-card--border">
+
           <small style="font-size:75%; padding-left: 1%;">Click and drag or use ⌘ key to select multiple options:</small>
-          <select multiple class="mdl-textfield__input" id="selectedResources">
+					<div style="padding-left: 1%">
+							<div class="mdl-textfield mdl-js-textfield">
+								<input style="font-size:75%;" class="mdl-textfield__input" type="text" id="search">
+								<label style="font-size:75%;" class="mdl-textfield__label" for="search">search...</label>
+							</div>
+					</div>
+					<select multiple class="mdl-textfield__input" id="resourceSelector">
           </select>
           <br>
           <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" id="downloadStuff">Download</button>
         </div>
       </div>
-        
+
     </body>
 </html>

popup.js

@@ -1,6 +1,6 @@
 function main() {
 
-	// google analytics 
+	// google analytics
 	var _gaq = _gaq || [];
 	_gaq.push(['_setAccount', 'UA-119398707-1']);
 	_gaq.push(['_trackPageview']);
@@ -15,32 +15,47 @@ function main() {
 	let button = document.getElementById("downloadStuff");
 	button.addEventListener("click", () => downloadStuff());
 
+	// filter resources on input
+	let searchField = document.getElementById("search");
+	searchField.addEventListener("input", () => filterList());
+
 	// executing background.js to populate the select form
 	chrome.tabs.executeScript({file: "background.js"}, function(result) {
 		try {
-			let selectedResources = document.getElementById("selectedResources");
+			let resourceSelector = document.getElementById("resourceSelector");
 			let files = result[0];
 			files.forEach(file => {
 				let fileOption = document.createElement("option");
+
 				// creating option element such that the text will be
 				// the resource name and the option value its url.
 				fileOption.innerHTML = file.name;
 				fileOption.value = file.url;
-				selectedResources.appendChild(fileOption);
+				resourceSelector.appendChild(fileOption);
 				console.log('populated!');
 			});
 		} catch(error) {
-			console.log(error)
+			console.log(error);
 		}
 	});
 }
 
+function filterList() {
+	let searchField = document.getElementById("search");
+	let query = searchField.value.toLowerCase();
+
+	let resourceSelector = document.getElementById("resourceSelector");
+	Array.from(resourceSelector.options).forEach(option => {
+		option.innerHTML.toLowerCase().includes(query) ?
+		option.removeAttribute('hidden') :
+		option.setAttribute('hidden', 'hidden');
+	});
+
+}
+
 function downloadStuff() {
-	console.log('button pressed!')
-
-	let selectedResources = document.getElementById("selectedResources");
-	Array.from(selectedResources.options).filter(x => x.selected).forEach(x => console.log(x, x.value));
-	Array.from(selectedResources.options).filter(x => x.selected).forEach(x => chrome.downloads.download({url: x.value}));
+	let resourceSelector = document.getElementById("resourceSelector");
+	Array.from(resourceSelector.options).filter(option => option.selected).forEach(option => chrome.downloads.download({url: option.value}));
 	_gaq.push(['_trackEvent', 'downloadStuff', 'clicked']);
 }