diff --git a/scratch/foo.html b/scratch/foo.html index d96c7efb..19586faf 100644 --- a/scratch/foo.html +++ b/scratch/foo.html @@ -1 +1 @@ -FOO \ No newline at end of file +FOO!!! \ No newline at end of file diff --git a/scratch/index.html b/scratch/index.html index c81e3190..37b80c3d 100644 --- a/scratch/index.html +++ b/scratch/index.html @@ -9,7 +9,21 @@

Scratch Page

- +
+ +
+ +
+Bar +
+ +
+ Bar +
+ +
+ +
diff --git a/src/htmx.js b/src/htmx.js index d12be8a2..fd940b4d 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -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); diff --git a/www/index.html b/www/index.html new file mode 100644 index 00000000..0eef3d4f --- /dev/null +++ b/www/index.html @@ -0,0 +1,60 @@ + + + HTMx - Teaching HTML new tricks + + +
+

</> HTMx

+

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.

+

Here is a simple example of HTMx in action:

+ 
+                <button hx-get="/example" hx-target="#myDiv">Click Me</button>
+
+

This example issues an AJAX request to /example when a user clicks on it, and swaps the response + HTML into the element with the id myDiv

+

HTMx was inspired by intercooler.js, and aims to be a minimalist & + dependency free implementation of the same concept.

+
+
+

</> Attributes

+ + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
hx-getIssues an HTTP GET to the given URL
hx-targetSpecifies the target element that should be swapped
hx-swap-styleSpecifies how target element should be swapped: innerHTML, outerHTML, append
+
+

</> Events

+ + + + + + + + + +
EventDescription
+
+ + + \ No newline at end of file