make checkboxes automatically initiate search when toggled

AdeelH · Apr 3, 2017 · 0bd8d5e · 0bd8d5e
1 parent 09248fb
commit 0bd8d5e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/popup.html b/popup.html
@@ -25,6 +25,16 @@
                 <button id="url-submit" type="button" class="btn btn-default">Search</button>
               </div>
             </div>
+            <!-- yt -->
+            <div class="checkbox input-group">
+              <div class="hidden" id="yt-choice">
+                <label>
+                  <input type="checkbox" id="yt" name="yt" checked="">
+                  <span>search by video ID <span id="yt-vid-id"><span></span>
+                </label>
+              </div>
+            </div>
+            <!-- exact -->
             <div class="checkbox input-group">
               <div class="" id="exact-choice">
                 <label>
@@ -33,6 +43,7 @@
                 </label>
               </div>
             </div>
+            <!-- qs -->
             <div class="checkbox input-group">
               <div class="hidden" id="qs-choice">
                 <label>
@@ -41,14 +52,6 @@
                 </label>
               </div>
             </div>
-            <div class="checkbox input-group">
-              <div class="hidden" id="yt-choice">
-                <label>
-                  <input type="checkbox" id="yt" name="yt" checked="">
-                  <span>search by video ID <span id="yt-vid-id"><span></span>
-                </label>
-              </div>
-            </div>
           </div>
         </form>
       </div>

diff --git a/popup.js b/popup.js
@@ -42,7 +42,10 @@ function registerHandlers(opts) {
 			setUiState('DEFAULT');
 			DOM.ytChoice.removeClass('hidden');
 		}
+		render();
 	});
+	DOM.opts.exactCheckbox.change(() => render());
+	DOM.opts.qsCheckbox.change(() => render());
 
 	DOM.searchBtn.click(() => render(true));
 }
@@ -53,12 +56,13 @@ function render(userClicked = false) {
 	let params = getSearchParams();
 	let useCache = !userClicked;
 
-	urlPromise.then(updateUiBasedOnUrl);
+	urlPromise.then(url => updateUiBasedOnUrl(url, params));
 	urlPromise
 		.then(url => {
 			let isYt = isYoutubeUrl(url) && params.ytHandling;
-			let urlToSearch = processUrl(url, params.ignoreQs, isYt);
 			let exactMatch = params.exactMatch && !isYt;
+			let urlToSearch = processUrl(url, params.ignoreQs, isYt);
+
 			return findOnReddit(urlToSearch, useCache, exactMatch);
 		})
 		.then(displayPosts)
@@ -165,9 +169,11 @@ function setUiState(state, params = null) {
 	}
 }
 
-function updateUiBasedOnUrl(url) {
+function updateUiBasedOnUrl(url, params) {
 	if (isYoutubeUrl(url)) {
-		setUiState('YT_VID', {id: getYoutubeVideoId(url)});
+		if (params.ytHandling) {
+			setUiState('YT_VID', {id: getYoutubeVideoId(url)});
+		}
 	}
 	else {
 		setUiState('DEFAULT');