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-viewimport 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(),
blurredBackground: false,
onlyShowCloseButton: false,
title: 'My ui',
hideTitleBar: false,
shouldKeepAround: true,
resizable: false,
frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
'webView:didFinishLoadForFrame:': function (webView, webFrame) {
context.document.showMessage('UI loaded!')
WebUI.clean()
}
},
uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
onPanelClose: function () {
// Stuff
// return `false` to prevent closing the panel
}
}
const webUI = new WebUI(context, require('./my-screen.html'), options)const res = webUI.eval('someJSFunction()')import { isWebviewPresent, sendToWebview } from 'sketch-module-web-view/remote'
if (isWebviewPresent('unique.id')) {
sendToWebview('unique.id', '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.
If your plugin is using a webview, chances are that you will need to inspect it at some point.
To do so, you need to add the preference:
defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool trueThen you can simply right-click on your webview and click on Inspect. The inspector should show up.