itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up parameter inclusion logic and update demos to use GET where appropriate, rather than hiding from my bad design choices

Browse Source 
Added value-select.md demo
This commit is contained in:
carson 2020-05-14 15:34:47 -07:00
parent 51bf9bfc13
commit a3c9cf6b6a
11 changed files with 108 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/kutty.js
View File

@ -956,7 +956,7 @@ var kutty = kutty || (function () {
}
}
function getInputValues(elt) {
function getInputValues(elt, verb) {
var processed = [];
var values = {};
// include the element itself
@ -971,8 +971,10 @@ var kutty = kutty || (function () {
});
}
// include the closest form
processInputValue(processed, values, closest(elt, 'form'));
// for a non-GET include the closest form
if (verb !== 'get') {
processInputValue(processed, values, closest(elt, 'form'));
}
return values;
}
@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
return newValues;
}
} else {
// By default GETs do not include parameters
if (verb === 'get') {
return {};
} else {
return inputValues;
}
return inputValues;
}
}

2
www/attributes/kt-include.md
View File

@ -24,4 +24,4 @@ the value automatically, but it demonstrates the concept.
### Notes
* `kt-indicator` is inherited and can be placed on a parent element
* `kt-include` is inherited and can be placed on a parent element

4
www/attributes/kt-params.md
View File

@ -9,8 +9,8 @@ The `kt-params` attribute allows you to filter the parameters that will be submi
The possible values of this attribute are:
* `*` - Include all parameters (default)
* `none` - Include no parameters
* `*` - Include all parameters
* `not <param-list>` - Include all except the comma separated list of parameter names
* `<param-list>` - Include all the comma separated list of parameter names
@ -24,5 +24,3 @@ and included in the URL, as per usual with a `GET`.
### Notes
* `kt-params` is inherited and can be placed on a parent element
* The default value for `GET`'s is `none`, to avoid polluting URLs
* All other requests default to `*`

18
www/docs.md
View File

