Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
keithamus committed Sep 16, 2024
1 parent bf4a873 commit 818eada
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 14 deletions.
24 changes: 10 additions & 14 deletions files/en-us/web/api/htmlbuttonelement/command/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ A string.
### Basic example

```html
<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">Toggle popover</button>
<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
Toggle popover
</button>

<div popover id="mypopover">
<button commandfor="mypopover" command="hide-popover">Hide popover</button>
Expand All @@ -40,28 +42,22 @@ toggleBtn.command = "show-popover";
### Custom example, using events

```html
<button commandfor="the-image" command="--rotate-left">
Rotate Left
</button>
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>

<button commandfor="the-image" command="--rotate-right">
Rotate Right
</button>
<button commandfor="the-image" command="--rotate-right">Rotate Right</button>

<img id="the-image" src="photo.jpg">
<img id="the-image" src="photo.jpg" />
```

```js
const image = document.getElementById("the-image");

image.addEventListener("command", (event) => {

if ( event.command == "--rotate-left" ) {
event.target.style.rotate = "-90deg"
} else if ( event.command == "--rotate-right" ) {
event.target.style.rotate = "90deg"
if (event.command == "--rotate-left") {
event.target.style.rotate = "-90deg";
} else if (event.command == "--rotate-right") {
event.target.style.rotate = "90deg";
}

});
```

Expand Down
1 change: 1 addition & 0 deletions files/en-us/web/api/invoker_commands_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ Historically creating these kinds of controls has required JavaScript event list
- [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor):
- : Turns a {{htmlelement("button")}} element into a control button, controlling the given interactive element; takes the ID of the element to control as its value.
- [`command`](/en-US/docs/Web/HTML/Element/button#command):

- : Specifies the action to be performed on an element being controlled by a control `<button>`, specified via the `commandfor` attribute. The possible values are:

- `"show-modal"`
Expand Down

0 comments on commit 818eada

Please sign in to comment.