opdavies/stimulus-esbuild-example
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Set a maximum count number for each counter

Browse source
This commit is contained in:
Oliver Davies 2024-03-29 00:50:46 +00:00
parent ed81ff1bfc
commit e8f4ff5c9d
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/js/controllers/count_controller.js
View file

@ -6,6 +6,7 @@ export default class extends Controller {
static values = { static values = {
canBeNegative: Boolean, canBeNegative: Boolean,
count: Number, count: Number,
maximumCountNumber: Number,
}; };
connect() { connect() {
@ -33,6 +34,12 @@ export default class extends Controller {
increment() { increment() {
console.log("count#increment"); console.log("count#increment");
const maximumCountNumber = this.maximumCountNumberValue || 10;
if (this.countValue === maximumCountNumber) {
return;
}
this.countValue = this.countValue + 1; this.countValue = this.countValue + 1;
} }
} }

11
public/index.html
View file

@ -4,7 +4,11 @@
<title>Stimulus esbuild example</title> <title>Stimulus esbuild example</title>
</head> </head>
<body> <body>
<div data-controller="count" data-count-can-be-negative-value="true"> <div
data-controller="count"
data-count-can-be-negative-value="true"
data-count-maximum-count-number-value="5"
>
<p>Count: <span data-count-target="result"></span></p> <p>Count: <span data-count-target="result"></span></p>
<div> <div>
@ -13,7 +17,10 @@
</div> </div>
</div> </div>
<div data-controller="count" data-count-can-be-negative-value="false"> <div
data-controller="count"
data-count-can-be-negative-value="false"
>
<p>Count: <span data-count-target="result"></span></p> <p>Count: <span data-count-target="result"></span></p>
<div> <div>