Reverse order of comments

src/configuration-component.ts

@@ -135,6 +135,20 @@ export class ConfigurationComponent {
         <option value="photon-dark">Photon Dark</option>
       </select>
 
+      <h3 id="heading-reverse-order">Reverse Order</h3>
+      <p>
+        Choose if you want the order of comments to be reversed and put
+        the input form on top.
+      </p>
+      <p>
+        Related parameters ("reverse-order" and "input-position-top") accept
+        both boolean primitives and strings (both true and "true" are valid).
+      </p>
+      <label>
+        <input type="checkbox" id="reverse-order" />
+        Reverse order, input form on top
+      </label>
+
       <h3 id="heading-enable">Enable Utterances</h3>
 
       <p>Add the following script tag to your blog's template. Position it where you want the
@@ -157,6 +171,8 @@ export class ConfigurationComponent {
 
     this.theme = this.element.querySelector('#theme') as HTMLSelectElement;
 
+    this.reverseOrder = this.element.querySelector('#reverse-order')  as HTMLInputElement;
+
     const themeStylesheet = document.getElementById('theme-stylesheet') as HTMLLinkElement;
     this.theme.addEventListener('change', () => {
       themeStylesheet.href = `/stylesheets/themes/${this.theme.value}/index.css`;
@@ -189,11 +205,18 @@ export class ConfigurationComponent {
     } else {
       mappingAttr = this.makeConfigScriptAttribute('issue-term', mapping.value);
     }
+    let orderConfig : string = '';
+    if (this.reverseOrder.checked) {
+      // using strings to encode booleans - because `deparam` uses only strings
+      orderConfig = this.makeConfigScriptAttribute('reverse-order', 'true') + '\n' +
+                    this.makeConfigScriptAttribute('input-position-top', 'true') + '\n';
+    }
     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.makeConfigScriptAttribute('crossorigin', 'anonymous'));
   }
 

src/index.html

@@ -72,6 +72,8 @@
               issue-term="homepage"
               crossorigin="anonymous"
               theme="github-light"
+              input-position-top=false
+              reverse-order=false
               async>
       </script>
     </if>
@@ -82,6 +84,8 @@
               label="💬 comment"
               crossorigin="anonymous"
               theme="github-light"
+              input-position-top=false
+              reverse-order=false
               async>
       </script>
     </else>

src/page-attributes.ts

@@ -46,6 +46,9 @@ function readPageAttributes() {
     token.value = params.token;
   }
 
+  let inputPositionTop : bool = params['input-position-top'] == "true";
+  let reverseOrder : bool = params['reverse-order'] == "true";
+
   return {
     owner: matches[1],
     repo: matches[2],
@@ -56,7 +59,9 @@ function readPageAttributes() {
     title: params.title,
     description: params.description,
     label: params.label,
-    theme: params.theme || 'github-light'
+    theme: params.theme || 'github-light',
+    inputPositionTop: inputPositionTop,
+    reverseOrder: reverseOrder
   };
 }
 

src/timeline-component.ts

@@ -1,6 +1,8 @@
 import { User, Issue, IssueComment } from './github';
 import { CommentComponent } from './comment-component';
 import { scheduleMeasure } from './measure';
+import { pageAttributes as page } from './page-attributes';
+
 
 export class TimelineComponent {
   public readonly element: HTMLElement;
@@ -55,7 +57,13 @@ export class TimelineComponent {
       comment,
       this.user ? this.user.login : null);
 
-    const index = this.timeline.findIndex(x => x.comment.id >= comment.id);
+    if (page.reverseOrder) {
+      const indexSearchCondition = (x => x.comment.id <= comment.id);
+    } else {
+      const indexSearchCondition = (x => x.comment.id >= comment.id);
+    }
+
+    const index = this.timeline.findIndex(indexSearchCondition);
     if (index === -1) {
       this.timeline.push(component);
       this.element.insertBefore(component.element, this.marker);

src/utterances.ts

@@ -72,7 +72,11 @@ async function bootstrap() {
   };
 
   const newCommentComponent = new NewCommentComponent(user, submit);
-  timeline.element.appendChild(newCommentComponent.element);
+  if (page.inputPositionTop) {
+    timeline.element.insertAdjacentElement('afterbegin', newCommentComponent.element);
+  } else {
+    timeline.element.appendChild(newCommentComponent.element);
+  }
 }
 
 bootstrap();