mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 07:21:05 +00:00
remove attributes in favor of a single kt-classes attribute w/ some syntax
This commit is contained in:
carson
parent
2127c833f1
commit
dba9904af8
74
src/kutty.js
74
src/kutty.js
@ -118,6 +118,10 @@ var kutty = kutty || (function () {
|
||||
return arr1.concat(arr2);
|
||||
}
|
||||
|
||||
function splitOnWhitespace(trigger) {
|
||||
return trigger.split(/\s+/);
|
||||
}
|
||||
|
||||
//====================================================================
|
||||
// Node processing
|
||||
//====================================================================
|
||||
@ -303,22 +307,54 @@ var kutty = kutty || (function () {
|
||||
}
|
||||
}
|
||||
|
||||
function processClassList(elt, classList, operation) {
|
||||
var values = classList.split(",");
|
||||
forEach(values, function(value){
|
||||
var cssClass = "";
|
||||
var delay = 50;
|
||||
var trimmedValue = value.trim();
|
||||
if (trimmedValue.indexOf(":") > 0) {
|
||||
var split = trimmedValue.split(':');
|
||||
cssClass = split[0];
|
||||
delay = parseInterval(split[1]);
|
||||
function parseClassOperation(trimmedValue) {
|
||||
var split = splitOnWhitespace(trimmedValue);
|
||||
if (split.length > 1) {
|
||||
var operation = split[0];
|
||||
var classDef = split[1].trim();
|
||||
var cssClass;
|
||||
var delay;
|
||||
if (classDef.indexOf(":") > 0) {
|
||||
var splitCssClass = classDef.split(':');
|
||||
cssClass = splitCssClass[0];
|
||||
delay = parseInterval(splitCssClass[1]);
|
||||
} else {
|
||||
cssClass = trimmedValue;
|
||||
cssClass = classDef;
|
||||
delay = 100;
|
||||
}
|
||||
setTimeout(function () {
|
||||
elt.classList[operation].call(elt.classList, cssClass);
|
||||
}, delay);
|
||||
return {
|
||||
operation:operation,
|
||||
cssClass:cssClass,
|
||||
delay:delay
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function processClassList(elt, classList, operation) {
|
||||
forEach(classList.split("&"), function (run) {
|
||||
var currentRunTime = 0;
|
||||
forEach(run.split(","), function(value){
|
||||
var cssClass = "";
|
||||
var trimmedValue = value.trim();
|
||||
var classOperation = parseClassOperation(trimmedValue);
|
||||
if (classOperation) {
|
||||
if (classOperation.operation === "toggle") {
|
||||
setTimeout(function () {
|
||||
setInterval(function () {
|
||||
elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
|
||||
}, classOperation.delay);
|
||||
}, currentRunTime);
|
||||
currentRunTime = currentRunTime + classOperation.delay;
|
||||
} else {
|
||||
currentRunTime = currentRunTime + classOperation.delay;
|
||||
setTimeout(function () {
|
||||
elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
|
||||
}, currentRunTime);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -326,7 +362,7 @@ var kutty = kutty || (function () {
|
||||
var trigger = getTrigger(elt);
|
||||
var nodeData = getInternalData(elt);
|
||||
if (trigger.trim().indexOf("every ") === 0) {
|
||||
var args = trigger.split(/\s+/);
|
||||
var args = splitOnWhitespace(trigger);
|
||||
var intervalStr = args[1];
|
||||
if (intervalStr) {
|
||||
var interval = parseInterval(intervalStr);
|
||||
@ -517,13 +553,9 @@ var kutty = kutty || (function () {
|
||||
if (sseSrc) {
|
||||
initSSESource(elt, sseSrc);
|
||||
}
|
||||
var addClass = getAttributeValue(elt, 'kt-add-class');
|
||||
var addClass = getAttributeValue(elt, 'kt-classes');
|
||||
if (addClass) {
|
||||
processClassList(elt, addClass, "add");
|
||||
}
|
||||
var removeClass = getAttributeValue(elt, 'kt-remove-class');
|
||||
if (removeClass) {
|
||||
processClassList(elt, removeClass, "remove");
|
||||
processClassList(elt, addClass);
|
||||
}
|
||||
}
|
||||
if (elt.children) { // IE
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
describe("kutty class modification attributes", function(){
|
||||
describe("kutty classes modification attribute", function(){
|
||||
beforeEach(function() {
|
||||
this.server = makeServer();
|
||||
clearWorkArea();
|
||||
@ -10,7 +10,7 @@ describe("kutty class modification attributes", function(){
|
||||
|
||||
it('adds classes properly', function(done)
|
||||
{
|
||||
var div = make('<div kt-add-class="c1">Click Me!</div>')
|
||||
var div = make('<div kt-classes="add c1">Click Me!</div>')
|
||||
should.equal(div.classList.length, 0);
|
||||
setTimeout(function(){
|
||||
should.equal(div.classList.contains("c1"), true);
|
||||
@ -20,7 +20,7 @@ describe("kutty class modification attributes", function(){
|
||||
|
||||
it('removes classes properly', function(done)
|
||||
{
|
||||
var div = make('<div class="foo bar" kt-remove-class="bar">Click Me!</div>')
|
||||
var div = make('<div class="foo bar" kt-classes="remove bar">Click Me!</div>')
|
||||
should.equal(div.classList.contains("foo"), true);
|
||||
should.equal(div.classList.contains("bar"), true);
|
||||
setTimeout(function(){
|
||||
|
||||
@ -7,8 +7,8 @@ title: </> kutty - Attributes
|
||||
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| kt-add-class | TODO - Description
|
||||
| kt-boost | TODO - Description
|
||||
| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element
|
||||
| kt-confirm | TODO - Description
|
||||
| kt-delete | TODO - Description
|
||||
| kt-error-url | TODO - Description
|
||||
@ -22,11 +22,10 @@ title: </> kutty - Attributes
|
||||
| kt-prompt | TODO - Description
|
||||
| kt-push-url | TODO - Description
|
||||
| kt-put | TODO - Description
|
||||
| kt-remove-class | TODO - Description
|
||||
| kt-select | TODO - Description
|
||||
| kt-settle-delay | TODO - Description
|
||||
| kt-sse-src | TODO - Description
|
||||
| kt-swap | TODO - Description
|
||||
| [kt-swap](/attributes/kt-swap) | TODO - Description
|
||||
| kt-swap-delay | TODO - Description
|
||||
| kt-swap-oob | TODO - Description
|
||||
| kt-target | TODO - Description
|
||||
|
||||
34
www/attributes/kt-classes.md
Normal file
34
www/attributes/kt-classes.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-classes
|
||||
---
|
||||
|
||||
## `kt-classes`
|
||||
|
||||
The `kt-classes` attribute allows you to specify CSS classes that will be swapped onto the element that
|
||||
the attribute is on. This allows you to apply [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
|
||||
to your HTML without resorting to javascript.
|
||||
|
||||
A `kt-classes` attribute value consists of "runs", which are separated by an `&` character. All
|
||||
class operations within a given run will be applied sequentially, with the delay specified.
|
||||
|
||||
Within a run, a `,` character separates distinct class operations.
|
||||
|
||||
A class operation is an operation name `add`, `remove`, or `toggle`, followed by a CSS class name,
|
||||
optionally followed by a colon `:` and a time delay.
|
||||
|
||||
Here are some examples:
|
||||
|
||||
```html
|
||||
<div kt-classes="add foo"/> <!-- adds the class "foo" after 100ms -->
|
||||
<div kt-classes="remove bar:1s"/> <!-- removes the class "bar" after 1s -->
|
||||
<div kt-classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s
|
||||
then adds the class "foo" 1s after that -->
|
||||
<div kt-classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds
|
||||
class "foo" after 1s -->
|
||||
<div kt-classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->
|
||||
```
|
||||
|
||||
### Notes
|
||||
|
||||
* The default delay if none is specified is 100ms
|
||||
Loading…
x
Reference in New Issue
Block a user