Lorca

https://github.com/zserge/lorca
Admin
Lorca is a small Go library for building modern HTML5 desktop applications by leveraging an existing...
Tokens:753
Snippets:3
Trust Score:9.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize UI, Bind Go Function, Evaluate JavaScript in Go

Source: https://github.com/zserge/lorca/blob/master/README.md

This Go code snippet demonstrates how to initialize a Lorca UI, bind a Go function ('add') to be callable from JavaScript, evaluate a JavaScript expression ('Math.random()') and get its float result, call the bound Go function from JavaScript ('add(2, 3)') and get its integer result, and finally wait for the browser window to close. It requires the 'lorca' library.

```go
ui, _ := lorca.New("", "", 480, 320)
defer ui.Close()

// Bind Go function to be available in JS. Go function may be long-running and
// blocking - in JS it's represented with a Promise.
ui.Bind("add", func(a, b int) int { return a + b })

// Call JS function from Go. Functions may be asynchronous, i.e. return promises
n := ui.Eval(`Math.random()`).Float()
fmt.Println(n)

// Call JS that calls Go and so on and so on...
m := ui.Eval(`add(2, 3)`).Int()
fmt.Println(m)

// Wait for the browser window to be closed
<-ui.Done()
```

--------------------------------

### HTML/CSS for Counter UI

Source: https://github.com/zserge/lorca/blob/master/examples/counter/www/index.html

Provides the structure and styling for the counter application's user interface. It includes elements for displaying the count and buttons for incrementing and decrementing.

```html
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f1c40f; font-family: 'Helvetika Neue', Arial, sans-serif; font-size: 28px; }
.counter-container { display: flex; flex-direction: column; align-items: center; }
.counter { text-transform: uppercase; color: #fff; font-weight: bold; font-size: 3rem; }
.btn-row { display: flex; align-items: center; margin: 1rem; }
.btn { cursor: pointer; min-width: 4em; padding: 1em; border-radius: 5px; text-align: center; margin: 0 1rem; box-shadow: 0 6px #8b5e00; color: white; background-color: #E4B702; position: relative; font-weight: bold; }
.btn:hover { box-shadow: 0 4px #8b5e00; top: 2px; }
.btn:active{ box-shadow: 0 1px #8b5e00; top: 5px; }
```

--------------------------------

### JavaScript for Lorca Counter Interaction

Source: https://github.com/zserge/lorca/blob/master/examples/counter/www/index.html

Handles user interactions (button clicks) and updates the UI by calling Go functions through the Lorca window object. It fetches the counter value and updates the display asynchronously.

```javascript
const counter = document.querySelector('.counter');
const btnIncr = document.querySelector('.btn-incr');
const btnDecr = document.querySelector('.btn-decr');

// We use async/await because Go functions are asynchronous
const render = async () => {
  counter.innerText = `Count: ${await window.counterValue()}`;
};

btnIncr.addEventListener('click', async () => {
  await counterAdd(1); // Call Go function
  render();
});

btnDecr.addEventListener('click', async () => {
  await counterAdd(-1); // Call Go function
  render();
});

render();
```
Tokens:
Raw