Partial implmentation of options

.gitignore

@@ -0,0 +1,2 @@
+# Exclude master icon file
+countdown.png

README.md

@@ -0,0 +1,14 @@
+### Description
+A chrome extension for setting countdown timer for events and showing the timers in **newtab** page. Using this, users should be able to manually input event dates and also link events from services e.g. Google Calendar.
+
+### Motivation
+I needed a countdown timer for events to remind me about upcoming events i.e. Assignment Deadlines, Birthdays etc. Some might argue a installing a mobile app would have been easier, but I spend most of my awake time on my laptop using browser and other applications rather than on mobile. So building a browser extension was the more suitable solution for my need. Moreover, I wanted to brush up my JS knowledge. :smile:
+
+### Installation
+Clone this repository
+`git clone https://github.com/AsifulNobel/Time-Till`
+
+Then start Chrome browser and go to **extensions** page. Select **Developer Mode** and then click on *Load unpacked extension...*. When directory chooser dialog appears, choose the director where you cloned the repository.
+
+### Contributing
+To contribute to this repository with features, fork it, create new branch, add your feature and create pull-request. To report bugs or new features, create an issue using the **Issues** tab.

directive.js

@@ -0,0 +1,78 @@
+var storage = chrome.storage.local;
+
+function countApp() {	
+	this.eventDict = {};
+	this.restoreCountdowns = restoreCountdowns;
+	this.saveEvents = saveEvents.bind(this);	// For passing object context to callback
+}
+
+function replaceTimezone(timeStr) {
+	return timeStr.replace(/\sGMT.*$/, "");
+}
+
+function clearError() {
+	document.getElementById('errors').innerHTML = "";
+}
+
+function setError(errorMsg) {
+	document.getElementById('errors').innerHTML = errorMsg;
+}
+
+function restoreCountdowns(timersList, divFlag) {
+
+	storage.get('events', function(items){
+		if (typeof items.events !== "undefined") {
+			this.eventDict = items.events
+
+			if (Object.keys(this.eventDict).length > 0 && timersList) {
+				if (divFlag == 0) {
+					for (var key in this.eventDict) {
+
+						if (this.eventDict.hasOwnProperty(key)) {
+							timersList.insertAdjacentHTML('beforeend', 
+									'<li>' + key + ': ' + replaceTimezone(this.eventDict[key]) + '</li>')
+						}
+					}
+				}
+				else if (divFlag == 1) {
+					for (var key in this.eventDict) {
+
+						if (this.eventDict.hasOwnProperty(key)) {
+							timersList.insertAdjacentHTML('beforeend', 
+									'<div>' + key + ': ' + replaceTimezone(this.eventDict[key]) + '</div>')
+						}
+					}
+				}
+			}
+		}
+	});
+}
+
+function saveEvents() {
+	var eventTime = document.getElementsByName('timer-time');
+	var eventName = document.getElementsByName('timer-name');
+	var timersList = document.getElementById('timers');
+
+	console.log("Inside save...")
+	console.log(typeof this.eventDict !== "undefined")
+
+	if(eventTime.length > 0 && eventName.length > 0) {
+		var eventDateObj = new Date(eventTime[0].value);
+
+		if (eventName[0].value.length > 0) {
+			if (eventDateObj - Date.now() > 0) {
+
+				this.eventDict[eventName[0].value] = eventDateObj.toUTCString()
+				storage.set({events: this.eventDict}, function() {
+					timersList.insertAdjacentHTML('beforeend', 
+						'<li>' + eventName[0].value + ': ' + replaceTimezone(eventDateObj.toUTCString()) + '</li>')
+
+					storage.get('events', function(items){
+						if (typeof items.events !== "undefined")
+							console.log(items.events)
+					});
+				});
+			}
+		}
+	}
+}

manifest.json

@@ -0,0 +1,32 @@
+{
+	"manifest_version": 2,
+	"name": "Time Till",
+	"description": "Shows set countdown timers in new tab page",
+	"version": "0.1",
+
+	"offline_enabled": true,
+
+	"browser_action": {
+		"default_icon": "icon.png",
+		"default_title": "Countdown Timer",
+		"default_popup": "popup.html"
+	},
+
+	"icons": { "16": "icon16.png",
+		"48": "icon48.png",
+		"128": "icon128.png" 
+    },
+
+	"chrome_url_overrides": {
+		"newtab": "timer.html"
+	},
+
+	"options_ui": {
+		"page": "options.html",
+		"chrome_style": true
+	},
+
+	"permissions": [
+		"storage"
+	]
+}

options.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Countdown Timer Options</title>
+</head>
+<body>
+	<div>
+		<input type="text" name="timer-name" placeholder="Type Event Name" autofocus="yes">
+		<input type="datetime-local" name="timer-time">
+		<button id="add-button">Add Countdown</button>
+	</div>
+
+	<div>
+		<ul id="timers">
+
+		</ul>
+	</div>
+
+	<div>
+		<p id="errors"></p>
+	</div>
+
+	<script type="text/javascript" src="directive.js"></script>
+	<script type="text/javascript" src="options.js"></script>
+</body>
+</html>

options.js

@@ -0,0 +1,8 @@
+function masterFn() {
+	var capp = new countApp();
+
+	capp.restoreCountdowns(document.getElementById('timers'), 0);
+	document.getElementById('add-button').addEventListener('click', capp.saveEvents);
+}
+
+document.addEventListener('DOMContentLoaded', masterFn);

popup.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<!--
+ This page is shown when the extension button is clicked, because the
+ "browser_action" field in manifest.json contains the "default_popup" key with
+ value "popup.html".
+ -->
+<html>
+  <head>
+    <title>Countdown Timer Popup</title>
+    <style>
+      body {
+      }
+      #status {
+        /* avoid an excessively wide status text */
+        white-space: pre;
+        /*text-overflow: ellipsis;*/
+        overflow: hidden;
+        max-width: 600px;
+      }
+    </style>
+
+    <!--
+      - JavaScript and HTML must be in separate files: see our Content Security
+      - Policy documentation[1] for details and explanation.
+      -
+      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
+     -->
+    <script src="popup.js"></script>
+  </head>
+  <body>
+    <div id="status"></div>
+    <img id="image-result" hidden>
+  </body>
+</html>
+

popup.js

@@ -0,0 +1,12 @@
+function renderStatus(statusText) {
+  document.getElementById('status').textContent = statusText;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  if(chrome.runtime.openOptionsPage){
+    chrome.runtime.openOptionsPage();
+    renderStatus("Options Page Loaded");
+  }
+  else
+    renderStatus("Error Loading Options!")
+});

timer.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>New Tab</title>
+</head>
+<body>
+
+	<script type="text/javascript" src="directive.js"></script>
+	<script type="text/javascript" src="timer.js"></script>
+</body>
+</html>

timer.js

@@ -0,0 +1,7 @@
+function masterFn() {
+	var capp = new countApp();
+
+	capp.restoreCountdowns(document.body, 1);
+}
+
+document.addEventListener('DOMContentLoaded', masterFn);