Add welcome message

lizgw · Aug 14, 2017 · bc7d48b · bc7d48b
1 parent 72c1145
commit bc7d48b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 5 deletions.
diff --git a/src/main.js b/src/main.js
@@ -7,6 +7,7 @@ var optionsElem = document.getElementById("options");
 
 // flags
 var showingOptions = false;
+var showWelcomeMsg = true;
 
 // storage object for options
 var options = {};
@@ -77,6 +78,10 @@ function pickColors() {
 	container.style.animation = "Animation 8s ease-in-out infinite";
 }
 
+function hideWelcomeMessage() {
+	document.getElementById("welcomeMsg").style.display = "none";
+}
+
 // when the page loads, do all this stuff
 document.addEventListener("DOMContentLoaded", function() {
 	// set up event listeners for checkboxes
@@ -86,10 +91,9 @@ document.addEventListener("DOMContentLoaded", function() {
 	}
 
 	// setup event listeners for buttons
-	var buttons = document.querySelectorAll("button");
-	for (var i = 0; i < buttons.length; i++) {
-		buttons[i].onclick = toggleOptions;
-	}
+	document.getElementById("info-icon").onclick = toggleOptions;
+	document.getElementById("close-icon").onclick = toggleOptions;
+	document.getElementById("close-welcome").onclick = hideWelcomeMessage;
 
 	// add event listener for when storage changes
 	chrome.storage.onChanged.addListener(updateDisplay);
@@ -102,4 +106,15 @@ document.addEventListener("DOMContentLoaded", function() {
 	updateTime();
 	updateDate();
 	pickColors();
+
+	// show welcome message if necessary
+	//chrome.storage.sync.clear(); // test line to clear storage & see msg again
+	chrome.storage.sync.get({
+		showWelcomeMsg: true
+	}, function (items) {
+		if (items.showWelcomeMsg) {
+			document.getElementById("welcomeMsg").style.display = "block";
+			chrome.storage.sync.set({showWelcomeMsg: false});
+		}
+	});
 });
diff --git a/src/options.js b/src/options.js
@@ -28,7 +28,7 @@ function restoreOptions() {
 		showTime: true,
 		showDate: true,
 		use24HourTime: false
-	}, function(items) {;
+	}, function(items) {
 		// set up switches according to stored options
 		timeOption.checked = items.showTime;
 		dateOption.checked = items.showDate;

diff --git a/wavetab.html b/wavetab.html
@@ -118,6 +118,44 @@
 			margin-bottom: 10px;
 		}
 
+		/* welcome message */
+		#welcomeMsg {
+			font-family: 'Quicksand', sans-serif;
+			color: #ffffff;
+			font-size: 1rem;
+			text-align: left;
+
+			border: 2px solid #ffffff;
+			padding: 5px;
+			border-radius: 10px;
+			background: rgba(119, 119, 119, 0.4);
+
+			position: absolute;
+			bottom: 10px;
+			right: 60px;
+			display: none;
+		}
+
+		#welcomeMsg h3, p {
+			margin: 2px;
+		}
+
+		#welcomeMsg .icon {
+			font-size: 1.1rem;
+			position: absolute;
+			top: 5px;
+			right: 5px;
+		}
+
+		#welcomeMsg .popover {
+			position: absolute;
+			top: 35px;
+			right: -10px;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid transparent;
+			border-left: 10px solid #ffffff;
+		}
+
 		/* font awesome icons */
 		.icon {
 			color: #ffffff;
@@ -234,6 +272,14 @@ <h2>Info</h2>
 			<p>Coded with <span class="fa fa-heart" aria-label="love"></span> by <a href="http://lizgw.github.io/">Liz Wigglesworth</a><br>
 			<a href="http://fontawesome.io">Font Awesome</a> by Dave Gandy</p>
 		</div>
+		<div id="welcomeMsg">
+			<div class="popover"></div>
+			<button role="button" id="close-welcome" class="icon">
+				<span class="fa fa-times" aria-label="Options"></span>
+			</button>
+			<h3>Welcome to WaveTab!</h3>
+			<p>Click the <span class="fa fa-cog" aria-label="Options icon"></span> to change your settings.</p>
+		</div>
 		<button role="button" id="info-icon" class="icon">
 			<span class="fa fa-cog" aria-label="Options"></span>
 		</button>