add icons for github and sharing; filter invalid chars from filename

Author: harsilspatel

assets/github120.png

@@ -4,4 +4,12 @@
   padding: .2rem .5rem;
   border: 1px solid rgba(0,0,0,.2);
   border-radius: .25rem;
-	}
+	}
+
+#shareLink {
+	display: inline-flex;
+	vertical-align: middle;
+	float: right;
+	padding-top: 1%;
+	color: black;
+}

css/style.css

@@ -3,7 +3,7 @@
 
   "name": "Moodle Downloader",
   "description": "A chrome extension for downloading Moodle resources",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "icons": {
     "16": "assets/icon16.png",
     "24": "assets/icon24.png",

manifest.json

@@ -40,8 +40,25 @@ <h2 class="mdl-card__title-text">moodleDownloader 📚</h2>
 								<input type="checkbox" id="organize" class="mdl-checkbox__input" checked>
 								<span style="font-size:75%;" class="mdl-checkbox__label">Organize into folder (experimental)</span>
 							</label>
+							<label for="resourcesSection" >
+								<br>
+								<!-- <br> -->
+								<span style="font-size:75%;">Hint: Head to the Resouces to download all resources at once!</span>
+								<!-- <br> -->
+							</label>
+							<br>
+							<br>
 							<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" id="downloadResources">Download</button>
+							<a href="">
+								<div id="shareLink" class="icon material-icons">share</div>
+							</a>
+							<div style="display: inline;">
+								<a id="sourceCode" href="https://github.com/harsilspatel/moodleDownloader">
+									<img src="../assets/github120.png" alt="Souce code"  align="right" style="width: 9%; padding-right: 2%;">
+								</a>
+							</div>
 						</div>
+
 						<div hidden='hidden' id=feedbackDiv>
 								<br>
 								<small id=feedbackPrompt>You just downloaded 50th file using this tool! 🎉 <br/> <br/> I have spent more than <b>30 hours</b> to learn & develop this extension, could you please rate my efforts? 😬</small>

src/popup.html

@@ -21,6 +21,20 @@ function main() {
 		downloadResources()
 	});
 
+	document.getElementById("shareLink").addEventListener("click", () => {
+		var copyFrom = document.createElement("textarea");
+		copyFrom.textContent = "https://chrome.google.com/webstore/detail/geckodm/pgkfjobhhfckamidemkddfnnkknomobe";
+		document.body.appendChild(copyFrom);
+		copyFrom.select();
+		document.execCommand('copy');
+		copyFrom.blur();
+		document.body.removeChild(copyFrom);
+	})
+
+	document.getElementById("sourceCode").addEventListener("click", () => {
+		chrome.tabs.create({url: 'https:github.com/harsilspatel/moodleDownloader'})
+	})
+
 	// filter resources on input
 	const searchField = document.getElementById("search");
 	searchField.addEventListener("input", () => {
@@ -133,7 +147,7 @@ function suggestFilename(downloadItem, suggest) {
 		item = resourcesList.filter(r => r.url==downloadItem.url)[0],
 		console.log(downloadItem),
 		console.log(resourcesList),
-		suggest({filename: item.course + '/' + item.section + '/' + downloadItem.filename})
+		suggest({filename: `${item.course}/${item.section}/${downloadItem.filename}`.replace(/[^\w.]+/g," ")})
 }
 
 function downloadResources() {