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

Documentation update, make kt-indicator usable out of the box, standardize class names

Browse Source
This commit is contained in:
carson 2020-05-09 19:51:30 -07:00
parent 3721f663fe
commit 2c75621526
18 changed files with 273 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/kutty.js vendored
View File

@ -642,7 +642,7 @@ var kutty = kutty || (function () {
// History Support // History Support
//==================================================================== //====================================================================
function getHistoryElement() { function getHistoryElement() {
var historyElt = getDocument().querySelector('.kt-history-elt'); var historyElt = getDocument().querySelector('.kutty-history-elt');
return historyElt || getDocument().body; return historyElt || getDocument().body;
} }
@ -697,7 +697,7 @@ var kutty = kutty || (function () {
triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch});
if (this.status >= 200 && this.status < 400) { if (this.status >= 200 && this.status < 400) {
var fragment = makeFragment(this.response); var fragment = makeFragment(this.response);
fragment = fragment.querySelector('.kt-history-elt') || fragment; fragment = fragment.querySelector('.kutty-history-elt') || fragment;
settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); settleImmediately(swapInnerHTML(getHistoryElement(), fragment));
} }
}; };
@ -736,7 +736,7 @@ var kutty = kutty || (function () {
indicators = [elt]; indicators = [elt];
} }
forEach(indicators, function(ic) { forEach(indicators, function(ic) {
ic.classList[action].call(ic.classList, "kutty-show-indicator"); ic.classList[action].call(ic.classList, "kutty-request");
}); });
} }
@ -1055,6 +1055,12 @@ var kutty = kutty || (function () {
} }
} }
// insert kutty-indicator css rules
var sheet = getDocument().styleSheets[0];
sheet.insertRule(".kutty-indicator{opacity:0;transition: opacity 500ms ease-in;}\n" +
".kutty-request .kutty-indicator{opacity:1}\n" +
".kutty-request.kutty-indicator{opacity:1}\n", sheet.cssRules.length);
// initialize the document // initialize the document
ready(function () { ready(function () {
var body = getDocument().body; var body = getDocument().body;

2
dist/kutty.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/kutty.min.js.gz vendored
View File

Binary file not shown.

14
src/kutty.js
View File

@ -122,6 +122,11 @@ var kutty = kutty || (function () {
return trigger.split(/\s+/); return trigger.split(/\s+/);
} }
function addRule(rule) {
var sheet = getDocument().styleSheets[0];
sheet.insertRule(rule, sheet.cssRules.length);
}
//==================================================================== //====================================================================
// Node processing // Node processing
//==================================================================== //====================================================================
@ -642,7 +647,7 @@ var kutty = kutty || (function () {
// History Support // History Support
//==================================================================== //====================================================================
function getHistoryElement() { function getHistoryElement() {
var historyElt = getDocument().querySelector('.kt-history-elt'); var historyElt = getDocument().querySelector('.kutty-history-elt');
return historyElt || getDocument().body; return historyElt || getDocument().body;
} }
@ -697,7 +702,7 @@ var kutty = kutty || (function () {
triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch});
if (this.status >= 200 && this.status < 400) { if (this.status >= 200 && this.status < 400) {
var fragment = makeFragment(this.response); var fragment = makeFragment(this.response);
fragment = fragment.querySelector('.kt-history-elt') || fragment; fragment = fragment.querySelector('.kutty-history-elt') || fragment;
settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); settleImmediately(swapInnerHTML(getHistoryElement(), fragment));
} }
}; };
@ -1055,6 +1060,11 @@ var kutty = kutty || (function () {
} }
} }
// insert kutty-indicator css rules
addRule(".kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}");
addRule(".kutty-request .kutty-indicator{opacity:1}");
addRule(".kutty-request.kutty-indicator{opacity:1}");
// initialize the document // initialize the document
ready(function () { ready(function () {
var body = getDocument().body; var body = getDocument().body;

2
test/browser-only.html
View File

@ -27,7 +27,7 @@
</script> </script>
<em>Work Area</em> <em>Work Area</em>
<hr/> <hr/>
<div id="work-area" class="kt-history-elt"> <div id="work-area" class="kutty-history-elt">
</div> </div>
</body> </body>
</html> </html>

2
test/index.html
View File

@ -40,7 +40,7 @@
</script> </script>
<em>Work Area</em> <em>Work Area</em>
<hr/> <hr/>
<div id="work-area" class="kt-history-elt"> <div id="work-area" class="kutty-history-elt">
</div> </div>
</body> </body>
</html> </html>

2
test/scratch.html
View File

@ -43,7 +43,7 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
<em>Work Area</em> <em>Work Area</em>
<hr/> <hr/>
<div id="work-area" class="kt-history-elt"> <div id="work-area" class="kutty-history-elt">
</div> </div>

23
www/_includes/demo_ui.html.liquid
View File

@ -5,13 +5,16 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
max-height: 35vh; height: 50px;
height: 500px;
background-color: whitesmoke; background-color: whitesmoke;
border-top: 2px solid gray; border-top: 2px solid gray;
overflow: scroll; overflow: scroll;
margin: 0px; margin: 0px;
} }
#demo-server-info.show {
max-height: 35vh;
height: 500px;
}
#demo-activity { #demo-activity {
height:300px height:300px
} }
@ -23,9 +26,23 @@
#demo-canvas { #demo-canvas {
margin-bottom: 500px; margin-bottom: 500px;
} }
#request-info-toggler {
float: right;
}
</style> </style>
<script>
function toggleRequestInfo() {
var classList = document.getElementById("demo-server-info").classList;
classList.toggle("show");
if (classList.contains('show')) {
document.getElementById("request-info-toggler").innerHTML = "&downarrow; Hide"
} else {
document.getElementById("request-info-toggler").innerHTML = "&uparrow; Show"
}
}
</script>
<div id="demo-server-info"> <div id="demo-server-info">
<div>Server Requests</div> <div>Server Requests <a id="request-info-toggler" onclick="toggleRequestInfo()">&uparrow; Show</a></div>
<div id="demo-activity" class="row"> <div id="demo-activity" class="row">
<div class="3 col" > <div class="3 col" >
<ol id="demo-timeline" reversed> <ol id="demo-timeline" reversed>