@ -20,7 +20,7 @@ title: </> kutty - high power tools for html
* [targets](#targets)
* [indicators](#indicators)
* [swapping](#swapping)
* [forms](#forms)
* [parameters](#parameters)
* [history](#history)
* [requests & responses](#requests)
* [misc](#misc)
@ -337,21 +337,21 @@ Note that out of band elements must be in the top level of the response, and not
If you want to select a subset of the response HTML to swap into the target, you can use the [kt-select](/attributes/kt-select)
attribute, which takes a CSS selector and selects the matching elements from the response.
### <a name="forms"></a> [Forms & Input Values](#forms)
### <a name="parameters"></a> [Parameters](#parameters)
By default, an element that causes a request will include its value if it has one.
By default, an element that causes a request will include its value if it has one. If the element is a form it
will include the values of all inputs within it.
Additionally, if the element is within a form, the values of all the inputs in the form will be included in the request.
Additionally, if the element causes a non-`GET` request, the values of all the inputs of the nearest enclosing form
will be included.
If you wish to include the values of other elements, you can use the [kt-include](/attributes/kt-include) attribute
with a CSS selector of all the elements whose values you want to include in the request.
If you wish to filter out some of the parameters that will be included you can use the [kt-parameters](/attributes/kt-parameters)
attribute to do so. Note that by default all `GET` requests will filter out all parameters (this avoids accidentally
polluting URLs).
If you wish to filter out some parameters you can use the [kt-parameters](/attributes/kt-parameters) attribute.
Finally, if you want to programatically modify the arguments, you can use the [configRequest.kutty](/events#configRequest.kutty) event to
do so.
Finally, if you want to programatically modify the parameters, you can use the [configRequest.kutty](/events#configRequest.kutty)
event.
## <a name="history"></a> [History Support](#history)

1
www/examples.md
View File

@ -19,3 +19,4 @@ You can copy and paste them and then adjust them for your needs.
| [Infinite Scroll](/examples/infinite-scroll) | Demonstrates infinite scrolling of a page
| [Active Search](/examples/active-search) | Demonstrates the active search box pattern
| [Progress Bar](/examples/progress-bar) | Demonstrates a job-runner like progress bar
| [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select

8
www/examples/inline-validation.md
View File

@ -80,8 +80,6 @@ Below is a working demo of this example. The only email that will be accepted i
<script>
server.autoRespondAfter = 2000; // longer response for more drama
//=========================================================================
// Fake Server Side Code
//=========================================================================
@ -95,7 +93,7 @@ Below is a working demo of this example. The only email that will be accepted i
return formTemplate();
});
onPost("/contact/email", function(request, params){
onGet(/\/contact\/email.*/, function(request, params){
var email = params['email'];
if(!/\S+@\S+\.\S+/.test(email)) {
return emailInputTemplate(email, "Please enter a valid email address");
@ -111,7 +109,7 @@ Below is a working demo of this example. The only email that will be accepted i
return `<h3>Signup Form</h3><form ic-post-to="/contact">
<div kt-target="this" kt-swap="outerHTML">
<label>Email Address</label>
<input name="email" kt-post="/contact/email" kt-indicator="#ind">
<input name="email" kt-get="/contact/email" kt-indicator="#ind">
<img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
</div>
<div class="form-group">
@ -129,7 +127,7 @@ Below is a working demo of this example. The only email that will be accepted i
function emailInputTemplate(val, errorMsg) {
return `<div kt-target="this" kt-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
<label>Email Address</label>
<input name="email" kt-post="/contact/email" kt-indicator="#ind" value="${val}">
<input name="email" kt-get="/contact/email" kt-indicator="#ind" value="${val}">
<img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
${errorMsg ? ("<div class='error-message'>" + errorMsg + "</div>") : ""}
</div>`;

68
www/examples/value-select.md Normal file
View File

@ -0,0 +1,68 @@
---
layout: demo_layout.njk
---
## Dependent Select
{% include demo_ui.html.liquid %}
<script>
//=========================================================================
// Fake Server Side Code
//=========================================================================
// routes
init("/demo", function(request, params){
return formTemplate();
});
onGet(/models.*/, function (request, params) {
var make = dataStore.findMake(params['make']);
return modelOptionsTemplate(make['models']);
});
// templates
function formTemplate() {
return ` <h3>Pick A Make/Model</h3>
<form>
<div>
<label >Make</label>
<select name="make" kt-get="/models" kt-target="#models" kt-indicator=".kutty-indicator">
<option value="audi">Audi</option>
<option value="toyota">Toyota</option>
<option value="bmw">BMW</option>
</select>
</div>
<div>
<label>Model</label>
<select id="models" name="model">
<option value="a1">A1</option>
<option value="a3">A3</option>
<option value="a6">A6</option>
</select>
<img class="kutty-indicator" width="20" src="/img/bars.svg">
</div>
</form>`;
}
function modelOptionsTemplate(make) {
return make.map(function(val) {
return "<option value='" + val + "'>" + val +"</option>";
}).join("\n");
}
var dataStore = function(){
var data = {
audi : { models : ["A1", "A4", "A6"] },
toyota : { models : ["Landcruiser", "Landcruiser", "Landcruiser"] },
bmw : { models : ["325i", "325ix", "X5"] }
};
return {
findMake : function(make) {
return data[make];
}
}
}()
</script>

5
www/js/demo.js
View File

@ -125,7 +125,8 @@ function pushActivityChip(name, id, content) {
if (content.length > 750) {
content = content.substr(0, 750) + "...";
}
document.getElementById("demo-current-request").insertAdjacentHTML("afterbegin", `<div id="${id}">${content}</div>`);
var contentDiv = `<div id="${id}">${content}</div>`;
document.getElementById("demo-current-request").insertAdjacentHTML("afterbegin", contentDiv);
showTimelineEntry(id);
Prism.highlightAll();
}
@ -158,7 +159,7 @@ function demoResponseTemplate(details){
</div>
<div>
<b>Response</b>
<pre class="language-html"><code class="language-html">${escapeHtml(details.response)}</code> </pre>
<pre class="language-html"><code class="language-html">${escapeHtml(details.xhr.response)}</code> </pre>
</div>
</span>`;
}

15
www/js/kutty.js
View File

@ -956,7 +956,7 @@ var kutty = kutty || (function () {
}
}
function getInputValues(elt) {
function getInputValues(elt, verb) {
var processed = [];
var values = {};
// include the element itself
@ -971,8 +971,10 @@ var kutty = kutty || (function () {
});
}
// include the closest form
processInputValue(processed, values, closest(elt, 'form'));
// for a non-GET include the closest form
if (verb !== 'get') {
processInputValue(processed, values, closest(elt, 'form'));
}
return values;
}
@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
return newValues;
}
} else {
// By default GETs do not include parameters
if (verb === 'get') {
return {};
} else {
return inputValues;
}
return inputValues;
}
}

15
www/test/0.0.1-alpha.3/src/kutty.js
View File

@ -956,7 +956,7 @@ var kutty = kutty || (function () {
}
}
function getInputValues(elt) {
function getInputValues(elt, verb) {
var processed = [];
var values = {};
// include the element itself
@ -971,8 +971,10 @@ var kutty = kutty || (function () {
});
}
// include the closest form
processInputValue(processed, values, closest(elt, 'form'));
// for a non-GET include the closest form
if (verb !== 'get') {
processInputValue(processed, values, closest(elt, 'form'));
}
return values;
}
@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
return newValues;
}
} else {
// By default GETs do not include parameters
if (verb === 'get') {
return {};
} else {
return inputValues;
}
return inputValues;
}
}

4
www/test/0.0.1-alpha.3/test/attributes/kt-push-url.js
View File

@ -110,10 +110,14 @@ describe("kt-push-url attribute", function() {
for (var i = 0; i < 10; i++) {
array.push(entry);
}
var start = performance.now();
var string = JSON.stringify(array);
localStorage.setItem(KUTTY_HISTORY_CACHE, string);
var reReadString = localStorage.getItem(KUTTY_HISTORY_CACHE);
var finalJson = JSON.parse(reReadString);
var end = performance.now();
var timeInMs = end - start;
chai.assert(timeInMs < 300, "Should take less than 300ms on most platforms");
})
});