|
|
@@ -6,39 +6,114 @@ Process: [Main](../tutorial/quick-start.md#main-process)
|
|
|
|
|
|
### `new TouchBar(items)`
|
|
|
|
|
|
-* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider)[]
|
|
|
+* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider | TouchBarSpacer)[]
|
|
|
|
|
|
-Creates a new touch bar. Note any changes to the TouchBar instance
|
|
|
-will not affect the rendered TouchBar. To affect the rendered
|
|
|
-TouchBar you **must** use either methods on the TouchBar or methods
|
|
|
-on the TouchBar* items
|
|
|
-
|
|
|
-### Instance Methods
|
|
|
-
|
|
|
-The `menu` object has the following instance methods:
|
|
|
-
|
|
|
-#### `touchBar.destroy()`
|
|
|
-
|
|
|
-Immediately destroys the TouchBar instance and will reset the rendered
|
|
|
-touch bar.
|
|
|
+Creates a new touch bar with the specified items. Use
|
|
|
+`BrowserWindow.setTouchBar` to add the `TouchBar` to a window.
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
-The `TouchBar` class is only available in the main process, it is not currently possible to use in the renderer process **even** through the remote module.
|
|
|
+The `TouchBar` class is only available in the main process, it is not currently
|
|
|
+possible to use in the renderer process **even** through the remote module.
|
|
|
|
|
|
-### Main process
|
|
|
-
|
|
|
-An example of creating a touch bar in the main process:
|
|
|
+Below is an example of a simple slot machine touch bar game with a button
|
|
|
+and some labels.
|
|
|
|
|
|
```javascript
|
|
|
-const {TouchBar, TouchBarButton} = require('electron')
|
|
|
+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!'
|
|
|
+ } else if (uniqueValues === 2) {
|
|
|
+ // 2 values are the same
|
|
|
+ result.label = '😍 Winner!'
|
|
|
+ } else {
|
|
|
+ // No values are the same
|
|
|
+ result.label = '🙁 Spin Again'
|
|
|
+ }
|
|
|
+ spinning = false
|
|
|
+}
|
|
|
|
|
|
const touchBar = new TouchBar([
|
|
|
- new TouchBarButton({
|
|
|
- label: 'Example Button',
|
|
|
- click: () => console.log('I was clicked')
|
|
|
- })
|
|
|
+ spin,
|
|
|
+ new TouchBarSpacer({size: 'large'}),
|
|
|
+ reel1,
|
|
|
+ reel2,
|
|
|
+ reel3,
|
|
|
+ new TouchBarSpacer({size: 'large'}),
|
|
|
+ result
|
|
|
])
|
|
|
|
|
|
-mainWindow.setTouchBar(touchBar)
|
|
|
+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)
|
|
|
+})
|
|
|
```
|
Kevin Sawicki