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
Merged

Add comment highlight when target from url #9047

Show file tree
Hide file tree
Changes from 3 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.

22 changes: 22 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 @@ -582,6 +582,25 @@ function initInstall() {
});
}

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

$(document).click((event) => {
const $target = $(event.target);

if ($target.closest('.comment').length === 0) {
if (window.location.hash.length > 0) {
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?

window.history.pushState({}, '', window.location.toString().substr(0, i));
window.location.reload();
Copy link
Member

Choose a reason for hiding this comment

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

Instead of reload could you just modify CSS class?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There is no css class. Its by :target selector

https://github.com/go-gitea/gitea/pull/9047/files#diff-12e7da6d8d2bc69c6b71119d1c9e6a96R844-R846

Copy link
Member

Choose a reason for hiding this comment

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

Ha ha, I guess <a href="#...."></a> is out of fashion. 😄

Copy link
Contributor Author

@jaqra jaqra Nov 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

@techknowlogick and it does not refresh page if not highlighted.

Still i should change this behavior?

Copy link
Member

Choose a reason for hiding this comment

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

Yes, please get rid of the reload. If you want to scroll to the anchor, use element.scrollIntoView()

Copy link
Member

@silverwind silverwind Nov 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Something like this:

document.documentElement.addEventListener('click', (e) => {
  if (!window.location.hash) return;
  const target == document.querySelector(':target');
  if (!target || e.target.contains(target) || !target.classList.contains('comment')) return;
  const scrollY = document.documentElement.scrollTop;
  window.history.replaceState(null, null, ' ');
  document.documentElement.scrollTop = scrollY;
});

This preserves scroll location on hash reset and does not push useless history entries.

Edit: refined it a bit.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@guillep2k i tried it first then changed because it reset scroll position to 0. But works well if we set scrollposition again?

@jolheiser history.pushState(.. change url but does not affect anything :/

Copy link
Contributor Author

@jaqra jaqra Nov 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

@silverwind ooh i saw late your comment. What i did lastly is acceptable for your? or i can change as you suggested

Copy link
Member

Choose a reason for hiding this comment

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

Would prefer if you can try my version. It may need a bit more refining, but doing it without jQuery would be quite nice.

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

  • replaceState does not remove :target affect
  • we must handle click only outside of 'targetted comment'

I fnished. It is working. If you suggest raw js, i can change code

}
}
}
});
}

function initRepository() {
if ($('.repository').length === 0) {
return;
Expand Down Expand Up @@ -729,6 +748,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 @@ -841,6 +841,10 @@
}
}

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

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