diff --git a/client/css/posts.styl b/client/css/posts.styl index 843c35e..54f7c49 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 5f301d6..28938c8 100644 --- a/client/html/posts_header.tpl +++ b/client/html/posts_header.tpl @@ -9,6 +9,9 @@
diff --git a/client/js/controllers/posts_controller.js b/client/js/controllers/posts_controller.js index 54efb10..32a0f05 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 2324b77..11d8b6d 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 f187c4c..823edb3 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 07cea46..7a482e8 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;