Added buttons for toggling safety to post list

TODO

@@ -3,7 +3,6 @@ first major release.
 
 - autocomplete: don't show items that are already used in tag list (unsure)
 - posts/upload: ability to paste many urls (unsure)
-- posts/listing: add buttons for toggling safety
 - users: add user-configurable "about me" (should support Markdown)
 - tags: add tag merging
 - tags: add tag descriptions

public_html/css/post-list.css

@@ -35,7 +35,23 @@
 	margin-right: 1em;
 }
 
-.post-list ul {
+.post-list ul.safety {
+	display: inline-block;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+.post-list ul.safety li {
+	display: inline-block;
+}
+.post-list ul.safety .safety-safe:before             { background: linear-gradient(rgb(224, 248, 218), rgb(213, 233, 208)); }
+.post-list ul.safety .safety-sketchy:before          { background: linear-gradient(rgb(252, 252, 230), rgb(245, 236, 194)); }
+.post-list ul.safety .safety-unsafe:before           { background: linear-gradient(rgb(252, 233, 233), rgb(248, 213, 203)); }
+.post-list ul.safety .safety-safe.disabled:before    { background: linear-gradient(#B6C8B2, #A1B499); }
+.post-list ul.safety .safety-sketchy.disabled:before { background: linear-gradient(#CEC9B4, #BCB69A); }
+.post-list ul.safety .safety-unsafe.disabled:before  { background: linear-gradient(#DDB7B7, #C9A195); }
+
+.post-list ul.posts {
 	display: flex;
 	justify-content: center;
 	align-content: center;

public_html/js/Presenters/PostListPresenter.js

@@ -73,7 +73,10 @@ App.Presenters.PostListPresenter = function(
 	}
 
 	function render() {
-		$el.html(templates.list({massTag: params.query.massTag, privileges: privileges}));
+		$el.html(templates.list({
+			massTag: params.query.massTag,
+			privileges: privileges,
+			browsingSettings: browsingSettings.getSettings()}));
 		$searchInput = $el.find('input[name=query]');
 		App.Controls.AutoCompleteInput($searchInput);
 
@@ -81,6 +84,7 @@ App.Presenters.PostListPresenter = function(
 		$searchInput.keydown(searchInputKeyPressed);
 		$el.find('form').submit(searchFormSubmitted);
 		$el.find('[name=mass-tag]').click(massTagButtonClicked);
+		$el.find('.safety button').click(safetyButtonClicked);
 
 		keyboard.keyup('p', function() {
 			$el.find('.posts li a').eq(0).focus();
@@ -93,6 +97,27 @@ App.Presenters.PostListPresenter = function(
 		windowResized();
 	}
 
+	function safetyButtonClicked(e) {
+		e.preventDefault();
+		var settings = browsingSettings.getSettings();
+		var buttonClass = jQuery(e.currentTarget).attr('class').split(' ')[0];
+		var enabled = jQuery(e.currentTarget).hasClass('disabled');
+		jQuery(e.currentTarget).toggleClass('disabled');
+		if (buttonClass === 'safety-unsafe') {
+			settings.listPosts.unsafe = enabled;
+		} else if (buttonClass === 'safety-sketchy') {
+			settings.listPosts.sketchy = enabled;
+		} else if (buttonClass === 'safety-safe') {
+			settings.listPosts.safe = enabled;
+		}
+		promise.wait(browsingSettings.setSettings(settings))
+			.then(function() {
+				reinit(params, function() {});
+			}).fail(function() {
+				console.log(arguments);
+			});
+	}
+
 	function softRender() {
 		$searchInput.val(params.query.query);
 

public_html/templates/post-list.tpl

@@ -3,6 +3,18 @@
 		<input type="text" name="query" placeholder="Search query..."/>
 		<button type="submit" name="search">Search</button>
 
+		<ul class="safety">
+			<li>
+				<button class="safety-safe <%= browsingSettings.listPosts.safe ? '' : 'disabled' %>">&nbsp;</button>
+			</li>
+			<li>
+				<button class="safety-sketchy <%= browsingSettings.listPosts.sketchy ? '' : 'disabled' %>">&nbsp;</button>
+			</li>
+			<li>
+				<button class="safety-unsafe <%= browsingSettings.listPosts.unsafe ? '' : 'disabled' %>">&nbsp;</button>
+			</li>
+		</ul>
+
 		<% if (privileges.canMassTag) { %>
 			<div class="mass-tag-wrapper">
 				<p class="mass-tag-info">Tagging with <span class="mass-tag"><%= massTag %></span></p><!--