12
www/_includes/layout.njk
View File

@ -35,21 +35,15 @@
<a href="/docs">docs</a> <a href="/docs">docs</a>
</div> </div>
<div class="1 col"> <div class="1 col">
<a href="/attributes">attributes</a> <a href="/reference">reference</a>
</div> </div>
<div class="1 col"> <div class="1 col">
<a href="/events">events</a> <a href="/examples">examples</a>
</div>
<div class="1 col">
<a href="/headers">headers</a>
</div>
<div class="1 col">
<a href="/patterns">patterns</a>
</div> </div>
<div class="6 col"></div>
<div class="1 col"> <div class="1 col">
<a href="https://github.com/bigskysoftware/kutty">github</a> <a href="https://github.com/bigskysoftware/kutty">github</a>
</div> </div>
<div class="6 col"></div>
</div> </div>
</div> </div>
</div> </div>

29
www/attributes.md
View File

@ -1,29 +0,0 @@
---
layout: layout.njk
title: </> kutty - Attributes
---
## Attribute Reference
| Attribute | Description |
|-----------|-------------|
| [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests
| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element
| [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request
| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL
| [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to
| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL
| [kt-include](/attributes/kt-include) | include additional data in AJAX requests
| [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request
| [kt-patch](/attributes/kt-patch) | TODO - Description
| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request
| [kt-post](/attributes/kt-post) | TODO - Description
| kt-prompt | TODO - Description
| kt-push-url | TODO - Description
| [kt-put](/attributes/kt-put) | TODO - Description
| kt-select | TODO - Description
| kt-sse-src | TODO - Description
| [kt-swap](/attributes/kt-swap) | TODO - Description
| kt-swap-oob | TODO - Description
| kt-target | TODO - Description
| kt-trigger | TODO - Description

79
www/attributes/kt-indicator.md
View File

@ -1,22 +1,83 @@
--- ---
layout: layout.njk layout: layout.njk
title: </> kutty - kt-include title: </> kutty - kt-indicator
--- ---
## `kt-include` ## `kt-indicator`
The `kt-include` attribute allows you to include additional data beyond the [standard](/docs/#forms) The `kt-indicator` attribute allows you to specify the element that will have the `kutty-request` class
values. added to it for the duration of the request. This can be used to show spinners or progress indicators
while the request is in flight.
The value of this attribute is a CSS query selector of additional elements to include the values of. The value of this attribute is a CSS query selector of the element or elements to apply the class to.
Here is an example with a spinner adjacent to the button:
```html ```html
<button kt-post="/hidden" kt-include="#hidden-value"> <div>
Get Some HTML, Including The Value of #hidden-value <button kt-post="/example" kt-indicator="#spinner">
Post It!
</button>
<img id="spinner" class="kutty-indicator" src="/img/bars.svg"/>
</div>
```
When a request is in flight, this will cause the `kutty-request` class to be added to the `#spinner`
image. The image also has the `kutty-indicator` class on it, which defines an opacity transition
that will show the spinner:
```css
.kutty-indicator{
opacity:0;
transition: opacity 500ms ease-in;
}
.kutty-request .kutty-indicator{
opacity:1
}
.kutty-request.kutty-indicator{
opacity:1
}
```
If you would prefer a different effect for showing the spinner you could define and use your own indicator
CSS. Here is an example that uses `display` rather than opacity:
```css
.kutty-indicator{
display:none;
}
.kutty-request .my-indicator{
display:inline;
}
.kutty-request.my-indicator{
display:inline;
}
```
Note that the target of the `ic-indicator` selector need not be the exact element that you
want to show: it can be any element in the parent hierarchy of the indicator.
Finally, note that the `kutty-request` class by default is added to the element causing
the request, so you can place an indicator inside of that element and not need to explictly
call it out with the `ic-indicator` attribute:
```html
<button kt-post="/example">
Post It!
<img class="kutty-indicator" src="/img/bars.svg"/>
</button> </button>
``` ```
In addition to the normal variables included with this request, the value of the element with the ### Demo
id `hidden-value` will be included.
This simulates what a spinner might look like in that situation:
<button class="btn" kt-classes="toggle kutty-request:3s">
Post It!
<img class="kutty-indicator" src="/img/bars.svg"/>
</button>
### Notes ### Notes
* In the absence of an explicit indicator, the `kutty-request` class will be added to the element triggering the
request

31
www/events.md
View File

@ -1,31 +0,0 @@
---
layout: layout.njk
title: </> kutty - Events
---
## Event Reference
| Event | Description |
|-------|-------------|
| afterOnLoad.kutty | TODO - Description
| afterSettle.kutty | TODO - Description
| afterSettle.kutty | TODO - Description
| afterSwap.kutty | TODO - Description
| beforeOnLoad.kutty | TODO - Description
| beforeRequest.kutty | TODO - Description
| beforeSwap.kutty | TODO - Description
| historyCacheMiss.kutty | TODO - Description
| historyCacheMissLoad.kutty | TODO - Description
| historyRestore.kutty | TODO - Description
| historyUpdate.kutty | TODO - Description
| initSSE.kutty | TODO - Description
| load.kutty | TODO - Description
| noSSESourceError.kutty | TODO - Description
| onLoadError.kutty | TODO - Description
| oobErrorNoTarget.kutty | TODO - Description
| prompt.kutty | TODO - Description
| responseError.kutty | TODO - Description
| sendError.kutty | TODO - Description
| sseError.kutty | TODO - Description
| swapError.kutty | TODO - Description
| values.kutty | TODO - Description

2
www/patterns.md → www/examples.md
View File

@ -11,4 +11,4 @@ You can copy and paste them and then adjust them for your needs.
| Pattern | Description | | Pattern | Description |
|-----------|-------------| |-----------|-------------|
| [Click To Edit](/patterns/click-to-edit) | Demonstrates inline editing of a data object | [Click To Edit](/examples/click-to-edit) | Demonstrates inline editing of a data object

0
www/patterns/click-to-edit.md → www/examples/click-to-edit.md
View File

26
www/headers.md
View File

@ -1,26 +0,0 @@
---
layout: layout.njk
title: </> kutty - Headers
---
## HTTP Headers
### Request Headers
| Header | Description |
|-------|-------------|
| X-HTTP-Method-Override | TODO - Description
| X-KT-Request | TODO - Description
| X-KT-Trigger-Id | TODO - Description
| X-KT-Trigger-Name | TODO - Description
| X-KT-Target-Id | TODO - Description
| X-KT-Current-URL | TODO - Description
| X-KT-Prompt | TODO - Description
| X-KT-Event-Target | TODO - Description
| X-KT-Active-Element | TODO - Description
| X-KT-Active-Element-Value | TODO - Description
### Response Headers
| Header | Description |
|-------|-------------|
| X-KT-Trigger | TODO - Description
| X-KT-Push | TODO - Description

52
www/img/bars.svg Normal file
View File

@ -0,0 +1,52 @@
<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
<rect y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="30" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="60" width="15" height="140" rx="6">
<animate attributeName="height"
begin="0s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="90" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="120" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

16
www/js/kutty.js
View File

@ -122,6 +122,11 @@ var kutty = kutty || (function () {
return trigger.split(/\s+/); return trigger.split(/\s+/);
} }
function addRule(rule) {
var sheet = getDocument().styleSheets[0];
sheet.insertRule(rule, sheet.cssRules.length);
}
//==================================================================== //====================================================================
// Node processing // Node processing
//==================================================================== //====================================================================
@ -642,7 +647,7 @@ var kutty = kutty || (function () {
// History Support // History Support
//==================================================================== //====================================================================
function getHistoryElement() { function getHistoryElement() {
var historyElt = getDocument().querySelector('.kt-history-elt'); var historyElt = getDocument().querySelector('.kutty-history-elt');
return historyElt || getDocument().body; return historyElt || getDocument().body;
} }
@ -697,7 +702,7 @@ var kutty = kutty || (function () {
triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch});
if (this.status >= 200 && this.status < 400) { if (this.status >= 200 && this.status < 400) {
var fragment = makeFragment(this.response); var fragment = makeFragment(this.response);
fragment = fragment.querySelector('.kt-history-elt') || fragment; fragment = fragment.querySelector('.kutty-history-elt') || fragment;
settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); settleImmediately(swapInnerHTML(getHistoryElement(), fragment));
} }
}; };
@ -736,7 +741,7 @@ var kutty = kutty || (function () {
indicators = [elt]; indicators = [elt];
} }
forEach(indicators, function(ic) { forEach(indicators, function(ic) {
ic.classList[action].call(ic.classList, "kutty-show-indicator"); ic.classList[action].call(ic.classList, "kutty-request");
}); });
} }
@ -1055,6 +1060,11 @@ var kutty = kutty || (function () {
} }
} }
// insert kutty-indicator css rules
addRule(".kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}");
addRule(".kutty-request .kutty-indicator{opacity:1}");
addRule(".kutty-request.kutty-indicator{opacity:1}");
// initialize the document // initialize the document
ready(function () { ready(function () {
var body = getDocument().body; var body = getDocument().body;

89
www/reference.md Normal file
View File

@ -0,0 +1,89 @@
---
layout: layout.njk
title: </> kutty - Attributes
---
## Attribute Reference
| Attribute | Description |
|-----------|-------------|
| [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests
| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element
| [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request
| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL
| [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to
| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL
| [kt-include](/attributes/kt-include) | include additional data in AJAX requests
| [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request
| [kt-patch](/attributes/kt-patch) | TODO - Description
| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request
| [kt-post](/attributes/kt-post) | TODO - Description
| kt-prompt | TODO - Description
| kt-push-url | TODO - Description
| [kt-put](/attributes/kt-put) | TODO - Description
| kt-select | TODO - Description
| kt-sse-src | TODO - Description
| [kt-swap](/attributes/kt-swap) | TODO - Description
| kt-swap-oob | TODO - Description
| kt-target | TODO - Description
| kt-trigger | TODO - Description
## CSS Class Reference
| Attribute | Description |
|-----------|-------------|
| kutty-request | TODO
| kutty-indicator | TODO
| kutty-history-elt | TODO
| kutty-swapping | TODO
| kutty-settling | TODO
## HTTP Header Reference
### Request Headers
| Header | Description |
|-------|-------------|
| X-HTTP-Method-Override | TODO - Description
| X-KT-Request | TODO - Description
| X-KT-Trigger-Id | TODO - Description
| X-KT-Trigger-Name | TODO - Description
| X-KT-Target-Id | TODO - Description
| X-KT-Current-URL | TODO - Description
| X-KT-Prompt | TODO - Description
| X-KT-Event-Target | TODO - Description
| X-KT-Active-Element | TODO - Description
| X-KT-Active-Element-Value | TODO - Description
### Response Headers
| Header | Description |
|-------|-------------|
| X-KT-Trigger | TODO - Description
| X-KT-Push | TODO - Description
## Event Reference
| Event | Description |
|-------|-------------|
| afterOnLoad.kutty | TODO - Description
| afterSettle.kutty | TODO - Description
| afterSettle.kutty | TODO - Description
| afterSwap.kutty | TODO - Description
| beforeOnLoad.kutty | TODO - Description
| beforeRequest.kutty | TODO - Description
| beforeSwap.kutty | TODO - Description
| historyCacheMiss.kutty | TODO - Description
| historyCacheMissLoad.kutty | TODO - Description
| historyRestore.kutty | TODO - Description
| historyUpdate.kutty | TODO - Description
| initSSE.kutty | TODO - Description
| load.kutty | TODO - Description
| noSSESourceError.kutty | TODO - Description
| onLoadError.kutty | TODO - Description
| oobErrorNoTarget.kutty | TODO - Description
| prompt.kutty | TODO - Description
| responseError.kutty | TODO - Description
| sendError.kutty | TODO - Description
| sseError.kutty | TODO - Description
| swapError.kutty | TODO - Description
| values.kutty | TODO - Description