itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 04:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement some basics

Browse Source
This commit is contained in:
carson 2020-04-24 20:06:12 -07:00
parent 18a0b92d08
commit a5d7e8febd
4 changed files with 125 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scratch/foo.html
View File

@ -1 +1 @@
FOO
<i>FOO!!!</i>

16
scratch/index.html
View File

@ -9,7 +9,21 @@
<h1>Scratch Page</h1>
<button hx-get="foo.html">Trigger</button>
<div>
<button hx-get="foo.html">Trigger</button>
</div>
<div>
<button hx-get="foo.html" hx-target="#bar">Trigger 2</button><span id="bar">Bar</span>
</div>
<div>
<button hx-get="foo.html" hx-target="#bar2" hx-swap-style="append">Trigger 3</button><span id="bar2">Bar</span>
</div>
<div>
<button hx-get="foo.html" hx-swap-style="outerHTML">Trigger 4</button>
</div>
<form hx-post="/foo">
<input name="bar" type="text"/>

54
src/htmx.js
View File

@ -1,17 +1,61 @@
var HTMx = HTMx || (function()
{
function getClosestAttributeValue(elt, attributeName)
{
let attribute = elt.getAttribute(attributeName);
if(attribute)
{
return attribute;
}
else if (elt.parentElement)
{
return getClosestAttributeValue(elt.parentElement, attributeName);
}
else
{
return null;
}
}
function getTarget(elt) {
let targetVal = getClosestAttributeValue(elt, "hx-target");
if (targetVal) {
return document.querySelector(targetVal);
} else {
return elt;
}
}
function makeNode(resp) {
let range = document.createRange();
return range.createContextualFragment(resp);
}
function swapResponse(elt, resp) {
let target = getTarget(elt);
let swapStyle = getClosestAttributeValue(elt, "hx-swap-style");
if (swapStyle === "outerHTML") {
target.outerHTML = resp;
} else if (swapStyle === "append") {
target.appendChild(makeNode(resp))
} else {
target.innerHTML = resp;
}
}
// core ajax request
function issueAjaxRequest(elt, url)
{
var request = new XMLHttpRequest();
let request = new XMLHttpRequest();
// TODO - support more request types POST, PUT, DELETE, etc.
request.open('GET', url, true);
request.onload = function()
{
if (this.status >= 200 && this.status < 400)
if (this.status >= 200 && this.status < 400)
{
// Success!
var resp = this.response;
elt.innerHTML = resp;
let resp = this.response;
swapResponse(elt, resp);
}
else
{
@ -38,7 +82,7 @@ var HTMx = HTMx || (function()
}
function ready(fn) {
if (document.readyState != 'loading'){
if (document.readyState !== 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);

60
www/index.html Normal file
View File

@ -0,0 +1,60 @@
<html lang="en">
<head>
<title>HTMx - Teaching HTML new tricks</title>
</head>
<body>
<section>
<h1>&lt;/&gt; HTMx</h1>
<p>HTMx is a set of extensions to HTML that allows you to build AJAX powered applications using HTML attributes.
It fills a gap in functionality that has been inexplicably left out of
standard HTML, and allows you to use the full range of HTTP and HTML expressiveness originally
envisioned for the web.</p>
<p>Here is a simple example of HTMx in action:</p>
<pre>
&lt;button hx-get="/example" hx-target="#myDiv"&gt;Click Me&lt;/button&gt;
</pre>
<p>This example issues an AJAX request to <code>/example</code> when a user clicks on it, and swaps the response
HTML into the element with the id <code>myDiv</code></p>
<p>HTMx was inspired by <a href="http://intercoolerjs.org">intercooler.js</a>, and aims to be a minimalist &amp;
dependency free implementation of the same concept.</p>
</section>
<section>
<h1>&lt;/&gt; Attributes</h1>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hx-get</td>
<td>Issues an HTTP GET to the given URL</td>
</tr>
<tr>
<td>hx-target</td>
<td>Specifies the target element that should be swapped</td>
</tr>
<tr>
<td>hx-swap-style</td>
<td>Specifies how target element should be swapped: innerHTML, outerHTML, append</td>
</tr>
</tbody>
</table>
</section><section>
<h1>&lt;/&gt; Events</h1>
<table>
<thead>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</body>
</html>