erickzhao/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TouchBar Example</title>
</head>
<body>
  <h1>TouchBar Example</h1>
  <p>Check out your touch bar!</p>
</body>
</html>

## main.js
// Create TouchBar layouts for native macOS applications
//
// For more info, see:
// https://electronjs.org/docs/api/touch-bar

const { app, BrowserWindow, TouchBar } = require('electron')
const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({ height: 600, width: 600, contextIsolation: true })
  mainWindow.loadFile('index.html')

  let counter = 1;
  const button = new TouchBar.TouchBarButton({
    label: `${counter}`,
    click: () => {
      counter += 1;
      button.label = `${counter}`;
    }
  })

  let counter2 = 2;
  const button2 = new TouchBar.TouchBarButton({
    label: `${counter2}`,
    click: () => {
      counter2 += 1;
      button2.label = `${counter2}`;
    }
  })

  const touchBar = new TouchBar({
    items: [
      button2,
      new TouchBar.TouchBarPopover({
        label: 'Pop',
        items: new TouchBar({items: [
          button,
        ]})
      }),
      new TouchBar.TouchBarPopover({
        label: 'Pop2',
        items: new TouchBar({items: [
          button,
          button2
        ]})
      })
    ]
  })

  mainWindow.setTouchBar(touchBar)

})

## preload.js
// Empty

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>TouchBar Example</title>
	</head>
	<body>
	<h1>TouchBar Example</h1>
	<p>Check out your touch bar!</p>
	</body>
	</html>
	// Create TouchBar layouts for native macOS applications
	//
	// For more info, see:
	// https://electronjs.org/docs/api/touch-bar

	const { app, BrowserWindow, TouchBar } = require('electron')
	const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

	app.whenReady().then(() => {
	const mainWindow = new BrowserWindow({ height: 600, width: 600, contextIsolation: true })
	mainWindow.loadFile('index.html')

	let counter = 1;
	const button = new TouchBar.TouchBarButton({
	label: `${counter}`,
	click: () => {
	counter += 1;
	button.label = `${counter}`;
	}
	})

	let counter2 = 2;
	const button2 = new TouchBar.TouchBarButton({
	label: `${counter2}`,
	click: () => {
	counter2 += 1;
	button2.label = `${counter2}`;
	}
	})

	const touchBar = new TouchBar({
	items: [
	button2,
	new TouchBar.TouchBarPopover({
	label: 'Pop',
	items: new TouchBar({items: [
	button,
	]})
	}),
	new TouchBar.TouchBarPopover({
	label: 'Pop2',
	items: new TouchBar({items: [
	button,
	button2
	]})
	})
	]
	})

	mainWindow.setTouchBar(touchBar)

	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.