Reverse order of comments #222

tpietruszka · 2019-11-13T18:21:19Z

Closes #182

Added options to reverse order of comments and put the input form above comments, instead of below. As most of the time I expect either both or none of them to be used, they are handled by a common checkbox in the config generator.

Overall it seems to work, but I have not tested it on cases with hidden pages (I have not seen any).

Example config (from the configuration-component):

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        reverse-order="true"
        input-position-top="true"
        crossorigin="anonymous"
        async>
</script>

Verassitnh

Looks great to me!

zewa666 · 2020-02-01T13:21:40Z

Whats the status with this PR? Thats a really great feature

tpietruszka · 2020-02-01T20:35:52Z

@jdanyow I see you've closed #221 in favor of this PR, but do you need me to add something more here? Or is it OK to merge?

daniel-henry · 2020-02-21T15:33:12Z

@jdanyow Any updates on the status of this PR?

daniel-henry · 2020-02-23T01:17:18Z

@tpietruszka Any chance you know when we can get this pushed?

tpietruszka · 2020-02-23T18:58:47Z

Unfortunately, I do not know anything other than what's in this PR
Maybe @jdanyow does not see these @ mentions?

I've sent a review request.

michaelmyc · 2020-05-20T06:42:29Z

Would prefer this very much.

Verassitnh · 2020-06-26T20:45:02Z

Does anyone know of a maintained fork of utterances with this feature?

JokerQyou · 2020-07-29T07:39:46Z

Unfortunately the hosted utterances app (the bot user) is an essential part of this service, so a random fork will not work unless you self-host the server-side part.

Galaxy-Coding · 2020-11-27T14:27:16Z

Can this get merged at any point?

roife · 2021-02-12T13:04:34Z

Hope this PR can be merged soon.

icewyvrn · 2021-03-21T09:58:34Z

when will this get merged?

Verassitnh · 2021-06-08T17:48:15Z

Utterances is unmaintained. Use laymonage/giscus

jdanyow · 2021-06-08T18:44:21Z

I don’t think discussions are going to use reversed order either. What is the benefit of reversing comment order?

tpietruszka · 2021-06-08T21:18:07Z

I don’t think discussions are going to use reversed order either.

Could you please elaborate? "Either", as in something else won't use it? 🤔

The idea is to have an option of having

INPUT_BOX
NEW_COMMENT
OLD_COMMENT

instead of

OLD_COMMENT
NEW_COMMENT
INPUT_BOX

In my application that would provide a better layout and user experience. Judging by the number of comments above it's not a unique case

ghost · 2021-06-08T21:38:43Z

In my application that would provide a better layout and user experience. Judging by the number of comments above it's not a unique case

I agree. It makes a lot of sense to both sort comments by new and also have the input box sit at the top. This has been my biggest personal hesitation to using this widget.

zsdycs

This "PR" is not complete.

When the number of pages is exceeded, the "Load more..." button will be displayed.
So we must confirm the processing in the following two places:

The display position of the "Load more..." button.
When the "Load more..." button is clicked.

I found the place that needs to be added and modified:

utterances/src/timeline-component.ts

