From beaccbb89a7721d9f348c64e9463a25287fe528c Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Fri, 2 Sep 2022 15:56:41 +0200 Subject: [PATCH] FEATURE: add tag-based gated content (#13) * add tags + minor css change * Update settings.yml * fix tag filtering * change var scope * FIX: Allow for topics with no tags Topics will sometimes have a null amount of tags. This change allows for those situations. * DEV: Add tests for gated tags * Joffrey's idiotmatic way Co-authored-by: David Taylor Co-authored-by: Jamie Wilson --- common/common.scss | 38 ++++++++++--------- .../components/topic-in-gated-category.js | 12 ++++-- .../topic-in-gated-category.hbs | 2 +- settings.yml | 5 +++ test/acceptance/gated-category-test.js | 28 +++++++++++++- 5 files changed, 60 insertions(+), 25 deletions(-) diff --git a/common/common.scss b/common/common.scss index cde4d0c..e0e49fe 100644 --- a/common/common.scss +++ b/common/common.scss @@ -54,23 +54,25 @@ overflow: hidden; } - .container.posts::before { - // ensure to cover most of the content when zoomed out - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 90%; - z-index: 50; - background: rgb(255, 255, 255); - background: linear-gradient( - 0deg, - rgba(255, 255, 255, 1) 0%, - rgba(255, 255, 255, 1) 60%, - rgba(255, 255, 255, 1) 70%, - rgba(255, 255, 255, 0) 100% - ); + .container.posts { + position: relative; + &:before { + // ensure to cover most of the content when zoomed out + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 50; + background: rgb(255, 255, 255); + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0) 10%, + rgba(255, 255, 255, 0.6) 60%, + rgba(255, 255, 255, 1) 100% + ); + } } } diff --git a/javascripts/discourse/components/topic-in-gated-category.js b/javascripts/discourse/components/topic-in-gated-category.js index fb7cba8..dd79733 100644 --- a/javascripts/discourse/components/topic-in-gated-category.js +++ b/javascripts/discourse/components/topic-in-gated-category.js @@ -6,6 +6,8 @@ const enabledCategories = settings.enabled_categories .map((id) => parseInt(id, 10)) .filter((id) => id); +const enabledTags = settings.enabled_tags.split("|").filter(Boolean); + export default Component.extend({ tagName: "", hidden: true, @@ -26,18 +28,20 @@ export default Component.extend({ recalculate() { // do nothing if: - // a) topic does not have a category + // a) topic does not have a category and does not have a gated tag // b) component setting is empty // c) user is logged in + const gatedByTag = this.tags?.some((t) => enabledTags.includes(t)); + if ( - !this.categoryId || - enabledCategories.length === 0 || + (!this.categoryId && !gatedByTag) || + (enabledCategories.length === 0 && enabledTags.length === 0) || this.currentUser ) { return; } - if (enabledCategories.includes(this.categoryId)) { + if (enabledCategories.includes(this.categoryId) || gatedByTag) { document.body.classList.add("topic-in-gated-category"); this.set("hidden", false); } diff --git a/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs b/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs index f03be12..2f1fba1 100644 --- a/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs +++ b/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs @@ -1 +1 @@ -{{topic-in-gated-category categoryId=model.category_id}} +{{topic-in-gated-category categoryId=model.category_id tags=model.tags}} diff --git a/settings.yml b/settings.yml index 2fd1d03..c33c5fd 100644 --- a/settings.yml +++ b/settings.yml @@ -3,3 +3,8 @@ enabled_categories: list_type: category default: "" description: "Choose which categories that users need to sign up for." +enabled_tags: + type: list + list_type: tag + default: "" + description: "Choose which tags that users need to sign up for. The default is 'gated'." diff --git a/test/acceptance/gated-category-test.js b/test/acceptance/gated-category-test.js index 786bcfd..ce115b8 100644 --- a/test/acceptance/gated-category-test.js +++ b/test/acceptance/gated-category-test.js @@ -2,13 +2,16 @@ import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; import { visit } from "@ember/test-helpers"; import { test } from "qunit"; -acceptance("Gated Category - Anonymous", function (needs) { +acceptance("Gated Topics - Anonymous", function (needs) { + needs.settings({ tagging_enabled: true }); needs.hooks.beforeEach(() => { settings.enabled_categories = "2"; + settings.enabled_tags = "foo|baz"; }); needs.hooks.afterEach(() => { settings.enabled_categories = ""; + settings.enabled_tags = ""; }); test("Viewing Topic in gated category", async function (assert) { @@ -28,16 +31,28 @@ acceptance("Gated Category - Anonymous", function (needs) { "gated category prompt shown for anons on selected category" ); }); + + test("Viewing Topic with gated tag", async function (assert) { + await visit("/t/2480"); + + assert.ok( + query(".topic-in-gated-category .custom-gated-topic-content"), + "gated category prompt shown for anons on topic with selected tag" + ); + }); }); -acceptance("Gated Category - Logged In", function (needs) { +acceptance("Gated Topics - Logged In", function (needs) { needs.user(); + needs.settings({ tagging_enabled: true }); needs.hooks.beforeEach(() => { settings.enabled_categories = "2"; + settings.enabled_tags = "foo|baz"; }); needs.hooks.afterEach(() => { settings.enabled_categories = ""; + settings.enabled_tags = ""; }); test("Viewing Topic in gated category", async function (assert) { @@ -48,4 +63,13 @@ acceptance("Gated Category - Logged In", function (needs) { "gated category prompt not shown on selected category" ); }); + + test("Viewing Topic with gated tag", async function (assert) { + await visit("/t/2480"); + + assert.notOk( + query(".topic-in-gated-category .custom-gated-topic-content"), + "gated category prompt not shown on topic with selected tag" + ); + }); });