A Sketch module for creating a complex UI with a webview.
To use this module in your Sketch plugin you need a bundler utility like skpm and add it as a dependency:
npm i -S sketch-module-web-view
import WebUI from 'sketch-module-web-view'
const options = {
identifier: 'unique.id', // to reuse the UI
x: 0,
y: 0,
width: 240,
height: 180,
background: NSColor.whiteColor(),
onlyShowCloseButton: false,
title: 'My ui',
hideTitleBar: false,
shouldKeepAround: true,
frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
'webView:didFinishLoadForFrame:': function (webView, webFrame) {
context.document.showMessage('UI loaded!')
WebUI.clear()
}
},
uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
onPanelClose: function () {
// Stuff
}
}
const webUI = new WebUI(context, 'path-in-resource-folder.html', options)
const res = webUI.eval('someJSFunction()')
On the plugin:
options.handlers = {
nativeLog: function (s) {
context.document.showMessage(s)
}
}
On the webview:
import pluginCall from 'sketch-module-web-view/client'
pluginCall('nativeLog', 'Called from the webview')
options.handlers
, the webView:didChangeLocationWithinPageForFrame:
method of the frameLoadDelegate
will be overwritten.
pluginCall
, the window.location.hash will be modified.