Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] [extensibility] chore: make PostMeta extensible #4040

Merged
merged 2 commits into from
Sep 29, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 69 additions & 32 deletions framework/core/js/src/forum/components/PostMeta.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import app from '../../forum/app';
import Component from '../../common/Component';
import humanTime from '../../common/helpers/humanTime';
import fullTime from '../../common/helpers/fullTime';
import ItemList from '../../common/utils/ItemList';

/**
* The `PostMeta` component displays the time of a post, and when clicked, shows
Expand All @@ -14,38 +15,7 @@ import fullTime from '../../common/helpers/fullTime';
*/
export default class PostMeta extends Component {
view() {
const post = this.attrs.post;
const time = post.createdAt();
const permalink = this.getPermalink(post);
const touch = 'ontouchstart' in document.documentElement;

// When the dropdown menu is shown, select the contents of the permalink
// input so that the user can quickly copy the URL.
const selectPermalink = function (e) {
setTimeout(() => $(this).parent().find('.PostMeta-permalink').select());

e.redraw = false;
};

return (
<div className="Dropdown PostMeta">
<a className="Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
{humanTime(time)}
</a>

<div className="Dropdown-menu dropdown-menu">
<span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}</span>{' '}
<span className="PostMeta-time">{fullTime(time)}</span> <span className="PostMeta-ip">{post.data.attributes.ipAddress}</span>
{touch ? (
<a className="Button PostMeta-permalink" href={permalink}>
{permalink}
</a>
) : (
<input className="FormControl PostMeta-permalink" value={permalink} onclick={(e) => e.stopPropagation()} />
)}
</div>
</div>
);
return <div className="Dropdown PostMeta">{this.viewItems().toArray()}</div>;
}

/**
Expand All @@ -57,4 +27,71 @@ export default class PostMeta extends Component {
getPermalink(post) {
return app.forum.attribute('baseOrigin') + app.route.post(post);
}

/**
* When the dropdown menu is shown, select the contents of the permalink
* input so that the user can quickly copy the URL.
* @param {Event} e
*/
selectPermalink(e) {
setTimeout(() => $(this.element).parent().find('.PostMeta-permalink').select());

e.redraw = false;
}

/**
* @returns {ItemList}
*/
viewItems() {
const items = new ItemList();
const post = this.attrs.post;
const time = post.createdAt();

items.add(
'time',
<a className="Dropdown-toggle" onclick={(e) => this.selectPermalink(e)} data-toggle="dropdown">
{humanTime(time)}
</a>,
100
);

items.add('meta-dropdown', <div className="Dropdown-menu dropdown-menu">{this.metaItems().toArray()}</div>, 90);

return items;
}

/**
* @returns {ItemList}
*/
metaItems() {
const items = new ItemList();
const post = this.attrs.post;
const touch = 'ontouchstart' in document.documentElement;
const permalink = this.getPermalink(post);
const time = post.createdAt();

items.add(
'post-number',
<span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })} </span>,
100
);

items.add('post-time', <span className="PostMeta-time">{fullTime(time)}</span>, 90);

items.add('post-ip', <span className="PostMeta-ip">{post.data.attributes.ipAddress}</span>, 80);

items.add(
'permalink',
touch ? (
<a className="Button PostMeta-permalink" href={permalink}>
{permalink}
</a>
) : (
<input className="FormControl PostMeta-permalink" value={permalink} onclick={(e) => e.stopPropagation()} />
),
0
);

return items;
}
}
Loading