From de2a5a8d108c348846e9205da075819536315275 Mon Sep 17 00:00:00 2001 From: Tomasz Pietruszka Date: Wed, 13 Nov 2019 17:38:06 +0100 Subject: [PATCH 1/4] Added option to move input form above comments --- src/index.html | 1 + src/page-attributes.ts | 5 ++++- src/utterances.ts | 6 +++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 16f9ffcc..b8937745 100644 --- a/src/index.html +++ b/src/index.html @@ -82,6 +82,7 @@ label="💬 comment" crossorigin="anonymous" theme="github-light" + input-position-top=false async> diff --git a/src/page-attributes.ts b/src/page-attributes.ts index 3823b40c..59910cd7 100644 --- a/src/page-attributes.ts +++ b/src/page-attributes.ts @@ -46,6 +46,8 @@ function readPageAttributes() { token.value = params.token; } + let inputPositionTop : bool = params['input-position-top'] == "true"; + return { owner: matches[1], repo: matches[2], @@ -56,7 +58,8 @@ function readPageAttributes() { title: params.title, description: params.description, label: params.label, - theme: params.theme || 'github-light' + theme: params.theme || 'github-light', + inputPositionTop: inputPositionTop }; } diff --git a/src/utterances.ts b/src/utterances.ts index 27091088..037b9bcc 100644 --- a/src/utterances.ts +++ b/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(); From cff757e4d30b7298f3e27f77cbe376126239141c Mon Sep 17 00:00:00 2001 From: Tomasz Pietruszka Date: Wed, 13 Nov 2019 18:16:52 +0100 Subject: [PATCH 2/4] Added option to reverse order of comments --- src/index.html | 3 +++ src/page-attributes.ts | 4 +++- src/timeline-component.ts | 10 +++++++++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index b8937745..e1e1235a 100644 --- a/src/index.html +++ b/src/index.html @@ -72,6 +72,8 @@ issue-term="homepage" crossorigin="anonymous" theme="github-light" + input-position-top=false + reverse-order=false async> @@ -83,6 +85,7 @@ crossorigin="anonymous" theme="github-light" input-position-top=false + reverse-order=false async> diff --git a/src/page-attributes.ts b/src/page-attributes.ts index 59910cd7..b12867f6 100644 --- a/src/page-attributes.ts +++ b/src/page-attributes.ts @@ -47,6 +47,7 @@ function readPageAttributes() { } let inputPositionTop : bool = params['input-position-top'] == "true"; + let reverseOrder : bool = params['reverse-order'] == "true"; return { owner: matches[1], @@ -59,7 +60,8 @@ function readPageAttributes() { description: params.description, label: params.label, theme: params.theme || 'github-light', - inputPositionTop: inputPositionTop + inputPositionTop: inputPositionTop, + reverseOrder: reverseOrder }; } diff --git a/src/timeline-component.ts b/src/timeline-component.ts index 33540da3..7b8fe79b 100644 --- a/src/timeline-component.ts +++ b/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); From 3511769871159caa44508bc1cf1360af751371c6 Mon Sep 17 00:00:00 2001 From: Tomasz Pietruszka Date: Wed, 13 Nov 2019 18:57:56 +0100 Subject: [PATCH 3/4] Added the reverse-order option to the config generator --- src/configuration-component.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/configuration-component.ts b/src/configuration-component.ts index dd12a770..60ce3a7a 100644 --- a/src/configuration-component.ts +++ b/src/configuration-component.ts @@ -135,6 +135,14 @@ export class ConfigurationComponent { +

Reverse Order

+

+ Choose if you want the order of comments to be reversed and put + the input form on top. +

+ + Reverse order, input form on top +

Enable Utterances

Add the following script tag to your blog's template. Position it where you want the @@ -157,6 +165,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 +199,18 @@ export class ConfigurationComponent { } else { mappingAttr = this.makeConfigScriptAttribute('issue-term', mapping.value); } + let orderConfig : string = ''; + if (this.reverseOrder.checked) { + console.log(this.reverseOrder); + orderConfig = this.makeConfigScriptFlag('reverse-order', true) + '\n' + + this.makeConfigScriptFlag('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')); } @@ -202,6 +219,11 @@ export class ConfigurationComponent { return ` ${name}="${value}"`; } + private makeConfigScriptFlag(name: string, value: boolean) { + // tslint:disable-next-line:max-line-length + return ` ${name}=${value}`; + } + private makeConfigScript(attrs: string) { // tslint:disable-next-line:max-line-length return `

<script src="https://utteranc.es/client.js"\n${attrs}\n        async>\n</script>
`; From 85808cf76b086b4c6fe37462b7a95a22e22f6e44 Mon Sep 17 00:00:00 2001 From: Tomasz Pietruszka Date: Wed, 13 Nov 2019 19:18:25 +0100 Subject: [PATCH 4/4] Simplified config generator for reverse-order --- src/configuration-component.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/configuration-component.ts b/src/configuration-component.ts index 60ce3a7a..fc9bb006 100644 --- a/src/configuration-component.ts +++ b/src/configuration-component.ts @@ -140,8 +140,14 @@ export class ConfigurationComponent { Choose if you want the order of comments to be reversed and put the input form on top.

- - Reverse order, input form on top +

+ Related parameters ("reverse-order" and "input-position-top") accept + both boolean primitives and strings (both true and "true" are valid). +

+

Enable Utterances

@@ -201,9 +207,9 @@ export class ConfigurationComponent { } let orderConfig : string = ''; if (this.reverseOrder.checked) { - console.log(this.reverseOrder); - orderConfig = this.makeConfigScriptFlag('reverse-order', true) + '\n' + - this.makeConfigScriptFlag('input-position-top', true) + '\n'; + // 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' + @@ -219,11 +225,6 @@ export class ConfigurationComponent { return ` ${name}="${value}"`; } - private makeConfigScriptFlag(name: string, value: boolean) { - // tslint:disable-next-line:max-line-length - return ` ${name}=${value}`; - } - private makeConfigScript(attrs: string) { // tslint:disable-next-line:max-line-length return `
<script src="https://utteranc.es/client.js"\n${attrs}\n        async>\n</script>
`;