Teamtreehouse.com - Add 'Hide Completed Courses' checkbox to the library page

readme.md

#How to use this Gist

This Gist is the source code for a userscript for use in Tampermonkey. Using this userscript will add a "Hide Completed Courses' checkbox to the Library page on Teamtreehouse.com.

##Download Tampermonkey

Get the browser extension here: http://tampermonkey.net/

us_treehouse-hide-courses.js

// ==UserScript==
// @name         Treehouse Hide Completed Courses
// @namespace    http://teamtreehouse.com/
// @include      http://teamtreehouse.com/
// @version      0.1
// @description  Adds a "hide completed courses" option on the library page within teamtreehouse.com
// @author       Ian Svoboda
// @match        http://teamtreehouse.com/library*
// @grant        none
// ==/UserScript==

(function toggle_complete() {
	var style_tag = document.createElement('style');
	var	head = document.head || document.getElementsByTagName('head')[0];
	var	the_css = '#show_complete label {'+
				   'display: inline-block;'+
				   'padding: 0 0 0 0;'+
				   'position: relative;'+
				   'z-index: 999;'+
				   'vertical-align: bottom;'+
				   'margin-right: 10px;'+
				   'top: 2px;'+
				'}'+
				'#show_complete .custom-filter-label {'+
				   'display: inline-block;'+
				   'position: relative;'+
				   'z-index: 99;'+
				   'font-weight: 500;'+
				   'color: #8d9aa5'+
				'}'+
				'.card-list.hide-completed .completed {display: none;}';

	var	the_filter_li = document.createElement('li');
		the_filter_li.id = "show_complete";
		the_filter_li.className = "dropdown-parent filter-container";

	var the_filter = the_filter_li;
		the_filter.innerHTML = '<label for="complete_input"><input id="complete_input" name="complete_input" type="checkbox" ></label><span class="custom-filter-label">Hide Completed Items</span>';
	
	style_tag.appendChild( document.createTextNode(the_css) );
	head.appendChild(style_tag);

	var control_ul = document.querySelector('.control-page-items');
		control_ul.insertBefore(the_filter, control_ul.firstChild );

	var filter_checkbox = document.getElementById('complete_input');
		filter_checkbox.addEventListener('change', function() {
			if(filter_checkbox.checked) {
				document.querySelector('.card-list').classList.add('hide-completed');
			} else {
				document.querySelector('.card-list').classList.remove('hide-completed');
			}
			
		});
})()