From c114cec6427f161fd2dbff531d44702eafb8cc40 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Fri, 3 Jun 2016 19:12:10 +0200
Subject: [PATCH] client/posts: add safety buttons

---
 client/css/posts.styl                     | 11 ++++++++
 client/html/posts_header.tpl              |  3 +++
 client/js/controllers/posts_controller.js | 19 ++++++++++---
 client/js/settings.js                     | 13 ++++++---
 client/js/util/views.js                   |  1 +
 client/js/views/posts_header_view.js      | 33 ++++++++++++++++++-----
 6 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/client/css/posts.styl b/client/css/posts.styl
index 843c35e2..54f7c49e 100644
--- a/client/css/posts.styl
+++ b/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
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index 5f301d6b..28938c81 100644
--- a/client/html/posts_header.tpl
+++ b/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>
diff --git a/client/js/controllers/posts_controller.js b/client/js/controllers/posts_controller.js
index 54efb105..32a0f05c 100644
--- a/client/js/controllers/posts_controller.js
+++ b/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}'}),
diff --git a/client/js/settings.js b/client/js/settings.js
index 2324b774..11d8b6da 100644
--- a/client/js/settings.js
+++ b/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));
-    events.notify(events.Success, 'Settings saved');
-    events.notify(events.SettingsChange);
+    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,
diff --git a/client/js/util/views.js b/client/js/util/views.js
index f187c4c2..823edb3c 100644
--- a/client/js/util/views.js
+++ b/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,
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js
index 07cea462..7a482e88 100644
--- a/client/js/views/posts_header_view.js
+++ b/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,15 +30,33 @@ class PostsHeaderView {
             form.querySelector('input').focus();
         });
 
-        form.addEventListener('submit', e => {
-            e.preventDefault();
-            const text = searchTextInput.value;
-            searchTextInput.blur();
-            page('/posts/' + misc.formatSearchQuery({text: text}));
-        });
+        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}));
+    }
 }
 
 module.exports = PostsHeaderView;