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 <david@taylorhq.com>
Co-authored-by: Jamie Wilson <jamie.wilson@discourse.org>
This commit is contained in:
chapoi 2022-09-02 15:56:41 +02:00 committed by GitHub
parent 45d2c95431
commit beaccbb89a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 25 deletions

View File

@ -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%
);
}
}
}

View File

@ -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);
}

View File

@ -1 +1 @@
{{topic-in-gated-category categoryId=model.category_id}}
{{topic-in-gated-category categoryId=model.category_id tags=model.tags}}

View File

@ -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'."

View File

@ -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"
);
});
});