39caa6ad23
Disclosure: I made it. Most devs don't have the new MacBook with Touch Bar, but would like to support it. I think it would be useful to point out how to easily develop and test Touch Bar usage in Electron apps. [ci skip]
140 lines
4 KiB
Markdown
140 lines
4 KiB
Markdown
## Class: TouchBar
|
||
|
||
> Create TouchBar layouts for native macOS applications
|
||
|
||
Process: [Main](../tutorial/quick-start.md#main-process)
|
||
|
||
### `new TouchBar(options)` _Experimental_
|
||
|
||
* `options` - Object
|
||
* `items` ([TouchBarButton](touch-bar-button.md) | [TouchBarColorPicker](touch-bar-color-picker.md) | [TouchBarGroup](touch-bar-group.md) | [TouchBarLabel](touch-bar-label.md) | [TouchBarPopover](touch-bar-popover.md) | [TouchBarScrubber](touch-bar-scrubber.md) | [TouchBarSegmentedControl](touch-bar-segmented-control.md) | [TouchBarSlider](touch-bar-slider.md) | [TouchBarSpacer](touch-bar-spacer.md))[]
|
||
* `escapeItem` ([TouchBarButton](touch-bar-button.md) | [TouchBarColorPicker](touch-bar-color-picker.md) | [TouchBarGroup](touch-bar-group.md) | [TouchBarLabel](touch-bar-label.md) | [TouchBarPopover](touch-bar-popover.md) | [TouchBarScrubber](touch-bar-scrubber.md) | [TouchBarSegmentedControl](touch-bar-segmented-control.md) | [TouchBarSlider](touch-bar-slider.md) | [TouchBarSpacer](touch-bar-spacer.md)) (optional)
|
||
|
||
Creates a new touch bar with the specified items. Use
|
||
`BrowserWindow.setTouchBar` to add the `TouchBar` to a window.
|
||
|
||
**Note:** The TouchBar API is currently experimental and may change or be
|
||
removed in future Electron releases.
|
||
|
||
**Tip:** If you don't have a MacBook with Touch Bar, you can use
|
||
[Touch Bar Simulator](https://github.com/sindresorhus/touch-bar-simulator)
|
||
to test Touch Bar usage in your app.
|
||
|
||
### Instance Properties
|
||
|
||
The following properties are available on instances of `TouchBar`:
|
||
|
||
#### `touchBar.escapeItem`
|
||
|
||
The `TouchBarItem` that will replace the "esc" button on the touch bar when set.
|
||
Setting to `null` restores the default "esc" button. Changing this value
|
||
immediately updates the escape item in the touch bar.
|
||
|
||
## Examples
|
||
|
||
Below is an example of a simple slot machine touch bar game with a button
|
||
and some labels.
|
||
|
||
```javascript
|
||
const {app, BrowserWindow, TouchBar} = require('electron')
|
||
|
||
const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar
|
||
|
||
let spinning = false
|
||
|
||
// Reel labels
|
||
const reel1 = new TouchBarLabel()
|
||
const reel2 = new TouchBarLabel()
|
||
const reel3 = new TouchBarLabel()
|
||
|
||
// Spin result label
|
||
const result = new TouchBarLabel()
|
||
|
||
// Spin button
|
||
const spin = new TouchBarButton({
|
||
label: '🎰 Spin',
|
||
backgroundColor: '#7851A9',
|
||
click: () => {
|
||
// Ignore clicks if already spinning
|
||
if (spinning) {
|
||
return
|
||
}
|
||
|
||
spinning = true
|
||
result.label = ''
|
||
|
||
let timeout = 10
|
||
const spinLength = 4 * 1000 // 4 seconds
|
||
const startTime = Date.now()
|
||
|
||
const spinReels = () => {
|
||
updateReels()
|
||
|
||
if ((Date.now() - startTime) >= spinLength) {
|
||
finishSpin()
|
||
} else {
|
||
// Slow down a bit on each spin
|
||
timeout *= 1.1
|
||
setTimeout(spinReels, timeout)
|
||
}
|
||
}
|
||
|
||
spinReels()
|
||
}
|
||
})
|
||
|
||
const getRandomValue = () => {
|
||
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
|
||
return values[Math.floor(Math.random() * values.length)]
|
||
}
|
||
|
||
const updateReels = () => {
|
||
reel1.label = getRandomValue()
|
||
reel2.label = getRandomValue()
|
||
reel3.label = getRandomValue()
|
||
}
|
||
|
||
const finishSpin = () => {
|
||
const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
|
||
if (uniqueValues === 1) {
|
||
// All 3 values are the same
|
||
result.label = '💰 Jackpot!'
|
||
result.textColor = '#FDFF00'
|
||
} else if (uniqueValues === 2) {
|
||
// 2 values are the same
|
||
result.label = '😍 Winner!'
|
||
result.textColor = '#FDFF00'
|
||
} else {
|
||
// No values are the same
|
||
result.label = '🙁 Spin Again'
|
||
result.textColor = null
|
||
}
|
||
spinning = false
|
||
}
|
||
|
||
const touchBar = new TouchBar([
|
||
spin,
|
||
new TouchBarSpacer({size: 'large'}),
|
||
reel1,
|
||
new TouchBarSpacer({size: 'small'}),
|
||
reel2,
|
||
new TouchBarSpacer({size: 'small'}),
|
||
reel3,
|
||
new TouchBarSpacer({size: 'large'}),
|
||
result
|
||
])
|
||
|
||
let window
|
||
|
||
app.once('ready', () => {
|
||
window = new BrowserWindow({
|
||
frame: false,
|
||
titleBarStyle: 'hidden-inset',
|
||
width: 200,
|
||
height: 200,
|
||
backgroundColor: '#000'
|
||
})
|
||
window.loadURL('about:blank')
|
||
window.setTouchBar(touchBar)
|
||
})
|
||
```
|