TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 21:33:24 +03:00
Code Issues Projects Releases Wiki Activity

Added support for autowrap and class to the comment_count helper (#15203)

Browse Source 
refs https://github.com/TryGhost/Team/issues/1760

This allows theme developers to wrap the output of the comment_count
helper in an element, which will only be shown when there is content
to output.

This makes styling a lot easier, as the default output for no comments
is nothing, meaning that separators defined with CSS will not be rendered.
This commit is contained in:
Fabien 'egg' O'Carroll 2022-08-09 13:08:36 +01:00 committed by GitHub
parent 098f40bbe3
commit f34740d6d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/core/core/frontend/helpers/comment_count.js
View File

@ -6,12 +6,18 @@ function commentCount(options) {
const empty = options.hash.empty === undefined ? '' : options.hash.empty;
const singular = options.hash.singular === undefined ? 'comment' : options.hash.singular;
const plural = options.hash.plural === undefined ? 'comments' : options.hash.plural;
const autowrap = options.hash.autowrap !== 'false';
const tag = autowrap ? options.hash.autowrap || 'span' : 'script';
const className = options.hash.class;
return new SafeString(html`
<script
data-ghost-comment-count="${this.id}"
data-ghost-comment-count-empty="${empty}"
data-ghost-comment-count-singular="${singular}"
data-ghost-comment-count-plural="${plural}"
data-ghost-comment-count-tag="${tag}"
data-ghost-comment-count-class-name="${className}"
data-ghost-comment-count-autowrap="${autowrap ? 'true' : 'false'}"
>
</script>
`);

13
ghost/core/core/frontend/src/comment-counts/js/comment-counts.js
View File

@ -42,7 +42,18 @@
text = count;
}
}
e.insertAdjacentText('afterend', text);
if (text) {
if (e.dataset.ghostCommentCountAutowrap !== 'false') {
const el = document.createElement(e.dataset.ghostCommentCountTag);
if (e.dataset.ghostCommentCountClassName) {
el.classList.add(e.dataset.ghostCommentCountClassName);
}
el.textContent = text;
e.insertAdjacentElement('afterend', el);
} else {
e.insertAdjacentText('afterend', text);
}
}
e.remove();
});
}

29
ghost/core/test/unit/frontend/helpers/comment_count.test.js
View File

@ -41,8 +41,8 @@ describe('{{comment_count}} helper', function () {
configUtils.restore();
});
it('returns a script with the post id', async function () {
const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments"}}`;
it('returns a script with the post id when autowrap is disabled', async function () {
const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments" autowrap="false"}}`;
shouldCompileToExpected(templateString, {
id: 'post-id'
@ -52,6 +52,28 @@ describe('{{comment_count}} helper', function () {
data-ghost-comment-count-empty="No comments"
data-ghost-comment-count-singular="comment"
data-ghost-comment-count-plural="comments"
data-ghost-comment-count-tag="script"
data-ghost-comment-count-class-name=""
data-ghost-comment-count-autowrap="false"
>
</script>
`);
});
it('applies all the hash params as data attributes', function () {
const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments" autowrap="div" class="custom"}}`;
shouldCompileToExpected(templateString, {
id: 'post-id'
}, html`
<script
data-ghost-comment-count="post-id"
data-ghost-comment-count-empty="No comments"
data-ghost-comment-count-singular="comment"
data-ghost-comment-count-plural="comments"
data-ghost-comment-count-tag="div"
data-ghost-comment-count-class-name="custom"
data-ghost-comment-count-autowrap="true"
>
</script>
`);
@ -68,6 +90,9 @@ describe('{{comment_count}} helper', function () {
data-ghost-comment-count-empty=""
data-ghost-comment-count-singular="comment"
data-ghost-comment-count-plural="comments"
data-ghost-comment-count-tag="span"
data-ghost-comment-count-class-name=""
data-ghost-comment-count-autowrap="true"
>
</script>
`);