From 15c791be32395ee8809aa4156402951216c7cacd Mon Sep 17 00:00:00 2001 From: Jack Adolph Date: Mon, 27 May 2024 18:43:06 +1000 Subject: [PATCH] Fix eslint errors --- .eslintrc.yml | 7 ++++ frontend/config.js | 92 +++++++++++++++++++++++----------------------- frontend/panel.js | 62 ++++++++++++++++--------------- 3 files changed, 84 insertions(+), 77 deletions(-) create mode 100644 .eslintrc.yml diff --git a/.eslintrc.yml b/.eslintrc.yml new file mode 100644 index 0000000..6a29dc0 --- /dev/null +++ b/.eslintrc.yml @@ -0,0 +1,7 @@ +env: + browser: true + es2021: true +extends: standard +parserOptions: + ecmaVersion: latest +rules: {} diff --git a/frontend/config.js b/frontend/config.js index 69d1633..62a38e8 100644 --- a/frontend/config.js +++ b/frontend/config.js @@ -1,81 +1,79 @@ 'use strict' import { twitch, extensionUri } from './globals.js' +import htmx from 'htmx' +import Sortable from 'Sortable' let authorization twitch.onAuthorized(function (auth) { authorization = 'Bearer ' + auth.token // wait for user to be authorized before getting content for layout-select-form - htmx.trigger("#layout-select-form", "authed") + htmx.trigger('#layout-select-form', 'authed') }) // add the auth token to the request as a header -htmx.on("htmx:configRequest", (e)=> { - e.detail.headers["Authorization"] = authorization +htmx.on('htmx:configRequest', (e) => { + e.detail.headers.Authorization = authorization // update the URL to the proper extension URI - if (!e.detail.path.startsWith("https")) { + if (!e.detail.path.startsWith('https')) { e.detail.path = extensionUri + e.detail.path } }) -htmx.onLoad(function(content) { +htmx.onLoad(function (content) { // allow sorting of elements in the panel - var sortables = content.querySelectorAll(".grid-container"); - for (var i = 0; i < sortables.length; i++) { - var sortable = sortables[i]; - var sortableInstance = new Sortable(sortable, { + const sortables = content.querySelectorAll('.grid-container') + for (let i = 0; i < sortables.length; i++) { + const sortable = sortables[i] + const sortableInstance = new Sortable(sortable, { animation: 150, - filter: ".add-new-button", + filter: '.add-new-button', // disable sorting on the `end` event onEnd: function (evt) { - this.option("disabled", true); + this.option('disabled', true) } - }); + }) // re-enable sorting on the `htmx:afterSwap` event - sortable.addEventListener("htmx:afterSwap", function() { - sortableInstance.option("disabled", false); - }); + sortable.addEventListener('htmx:afterSwap', function () { + sortableInstance.option('disabled', false) + }) } -}); +}) -htmx.on("htmx:afterSwap", (e) => { - if (e.detail.target.id == "dialog") { - // set up event listeners to close dialog - const dialog = document.querySelector("dialog") - const closeButton = document.getElementById("dialog-close-button") - dialog.showModal() - dialog.addEventListener("close", () => { - dialog.remove() - }) - closeButton.addEventListener("click", () => { - dialog.close() - }) +htmx.on('htmx:afterSwap', (e) => { + if (e.detail.target.id === 'dialog') { + // set up event listeners to close dialog + const dialog = document.querySelector('dialog') + const closeButton = document.getElementById('dialog-close-button') + dialog.showModal() + dialog.addEventListener('close', () => { + dialog.remove() + }) + closeButton.addEventListener('click', () => { + dialog.close() + }) } - }) -htmx.on("htmx:beforeSwap", (e) => { - if (e.detail.target.id == "dialog-status") { - - if (e.detail.shouldSwap){ - // workaround to ensure the dialog doesn't close after the webhook is tested - const close_dialog = (e.detail.serverResponse !== "

Webhook OK

") +htmx.on('htmx:beforeSwap', (e) => { + if (e.detail.target.id === 'dialog-status') { + if (e.detail.shouldSwap) { + // workaround to ensure the dialog doesn't close after the webhook is tested + const closeDialog = (e.detail.serverResponse !== "

Webhook OK

") - if (close_dialog) { - // close the dialog after the success message has been shown for 0.5s - const dialog = document.querySelector("dialog") - setTimeout(() => { - dialog.close() - }, 500) - } - - } else { - // Show the error message on a non-200 response - e.detail.shouldSwap = true + if (closeDialog) { + // close the dialog after the success message has been shown for 0.5s + const dialog = document.querySelector('dialog') + setTimeout(() => { + dialog.close() + }, 500) } + } else { + // Show the error message on a non-200 response + e.detail.shouldSwap = true + } } - }) diff --git a/frontend/panel.js b/frontend/panel.js index ea1a82c..b29f561 100644 --- a/frontend/panel.js +++ b/frontend/panel.js @@ -1,82 +1,84 @@ 'use strict' import { twitch, extensionUri } from './globals.js' +import htmx from 'htmx' let authorization - twitch.onAuthorized(function (auth) { authorization = 'Bearer ' + auth.token // wait for user to be authorized before getting content for layout-loader - htmx.trigger("#layout-loader", "authed") + htmx.trigger('#layout-loader', 'authed') }) - -htmx.on("htmx:configRequest", (e)=> { +htmx.on('htmx:configRequest', (e) => { // add the auth token to the request as a header - e.detail.headers["Authorization"] = authorization + e.detail.headers.Authorization = authorization // update the URL to the proper extension URI - if (!e.detail.path.startsWith("https")) { + if (!e.detail.path.startsWith('https')) { e.detail.path = extensionUri + e.detail.path } }) -twitch.listen("broadcast", function (target, contentType, message) { +twitch.listen('broadcast', function (target, contentType, message) { // handle refreshing the panel if the streamer updates the layout - if (message === "refresh") { + if (message === 'refresh') { // refresh after a random interval between 0-5s (to reduce EBS load) setTimeout(function () { - htmx.trigger("#layout-loader", "refresh") + htmx.trigger('#layout-loader', 'refresh') }, Math.floor(Math.random() * 5000)) } }) -htmx.on("htmx:afterSwap", (e) => { - +htmx.on('htmx:afterSwap', (e) => { // start a bits transaction if the user clicks one of the webhook buttons - if (e.detail.target.id == "layout") { - var webhookButtons = document.querySelectorAll(".webhook-button"); - for (var i = 0; i < webhookButtons.length; i++) { - var webhookButton = webhookButtons[i]; + if (e.detail.target.id === 'layout') { + const webhookButtons = document.querySelectorAll('.webhook-button') + for (let i = 0; i < webhookButtons.length; i++) { + const webhookButton = webhookButtons[i] // the webhookId is available in the data-id attribute of the button - const webhookID = webhookButton.getAttribute("data-id") + const webhookID = webhookButton.getAttribute('data-id') // the bitsProduct is available in the data-product attribute of the button - const webhookBitsProduct = webhookButton.getAttribute("data-product") + const webhookBitsProduct = webhookButton.getAttribute('data-product') webhookButton.addEventListener( - "click", + 'click', async function () { webhookRedeem(webhookID, webhookBitsProduct) }, - false, + false ) } } }) - // handle the bits transaction and trigger the webhook in the EBS if successful async function webhookRedeem (webhookID, webhookBitsProduct) { try { - const bitsTransaction = new Promise((complete, cancel) => { - twitch.bits.onTransactionComplete(complete); - twitch.bits.onTransactionCancelled(cancel); + const bitsTransaction = new Promise((resolve, reject) => { + twitch.bits.onTransactionComplete(resolve) + twitch.bits.onTransactionCancelled(reject) }) - twitch.bits.useBits(webhookBitsProduct); - const tx = await bitsTransaction; + twitch.bits.useBits(webhookBitsProduct) + const tx = await bitsTransaction const response = await fetch( extensionUri + '/webhook/' + webhookID, { - method: "POST", + method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: authorization }, - body: JSON.stringify({"transaction": tx}) + body: JSON.stringify({ transaction: tx }) } ) + if (!response.ok) { + const errorMsg = 'webhook failed: ' + response.status + console.error(errorMsg) + return false + } } catch (error) { - console.error(error) + console.error('error sending webhook: ' + error) } finally { - twitch.bits.onTransactionComplete(() => {}); - twitch.bits.onTransactionCancelled(() => {}); + twitch.bits.onTransactionComplete(() => {}) + twitch.bits.onTransactionCancelled(() => {}) } }