J’ai développé un composant de thème qui permet de masquer les publications sur le front-end aux utilisateurs qui ne sont pas connectés. Bien sûr, s’il s’agit de personnes ayant une riche expérience en développement, elles peuvent facilement l’obtenir directement depuis le backend.
Je n’ai pas encore empaqueté ce composant, veuillez donc utiliser directement le code ci-dessous.
Balise Head :
<script type="text/discourse-plugin" version="1.6.0">
const user = api.getCurrentUser();
const I18n = require("I18n");
const pid = "post_hider"
const tl4_css = `
.d-editor-preview [data-theme-hide] {
background: var(--tertiary);
color: var(--secondary);
border-top: 2px solid var(--secondary);
position: sticky;
top: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.d-editor-preview [data-theme-hide]::before {
content: "This post is hidden";
}
`
api.addPostClassesCallback((attrs) => {
if (attrs?.cooked?.includes(`<div> data-theme-hide="true">`)) {
return ["lycoris-hiddened"];
} else {
return [];
}
});
if (!user) {
api.decorateCookedElement((el, helper) => {
function hide_post() {
setTimeout( () => {
try {
document.querySelector(`[data-post-id="${helper?.widget?.attrs?.id}"]`)?.parentElement?.remove();
} catch (err) {
console.log(el);
console.log(err);
}
}, 1000);
}
if (el?.querySelector(`[data-theme-hide="true"]`)) {
el.innerHTML = `<p>This post is hidden</p>`;
hide_post();
}
}, {
id: pid,
afterAdopt: true,
onlyStream: true,
});
} else if (user?.trust_level == 4) {
const s = document.createElement("style");
s.innerHTML = tl4_css;
document.body.appendChild(s);
api.decorateCookedElement((el, helper) => {
if (el?.querySelector(`[data-theme-hide="true"]`)) {
el.innerHTML = `<div class="d-wrap" data-wrap="tips" data-type="warn"><p>La publication est définie comme masquée pour les utilisateurs non connectés à la communauté</p></div> ` + el.innerHTML;
}
}, {
id: pid,
afterAdopt: true,
onlyStream: true,
});
if (!I18n.translations[I18n.currentLocale()].js.composer) {
I18n.translations[I18n.currentLocale()].js.composer = {};
}
I18n.translations[I18n.currentLocale()].js.composer.hide_text = " ";
I18n.translations[I18n.currentLocale()].js.composer.make_hide = "Hide this post";
api.modifyClass("controller:composer", {
pluginId: pid,
actions: {
insertHide() {
this.get("toolbarEvent").applySurround(
`<div data-theme-hide="true">`,
`</div>\n`,
"hide_text"
);
},
},
});
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "insertHide",
icon: "far-eye-slash",
label: "composer.make_hide",
};
});
}
</script>
CSS
.anon .lycoris-hiddened {
display: none;
.post-info.edits {
display: none;
}
}