Add: make source editor work with newly created style

This commit is contained in:
eight 2017-10-08 23:26:55 +08:00
parent 3cb1943648
commit 228057d231
2 changed files with 62 additions and 17 deletions

View File

@ -1264,12 +1264,13 @@ function setStyleMeta(style) {
}
function initWithStyle(request) {
if (!isUsercss()) {
initWithSectionStyle(request);
return;
}
if (!editor) {
if (!request.style.usercssData) {
initWithSectionStyle(request);
} else {
editor = createSourceEditor(request.style);
}
editor = createSourceEditor(request.style);
return;
}
@ -1278,6 +1279,16 @@ function initWithStyle(request) {
} else {
editor.replaceStyle(request.style);
}
function isUsercss() {
if (request.style.usercssData) {
return true;
}
if (!request.style.id && prefs.get('newStyleFormat') === 'usercss') {
return true;
}
return false;
}
}
function initWithSectionStyle({style, codeIsUpdated}) {

View File

@ -1,14 +1,11 @@
/* global CodeMirror dirtyReporter initLint beautify showKeyMapHelp */
/* global showToggleStyleHelp goBackToManage updateLintReportIfEnabled */
/* global hotkeyRerouter setupAutocomplete setupOptionsExpand */
/* global editors linterConfig updateLinter regExpTester */
/* global editors linterConfig updateLinter regExpTester mozParser */
'use strict';
function createSourceEditor(style) {
// style might be an object reference to background page
style = deepCopy(style);
// draw HTML
$('#sections').innerHTML = '';
$('#name').disabled = true;
@ -22,12 +19,6 @@ function createSourceEditor(style) {
setupOptionsExpand();
// draw CodeMirror
$('#sections textarea').value = style.sourceCode;
const cm = CodeMirror.fromTextArea($('#sections textarea'));
// too many functions depend on this global
editors.push(cm);
// dirty reporter
const dirty = dirtyReporter();
dirty.onChange(() => {
@ -37,6 +28,20 @@ function createSourceEditor(style) {
updateTitle();
});
// normalize style
if (!style.id) {
setupNewStyle(style);
} else {
// style might be an object reference to background page
style = deepCopy(style);
}
// draw CodeMirror
$('#sections textarea').value = style.sourceCode;
const cm = CodeMirror.fromTextArea($('#sections textarea'));
// too many functions depend on this global
editors.push(cm);
// draw metas info
updateMetas();
initHooks();
@ -64,6 +69,28 @@ function createSourceEditor(style) {
}
});
function setupNewStyle(style) {
style.sections[0].code = ' '.repeat(prefs.get('editor.tabSize')) + '/* Insert code here... */';
let section = mozParser.format(style);
if (!section.includes('@-moz-document')) {
style.sections[0].domains = ['example.com'];
section = mozParser.format(style);
}
const sourceCode = `/* ==UserStyle==
@name New Style - ${Date.now()}
@namespace github.com/openstyles/stylus
@version 0.1.0
@description A new userstyle
@author Me
==/UserStyle== */
${section}
`;
dirty.modify('source', '', sourceCode);
style.sourceCode = sourceCode;
}
function initAppliesToReport(cm) {
const APPLIES_TYPE = [
[t('appliesUrlOption'), 'url'],
@ -546,7 +573,7 @@ function createSourceEditor(style) {
$('#name').value = style.name;
$('#enabled').checked = style.enabled;
$('#url').href = style.url;
const {usercssData: {preprocessor}} = style;
const {usercssData: {preprocessor} = {}} = style;
cm.setPreprocessor(preprocessor);
// beautify only works with regular CSS
$('#beautify').disabled = cm.getOption('mode') !== 'css';
@ -555,10 +582,17 @@ function createSourceEditor(style) {
function updateTitle() {
// title depends on dirty and style meta
document.title = (dirty.isDirty() ? '* ' : '') + t('editStyleTitle', [style.name]);
if (!style.id) {
document.title = t('addStyleTitle');
} else {
document.title = (dirty.isDirty() ? '* ' : '') + t('editStyleTitle', [style.name]);
}
}
function replaceStyle(newStyle) {
if (!style.id && newStyle.id) {
history.replaceState({}, '', `?id=${newStyle.id}`);
}
style = deepCopy(newStyle);
updateMetas();
if (style.sourceCode !== cm.getValue()) {