Skip to content

Commit

Permalink
Add GET functionality, misc. adjustments (#12)
Browse files Browse the repository at this point in the history 
* Add GET message functionality
* Convert webhook handlers to extended classes to reduce redundancy
* Check for JavaScript, add noscript warning
* Update styling, including styling form sections as cards
* Fix paths (because deployed site doesn't use root URL)
* Stylelint tuning
  • Loading branch information
@thewildmage
thewildmage committed Feb 25, 2022
1 parent cff083b commit 2d15264
Show file tree
Hide file tree
Showing 9 changed files with 415 additions and 178 deletions.
8 changes: 8 additions & 0 deletions .github/linters/.stylelintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"stylelint-order"
],
"rules": {
"custom-property-empty-line-before": null,
"declaration-colon-newline-after": null,
"indentation": 4,
"no-descending-specificity": null,
Expand All @@ -12,6 +13,13 @@
"declarations"
],
"order/properties-alphabetical-order": true,
"selector-class-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*){0,1}$",
{
"message": "Expected class selector to be kebab-case, kebab-case__element, or kebab-case__element-kebab",
"resolveNestedSelectors": true
}
],
"value-list-comma-newline-after": null
}
}
253 changes: 169 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@
integrity="sha384-ZEnykvpKcqtBhYvsDZKsHFcCphbGlWNx3wG9ycweMcUvL4IMfa0d6gv+JhT45O/X"
rel="stylesheet"
/>
<link href="/styles.css" rel="stylesheet" />
<link href="./styles.css" rel="stylesheet" />

<script src="/main.js" type="module"></script>
<script src="./main.js" type="module"></script>
</head>
<body class="flow">

<body class="flow" data-js-available="false">
<header>
<h1>Huningto</h1>
<p>
Expand All @@ -27,87 +28,171 @@ <h1>Huningto</h1>
</p>
</header>

<main>
<form class="flow" method="post">
<h2>Destination</h2>

<p>
<label for="webhook-url">Webhook URL</label>
<input id="webhook-url" name="action" type="url" required />
</p>

<p>
<label for="thread-id">Thread ID</label>
<span id="thread-id-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="thread-id-explain"
id="thread-id"
name="thread_id"
type="number"
/>
</p>

<h2>Content</h2>

<fieldset>
<legend>I want to build my message...</legend>

<input
class="js-conditional"
id="from-scratch"
name="buildFrom"
type="radio"
value="scratch"
checked
required
/>
<label for="from-scratch">...from scratch.</label>

<input
class="js-conditional"
id="from-json"
name="buildFrom"
type="radio"
value="json"
required
/>
<label for="from-json">...from JSON I already have.</label>
</fieldset>

<p class="js-conditional" data-build-from="scratch">
<label for="message">Message</label>
<textarea
id="message"
maxlength="2000"
name="content"
rows="5"
required
></textarea>
</p>

<p class="js-conditional" data-build-from="json">
<label for="payload-json">Message JSON</label>
<textarea
id="payload-json"
name="payload_json"
rows="5"
required
></textarea>
</p>

<h2>Finish</h2>

<p>
<button type="submit">Send</button>
</p>

<p>
<label for="output">Server Response</label>
<output id="output">(None yet)</output>
</p>
</form>
<noscript
>JavaScript is required for this tool to work and does not appear to
be available at present.</noscript
>

<main class="js-only">
<article>
<h2 id="send">Send Message</h2>

<form class="numbered" id="form-send" method="POST">
<section class="flow">
<h3 class="numbered__item">Destination</h3>

<p>
<label for="webhook-url-send">Webhook URL</label>
<input
id="webhook-url-send"
name="action"
type="url"
required
/>
</p>

<p>
<label for="thread-id-send">Thread ID</label>
<span id="thread-id-send-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="thread-id-send-explain"
id="thread-id-send"
name="thread_id"
type="number"
/>
</p>
</section>

<section class="flow">
<h3 class="numbered__item">Content</h3>

<fieldset>
<legend>I want to build my message...</legend>

