9e487b03e5
* also apply live-preview if an unsaved style was disabled * use box-shadow instead of outline for focus everywhere * allow focus outline on click in text/search input or textarea * search inputs should use the same style as text inputs * also use box-shadow focus on delete buttons * remove URLSearchParams workaround, not needed since Chrome 55 * use `once` in addEventListener, available since Chrome 55 * update USO bug workarounds, remove obsolete ones * ping/pong to fix openURL with `message` in FF * use unprefixed CSS filter, available since Chrome 53 * use unprefixed CSS user-select, available since Chrome 54 * focus tweaks * also use text query in inline search for Stylus category * use event.key, available since Chrome 51 Co-authored-by: narcolepticinsomniac
74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
/* global messageBox editor $ prefs */
|
|
/* exported createLivePreview */
|
|
'use strict';
|
|
|
|
function createLivePreview(preprocess) {
|
|
let data;
|
|
let previewer;
|
|
let enabled = prefs.get('editor.livePreview');
|
|
const label = $('#preview-label');
|
|
const errorContainer = $('#preview-errors');
|
|
|
|
prefs.subscribe(['editor.livePreview'], (key, value) => {
|
|
if (value && data && data.id && (data.enabled || editor.dirty.has('enabled'))) {
|
|
previewer = createPreviewer();
|
|
previewer.update(data);
|
|
}
|
|
if (!value && previewer) {
|
|
previewer.disconnect();
|
|
previewer = null;
|
|
}
|
|
enabled = value;
|
|
});
|
|
return {update, show};
|
|
|
|
function show(state) {
|
|
label.classList.toggle('hidden', !state);
|
|
}
|
|
|
|
function update(_data) {
|
|
data = _data;
|
|
if (!previewer) {
|
|
if (!data.id || !data.enabled || !enabled) {
|
|
return;
|
|
}
|
|
previewer = createPreviewer();
|
|
}
|
|
previewer.update(data);
|
|
}
|
|
|
|
function createPreviewer() {
|
|
const port = chrome.runtime.connect({
|
|
name: 'livePreview'
|
|
});
|
|
port.onDisconnect.addListener(err => {
|
|
throw err;
|
|
});
|
|
return {update, disconnect};
|
|
|
|
function update(data) {
|
|
Promise.resolve()
|
|
.then(() => preprocess ? preprocess(data) : data)
|
|
.then(data => port.postMessage(data))
|
|
.then(
|
|
() => errorContainer.classList.add('hidden'),
|
|
err => {
|
|
if (Array.isArray(err)) {
|
|
err = err.join('\n');
|
|
} else if (err && err.index !== undefined) {
|
|
// FIXME: this would fail if editors[0].getValue() !== data.sourceCode
|
|
const pos = editor.getEditors()[0].posFromIndex(err.index);
|
|
err.message = `${pos.line}:${pos.ch} ${err.message || String(err)}`;
|
|
}
|
|
errorContainer.classList.remove('hidden');
|
|
errorContainer.onclick = () => messageBox.alert(err.message || String(err), 'pre');
|
|
}
|
|
);
|
|
}
|
|
|
|
function disconnect() {
|
|
port.disconnect();
|
|
}
|
|
}
|
|
}
|