Skip to content

Add comment highlight when target from url #9047

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.

Sign up for GitHub

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

Merged
merged 18 commits into from
Nov 25, 2019
+32 −2
Merged

Add comment highlight when target from url #9047

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
73e3c0b
Add comment highlight css
metiftikci Nov 16, 2019
558d9e3
Add js to remove highlight on click outside
metiftikci Nov 16, 2019
7f30f04
Improve refresh page on click outside
metiftikci Nov 16, 2019
468c6a1
Use location.hash property to remove target
metiftikci Nov 18, 2019
7a6148f
Merge branch 'master' of https://github.com/go-gitea/gitea into comme…
metiftikci Nov 18, 2019
0ca937a
Handle click ONLY clicked outside of 'targetted comment' (not other c…
metiftikci Nov 18, 2019
301a87d
Merge branch 'master' into comment_line
lunny Nov 19, 2019
c95dd50
Merge branch 'master' into comment_line
lunny Nov 19, 2019
72d830d
Remove unnecessary checks and simply code
metiftikci Nov 19, 2019
a48e045
Merge branch 'master' of https://github.com/go-gitea/gitea into comme…
metiftikci Nov 19, 2019
1329df2
Merge branch 'master' into comment_line
lunny Nov 20, 2019
690d1d7
Merge branch 'master' into comment_line
Nov 20, 2019
3fa6466
Combine hash and setState to remove target path
metiftikci Nov 20, 2019
f44022f
Merge branch 'comment_line' of https://github.com/jaqra/gitea into co…
metiftikci Nov 20, 2019
4799253
Merge branch 'master' of https://github.com/go-gitea/gitea into comme…
metiftikci Nov 22, 2019
c354b1b
Merge branch 'master' of https://github.com/go-gitea/gitea into comme…
metiftikci Nov 24, 2019
e373dae
Merge branch 'master' into comment_line
lunny Nov 25, 2019
b18df46
Merge branch 'master' into comment_line
Nov 25, 2019
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
1 change: 1 addition & 0 deletions public/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,7 @@ i.icon.centerlock{top:1.5em}
.repository.view.issue .comment-list .comment .content>.bottom.segment .ui.image{max-height:100%;width:auto;margin:0;vertical-align:middle}
.repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image{font-size:128px;color:#000}
.repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image:hover{color:#000}
.repository.view.issue .comment-list .comment:target>.content{box-shadow:0 0 10px #8c8c8c}
.repository.view.issue .comment-list .comment .ui.form .field:first-child{clear:none}
.repository.view.issue .comment-list .comment .ui.form .tab.segment{border:0;padding:10px 0 0}
.repository.view.issue .comment-list .comment .ui.form textarea{height:200px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
Expand Down
2 changes: 1 addition & 1 deletion public/js/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/js/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions web_src/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,6 +585,35 @@ function initInstall() {
});
}

function initIssueComments() {
if ($('.repository.view.issue .comments').length === 0) return;

$(document).click((event) => {
const urlTarget = $(':target');
if (urlTarget.length === 0) return;

const urlTargetId = urlTarget.attr('id');
if (!urlTargetId) return;
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;

const $target = $(event.target);

if ($target.closest(`#${urlTargetId}`).length === 0) {
if (!window.location.hash) return;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check can be done earlier.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually i want to delete this check because checks :target already


if (window.location.hash.length > 0 && window.location.hash !== '#') {
const i = window.location.toString().indexOf('#');

if (i >= 0) {
Copy link
Member

@silverwind silverwind Nov 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of nesting if so deeply, I'd suggest the pattern if (cond) return; to keep the code flat.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed some checks. I think they are unnecessary because if there is an element with :target selected they should be. Am i wrong?

const scrollPosition = $(window).scrollTop();
window.location.hash = '';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This leaves the empty # behind. Can you maybe try getting it to work using replaceState which does not suffer from this? I assume there must be a way to clear :target somehow.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

window.history.replaceState(null, null, ' ');

this removes target url but does not affect :target effect

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can just combine both methods and use replaceState to get rid of the final #:

const scrollPosition = $(window).scrollTop();
window.location.hash = '';
$(window).scrollTop(scrollPosition);
window.history.replaceState(null, null, ' ');

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@silverwind brilliant! that works as expected now. done. thank you :)

$(window).scrollTop(scrollPosition);
}
}
}
});
}

function initRepository() {
if ($('.repository').length === 0) {
return;
Expand Down Expand Up @@ -732,6 +761,9 @@ function initRepository() {
return false;
});

// Issue Comments
initIssueComments();

// Edit issue or comment content
$('.edit-content').click(function () {
const $segment = $(this).parent().parent().parent()
Expand Down
4 changes: 4 additions & 0 deletions web_src/less/_repository.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -840,6 +840,10 @@
}
}

&:target > .content {
box-shadow: 0 0 10px #8c8c8c;
}

.ui.form {
.field:first-child {
clear: none;
Expand Down