<input
class="js-conditional"
id="from-scratch"
name="buildFrom"
type="radio"
value="scratch"
checked
required
/>
<label for="from-scratch">...from scratch.</label>

<input
class="js-conditional"
id="from-json"
name="buildFrom"
type="radio"
value="json"
required
/>
<label for="from-json"
>...from JSON I already have.</label
>
</fieldset>

<p class="js-conditional" data-build-from="scratch">
<label for="message">Message</label>
<textarea
id="message"
maxlength="2000"
name="content"
rows="5"
required
></textarea>
</p>

<p class="js-conditional" data-build-from="json">
<label for="payload-json">Message JSON</label>
<textarea
id="payload-json"
name="payload_json"
rows="5"
required
></textarea>
</p>
</section>

<section class="flow">
<h3 class="numbered__item">Finish</h3>

<p>
<button type="submit">Send</button>
</p>

<p>
<label for="output-send">Server Response</label>
<output id="output-send">(None yet)</output>
</p>
</section>
</form>
</article>

<article>
<h2 id="get">Get Message Content</h2>

<form class="numbered" id="form-get" method="GET">
<section class="flow">
<h3 class="numbered__item">Source</h3>

<p>
<label for="webhook-url-get">Webhook URL</label>
<input
id="webhook-url-get"
name="action"
type="url"
required
/>
</p>

<p>
<label for="thread-id-get">Thread ID</label>
<span id="thread-id-get-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="thread-id-get-explain"
id="thread-id-get"
name="thread_id"
type="number"
/>
</p>

<p>
<label for="message-id-get">Message ID</label>
<input
id="message-id-get"
name="message_id"
type="number"
required
/>
</p>
</section>

<section class="flow">
<h3 class="numbered__item">Finish</h3>

<p>
<button type="submit">Get</button>
</p>

<p>
<label for="output-get">Server Response</label>
<output id="output-get">(None yet)</output>
</p>
</section>
</form>
</article>

<article>
<h2 id="edit">Edit Message</h2>

<p>Placeholder for work in progress. Stay tuned.</p>
</article>
</main>

<footer>
Expand Down
25 changes: 19 additions & 6 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
import * as Send from "/modules/send.js";
import * as ConditionalInput from "/modules/conditional-input.js";
import * as JsCheck from "./modules/js-check.js";
import { SendHandler } from "./modules/send-handler.js";
import * as ConditionalInput from "./modules/conditional-input.js";
import { GetHandler } from "./modules/get-handler.js";

const form = document.querySelector("form");
const output = document.querySelector("output");
JsCheck.setJsAvailable();

Send.initialize(form, output);
ConditionalInput.initialize(form);
// set up send form
const sendForm = document.getElementById("form-send");
const sendOutput = document.getElementById("output-send");
const sendHandler = new SendHandler(sendForm, sendOutput);

sendHandler.register();
ConditionalInput.initialize(sendForm);

// set up get form
const getForm = document.getElementById("form-get");
const getOutput = document.getElementById("output-get");
const getHandler = new GetHandler(getForm, getOutput);

getHandler.register();
37 changes: 37 additions & 0 deletions modules/get-handler.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { WebhookHandler } from "./webhook-handler.js";

class GetHandler extends WebhookHandler {
constructor(form, output) {
super(form, output);

this.method = "GET";
}

constructUrl(elements) {
let baseUrl = elements.action.value.trim();
let threadId = elements.thread_id.value.trim();
let messageId = elements.message_id.value.trim();

let composite = `${baseUrl}/messages/${messageId}`;

if (threadId) {
composite = `${composite}?thread_id=${threadId}`;
}

return composite;
}

constructFetchInit(elements) {
return {
method: this.method,
};
}

displayResponse(response) {
response.text().then((text) => {
this.output.append(text);
});
}
}

export { GetHandler };
3 changes: 3 additions & 0 deletions modules/js-check.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function setJsAvailable() {
document.body.dataset.jsAvailable = true;
}
Loading

0 comments on commit 2d15264

Please sign in to comment.