client/posts: add safety buttons

client/css/posts.styl

@@ -86,6 +86,17 @@
         font-size: 0.95em
         color: $inactive-link-color
 
+    .safety
+        border-color: lighten(saturation($main-color, 0%), 20%)
+        &.safety-safe
+            background: #97CF97
+        &.safety-sketchy
+            background: #E7E78D
+        &.safety-unsafe
+            background: #F2B48C
+        &.disabled
+            opacity: .2
+
 .post-container
     text-align: center
     .post-content

client/html/posts_header.tpl

@@ -9,6 +9,9 @@
         </div>
         <div class='buttons'>
             <input type='submit' value='Search'/>
+            <input data-safety=safe type='button' class='safety safety-safe <%= ctx.settings.listPosts.safe ? '' : 'disabled' %>'/>
+            <input data-safety=sketchy type='button' class='safety safety-sketchy <%= ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/>
+            <input data-safety=unsafe type='button' class='safety safety-unsafe <%= ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/>
             <a class='button append' href='/help/search/posts'>Syntax help</a>
         </div>
     </form>

client/js/controllers/posts_controller.js

@@ -1,8 +1,9 @@
 'use strict';
 
-const misc = require('../util/misc.js');
 const page = require('page');
 const api = require('../api.js');
+const settings = require('../settings.js');
+const misc = require('../util/misc.js');
 const topNavController = require('../controllers/top_nav_controller.js');
 const pageController = require('../controllers/page_controller.js');
 const PostsHeaderView = require('../views/posts_header_view.js');
@@ -40,10 +41,22 @@ class PostsController {
         pageController.run({
             state: ctx.state,
             requestPage: page => {
-                const text = ctx.searchQuery.text;
+                const browsingSettings = settings.getSettings();
+                let text = ctx.searchQuery.text;
+                let disabledSafety = [];
+                for (let key of Object.keys(browsingSettings.listPosts)) {
+                    if (browsingSettings.listPosts[key] === false) {
+                        disabledSafety.push(key);
+                    }
+                }
+                if (disabledSafety.length) {
+                    text = `-rating:${disabledSafety.join(',')} ${text}`;
+                }
+                text = text.trim();
                 return api.get(
                     `/posts/?query=${text}&page=${page}&pageSize=40&_fields=` +
-                    `id,type,tags,score,favoriteCount,commentCount,thumbnailUrl`);
+                    `id,type,tags,score,favoriteCount,` +
+                    `commentCount,thumbnailUrl`);
             },
             clientUrl: '/posts/' + misc.formatSearchQuery({
                 text: ctx.searchQuery.text, page: '{page}'}),

client/js/settings.js

@@ -2,14 +2,21 @@
 
 const events = require('./events.js');
 
-function saveSettings(browsingSettings) {
+function saveSettings(browsingSettings, silent) {
     localStorage.setItem('settings', JSON.stringify(browsingSettings));
+    if (silent !== true) {
         events.notify(events.Success, 'Settings saved');
         events.notify(events.SettingsChange);
+    }
 }
 
 function getSettings(settings) {
     const defaultSettings = {
+        listPosts: {
+            safe: true,
+            sketchy: true,
+            unsafe: false,
+        },
         upscaleSmallPosts: false,
         endlessScroll: false,
         keyboardShortcuts: true,

client/js/util/views.js

@@ -100,6 +100,7 @@ function makeInput(options) {
                 type: options.inputType,
                 name: options.name,
                 id: options.id,
+                class: options.class,
                 value: options.value || '',
                 required: options.required,
                 pattern: options.pattern,

client/js/views/posts_header_view.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const page = require('page');
+const settings = require('../settings.js');
 const keyboard = require('../util/keyboard.js');
 const misc = require('../util/misc.js');
 const views = require('../util/views.js');
@@ -13,6 +14,8 @@ class PostsHeaderView {
     }
 
     render(ctx) {
+        ctx.settings = settings.getSettings();
+
         const target = ctx.target;
         const source = this._template(ctx);
 
@@ -27,14 +30,32 @@ class PostsHeaderView {
             form.querySelector('input').focus();
         });
 
-        form.addEventListener('submit', e => {
+        for (let safetyButton of form.querySelectorAll('.safety')) {
+            safetyButton.addEventListener(
+                'click', e => this._evtSafetyButtonClick(e, ctx.clientUrl));
+        }
+        form.addEventListener(
+            'submit', e => this._evtFormSubmit(e, searchTextInput));
+
+        views.showView(target, source);
+    }
+
+    _evtSafetyButtonClick(e, url) {
+        e.preventDefault();
+        e.target.classList.toggle('disabled');
+        const safety = e.target.getAttribute('data-safety');
+        let browsingSettings = settings.getSettings();
+        browsingSettings.listPosts[safety]
+            = !browsingSettings.listPosts[safety];
+        settings.saveSettings(browsingSettings, true);
+        page(url.replace(/{page}/, 1));
+    }
+
+    _evtFormSubmit(e, searchTextInput) {
         e.preventDefault();
         const text = searchTextInput.value;
         searchTextInput.blur();
         page('/posts/' + misc.formatSearchQuery({text: text}));
-        });
-
-        views.showView(target, source);
     }
 }