Adding view source button for posts and comments.

- Fixes #271
This commit is contained in:
Dessalines 2019-09-08 11:00:08 -07:00
parent ae40c2b08d
commit a8da6d37c2
3 changed files with 132 additions and 94 deletions

View file

@ -22,6 +22,7 @@ interface CommentNodeState {
showConfirmTransferSite: boolean;
showConfirmTransferCommunity: boolean;
collapsed: boolean;
viewSource: boolean;
}
interface CommentNodeProps {
@ -46,6 +47,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
banExpires: null,
banType: BanType.Community,
collapsed: false,
viewSource: false,
showConfirmTransferSite: false,
showConfirmTransferCommunity: false,
}
@ -106,7 +108,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />}
{!this.state.showEdit && !this.state.collapsed &&
<div>
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content)} />
{this.state.viewSource ? <div>{this.commentUnlessRemoved}</div> :
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)} />
}
<ul class="list-inline mb-1 text-muted small font-weight-bold">
{UserService.Instance.user && !this.props.viewOnly &&
<>
@ -201,6 +205,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
</>
}
<li className="list-inline-item">
<span className="pointer" onClick={linkEvent(this, this.handleViewSource)}><T i18nKey="view_source">#</T></span>
</li>
<li className="list-inline-item">
<Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}><T i18nKey="link">#</T></Link>
</li>
@ -298,6 +305,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
(UserService.Instance.user.id == this.props.admins[0].id);
}
get commentUnlessRemoved(): string {
let node = this.props.node;
return node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content;
}
handleReplyClick(i: CommentNode) {
i.state.showReply = true;
i.setState(i.state);
@ -527,4 +539,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
i.state.collapsed = !i.state.collapsed;
i.setState(i.state);
}
handleViewSource(i: CommentNode) {
i.state.viewSource = !i.state.viewSource;
i.setState(i.state);
}
}

View file

@ -19,6 +19,7 @@ interface PostListingState {
showConfirmTransferSite: boolean;
showConfirmTransferCommunity: boolean;
imageExpanded: boolean;
viewSource: boolean;
}
interface PostListingProps {
@ -44,6 +45,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
showConfirmTransferSite: false,
showConfirmTransferCommunity: false,
imageExpanded: false,
viewSource: false,
}
constructor(props: any, context: any) {
@ -168,8 +170,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Link className="text-muted" to={`/post/${post.id}`}><T i18nKey="number_of_comments" interpolation={{count: post.number_of_comments}}>#</T></Link>
</li>
</ul>
{UserService.Instance.user && this.props.editable &&
<ul class="list-inline mb-1 text-muted small font-weight-bold">
{UserService.Instance.user && this.props.editable &&
<>
<li className="list-inline-item mr-2">
<span class="pointer" onClick={linkEvent(this, this.handleSavePostClick)}>{post.saved ? i18n.t('unsave') : i18n.t('save')}</span>
</li>
@ -263,8 +266,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
</li>
}
</ul>
</>
}
{this.props.showBody && post.body &&
<li className="list-inline-item">
<span className="pointer" onClick={linkEvent(this, this.handleViewSource)}><T i18nKey="view_source">#</T></span>
</li>
}
</ul>
{this.state.showRemoveDialog &&
<form class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
<input type="text" class="form-control mr-2" placeholder={i18n.t('reason')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
@ -287,7 +296,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</div>
</form>
}
{this.props.showBody && post.body && <div className="md-div" dangerouslySetInnerHTML={mdToHtml(post.body)} />}
{this.props.showBody && post.body &&
<>
{this.state.viewSource ? <div>{post.body}</div> :
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(post.body)} />
}
</>
}
</div>
</div>
)
@ -566,5 +581,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
i.state.imageExpanded = !i.state.imageExpanded;
i.setState(i.state);
}
handleViewSource(i: PostListing) {
i.state.viewSource = !i.state.viewSource;
i.setState(i.state);
}
}

View file

@ -29,6 +29,7 @@ export const en = {
preview: 'Preview',
upload_image: 'upload image',
formatting_help: 'formatting help',
view_source: 'view source',
unlock: 'unlock',
lock: 'lock',
link: 'link',