772 lines
22 KiB
JavaScript
772 lines
22 KiB
JavaScript
/* global dirtyReporter showToMozillaHelp
|
|
showSectionHelp toggleContextMenuDelete setGlobalProgress maximizeCodeHeight
|
|
CodeMirror nextPrevEditorOnKeydown showAppliesToHelp propertyToCss
|
|
regExpTester linter cssToProperty
|
|
*/
|
|
'use strict';
|
|
|
|
function createResizeGrip(cm) {
|
|
const wrapper = cm.display.wrapper;
|
|
wrapper.classList.add('resize-grip-enabled');
|
|
const resizeGrip = template.resizeGrip.cloneNode(true);
|
|
wrapper.appendChild(resizeGrip);
|
|
let lastClickTime = 0;
|
|
resizeGrip.onmousedown = event => {
|
|
if (event.button !== 0) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
if (Date.now() - lastClickTime < 500) {
|
|
lastClickTime = 0;
|
|
toggleSectionHeight(cm);
|
|
return;
|
|
}
|
|
lastClickTime = Date.now();
|
|
const minHeight = cm.defaultTextHeight() +
|
|
/* .CodeMirror-lines padding */
|
|
cm.display.lineDiv.offsetParent.offsetTop +
|
|
/* borders */
|
|
wrapper.offsetHeight - wrapper.clientHeight;
|
|
wrapper.style.pointerEvents = 'none';
|
|
document.body.style.cursor = 's-resize';
|
|
document.addEventListener('mousemove', resize);
|
|
document.addEventListener('mouseup', resizeStop);
|
|
|
|
function resize(e) {
|
|
const cmPageY = wrapper.getBoundingClientRect().top + window.scrollY;
|
|
const height = Math.max(minHeight, e.pageY - cmPageY);
|
|
if (height !== wrapper.clientHeight) {
|
|
cm.setSize(null, height);
|
|
}
|
|
}
|
|
|
|
function resizeStop() {
|
|
document.removeEventListener('mouseup', resizeStop);
|
|
document.removeEventListener('mousemove', resize);
|
|
wrapper.style.pointerEvents = '';
|
|
document.body.style.cursor = '';
|
|
}
|
|
};
|
|
|
|
function toggleSectionHeight(cm) {
|
|
if (cm.state.toggleHeightSaved) {
|
|
// restore previous size
|
|
cm.setSize(null, cm.state.toggleHeightSaved);
|
|
cm.state.toggleHeightSaved = 0;
|
|
} else {
|
|
// maximize
|
|
const wrapper = cm.display.wrapper;
|
|
const allBounds = $('#sections').getBoundingClientRect();
|
|
const pageExtrasHeight = allBounds.top + window.scrollY +
|
|
parseFloat(getComputedStyle($('#sections')).paddingBottom);
|
|
const sectionExtrasHeight = cm.getSection().clientHeight - wrapper.offsetHeight;
|
|
cm.state.toggleHeightSaved = wrapper.clientHeight;
|
|
cm.setSize(null, window.innerHeight - sectionExtrasHeight - pageExtrasHeight);
|
|
const bounds = cm.getSection().getBoundingClientRect();
|
|
if (bounds.top < 0 || bounds.bottom > window.innerHeight) {
|
|
window.scrollBy(0, bounds.top);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function createSectionsEditor(style) {
|
|
let INC_ID = 0; // an increment id that is used by various object to track the order
|
|
const dirty = dirtyReporter();
|
|
dirty.onChange(() => updateTitle);
|
|
|
|
const container = $('#sections');
|
|
const sections = [];
|
|
|
|
const nameEl = $('#name');
|
|
nameEl.addEventListener('change', () => {
|
|
dirty.modify('name', style.name, nameEl.value);
|
|
style.name = nameEl.value;
|
|
});
|
|
|
|
const enabledEl = $('#enabled');
|
|
enabledEl.addEventListener('change', () => {
|
|
dirty.modify('enabled', style.enabled, enabledEl.checked);
|
|
style.enabled = enabledEl.checked;
|
|
});
|
|
|
|
$('#to-mozilla').addEventListener('click', showMozillaFormat);
|
|
$('#to-mozilla-help').addEventListener('click', showToMozillaHelp);
|
|
$('#from-mozilla').addEventListener('click', fromMozillaFormat);
|
|
$('#save-button').addEventListener('click', saveStyle);
|
|
$('#sections-help').addEventListener('click', showSectionHelp);
|
|
|
|
document.addEventListener('wheel', scrollEntirePageOnCtrlShift);
|
|
|
|
if (!FIREFOX) {
|
|
$$([
|
|
'input:not([type])',
|
|
'input[type="text"]',
|
|
'input[type="search"]',
|
|
'input[type="number"]',
|
|
].join(','))
|
|
.forEach(e => e.addEventListener('mousedown', toggleContextMenuDelete));
|
|
}
|
|
|
|
let sectionOrder = '';
|
|
initSection({
|
|
sections: style.sections.slice(),
|
|
done:() => {
|
|
// FIXME: implement this with CSS?
|
|
// https://github.com/openstyles/stylus/commit/2895ce11e271788df0e4f7314b3b981fde086574
|
|
// maximizeCodeHeight(sections[sections.length - 1], true);
|
|
dirty.clear();
|
|
}
|
|
});
|
|
|
|
const livePreview = createLivePreview();
|
|
livePreview.show(Boolean(style.id));
|
|
|
|
updateHeader();
|
|
|
|
return {
|
|
replaceStyle,
|
|
isDirty: dirty.isDirty,
|
|
getStyle: () => style,
|
|
getEditors: () =>
|
|
sections.filter(s => !s.isRemoved()).map(s => s.cm),
|
|
getLastActivatedEditor,
|
|
scrollToEditor
|
|
};
|
|
|
|
function scrollToEditor(cm) {
|
|
const section = sections.find(s => s.cm === cm);
|
|
const bounds = section.getBoundingClientRect();
|
|
if (
|
|
(bounds.bottom > window.innerHeight && bounds.top > 0) ||
|
|
(bounds.top < 0 && bounds.bottom < window.innerHeight)
|
|
) {
|
|
if (bounds.top < 0) {
|
|
window.scrollBy(0, bounds.top - 1);
|
|
} else {
|
|
window.scrollBy(0, bounds.bottom - window.innerHeight + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getLastActivatedEditor() {
|
|
let result;
|
|
for (const section of sections) {
|
|
if (section.isRemoved()) {
|
|
continue;
|
|
}
|
|
if (!result || section.getLastActive() > result.getLastActive) {
|
|
result = section;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function nextPrevEditorOnKeydown(cm, event) {
|
|
const key = event.which;
|
|
if (key < 37 || key > 40 || event.shiftKey || event.altKey || event.metaKey) {
|
|
return;
|
|
}
|
|
const {line, ch} = cm.getCursor();
|
|
switch (key) {
|
|
case 37:
|
|
// arrow Left
|
|
if (line || ch) {
|
|
return;
|
|
}
|
|
// fallthrough to arrow Up
|
|
case 38:
|
|
// arrow Up
|
|
if (line > 0 || cm === editors[0]) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
cm = CodeMirror.commands.prevEditor(cm);
|
|
cm.setCursor(cm.doc.size - 1, key === 37 ? 1e20 : ch);
|
|
break;
|
|
case 39:
|
|
// arrow Right
|
|
if (line < cm.doc.size - 1 || ch < cm.getLine(line).length - 1) {
|
|
return;
|
|
}
|
|
// fallthrough to arrow Down
|
|
case 40:
|
|
// arrow Down
|
|
if (line < cm.doc.size - 1 || cm === editors.last) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
cm = CodeMirror.commands.nextEditor(cm);
|
|
cm.setCursor(0, 0);
|
|
break;
|
|
}
|
|
const animation = (cm.getSection().firstElementChild.getAnimations() || [])[0];
|
|
if (animation) {
|
|
animation.playbackRate = -1;
|
|
animation.currentTime = 2000;
|
|
animation.play();
|
|
}
|
|
}
|
|
|
|
function scrollEntirePageOnCtrlShift(event) {
|
|
// make Shift-Ctrl-Wheel scroll entire page even when mouse is over a code editor
|
|
if (event.shiftKey && event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
// Chrome scrolls horizontally when Shift is pressed but on some PCs this might be different
|
|
window.scrollBy(0, event.deltaX || event.deltaY);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function showMozillaFormat() {
|
|
const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true});
|
|
popup.codebox.setValue(sectionsToMozFormat(getModel()));
|
|
popup.codebox.execCommand('selectAll');
|
|
}
|
|
|
|
function fromMozillaFormat(text = '') {
|
|
const popup = showCodeMirrorPopup(t('styleFromMozillaFormatPrompt'),
|
|
$create('.buttons', [
|
|
$create('button', {
|
|
name: 'import-replace',
|
|
textContent: t('importReplaceLabel'),
|
|
title: 'Ctrl-Shift-Enter:\n' + t('importReplaceTooltip'),
|
|
onclick: () => doImport({replaceOldStyle: true}),
|
|
}),
|
|
$create('button', {
|
|
name: 'import-append',
|
|
textContent: t('importAppendLabel'),
|
|
title: 'Ctrl-Enter:\n' + t('importAppendTooltip'),
|
|
onclick: doImport,
|
|
}),
|
|
]));
|
|
const contents = $('.contents', popup);
|
|
contents.insertBefore(popup.codebox.display.wrapper, contents.firstElementChild);
|
|
popup.codebox.focus();
|
|
popup.codebox.on('changes', cm => {
|
|
popup.classList.toggle('ready', !cm.isBlank());
|
|
cm.markClean();
|
|
});
|
|
if (text) {
|
|
popup.codebox.setValue(text);
|
|
popup.codebox.clearHistory();
|
|
popup.codebox.markClean();
|
|
}
|
|
// overwrite default extraKeys as those are inapplicable in popup context
|
|
popup.codebox.options.extraKeys = {
|
|
'Ctrl-Enter': doImport,
|
|
'Shift-Ctrl-Enter': () => doImport({replaceOldStyle: true}),
|
|
};
|
|
|
|
function doImport({replaceOldStyle = false}) {
|
|
lockPageUI(true);
|
|
editorWorker.parseMozFormat({code: popup.codebox.getValue().trim()})
|
|
.then(({sections, errors}) => {
|
|
// shouldn't happen but just in case
|
|
if (!sections.length || errors.length) {
|
|
throw errors;
|
|
}
|
|
if (replaceOldStyle) {
|
|
return replaceSections(sections);
|
|
}
|
|
return new Promise(resolve => initSection({sections, done: resolve, focusOn: false}));
|
|
})
|
|
.then(() => {
|
|
$('.dismiss').dispatchEvent(new Event('click'));
|
|
})
|
|
.catch(showError)
|
|
.then(() => lockPageUI(false));
|
|
}
|
|
|
|
function lockPageUI(locked) {
|
|
document.documentElement.style.pointerEvents = locked ? 'none' : '';
|
|
if (popup.codebox) {
|
|
popup.classList.toggle('ready', locked ? false : !popup.codebox.isBlank());
|
|
popup.codebox.options.readOnly = locked;
|
|
popup.codebox.display.wrapper.style.opacity = locked ? '.5' : '';
|
|
}
|
|
}
|
|
|
|
function showError(errors) {
|
|
messageBox({
|
|
className: 'center danger',
|
|
title: t('styleFromMozillaFormatError'),
|
|
contents: $create('pre', Array.isArray(errors) ? errors.join('\n') : errors),
|
|
buttons: [t('confirmClose')],
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateSectionOrder() {
|
|
const oldOrder = sectionOrder;
|
|
const validSections = sections.filter(s => !s.isRemoved());
|
|
sectionOrder = validSections.map(s => s.id).join(',');
|
|
dirty.modify('sectionOrder', oldOrder, sectionOrder);
|
|
container.dataset.sectionCount = validSections.length;
|
|
}
|
|
|
|
function getModel() {
|
|
return Object.assign({}, style, {
|
|
sections: sections.map(s => s.getModel())
|
|
});
|
|
}
|
|
|
|
function validate() {
|
|
if (!nameEl.reportValidity()) {
|
|
messageBox.alert(t('styleMissingName'));
|
|
return false;
|
|
}
|
|
for (const section of sections) {
|
|
for (const apply of section.appliesTo) {
|
|
if (apply.getType() !== 'regexp') {
|
|
continue;
|
|
}
|
|
if (!apply.valueEl.reportValidity()) {
|
|
messageBox.alert(t('styleBadRegexp'));
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function save() {
|
|
const newStyle = getModel();
|
|
if (!validate(newStyle)) {
|
|
return;
|
|
}
|
|
API.editSave(newStyle)
|
|
.then(newStyle => {
|
|
sessionStorage.justEditedStyleId = newStyle.id;
|
|
replaceStyle(newStyle);
|
|
});
|
|
}
|
|
|
|
function updateHeader() {
|
|
nameEl.value = style.name || '';
|
|
enabledEl.checked = style.enabled !== false;
|
|
$('#url').href = style.url || '';
|
|
updateTitle();
|
|
}
|
|
|
|
function updateLivePreview() {
|
|
debounce(_updateLivePreview, 200);
|
|
}
|
|
|
|
function _updateLivePreview() {
|
|
livePreview.update(getModel());
|
|
}
|
|
|
|
function updateTitle() {
|
|
const name = style.name;
|
|
const clean = !dirty.isDirty();
|
|
const title = !style.id ? t('addStyleTitle') : name;
|
|
document.title = (clean ? '' : '* ') + title;
|
|
$('#save-button').disabled = clean;
|
|
}
|
|
|
|
function initSection({
|
|
sections: originalSections,
|
|
total = originalSections.length,
|
|
focusOn = 0,
|
|
done
|
|
}) {
|
|
if (!originalSections.length) {
|
|
setGlobalProgress();
|
|
if (focusOn !== false) {
|
|
sections[focusOn].cm.focus();
|
|
}
|
|
if (done) {
|
|
done();
|
|
}
|
|
return;
|
|
}
|
|
insertSectionAfter(originalSections.shift());
|
|
setGlobalProgress(total - originalSections.length, total);
|
|
setTimeout(initSection, 0, {
|
|
sections: originalSections,
|
|
total,
|
|
focusOn,
|
|
done
|
|
});
|
|
}
|
|
|
|
function removeSection(section) {
|
|
if (sections.every(s => s.isRemoved() || s === section)) {
|
|
throw new Error('Cannot remove last section');
|
|
}
|
|
section.remove();
|
|
if (!section.getCode()) {
|
|
const index = sections.indexOf(section);
|
|
sections.splice(index, 1);
|
|
section.el.remove();
|
|
} else {
|
|
const lines = [];
|
|
const MAX_LINES = 10;
|
|
section.cm.doc.iter(0, MAX_LINES + 1, ({text}) => lines.push(text) && false);
|
|
const title = t('sectionCode') + '\n' +
|
|
'-'.repeat(20) + '\n' +
|
|
lines.slice(0, MAX_LINES).map(s => clipString(s, 100)).join('\n') +
|
|
(lines.length > MAX_LINES ? '\n...' : '');
|
|
$('.deleted-section', section.el).title = title;
|
|
}
|
|
dirty.remove(section, section);
|
|
updateSectionOrder();
|
|
section.off(updateLivePreview);
|
|
updateLivePreview();
|
|
}
|
|
|
|
function restoreSection(section) {
|
|
section.restore();
|
|
updateSectionOrder();
|
|
section.onChange(updateLivePreview);
|
|
updateLivePreview();
|
|
}
|
|
|
|
function insertSectionAfter(init, base) {
|
|
if (!init) {
|
|
init = {code: '', urlPrefixes: ['http://example.com']};
|
|
}
|
|
const section = createSection(init);
|
|
container.appendChild(section.el);
|
|
if (base) {
|
|
const index = sections.indexOf(base);
|
|
sections.splice(index, 0, section);
|
|
} else {
|
|
sections.push(section);
|
|
}
|
|
section.render();
|
|
// maximizeCodeHeight(section.el);
|
|
updateSectionOrder();
|
|
section.onChange(updateLivePreview);
|
|
updateLivePreview();
|
|
}
|
|
|
|
function moveSectionUp(section) {
|
|
const index = sections.indexOf(section);
|
|
if (index === 0) {
|
|
return;
|
|
}
|
|
container.insertBefore(section.el, sections[index - 1].el);
|
|
sections[index] = sections[index - 1];
|
|
sections[index - 1] = section;
|
|
updateSectionOrder();
|
|
}
|
|
|
|
function moveSectionDown(section) {
|
|
const index = sections.indexOf(section);
|
|
if (index === sections.length - 1) {
|
|
return;
|
|
}
|
|
container.insertBefore(sections[index + 1].el, section.el);
|
|
sections[index] = sections[index + 1];
|
|
sections[index + 1] = section;
|
|
updateSectionOrder();
|
|
}
|
|
|
|
function createSection(originalSection) {
|
|
const sectionId = INC_ID++;
|
|
const el = template.section.cloneNode(true);
|
|
const cm = CodeMirror(wrapper => {
|
|
el.insertBefore(wrapper, $('.code-label', el).nextSibling);
|
|
}, {value: originalSection.code});
|
|
|
|
const appliesToContainer = $('.applies-to-list', el);
|
|
const appliesTo = [];
|
|
for (const [key, fnName] of Object.entries(propertyToCss)) {
|
|
if (originalSection[key]) {
|
|
originalSection[key].forEach(value =>
|
|
insertApplyAfter({type: fnName, value})
|
|
);
|
|
}
|
|
}
|
|
if (!appliesTo.length) {
|
|
const apply = createApply({all: true});
|
|
appliesTo.push(apply);
|
|
appliesToContainer.appendChild(apply.el);
|
|
dirty.addChild(apply.dirty);
|
|
}
|
|
|
|
let changeGeneration = cm.changeGeneration();
|
|
let removed = false;
|
|
|
|
registerEvents();
|
|
updateRegexpTester();
|
|
createResizeGrip(cm);
|
|
|
|
linter.enableForEditor(cm);
|
|
linter.refreshReport();
|
|
|
|
const changeListeners = new Set();
|
|
|
|
let lastActive = 0;
|
|
|
|
const section = {
|
|
id: sectionId,
|
|
el,
|
|
cm,
|
|
render,
|
|
destroy,
|
|
getCode,
|
|
getModel,
|
|
remove,
|
|
restore,
|
|
isRemoved: () => removed,
|
|
onChange,
|
|
off,
|
|
getLastActive: () => lastActive,
|
|
};
|
|
return section;
|
|
|
|
function onChange(fn) {
|
|
changeListeners.add(fn);
|
|
}
|
|
|
|
function off(fn) {
|
|
changeListeners.delete(fn);
|
|
}
|
|
|
|
function emitSectionChange() {
|
|
for (const fn of changeListeners) {
|
|
fn();
|
|
}
|
|
}
|
|
|
|
function getModel() {
|
|
const section = {
|
|
code: cm.getValue()
|
|
};
|
|
for (const apply of appliesTo) {
|
|
if (apply.all) {
|
|
continue;
|
|
}
|
|
const key = cssToProperty(apply.getType());
|
|
if (!section[key]) {
|
|
section[key] = [];
|
|
}
|
|
section[key].push(apply.getValue());
|
|
}
|
|
return section;
|
|
}
|
|
|
|
function registerEvents() {
|
|
cm.on('changes', () => {
|
|
const newGeneration = cm.changeGeneration();
|
|
dirty.modify(`section.${sectionId}.code`, changeGeneration, newGeneration);
|
|
changeGeneration = newGeneration;
|
|
emitSectionChange();
|
|
});
|
|
cm.on('paste', (cm, event) => {
|
|
const text = event.clipboardData.getData('text') || '';
|
|
if (
|
|
text.includes('@-moz-document') &&
|
|
text.replace(/\/\*[\s\S]*?(?:\*\/|$)/g, '')
|
|
.match(/@-moz-document[\s\r\n]+(url|url-prefix|domain|regexp)\(/)
|
|
) {
|
|
event.preventDefault();
|
|
fromMozillaFormat(text);
|
|
}
|
|
// FIXME: why?
|
|
// if (editors.length === 1) {
|
|
// setTimeout(() => {
|
|
// if (cm.display.sizer.clientHeight > cm.display.wrapper.clientHeight) {
|
|
// maximizeCodeHeight.stats = null;
|
|
// maximizeCodeHeight(cm.getSection(), true);
|
|
// }
|
|
// });
|
|
// }
|
|
});
|
|
if (!FIREFOX) {
|
|
cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event));
|
|
}
|
|
cm.on('focus', () => lastActive = Date.now());
|
|
|
|
cm.display.wrapper.addEventListener('keydown', event =>
|
|
nextPrevEditorOnKeydown(cm, event), true);
|
|
|
|
$('.applies-to-help', el).addEventListener('click', showAppliesToHelp);
|
|
$('.remove-section', el).addEventListener('click', () => removeSection(section));
|
|
$('.add-section', el).addEventListener('click', () => insertSectionAfter(undefined, section));
|
|
$('.clone-section', el).addEventListener('click', () => insertSectionAfter(getModel(), section));
|
|
$('.move-section-up', el).addEventListener('click', () => moveSectionUp(section));
|
|
$('.move-section-down', el).addEventListener('click', () => moveSectionDown(section));
|
|
$('.beautify-section', el).addEventListener('click', () => beautify([cm]));
|
|
$('.restore-section', el).addEventListener('click', () => restoreSection(section));
|
|
$('.test-regexp', el).addEventListener('click', () => {
|
|
regExpTester.toggle();
|
|
updateRegexpTester();
|
|
});
|
|
}
|
|
|
|
function getCode() {
|
|
return cm.getValue();
|
|
}
|
|
|
|
function remove() {
|
|
linter.disableForEditor(cm);
|
|
el.classList.add('removed');
|
|
removed = true;
|
|
appliesTo.forEach(a => a.remove());
|
|
}
|
|
|
|
function restore() {
|
|
linter.enableForEditor(cm);
|
|
el.classList.remove('removed');
|
|
removed = false;
|
|
appliesTo.forEach(a => a.restore());
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
cm.refresh();
|
|
}
|
|
|
|
function updateRegexpTester() {
|
|
const regexps = appliesTo.filter(a => a.getKey() === 'regexp')
|
|
.map(a => a.getValue());
|
|
if (regexps.length) {
|
|
el.classList.add('has-regexp');
|
|
regExpTester.update(regexps);
|
|
} else {
|
|
el.classList.remove('has-regexp');
|
|
regExpTester.toggle(false);
|
|
}
|
|
}
|
|
|
|
function insertApplyAfter(init, base) {
|
|
const apply = createApply(init);
|
|
if (base) {
|
|
const index = appliesTo.indexOf(base);
|
|
appliesTo.splice(index, 0, apply);
|
|
appliesToContainer.insertBefore(apply.el, base.el.nextSibling);
|
|
} else {
|
|
appliesTo.push(apply);
|
|
appliesToContainer.appendChild(apply.el);
|
|
}
|
|
dirty.add(apply, apply);
|
|
if (appliesTo.length && appliesTo[0].all) {
|
|
removeApply(appliesTo[0]);
|
|
}
|
|
emitSectionChange();
|
|
}
|
|
|
|
function removeApply(apply) {
|
|
const index = appliesTo.indexOf(apply);
|
|
appliesTo.splice(index, 1);
|
|
apply.remove();
|
|
apply.el.remove();
|
|
dirty.remove(apply, apply);
|
|
if (!appliesTo.length) {
|
|
insertApplyAfter({all: true});
|
|
}
|
|
emitSectionChange();
|
|
}
|
|
|
|
function createApply({type, value, all}) {
|
|
const applyId = INC_ID++;
|
|
const dirtyPrefix = `section.${sectionId}.apply.${applyId}`;
|
|
const el = all ? template.appliesToEverything.cloneNode(true) :
|
|
template.appliesTo.cloneNode(true);
|
|
|
|
const selectEl = !all && $('.applies-type', el);
|
|
if (selectEl) {
|
|
selectEl.value = type;
|
|
selectEl.addEventListener('change', () => {
|
|
const oldKey = type;
|
|
dirty.modify(`${dirtyPrefix}.type`, type, selectEl.value);
|
|
type = selectEl.value;
|
|
if (oldKey === 'regexp' || type === 'regexp') {
|
|
updateRegexpTester();
|
|
}
|
|
emitSectionChange();
|
|
validate();
|
|
});
|
|
}
|
|
|
|
const valueEl = !all && $('.applies-value', el);
|
|
if (valueEl) {
|
|
valueEl.value = value;
|
|
valueEl.addEventListener('input', () => {
|
|
dirty.modify(`${dirtyPrefix}.value`, value, valueEl.value);
|
|
value = valueEl.value;
|
|
if (type === 'regexp') {
|
|
updateRegexpTester();
|
|
}
|
|
emitSectionChange();
|
|
});
|
|
valueEl.addEventListener('change', validate);
|
|
}
|
|
|
|
const apply = {
|
|
id: applyId,
|
|
all,
|
|
remove,
|
|
restore,
|
|
el,
|
|
getType: () => type,
|
|
getValue: () => value
|
|
};
|
|
|
|
const removeButton = $('.remove-applies-to', el);
|
|
if (removeButton) {
|
|
removeButton.addEventListener('click', () => removeApply(apply));
|
|
}
|
|
$('.add-applies-to', el).addEventListener('click', () =>
|
|
insertApplyAfter({type, value: ''}, apply));
|
|
|
|
return apply;
|
|
|
|
function validate() {
|
|
if (type !== 'regexp' || tryRegExp(value)) {
|
|
valueEl.setCustomValidity('');
|
|
} else {
|
|
valueEl.setCustomValidity(t('styleBadRegexp'));
|
|
setTimeout(() => valueEl.reportValidity());
|
|
}
|
|
}
|
|
|
|
function remove() {
|
|
dirty.remove(`${dirtyPrefix}.type`, type);
|
|
dirty.remove(`${dirtyPrefix}.value`, value);
|
|
}
|
|
|
|
function restore() {
|
|
dirty.add(`${dirtyPrefix}.type`, type);
|
|
dirty.add(`${dirtyPrefix}.value`, value);
|
|
}
|
|
}
|
|
}
|
|
|
|
function replaceSections(sections) {
|
|
for (const section of sections) {
|
|
section.remove();
|
|
}
|
|
sections.length = 0;
|
|
container.textContent = '';
|
|
return new Promise(resolve => initSection({sections, done: resolve}));
|
|
}
|
|
|
|
function replaceStyle(newStyle, codeIsUpdated) {
|
|
// FIXME: avoid recreating all editors?
|
|
reinit().then(() => {
|
|
style = newStyle;
|
|
updateHeader();
|
|
dirty.clear();
|
|
// Go from new style URL to edit style URL
|
|
if (location.href.indexOf('id=') === -1 && style.id) {
|
|
history.replaceState({}, document.title, 'edit.html?id=' + style.id);
|
|
$('#heading').textContent = t('editStyleHeading');
|
|
}
|
|
livePreview.show(Boolean(style.id));
|
|
});
|
|
|
|
function reinit() {
|
|
if (codeIsUpdated !== false) {
|
|
return replaceSections(newStyle.sections.slice());
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
}
|
|
}
|