Lines 81 to 91 in 1305da4

    
             public insertPageLoader(insertAfter: IssueComment, count: number, callback: () => void) { 
        
               const { element: insertAfterElement } = this.timeline.find(x => x.comment.id >= insertAfter.id)!; 
        
               insertAfterElement.insertAdjacentHTML('afterend', ` 
        
                 <div class="page-loader"> 
        
                   <div class="zigzag"></div> 
        
                   <button type="button" class="btn btn-outline btn-large"> 
        
                     ${count} hidden items<br/> 
        
                     <span>Load more...</span> 
        
                   </button> 
        
                 </div> 
        
               `);

Make the following changes here:

    const desc = page.commentOrder === 'desc';
    const { element: insertAfterElement } = this.timeline.find((x) => {
      if (page.commentOrder === 'desc') {
        return x.comment.id <= insertAfter.id;
      } else {
        return x.comment.id >= insertAfter.id;
      }
    })!;
    
    const insert = desc ? 'beforebegin' : 'afterend';
    
    insertAfterElement.insertAdjacentHTML(
      insert,
      `
      <div class="page-loader">……
      );
    const sibling = desc ? 'previousElementSibling' : 'nextElementSibling';
    const element = insertAfterElement[sibling]!;

zsdycs · 2021-06-10T09:43:15Z

src/timeline-component.ts

+      const indexSearchCondition = (x => x.comment.id >= comment.id);
+    }
+
+    const index = this.timeline.findIndex(indexSearchCondition);


zsdycs · 2021-06-10T09:53:00Z

src/configuration-component.ts

+        <input type="checkbox" id="reverse-order" />
+        Reverse order, input form on top
+      </label>
+


Why not use "reverse-order" and "input-position" as "HTMLSelectElement"?

Isn't that better?

E.g

<h3 id="heading-order">Select order of comments</h3> <p> The order of presentation of comments is sorted by the time when the comments were published. <br /> Ascending order: From the old to the new, the newly posted comments are at the back; Descending order: from the new to the old, and the newly posted comments are at the front. </p> <fieldset> <div> <label for="comment-order"> By time: </label> <br /> <select id="comment-order" class="form-select" value="asc" aria-label="Comment order"> <option value="asc">Asc(default)</option> <option value="desc">Desc</option> </select> </div> </fieldset> <h3 id="heading-input-position">Select comment box location</h3> <p> When choosing to set the comment order to "descending", it is recommended to place the comment box at the "top". Because when there are a lot of comments, you can see the success of the comment as soon as you post a comment. </p> <fieldset> <div> <label for="input-position"> The comment box's position at: </label> <br /> <select id="input-position" class="form-select" value="asc" aria-label="Comment order"> <option value="bottom">Bottom (default)</option> <option value="top">Top</option> </select> </div> </fieldset>

zsdycs · 2021-06-10T09:56:39Z

src/configuration-component.ts

    this.script.innerHTML = this.makeConfigScript(
      this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' +
      mappingAttr + '\n' +
      (this.label.value ? this.makeConfigScriptAttribute('label', this.label.value) + '\n' : '') +
      this.makeConfigScriptAttribute('theme', this.theme.value) + '\n' +
+      orderConfig +


(this.commentOrder.value === 'desc' ? this.makeConfigScriptAttribute( 'comment-order', this.commentOrder.value, ) + '\n' : '') + (this.inputPosition.value === 'top' ? this.makeConfigScriptAttribute('input-position', 'top') + '\n' : '') +

Occam's razor: if not necessary, not by entity.

zsdycs · 2021-06-10T09:58:06Z

src/page-attributes.ts

-    theme: params.theme || 'github-light'
+    theme: params.theme || 'github-light',
+    inputPositionTop: inputPositionTop,
+    reverseOrder: reverseOrder


commentOrder: params['comment-order'] || 'asc', inputPosition: params['input-position'] || 'bottom',

Occam's razor: if not necessary, not by entity.

tpietruszka · 2021-06-20T16:16:17Z

@zsdycs good comments and improvements, thanks

Please feel free to branch off of this and open your own pull request. (or one starting from the current master branch?)

To be honest, after over a year of no response (and then a response I did not really understand, but one that sounded like the feature is not needed) I kind of lost interest.

zsdycs · 2021-06-21T01:14:45Z

@tpietruszka Thank you for your approval!

This feature is very good, I think many people expect to be able to use this feature.

The purpose of my proposed modification is to hope that developers who are interested in this feature will have more reference information.

So, unfortunately, I will not submit the changed code in this branch or from the master branch, because I think this is futile, unless @jdanyow agrees with this feature, at least he is not interested in it for now.

But we have to understand that "utterances" is currently a mature plug-in, and we must consider many aspects when introducing a feature.

The most important thing is that I use this code. After I modified it, I merged it into the Chinese version of "utterances"-"beaudar - 表达". Thank you for your contribution!

TruncatedDinoSour · 2023-01-23T08:59:00Z

so any update on this ?

tpietruszka added 4 commits November 13, 2019 17:41

Added option to move input form above comments

de2a5a8

Added option to reverse order of comments

cff757e

Added the reverse-order option to the config generator

3511769

Simplified config generator for reverse-order

85808cf

Verassitnh approved these changes Nov 13, 2019

View reviewed changes

Verassitnh mentioned this pull request Nov 13, 2019

Reverse order of comments #182

Open

jdanyow mentioned this pull request Jan 19, 2020

Enable sorting #221

Closed

tpietruszka requested a review from jdanyow February 23, 2020 18:57

zsdycs reviewed Jun 10, 2021

View reviewed changes

laymonage mentioned this pull request Aug 9, 2021

Put the comment box above the comments giscus/giscus#157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reverse order of comments #222

Reverse order of comments #222

tpietruszka commented Nov 13, 2019 •

edited

Verassitnh left a comment

zewa666 commented Feb 1, 2020

tpietruszka commented Feb 1, 2020

daniel-henry commented Feb 21, 2020

daniel-henry commented Feb 23, 2020

tpietruszka commented Feb 23, 2020

michaelmyc commented May 20, 2020

Verassitnh commented Jun 26, 2020

JokerQyou commented Jul 29, 2020

Galaxy-Coding commented Nov 27, 2020

roife commented Feb 12, 2021

icewyvrn commented Mar 21, 2021

Verassitnh commented Jun 8, 2021

jdanyow commented Jun 8, 2021

tpietruszka commented Jun 8, 2021

ghost commented Jun 8, 2021

zsdycs left a comment •

edited

zsdycs Jun 10, 2021

zsdycs Jun 10, 2021

zsdycs Jun 10, 2021

zsdycs Jun 10, 2021

tpietruszka commented Jun 20, 2021

zsdycs commented Jun 21, 2021 •

edited

TruncatedDinoSour commented Jan 23, 2023

	public insertPageLoader(insertAfter: IssueComment, count: number, callback: () => void) {
	const { element: insertAfterElement } = this.timeline.find(x => x.comment.id >= insertAfter.id)!;
	insertAfterElement.insertAdjacentHTML('afterend', `
	<div class="page-loader">
	<div class="zigzag"></div>
	<button type="button" class="btn btn-outline btn-large">
	${count} hidden items<br/>
	<span>Load more...</span>
	</button>
	</div>
	`);

Reverse order of comments #222

Are you sure you want to change the base?

Reverse order of comments #222

Conversation

tpietruszka commented Nov 13, 2019 • edited

Verassitnh left a comment

Choose a reason for hiding this comment

zewa666 commented Feb 1, 2020

tpietruszka commented Feb 1, 2020

daniel-henry commented Feb 21, 2020

daniel-henry commented Feb 23, 2020

tpietruszka commented Feb 23, 2020

michaelmyc commented May 20, 2020

Verassitnh commented Jun 26, 2020

JokerQyou commented Jul 29, 2020

Galaxy-Coding commented Nov 27, 2020

roife commented Feb 12, 2021

icewyvrn commented Mar 21, 2021

Verassitnh commented Jun 8, 2021

jdanyow commented Jun 8, 2021

tpietruszka commented Jun 8, 2021

ghost commented Jun 8, 2021

zsdycs left a comment • edited

Choose a reason for hiding this comment

This "PR" is not complete.

I found the place that needs to be added and modified:

Make the following changes here:

zsdycs Jun 10, 2021

Choose a reason for hiding this comment

zsdycs Jun 10, 2021

Choose a reason for hiding this comment

zsdycs Jun 10, 2021

Choose a reason for hiding this comment

zsdycs Jun 10, 2021

Choose a reason for hiding this comment

tpietruszka commented Jun 20, 2021

zsdycs commented Jun 21, 2021 • edited

TruncatedDinoSour commented Jan 23, 2023

tpietruszka commented Nov 13, 2019 •

edited

zsdycs left a comment •

edited

zsdycs commented Jun 21, 2021 •

edited