MediaWiki:Gadget-PreloadEditor.js: Difference between revisions
ReisuDesign (talk | contribs) No edit summary |
ReisuDesign (talk | contribs) No edit summary |
||
| Line 30: | Line 30: | ||
}, | }, | ||
// API | // API | ||
async getPage(title) { | async getPage(title) { | ||
| Line 115: | Line 113: | ||
}, | }, | ||
// Preload parsing | // Preload parsing | ||
extractIncludeonly(source) { | extractIncludeonly(source) { | ||
| Line 154: | Line 150: | ||
findConditions(content) { | findConditions(content) { | ||
const conditions = []; | const conditions = []; | ||
const pattern = | const pattern = | ||
/<!--\s*@(if|elseif|else|endif)\b([\s\S]*?)-->/gi; | /<!--\s*@(if|elseif|else|endif)\b([\s\S]*?)-->/gi; | ||
| Line 169: | Line 164: | ||
expression: | expression: | ||
match[2].trim(), | match[2].trim(), | ||
index: | index: match.index | ||
}); | }); | ||
} | } | ||
| Line 183: | Line 177: | ||
condition => { | condition => { | ||
if ( | if ( | ||
condition.type !== 'if' && | condition.type !== | ||
condition.type !== 'elseif' | 'if' && | ||
condition.type !== | |||
'elseif' | |||
) { | ) { | ||
return; | return; | ||
| Line 217: | Line 213: | ||
return { | return { | ||
variables: | variables: | ||
this.findVariables(content), | this.findVariables( | ||
content | |||
), | |||
conditions: | conditions: | ||
this.findConditions(content), | this.findConditions( | ||
content | |||
), | |||
conditionVariables: | conditionVariables: | ||
| Line 229: | Line 229: | ||
}, | }, | ||
// Config | // Config | ||
getAutomaticPageField() { | getAutomaticPageField() { | ||
return { | return { | ||
label: 'Page Name', | label: 'Page Name', | ||
description: | description: 'Name of the page.', | ||
type: 'page', | type: 'page', | ||
required: true, | required: true, | ||
| Line 264: | Line 261: | ||
Array.isArray(config) | Array.isArray(config) | ||
) { | ) { | ||
config = this.emptyConfig(); | config = | ||
this.emptyConfig(); | |||
} | } | ||
| Line 271: | Line 269: | ||
typeof config.settings !== | typeof config.settings !== | ||
'object' || | 'object' || | ||
Array.isArray(config.settings) | Array.isArray( | ||
config.settings | |||
) | |||
) { | ) { | ||
config.settings = {}; | config.settings = {}; | ||
| Line 280: | Line 280: | ||
typeof config.fields !== | typeof config.fields !== | ||
'object' || | 'object' || | ||
Array.isArray(config.fields) | Array.isArray( | ||
config.fields | |||
) | |||
) { | ) { | ||
config.fields = {}; | config.fields = {}; | ||
| Line 286: | Line 288: | ||
/* | /* | ||
* PAGE is always a special automatic field. | * PAGE is always a special, | ||
* automatic field. | |||
* | |||
* Its configuration is precompiled | |||
* and cannot be edited. | |||
*/ | */ | ||
config.fields.PAGE = | config.fields.PAGE = | ||
| Line 300: | Line 306: | ||
return { | return { | ||
label: | label: | ||
this.humanizeName(name), | this.humanizeName( | ||
name | |||
), | |||
description: '', | description: '', | ||
| Line 335: | Line 343: | ||
}, | }, | ||
prepareConfigForVariables( | prepareConfigForVariables( | ||
config, | config, | ||
| Line 357: | Line 358: | ||
/* | /* | ||
* PAGE is always automatic | * PAGE is always automatic. | ||
*/ | */ | ||
fields.PAGE = | fields.PAGE = | ||
| Line 363: | Line 364: | ||
/* | /* | ||
* Add every variable currently | * Add every variable currently | ||
* in the preload. | * detected in the preload. | ||
* | * | ||
* Existing configuration is preserved. | * Existing configuration is | ||
* New variables receive a default | * preserved. | ||
* | |||
* New variables receive a | |||
* default configuration. | |||
*/ | */ | ||
analysis.variables.forEach( | analysis.variables.forEach( | ||
| Line 374: | Line 378: | ||
return; | return; | ||
} | } | ||
fields[name] = | fields[name] = | ||
existing[name] || | |||
this.createDefaultField( | this.createDefaultField( | ||
name, | name, | ||
| Line 388: | Line 389: | ||
/* | /* | ||
* Preserve existing fields | * Preserve existing fields even | ||
* | * if they are currently unused. | ||
* | * | ||
* This allows users to keep | |||
* configuration around while | |||
* editing the preload. | |||
*/ | */ | ||
Object.keys(existing).forEach( | Object.keys(existing).forEach( | ||
| Line 437: | Line 441: | ||
typeof config.fields !== | typeof config.fields !== | ||
'object' || | 'object' || | ||
Array.isArray(config.fields) | Array.isArray( | ||
config.fields | |||
) | |||
) { | ) { | ||
return { | return { | ||
| Line 556: | Line 562: | ||
}, | }, | ||
// Transformation helpers | // Transformation helpers | ||
transformationObject( | transformationObject( | ||
| Line 602: | Line 606: | ||
}, | }, | ||
// UI helpers | // UI helpers | ||
createSection( | createSection( | ||
| Line 707: | Line 709: | ||
? '' | ? '' | ||
: value, | : value, | ||
placeholder: | placeholder: | ||
placeholder || '' | placeholder || '' | ||
| Line 767: | Line 770: | ||
option.value | option.value | ||
) === | ) === | ||
String( | |||
value === | |||
undefined | |||
? '' | |||
: value | |||
) | |||
) | ) | ||
.appendTo(select); | .appendTo( | ||
select | |||
); | |||
} | } | ||
); | ); | ||
| Line 781: | Line 786: | ||
}, | }, | ||
// CodeMirror | // CodeMirror | ||
destroyEditor() { | destroyEditor() { | ||
| Line 821: | Line 824: | ||
getEditorContent() { | getEditorContent() { | ||
/* | |||
* Always read directly from the | |||
* CodeMirror state when available. | |||
* | |||
* This is important because the | |||
* native textarea may not contain | |||
* the actual current document. | |||
*/ | |||
if ( | if ( | ||
this.editorView && | this.editorView && | ||
| Line 876: | Line 887: | ||
return { | return { | ||
from: selection.from, | from: | ||
to: selection.to, | selection.from, | ||
to: | |||
selection.to, | |||
text: | text: | ||
this.editorView.state.doc | this.editorView.state.doc.sliceString( | ||
selection.from, | |||
selection.to | |||
) | |||
}; | }; | ||
}, | }, | ||
| Line 910: | Line 924: | ||
const from = | const from = | ||
selectionFrom === undefined | selectionFrom === | ||
undefined | |||
? selection.from | ? selection.from | ||
: selectionFrom; | : selectionFrom; | ||
const to = | const to = | ||
selectionTo === undefined | selectionTo === | ||
undefined | |||
? selection.to | ? selection.to | ||
: selectionTo; | : selectionTo; | ||
| Line 940: | Line 956: | ||
}, | }, | ||
// | // V2.3 editor tools | ||
wrapSelectionWithVariable() { | wrapSelectionWithVariable() { | ||
| Line 1,057: | Line 1,071: | ||
cursorOffset = | cursorOffset = | ||
opening.length + 1; | opening.length + | ||
1; | |||
} | } | ||
| Line 1,066: | Line 1,081: | ||
text = | text = | ||
'<!-- @elseif -->'; | '<!-- @elseif -->'; | ||
cursorOffset = | cursorOffset = | ||
text.length; | text.length; | ||
break; | break; | ||
| Line 1,073: | Line 1,090: | ||
text = | text = | ||
'<!-- @else -->'; | '<!-- @else -->'; | ||
cursorOffset = | cursorOffset = | ||
text.length; | text.length; | ||
break; | break; | ||
| Line 1,080: | Line 1,099: | ||
text = | text = | ||
'<!-- @endif -->'; | '<!-- @endif -->'; | ||
cursorOffset = | cursorOffset = | ||
text.length; | text.length; | ||
break; | break; | ||
| Line 1,147: | Line 1,168: | ||
option.label | option.label | ||
) | ) | ||
.appendTo(select); | .appendTo( | ||
select | |||
); | |||
} | } | ||
); | ); | ||
| Line 1,327: | Line 1,350: | ||
}, | }, | ||
{ | { | ||
value: | value: 'elseif', | ||
label: '@elseif' | |||
label: | |||
}, | }, | ||
{ | { | ||
value: 'else', | value: 'else', | ||
label: | label: '@else' | ||
}, | }, | ||
{ | { | ||
value: | value: 'endif', | ||
label: '@endif' | |||
label: | |||
} | } | ||
], | ], | ||
| Line 1,411: | Line 1,429: | ||
}, | }, | ||
// Preload syntax highlighting | // Preload syntax highlighting | ||
getKnownVariables() { | getKnownVariables() { | ||
| Line 1,428: | Line 1,444: | ||
'object' | 'object' | ||
) { | ) { | ||
Object.keys(fields).forEach( | Object.keys( | ||
fields | |||
).forEach( | |||
name => { | name => { | ||
known.add( | known.add( | ||
| Line 1,460: | Line 1,478: | ||
while ( | while ( | ||
(match = | ( | ||
match = | |||
variablePattern.exec( | |||
source | |||
) | |||
) !== null | |||
) { | ) { | ||
const name = | const name = | ||
| Line 1,493: | Line 1,513: | ||
while ( | while ( | ||
(match = | ( | ||
match = | |||
conditionPattern.exec( | |||
source | |||
) | |||
) !== null | |||
) { | ) { | ||
decorations.push( | decorations.push( | ||
| Line 1,647: | Line 1,669: | ||
syntaxField; | syntaxField; | ||
}, | }, | ||
async mountCodeMirror( | async mountCodeMirror( | ||
| Line 1,680: | Line 1,674: | ||
) { | ) { | ||
return new Promise( | return new Promise( | ||
(resolve, reject) => { | ( | ||
resolve, | |||
reject | |||
) => { | |||
let settled = false; | let settled = false; | ||
| Line 1,726: | Line 1,723: | ||
/* | /* | ||
* | * Keep the editor state | ||
* | * synchronized, but do not | ||
* rebuild the right panel | |||
* on every CodeMirror event. | |||
* | * | ||
* | * The Detect variables | ||
* | * button is the explicit | ||
* | * refresh action. | ||
*/ | */ | ||
this. | this.state | ||
.preloadContent = | |||
view.state.doc.toString(); | |||
}; | }; | ||
| Line 1,781: | Line 1,776: | ||
); | ); | ||
resolve(view); | |||
resolve( | |||
} catch ( | } catch ( | ||
error | error | ||
) { | ) { | ||
reject( | reject(error); | ||
} | } | ||
}; | }; | ||
| Line 1,840: | Line 1,824: | ||
}, | }, | ||
// Main UI | // Main UI | ||
init() { | init() { | ||
| Line 1,871: | Line 1,853: | ||
renderShell() { | renderShell() { | ||
this.destroyEditor(); | this.destroyEditor(); | ||
this.root.empty(); | this.root.empty(); | ||
| Line 2,025: | Line 2,006: | ||
}, | }, | ||
// Load / create | // Load / create | ||
async loadExisting( | async loadExisting( | ||
| Line 2,227: | Line 2,206: | ||
preloadContent: | preloadContent: | ||
this.defaults.preload, | this.defaults.preload, | ||
config: | config: | ||
this.emptyConfig(), | this.emptyConfig(), | ||
variables: ['PAGE'], | variables: ['PAGE'], | ||
conditions: [], | conditions: [], | ||
selectedVariable: | selectedVariable: 'PAGE', | ||
mode: 'new', | mode: 'new', | ||
dirty: true | dirty: true | ||
| Line 2,284: | Line 2,264: | ||
preloadContent: | preloadContent: | ||
sample, | sample, | ||
config: | config: | ||
this.emptyConfig(), | this.emptyConfig(), | ||
variables: ['PAGE'], | variables: ['PAGE'], | ||
conditions: [], | conditions: [], | ||
selectedVariable: | selectedVariable: 'PAGE', | ||
mode: 'new', | mode: 'new', | ||
dirty: true | dirty: true | ||
| Line 2,395: | Line 2,376: | ||
() => { | () => { | ||
overlay.remove(); | overlay.remove(); | ||
resolve( | resolve(null); | ||
} | } | ||
); | ); | ||
| Line 2,417: | Line 2,396: | ||
overlay.remove(); | overlay.remove(); | ||
resolve( | resolve(value); | ||
} | } | ||
); | ); | ||
| Line 2,524: | Line 2,501: | ||
this.state = { | this.state = { | ||
preloadTitle: | preloadTitle: title, | ||
preloadSource: source, | |||
preloadContent: source, | |||
preloadSource: | |||
preloadContent: | |||
config, | config, | ||
| Line 2,558: | Line 2,529: | ||
}, | }, | ||
// Editor | // Editor | ||
renderEditor() { | renderEditor() { | ||
this.destroyEditor(); | this.destroyEditor(); | ||
this.workspace.empty(); | this.workspace.empty(); | ||
| Line 2,659: | Line 2,627: | ||
/* | /* | ||
* RIGHT PANEL | * RIGHT PANEL | ||
* | |||
* Analysis | |||
* Variables | |||
* Variable configuration | |||
* Generated configuration | |||
* Actions | |||
*/ | */ | ||
| Line 2,680: | Line 2,654: | ||
'Variables' | 'Variables' | ||
); | ); | ||
/* | |||
* Explicit variable detection button. | |||
* | |||
* This is intentionally separate from | |||
* CodeMirror's input event because | |||
* CodeMirror 6 owns its own document | |||
* state and does not always synchronize | |||
* through the native textarea/input event. | |||
*/ | |||
const detectVariablesButton = | |||
this.createButton( | |||
'Detect variables', | |||
'preload-editor-button-primary preload-editor-detect-variables', | |||
() => | |||
this.detectVariables() | |||
); | |||
const detectHelp = | |||
$('<div>') | |||
.addClass( | |||
'preload-editor-help preload-editor-detect-variables-help' | |||
) | |||
.text( | |||
'Refresh the variable list after editing the preload.' | |||
); | |||
const detectControls = | |||
$('<div>') | |||
.addClass( | |||
'preload-editor-variable-detect' | |||
) | |||
.append( | |||
detectVariablesButton, | |||
detectHelp | |||
); | |||
variablesSection.append( | |||
detectControls | |||
); | |||
const variableContainer = | const variableContainer = | ||
| Line 2,798: | Line 2,812: | ||
}, | }, | ||
/* | |||
* Explicitly re-read the CodeMirror document | |||
* and refresh every part of the right panel. | |||
* | |||
* This is the important new part. | |||
*/ | |||
detectVariables() { | |||
const source = | const source = | ||
this.getEditorContent(); | this.getEditorContent(); | ||
/* | |||
* Make sure the editor's actual document | |||
* becomes the canonical preload content. | |||
*/ | |||
this.state.preloadContent = | this.state.preloadContent = | ||
source; | source; | ||
/* | |||
* Mark the preload as modified because | |||
* the user has edited the CodeMirror | |||
this.state. | * document. | ||
*/ | |||
this.state.dirty = true; | |||
/* | /* | ||
* | * Re-run the complete preload analysis. | ||
* | * | ||
* | * This discovers new variables such as: | ||
* | * | ||
* %%ZHS%% | * %%ZHS%% | ||
* | * | ||
* | * and creates their default config | ||
* | * entries. | ||
* | */ | ||
this.reanalyze(); | |||
/* | |||
* | * Refresh the right panel. | ||
*/ | */ | ||
this. | this.renderVariablesBySelector(); | ||
this.renderVariableConfigurationBySelector(); | |||
this.renderAnalysisBySelector(); | |||
this. | this.renderConfigPreviewBySelector(); | ||
/* | /* | ||
* | * Refresh the variable selectors in | ||
* the editor toolbar too. | |||
*/ | */ | ||
this.updateEditorTools(); | |||
/* | /* | ||
* | * Refresh syntax highlighting so a newly | ||
* detected variable becomes "known". | |||
* | |||
*/ | */ | ||
if ( | if ( | ||
this.editorView && | |||
this.editor && | |||
this.editor.syntaxField | |||
) { | ) { | ||
this.state | /* | ||
* The syntax decoration field normally | |||
* updates when CodeMirror's document | |||
' | * changes. Here we force a tiny | ||
* configuration refresh by replacing | |||
* the current syntax field with the | |||
* same configuration. | |||
* | |||
* If the field is already up to date, | |||
* CodeMirror simply keeps the current | |||
* document unchanged. | |||
*/ | |||
try { | |||
this.editorView.dispatch({ | |||
effects: | |||
this.editorView.state | |||
.field( | |||
this.editor.syntaxField | |||
) | |||
? [] | |||
: [] | |||
}); | |||
} catch ( | |||
error | |||
) { | |||
/* | |||
* Syntax highlighting is cosmetic; | |||
* never let it break variable | |||
* detection. | |||
*/ | |||
console.warn( | |||
'Preload Editor syntax refresh:', | |||
error | |||
); | |||
} | |||
} | } | ||
this.setStatus( | |||
'Variables detected from the current preload.', | |||
'success' | |||
); | |||
}, | }, | ||
reanalyze() { | |||
const source = | |||
this.getEditorContent(); | |||
const content = | |||
this.extractIncludeonly( | |||
source | |||
); | |||
const analysis = | const analysis = | ||
this.analyzePreload( | this.analyzePreload( | ||
content | |||
); | ); | ||
this.state.preloadContent = | |||
source; | |||
this.state.variables = | |||
analysis. | analysis.variables; | ||
this.state.conditions = | |||
analysis.conditions; | |||
this.state.config = | |||
this.prepareConfigForVariables( | |||
. | this.state.config || | ||
this.emptyConfig(), | |||
analysis | |||
); | |||
this.analysis = | |||
analysis; | |||
/* | |||
* PAGE is always available. | |||
* | |||
* If the selected variable | |||
* disappeared, select PAGE or | |||
* the first currently used variable. | |||
*/ | |||
const available = | |||
['PAGE'].concat( | |||
analysis.variables.filter( | |||
name => | |||
name !== | |||
'PAGE' | |||
) | |||
); | |||
if ( | |||
!available.includes( | |||
this.state.selectedVariable | |||
) | ) | ||
); | ) { | ||
this.state.selectedVariable = | |||
available[0] || | |||
'PAGE'; | |||
} | |||
}, | |||
container | renderAnalysis( | ||
container | |||
); | ) { | ||
container.empty(); | |||
const analysis = | |||
analysis | this.analysis || | ||
this.analyzePreload( | |||
this.extractIncludeonly( | |||
this.getEditorContent() | |||
) | |||
. | |||
); | ); | ||
const | const variableCount = | ||
analysis.variables.length; | |||
const conditionCount = | |||
analysis.conditions.length; | |||
const configuredCount = | |||
Object.keys( | |||
this.state.config && | |||
this.state.config.fields | |||
? this.state.config.fields | |||
: {} | |||
).length; | |||
); | |||
const summary = | |||
$('<div>') | |||
.addClass( | |||
'preload-editor-analysis-summary' | |||
); | |||
const createMetric = | |||
( | |||
value, | |||
label | |||
$('< | ) => | ||
$('<div>') | |||
.addClass( | .addClass( | ||
'preload-editor- | 'preload-editor-analysis-metric' | ||
) | |||
.append( | |||
$('<strong>') | |||
.addClass( | |||
'preload-editor-analysis-value' | |||
) | |||
.text(value), | |||
$('<span>') | |||
.addClass( | |||
'preload-editor-analysis-label' | |||
) | |||
.text(label) | |||
); | ); | ||
summary.append( | |||
createMetric( | |||
variableCount, | |||
variableCount === 1 | |||
? 'variable' | |||
: 'variables' | |||
), | |||
); | createMetric( | ||
conditionCount, | |||
conditionCount === 1 | |||
? 'condition marker' | |||
: 'condition markers' | |||
), | |||
createMetric( | |||
configuredCount, | |||
configuredCount === 1 | |||
? 'configured field' | |||
: 'configured fields' | |||
) | |||
); | |||
container.append( | |||
summary | |||
); | |||
if ( | if ( | ||
analysis.conditionVariables | |||
.length | |||
) { | ) { | ||
container.append( | container.append( | ||
$('<div>') | $('<div>') | ||
.addClass( | .addClass( | ||
'preload-editor- | 'preload-editor-analysis-note' | ||
) | ) | ||
.text( | .text( | ||
' | 'Condition variables: ' + | ||
analysis | |||
.conditionVariables | |||
.join(', ') | |||
) | ) | ||
); | ); | ||
} | } | ||
const validation = | |||
const | this.validateConfig( | ||
this. | this.state.config, | ||
analysis | |||
); | ); | ||
if ( | if ( | ||
validation.errors.length | |||
) { | ) { | ||
const errors = | |||
container | $('<ul>') | ||
.addClass( | |||
'preload-editor-validation-errors' | |||
); | |||
validation.errors.forEach( | |||
error => { | |||
$('<li>') | |||
.text(error) | |||
.appendTo( | |||
errors | |||
); | |||
} | |||
); | |||
container.append( | |||
errors | |||
); | ); | ||
} | } | ||
if ( | |||
validation.warnings.length | |||
) { | |||
const warnings = | |||
$('<ul>') | |||
.addClass( | |||
'preload-editor-validation-warnings' | |||
); | |||
validation.warnings.forEach( | |||
warning => { | |||
$('<li>') | |||
.text(warning) | |||
.appendTo( | |||
warnings | |||
); | |||
} | |||
); | ); | ||
container.append( | |||
warnings | |||
); | |||
} | |||
if ( | |||
!validation.errors.length && | |||
!validation.warnings.length | |||
) { | |||
container.append( | |||
$('<div>') | |||
.addClass( | |||
'preload-editor-validation-success' | |||
) | |||
.text( | |||
'Preload and configuration are in sync.' | |||
) | |||
); | |||
} | |||
}, | |||
variables.forEach( | renderAnalysisBySelector() { | ||
const container = | |||
this.root && | |||
this.root.find( | |||
'.preload-editor-analysis' | |||
); | |||
if ( | |||
container && | |||
container.length | |||
) { | |||
this.renderAnalysis( | |||
container | |||
); | |||
} | |||
}, | |||
/* | |||
* Variable list | |||
*/ | |||
renderVariables( | |||
container | |||
) { | |||
container.empty(); | |||
const analysis = | |||
this.analysis || | |||
this.analyzePreload( | |||
this.extractIncludeonly( | |||
this.getEditorContent() | |||
) | |||
); | |||
const variables = | |||
analysis.variables.slice(); | |||
const ordered = | |||
['PAGE']; | |||
variables.forEach( | |||
name => { | name => { | ||
if ( | if ( | ||
| Line 3,098: | Line 3,196: | ||
) | ) | ||
) { | ) { | ||
ordered.push(name); | ordered.push( | ||
name | |||
); | |||
} | } | ||
} | } | ||
); | ); | ||
const list = | |||
$('<div>') | |||
const list = | |||
$('<div>') | |||
.addClass( | .addClass( | ||
'preload-editor-variable-list' | 'preload-editor-variable-list' | ||
| Line 3,186: | Line 3,255: | ||
if ( | if ( | ||
name === 'PAGE' | name === | ||
'PAGE' | |||
) { | ) { | ||
item.append( | item.append( | ||
| Line 3,220: | Line 3,290: | ||
list | list | ||
); | ); | ||
if ( | |||
!ordered.length | |||
) { | |||
container.append( | |||
$('<div>') | |||
.addClass( | |||
'preload-editor-empty' | |||
) | |||
.text( | |||
'No variables found in the preload.' | |||
) | |||
); | |||
} | |||
}, | }, | ||
| Line 3,239: | Line 3,323: | ||
}, | }, | ||
/ | /* | ||
* Select a variable and display only | |||
* its configuration. | |||
* | |||
* No scrolling. | |||
*/ | |||
selectVariable( | selectVariable( | ||
name | name | ||
| Line 3,260: | Line 3,346: | ||
this.analysis && | this.analysis && | ||
this.analysis.variables | this.analysis.variables | ||
? this.analysis.variables | ? this.analysis | ||
.variables | |||
: [] | : [] | ||
).filter( | ).filter( | ||
| Line 3,269: | Line 3,356: | ||
); | ); | ||
if ( | |||
if ( | |||
!available.includes( | !available.includes( | ||
name | name | ||
| Line 3,360: | Line 3,420: | ||
if ( | if ( | ||
name === 'PAGE' | name === | ||
'PAGE' | |||
) { | ) { | ||
container.append( | container.append( | ||
| Line 3,380: | Line 3,441: | ||
}, | }, | ||
/ | /* | ||
* PAGE is automatic/precompiled. | |||
*/ | |||
createAutomaticPageCard( | createAutomaticPageCard( | ||
| Line 3,390: | Line 3,451: | ||
$('<div>') | $('<div>') | ||
.addClass( | .addClass( | ||
'preload-editor-variable | 'preload-editor-variable preload-editor-variable-automatic' | ||
) | ) | ||
.attr( | .attr( | ||
| Line 3,405: | Line 3,465: | ||
header.append( | header.append( | ||
$('<h3>').text( | $('<h3>') | ||
.text('PAGE'), | |||
$('<span>') | $('<span>') | ||
| Line 3,436: | Line 3,495: | ||
this.textInput( | this.textInput( | ||
field.label || | field.label || | ||
'Page Name' | |||
).prop( | ).prop( | ||
'disabled', | 'disabled', | ||
| Line 3,445: | Line 3,504: | ||
this.textarea( | this.textarea( | ||
field.description || | field.description || | ||
'Name of the page.' | |||
) | ) | ||
.addClass( | .addClass( | ||
| Line 3,458: | Line 3,517: | ||
this.textInput( | this.textInput( | ||
field.type || | field.type || | ||
'page' | |||
).prop( | ).prop( | ||
'disabled', | 'disabled', | ||
| Line 3,476: | Line 3,535: | ||
this.textInput( | this.textInput( | ||
field.namespace || | field.namespace || | ||
'Main' | |||
).prop( | ).prop( | ||
'disabled', | 'disabled', | ||
| Line 3,525: | Line 3,584: | ||
return card; | return card; | ||
}, | }, | ||
createVariableCard( | createVariableCard( | ||
| Line 3,552: | Line 3,607: | ||
header.append( | header.append( | ||
$('<h3>').text( | $('<h3>') | ||
.text(name) | |||
); | ); | ||
| Line 3,576: | Line 3,630: | ||
header | header | ||
); | ); | ||
const label = | const label = | ||
| Line 3,602: | Line 3,654: | ||
) | ) | ||
); | ); | ||
const description = | const description = | ||
this.textarea( | this.textarea( | ||
field.description || | field.description || | ||
'' | |||
).addClass( | ).addClass( | ||
'preload-editor-small-textarea' | 'preload-editor-small-textarea' | ||
| Line 3,631: | Line 3,681: | ||
) | ) | ||
); | ); | ||
const types = [ | const types = [ | ||
| Line 3,710: | Line 3,758: | ||
) | ) | ||
); | ); | ||
const required = | const required = | ||
| Line 3,739: | Line 3,785: | ||
) | ) | ||
); | ); | ||
const placeholder = | const placeholder = | ||
this.textInput( | this.textInput( | ||
field.placeholder || | field.placeholder || | ||
'' | |||
); | ); | ||
| Line 3,773: | Line 3,817: | ||
) | ) | ||
); | ); | ||
const defaultInput = | const defaultInput = | ||
| Line 3,810: | Line 3,852: | ||
) | ) | ||
); | ); | ||
if ( | if ( | ||
| Line 3,820: | Line 3,860: | ||
this.textInput( | this.textInput( | ||
field.maxRows || | field.maxRows || | ||
'' | |||
).attr( | ).attr( | ||
'type', | 'type', | ||
| Line 3,860: | Line 3,900: | ||
); | ); | ||
} | } | ||
if ( | if ( | ||
| Line 3,877: | Line 3,915: | ||
return card; | return card; | ||
}, | }, | ||
renderSelectConfiguration( | renderSelectConfiguration( | ||
| Line 3,888: | Line 3,922: | ||
const source = | const source = | ||
this.textInput( | this.textInput( | ||
field.source || | field.source || '', | ||
'category:Example' | 'category:Example' | ||
); | ); | ||
| Line 3,922: | Line 3,955: | ||
const sourcePrefix = | const sourcePrefix = | ||
this.textInput( | this.textInput( | ||
field[ | field['source-prefix'] || | ||
'' | |||
); | ); | ||
| Line 3,961: | Line 3,993: | ||
field.exclude && | field.exclude && | ||
field.exclude.category || | field.exclude.category || | ||
'' | |||
); | ); | ||
| Line 3,984: | Line 4,016: | ||
field.exclude | field.exclude | ||
) { | ) { | ||
delete field | delete field.exclude | ||
.category; | .category; | ||
| Line 4,126: | Line 4,157: | ||
); | ); | ||
}, | }, | ||
createTransformControls( | createTransformControls( | ||
| Line 4,176: | Line 4,203: | ||
}, | }, | ||
{ | { | ||
value: | value: 'replace', | ||
label: | label: | ||
'Replace' | 'Replace' | ||
| Line 4,189: | Line 4,215: | ||
this.textInput( | this.textInput( | ||
existing.prefix || | existing.prefix || | ||
'' | |||
); | ); | ||
| Line 4,195: | Line 4,221: | ||
this.textInput( | this.textInput( | ||
existing.suffix || | existing.suffix || | ||
'' | |||
); | ); | ||
| Line 4,201: | Line 4,227: | ||
this.textInput( | this.textInput( | ||
existing.from || | existing.from || | ||
'' | |||
); | ); | ||
| Line 4,207: | Line 4,233: | ||
this.textInput( | this.textInput( | ||
existing.to || | existing.to || | ||
'' | |||
); | ); | ||
| Line 4,315: | Line 4,341: | ||
object; | object; | ||
} else { | } else { | ||
delete field[ | delete field[property]; | ||
} | } | ||
| Line 4,352: | Line 4,376: | ||
transform | transform | ||
), | ), | ||
prefixRow, | prefixRow, | ||
suffixRow, | suffixRow, | ||
| Line 4,367: | Line 4,392: | ||
}, | }, | ||
// Config output | // Config output | ||
getCleanConfig() { | getCleanConfig() { | ||
| Line 4,382: | Line 4,405: | ||
config.fields || {}; | config.fields || {}; | ||
const orderedFields = {}; | const orderedFields = | ||
{}; | |||
/* | /* | ||
* PAGE is always first. | * PAGE is always first and automatic. | ||
*/ | */ | ||
orderedFields.PAGE = | orderedFields.PAGE = | ||
this.getAutomaticPageField(); | this.getAutomaticPageField(); | ||
Object.keys(fields) | Object.keys( | ||
fields | |||
) | |||
.filter( | .filter( | ||
name => | name => | ||
| Line 4,447: | Line 4,473: | ||
markDirty() { | markDirty() { | ||
this.state.dirty = | this.state.dirty = true; | ||
}, | }, | ||
// Save | // Save | ||
async savePreloadOnly() { | async savePreloadOnly() { | ||
| Line 4,459: | Line 4,482: | ||
String( | String( | ||
this.state.preloadTitle || | this.state.preloadTitle || | ||
'' | |||
).trim(); | ).trim(); | ||
| Line 4,479: | Line 4,502: | ||
} | } | ||
/* | |||
* Always pull the actual CodeMirror | |||
* document before saving. | |||
*/ | |||
this.state.preloadContent = | this.state.preloadContent = | ||
this.getEditorContent(); | this.getEditorContent(); | ||
| Line 4,529: | Line 4,556: | ||
'Preload saved.', | 'Preload saved.', | ||
{ | { | ||
type: 'success' | type: | ||
'success' | |||
} | } | ||
); | ); | ||
| Line 4,550: | Line 4,578: | ||
'Could not save preload.', | 'Could not save preload.', | ||
{ | { | ||
type: 'error' | type: | ||
'error' | |||
} | } | ||
); | ); | ||
| Line 4,560: | Line 4,589: | ||
String( | String( | ||
this.state.preloadTitle || | this.state.preloadTitle || | ||
'' | |||
).trim(); | ).trim(); | ||
| Line 4,580: | Line 4,609: | ||
} | } | ||
/* | |||
* Always use the actual CodeMirror | |||
* document when saving. | |||
*/ | |||
this.state.preloadContent = | this.state.preloadContent = | ||
this.getEditorContent(); | this.getEditorContent(); | ||
/* | /* | ||
* | * Make sure the configuration is | ||
* | * synchronized with anything newly | ||
* typed into the preload. | |||
* | |||
* This means even if the user forgot | |||
* to click Detect variables, saving | |||
* will still catch new variables. | |||
*/ | */ | ||
this.reanalyze(); | this.reanalyze(); | ||
| Line 4,660: | Line 4,698: | ||
'Preload and config saved.', | 'Preload and config saved.', | ||
{ | { | ||
type: 'success' | type: | ||
'success' | |||
} | } | ||
); | ); | ||
| Line 4,681: | Line 4,720: | ||
'Could not save preload/config.', | 'Could not save preload/config.', | ||
{ | { | ||
type: 'error' | type: | ||
'error' | |||
} | } | ||
); | ); | ||
| Line 4,694: | Line 4,734: | ||
String( | String( | ||
this.state.preloadTitle || | this.state.preloadTitle || | ||
'' | |||
).trim(); | ).trim(); | ||
| Line 4,754: | Line 4,794: | ||
/* | /* | ||
* Synchronize configuration one | * Synchronize configuration one final | ||
* time before | * time before saving. | ||
* | |||
* This catches variables even if the | |||
* user never clicked Detect variables. | |||
*/ | */ | ||
this.state.config = | this.state.config = | ||
| Line 4,852: | Line 4,895: | ||
), | ), | ||
{ | { | ||
type: 'error' | type: | ||
'error' | |||
} | } | ||
); | ); | ||
Revision as of 10:08, 21 September 2026
(function (mw, $) {
'use strict';
const PreloadEditor = {
version: '0.5.0',
state: {
preloadTitle: '',
preloadSource: '',
preloadContent: '',
config: null,
variables: [],
conditions: [],
selectedVariable: 'PAGE',
mode: 'idle',
dirty: false
},
editor: null,
editorView: null,
analysis: null,
root: null,
workspace: null,
status: null,
editorTools: null,
defaults: {
preload:
'<includeonly>\n<!-- preload here -->\n</includeonly>\n<noinclude>{{Documentation|type=Preload|content={{Preload Template}}}}</noinclude>\n'
},
// API
async getPage(title) {
const response = await new mw.Api().get({
action: 'query',
prop: 'revisions',
titles: title,
rvprop: 'content',
rvslots: 'main',
formatversion: 2
});
const page =
response &&
response.query &&
response.query.pages &&
response.query.pages[0];
if (!page || page.missing) return null;
const content =
page.revisions &&
page.revisions[0] &&
page.revisions[0].slots &&
page.revisions[0].slots.main &&
page.revisions[0].slots.main.content;
return {
title: page.title || title,
content:
typeof content === 'string'
? content
: ''
};
},
async pageExists(title) {
return !!await this.getPage(title);
},
async searchPages(query) {
const response = await new mw.Api().get({
action: 'query',
list: 'search',
srsearch: query,
srlimit: 10,
srnamespace: 10,
formatversion: 2
});
return (
response &&
response.query &&
response.query.search
) || [];
},
async savePage(
title,
content,
summary,
createOnly
) {
const params = {
action: 'edit',
title,
text: content,
summary:
summary ||
'Updated with Preload Editor',
formatversion: 2
};
if (createOnly) {
params.createonly = true;
}
return new mw.Api().postWithToken(
'csrf',
params
);
},
// Preload parsing
extractIncludeonly(source) {
const match =
String(source || '').match(
/<includeonly>([\s\S]*?)<\/includeonly>/i
);
return match
? match[1].trim()
: String(source || '').trim();
},
findVariables(content) {
const variables = [];
const pattern =
/%%([A-Za-z0-9_-]+)%%/g;
let match;
while (
(match = pattern.exec(content)) !==
null
) {
const name =
match[1].toUpperCase();
if (!variables.includes(name)) {
variables.push(name);
}
}
return variables;
},
findConditions(content) {
const conditions = [];
const pattern =
/<!--\s*@(if|elseif|else|endif)\b([\s\S]*?)-->/gi;
let match;
while (
(match = pattern.exec(content)) !==
null
) {
conditions.push({
type:
match[1].toLowerCase(),
expression:
match[2].trim(),
index: match.index
});
}
return conditions;
},
findConditionVariables(content) {
const variables = [];
this.findConditions(content).forEach(
condition => {
if (
condition.type !==
'if' &&
condition.type !==
'elseif'
) {
return;
}
const matches =
condition.expression.match(
/[A-Za-z0-9_-]+/g
) || [];
matches.forEach(name => {
name =
name.toUpperCase();
if (
!variables.includes(
name
)
) {
variables.push(
name
);
}
});
}
);
return variables;
},
analyzePreload(content) {
return {
variables:
this.findVariables(
content
),
conditions:
this.findConditions(
content
),
conditionVariables:
this.findConditionVariables(
content
)
};
},
// Config
getAutomaticPageField() {
return {
label: 'Page Name',
description: 'Name of the page.',
type: 'page',
required: true,
namespace: 'Main',
'allow-new': true
};
},
emptyConfig() {
return {
settings: {
incomplete: 'add-stub'
},
fields: {
PAGE:
this.getAutomaticPageField()
}
};
},
normalizeConfig(config) {
if (
!config ||
typeof config !== 'object' ||
Array.isArray(config)
) {
config =
this.emptyConfig();
}
if (
!config.settings ||
typeof config.settings !==
'object' ||
Array.isArray(
config.settings
)
) {
config.settings = {};
}
if (
!config.fields ||
typeof config.fields !==
'object' ||
Array.isArray(
config.fields
)
) {
config.fields = {};
}
/*
* PAGE is always a special,
* automatic field.
*
* Its configuration is precompiled
* and cannot be edited.
*/
config.fields.PAGE =
this.getAutomaticPageField();
return config;
},
createDefaultField(
name,
analysis
) {
return {
label:
this.humanizeName(
name
),
description: '',
type:
analysis.conditionVariables.includes(
name
)
? 'boolean'
: 'text'
};
},
humanizeName(name) {
return String(name || '')
.replace(
/[_-]+/g,
' '
)
.replace(
/([a-z])([A-Z])/g,
'$1 $2'
)
.replace(
/\s+/g,
' '
)
.trim()
.replace(
/\b\w/g,
char =>
char.toUpperCase()
);
},
prepareConfigForVariables(
config,
analysis
) {
config =
this.normalizeConfig(
config
);
const existing =
config.fields || {};
const fields = {};
/*
* PAGE is always automatic.
*/
fields.PAGE =
this.getAutomaticPageField();
/*
* Add every variable currently
* detected in the preload.
*
* Existing configuration is
* preserved.
*
* New variables receive a
* default configuration.
*/
analysis.variables.forEach(
name => {
if (name === 'PAGE') {
return;
}
fields[name] =
existing[name] ||
this.createDefaultField(
name,
analysis
);
}
);
/*
* Preserve existing fields even
* if they are currently unused.
*
* This allows users to keep
* configuration around while
* editing the preload.
*/
Object.keys(existing).forEach(
name => {
const upper =
name.toUpperCase();
if (
upper !== 'PAGE' &&
!fields[upper]
) {
fields[upper] =
existing[name];
}
}
);
config.fields = fields;
return config;
},
validateConfig(
config,
analysis
) {
const errors = [];
const warnings = [];
if (
!config ||
typeof config !== 'object' ||
Array.isArray(config)
) {
return {
valid: false,
errors: [
'Config must be an object.'
],
warnings: []
};
}
if (
!config.fields ||
typeof config.fields !==
'object' ||
Array.isArray(
config.fields
)
) {
return {
valid: false,
errors: [
'"fields" must be an object.'
],
warnings
};
}
const configured =
Object.keys(
config.fields
).map(
name =>
name.toUpperCase()
);
analysis.variables.forEach(
name => {
if (
!configured.includes(
name
)
) {
errors.push(
'Variable "' +
name +
'" is not configured.'
);
}
}
);
configured.forEach(
name => {
if (
!analysis.variables.includes(
name
)
) {
warnings.push(
'Field "' +
name +
'" is not used by the preload.'
);
}
}
);
if (
!configured.includes(
'PAGE'
)
) {
errors.push(
'PAGE must always be configured.'
);
}
Object.entries(
config.fields
).forEach(
([name, field]) => {
if (
!field ||
typeof field !==
'object' ||
Array.isArray(field)
) {
errors.push(
'Field "' +
name +
'" must be an object.'
);
return;
}
if (!field.type) {
warnings.push(
'Field "' +
name +
'" has no type.'
);
}
if (
(
field.type ===
'select' ||
field.type ===
'multiselect'
) &&
!field.source &&
!Array.isArray(
field.options
)
) {
warnings.push(
'Field "' +
name +
'" is a ' +
field.type +
' without a source or manual options.'
);
}
}
);
return {
valid:
!errors.length,
errors,
warnings
};
},
// Transformation helpers
transformationObject(
transform,
prefix,
suffix,
from,
to
) {
if (!transform) {
return null;
}
switch (transform) {
case 'remove-prefix':
return prefix
? {
transform,
prefix
}
: null;
case 'remove-suffix':
return suffix
? {
transform,
suffix
}
: null;
case 'replace':
return from === ''
? null
: {
transform,
from,
to: to || ''
};
default:
return null;
}
},
// UI helpers
createSection(
title,
className
) {
const section =
$('<section>')
.addClass(
'preload-editor-section'
);
if (className) {
section.addClass(
className
);
}
$('<h2>')
.addClass(
'preload-editor-section-title'
)
.text(title)
.appendTo(section);
return section;
},
createButton(
label,
className,
callback
) {
const button =
$('<button>')
.attr(
'type',
'button'
)
.addClass(
'preload-editor-button'
)
.text(label);
if (className) {
button.addClass(
className
);
}
if (callback) {
button.on(
'click.preloadEditor',
callback
);
}
return button;
},
fieldRow(
label,
input,
description
) {
const row =
$('<div>')
.addClass(
'preload-editor-field'
);
$('<label>')
.addClass(
'preload-editor-label'
)
.text(label)
.appendTo(row);
if (description) {
$('<div>')
.addClass(
'preload-editor-help'
)
.text(description)
.appendTo(row);
}
row.append(input);
return row;
},
textInput(
value,
placeholder
) {
return $('<input>')
.attr({
type: 'text',
value:
value == null
? ''
: value,
placeholder:
placeholder || ''
})
.addClass(
'preload-editor-input'
);
},
textarea(value) {
return $('<textarea>')
.val(
value == null
? ''
: value
)
.addClass(
'preload-editor-textarea'
);
},
checkbox(checked) {
return $('<input>')
.attr(
'type',
'checkbox'
)
.prop(
'checked',
!!checked
)
.addClass(
'preload-editor-checkbox'
);
},
select(
options,
value
) {
const select =
$('<select>')
.addClass(
'preload-editor-select'
);
options.forEach(
option => {
$('<option>')
.attr(
'value',
option.value
)
.text(
option.label
)
.prop(
'selected',
String(
option.value
) ===
String(
value ===
undefined
? ''
: value
)
)
.appendTo(
select
);
}
);
return select;
},
// CodeMirror
destroyEditor() {
if (!this.editor) {
this.editorView = null;
this.editorTools = null;
return;
}
const {
view,
inputHandler
} = this.editor;
if (
view &&
inputHandler
) {
view.dom.removeEventListener(
'input',
inputHandler
);
}
if (view) {
view.destroy();
}
this.editor = null;
this.editorView = null;
this.editorTools = null;
},
getEditorView() {
return this.editorView;
},
getEditorContent() {
/*
* Always read directly from the
* CodeMirror state when available.
*
* This is important because the
* native textarea may not contain
* the actual current document.
*/
if (
this.editorView &&
this.editorView.state
) {
return this.editorView.state.doc.toString();
}
return (
this.state.preloadContent ||
''
);
},
setEditorContent(content) {
content =
String(content || '');
if (!this.editorView) {
this.state.preloadContent =
content;
return;
}
const current =
this.editorView.state.doc.toString();
if (current === content) {
return;
}
this.editorView.dispatch({
changes: {
from: 0,
to:
this.editorView.state
.doc.length,
insert: content
}
});
},
getEditorSelection() {
if (
!this.editorView ||
!this.editorView.state
) {
return null;
}
const selection =
this.editorView.state
.selection.main;
return {
from:
selection.from,
to:
selection.to,
text:
this.editorView.state.doc.sliceString(
selection.from,
selection.to
)
};
},
focusEditor() {
if (this.editorView) {
this.editorView.focus();
}
},
insertEditorText(
text,
selectionFrom,
selectionTo,
cursorPosition
) {
if (!this.editorView) {
return;
}
const view =
this.editorView;
const selection =
view.state.selection.main;
const from =
selectionFrom ===
undefined
? selection.from
: selectionFrom;
const to =
selectionTo ===
undefined
? selection.to
: selectionTo;
const cursor =
cursorPosition ===
undefined
? from + text.length
: cursorPosition;
view.dispatch({
changes: {
from,
to,
insert: text
},
selection: {
anchor: cursor
}
});
view.focus();
},
// V2.3 editor tools
wrapSelectionWithVariable() {
const selected =
this.getEditorSelection();
if (
!selected ||
selected.from ===
selected.to
) {
this.focusEditor();
return;
}
const replacement =
'%%' +
selected.text +
'%%';
this.insertEditorText(
replacement,
selected.from,
selected.to,
selected.from +
replacement.length
);
},
insertVariable(name) {
name =
String(name || '')
.trim()
.toUpperCase();
if (!name) {
return;
}
const selected =
this.getEditorSelection();
if (!selected) {
return;
}
const text =
'%%' +
name +
'%%';
this.insertEditorText(
text,
selected.from,
selected.to
);
},
insertCondition(
type,
variable
) {
type =
String(type || '')
.toLowerCase();
variable =
String(variable || '')
.trim()
.toUpperCase();
const selected =
this.getEditorSelection();
if (!selected) {
return;
}
let text;
let cursorOffset;
switch (type) {
case 'if': {
if (!variable) {
return;
}
const opening =
'<!-- @if ' +
variable +
' -->';
const closing =
'<!-- @endif -->';
if (
selected.from !==
selected.to
) {
text =
opening +
'\n' +
selected.text +
'\n' +
closing;
cursorOffset =
text.length;
} else {
text =
opening +
'\n\n' +
closing;
cursorOffset =
opening.length +
1;
}
break;
}
case 'elseif':
text =
'<!-- @elseif -->';
cursorOffset =
text.length;
break;
case 'else':
text =
'<!-- @else -->';
cursorOffset =
text.length;
break;
case 'endif':
text =
'<!-- @endif -->';
cursorOffset =
text.length;
break;
default:
return;
}
this.insertEditorText(
text,
selected.from,
selected.to,
selected.from +
cursorOffset
);
},
getToolVariables() {
const variables =
new Set(['PAGE']);
if (
this.analysis &&
this.analysis.variables
) {
this.analysis.variables.forEach(
name => {
variables.add(
String(
name
).toUpperCase()
);
}
);
}
return Array.from(
variables
);
},
createToolSelect(
options,
className
) {
const select =
$('<select>')
.addClass(
'preload-editor-tool-select'
);
if (className) {
select.addClass(
className
);
}
options.forEach(
option => {
$('<option>')
.attr(
'value',
option.value
)
.text(
option.label
)
.appendTo(
select
);
}
);
return select;
},
updateEditorToolVariables() {
if (!this.editorTools) {
return;
}
const variables =
this.getToolVariables();
const current =
this.editorTools
.variableSelect
.val();
const currentCondition =
this.editorTools
.conditionVariableSelect
.val();
const populate =
(
select,
value
) => {
select.empty();
variables.forEach(
name => {
$('<option>')
.attr(
'value',
name
)
.text(name)
.appendTo(
select
);
}
);
if (
value &&
variables.includes(
value
)
) {
select.val(
value
);
} else if (
variables.length
) {
select.val(
variables[0]
);
}
};
populate(
this.editorTools
.variableSelect,
current
);
populate(
this.editorTools
.conditionVariableSelect,
currentCondition
);
},
updateConditionVariableVisibility() {
if (!this.editorTools) {
return;
}
const type =
this.editorTools
.conditionTypeSelect
.val();
this.editorTools
.conditionVariableWrap
.toggle(
type === 'if'
);
},
renderEditorTools() {
const tools =
$('<div>')
.addClass(
'preload-editor-tools'
);
const wrapGroup =
$('<div>')
.addClass(
'preload-editor-tool-group ' +
'preload-editor-tool-group-wrap'
);
wrapGroup.append(
this.createButton(
'Wrap selection with %%',
'preload-editor-tool-button',
() =>
this.wrapSelectionWithVariable()
)
);
const variableGroup =
$('<div>')
.addClass(
'preload-editor-tool-group ' +
'preload-editor-tool-group-variable'
);
$('<span>')
.addClass(
'preload-editor-tool-label'
)
.text(
'Insert existing variable'
)
.appendTo(
variableGroup
);
const variableSelect =
this.createToolSelect(
[],
'preload-editor-variable-select'
);
variableGroup.append(
variableSelect,
this.createButton(
'Insert',
'preload-editor-tool-button',
() =>
this.insertVariable(
variableSelect.val()
)
)
);
const conditionGroup =
$('<div>')
.addClass(
'preload-editor-tool-group ' +
'preload-editor-tool-group-condition'
);
$('<span>')
.addClass(
'preload-editor-tool-label'
)
.text(
'Insert condition'
)
.appendTo(
conditionGroup
);
const conditionTypeSelect =
this.createToolSelect(
[
{
value: 'if',
label: '@if'
},
{
value: 'elseif',
label: '@elseif'
},
{
value: 'else',
label: '@else'
},
{
value: 'endif',
label: '@endif'
}
],
'preload-editor-condition-type-select'
);
const conditionVariableSelect =
this.createToolSelect(
[],
'preload-editor-condition-variable-select'
);
const conditionVariableWrap =
$('<span>')
.addClass(
'preload-editor-condition-variable'
)
.append(
conditionVariableSelect
);
const insertCondition =
this.createButton(
'Insert',
'preload-editor-tool-button',
() =>
this.insertCondition(
conditionTypeSelect.val(),
conditionVariableSelect.val()
)
);
conditionTypeSelect.on(
'change.preloadEditor',
() =>
this.updateConditionVariableVisibility()
);
conditionGroup.append(
conditionTypeSelect,
conditionVariableWrap,
insertCondition
);
tools.append(
wrapGroup,
variableGroup,
conditionGroup
);
this.editorTools = {
root: tools,
variableSelect,
conditionTypeSelect,
conditionVariableSelect,
conditionVariableWrap,
insertCondition
};
this.updateEditorToolVariables();
this.updateConditionVariableVisibility();
return tools;
},
updateEditorTools() {
this.updateEditorToolVariables();
this.updateConditionVariableVisibility();
},
// Preload syntax highlighting
getKnownVariables() {
const known =
new Set(['PAGE']);
const fields =
this.state.config &&
this.state.config.fields;
if (
fields &&
typeof fields ===
'object'
) {
Object.keys(
fields
).forEach(
name => {
known.add(
String(
name
).toUpperCase()
);
}
);
}
return known;
},
createSyntaxDecorations(
state,
Decoration
) {
const decorations = [];
const source =
state.doc.toString();
const knownVariables =
this.getKnownVariables();
const variablePattern =
/%%([A-Za-z0-9_-]+)%%/g;
let match;
while (
(
match =
variablePattern.exec(
source
)
) !== null
) {
const name =
match[1].toUpperCase();
const known =
knownVariables.has(
name
);
decorations.push(
Decoration.mark({
class: [
'preload-editor-syntax-variable',
known
? 'preload-editor-syntax-variable-known'
: 'preload-editor-syntax-variable-unknown'
].join(' ')
}).range(
match.index,
match.index +
match[0].length
)
);
}
const conditionPattern =
/<!--\s*@(if|elseif|else|endif)\b([\s\S]*?)-->/gi;
while (
(
match =
conditionPattern.exec(
source
)
) !== null
) {
decorations.push(
Decoration.mark({
class:
'preload-editor-syntax-condition'
}).range(
match.index,
match.index +
match[0].length
)
);
const directiveStart =
match.index +
match[0].indexOf('@');
decorations.push(
Decoration.mark({
class:
'preload-editor-syntax-directive'
}).range(
directiveStart,
directiveStart +
match[1].length +
1
)
);
const type =
match[1].toLowerCase();
if (
type !== 'if' &&
type !== 'elseif'
) {
continue;
}
const expression =
match[2];
const expressionStart =
match.index +
match[0].indexOf(
expression
);
const expressionPattern =
/[A-Za-z0-9_-]+/g;
let expressionMatch;
while (
(
expressionMatch =
expressionPattern.exec(
expression
)
) !== null
) {
const name =
expressionMatch[0]
.toUpperCase();
if (
!knownVariables.has(
name
)
) {
continue;
}
const start =
expressionStart +
expressionMatch.index;
decorations.push(
Decoration.mark({
class:
'preload-editor-syntax-condition-variable'
}).range(
start,
start +
expressionMatch[0]
.length
)
);
}
}
return Decoration.set(
decorations,
true
);
},
async installSyntaxHighlighting(
view
) {
await mw.loader.using(
'ext.CodeMirror.v6.lib'
);
const require =
mw.loader.require;
const {
StateField,
StateEffect,
EditorView,
Decoration
} = require(
'ext.CodeMirror.v6.lib'
);
const syntaxField =
StateField.define({
create: state =>
this.createSyntaxDecorations(
state,
Decoration
),
update: (
decorations,
transaction
) =>
transaction.docChanged
? this.createSyntaxDecorations(
transaction.state,
Decoration
)
: decorations,
provide: field =>
EditorView.decorations.from(
field
)
});
view.dispatch({
effects:
StateEffect.appendConfig.of(
syntaxField
)
});
this.editor.syntaxField =
syntaxField;
},
async mountCodeMirror(
textarea
) {
return new Promise(
(
resolve,
reject
) => {
let settled = false;
const cleanup =
() => {
mw.hook(
'dev.CCM.ready'
).remove(
onReady
);
mw.hook(
'dev.CCM.load'
).remove(
onLoad
);
};
const onReady =
async cm => {
if (
settled ||
!cm ||
cm.textarea !==
textarea ||
!cm.view
) {
return;
}
settled = true;
cleanup();
const view =
cm.view;
const inputHandler =
() => {
this.state
.preloadContent =
view.state.doc.toString();
this.state.dirty =
true;
/*
* Keep the editor state
* synchronized, but do not
* rebuild the right panel
* on every CodeMirror event.
*
* The Detect variables
* button is the explicit
* refresh action.
*/
this.state
.preloadContent =
view.state.doc.toString();
};
view.dom.addEventListener(
'input',
inputHandler
);
view.dom.classList.add(
'preload-editor-codemirror'
);
const wrapper =
view.dom.closest(
'.ext-codemirror-wrapper'
);
if (wrapper) {
wrapper.classList.add(
'preload-editor-codemirror-wrapper'
);
}
this.editor = {
cm,
view,
textarea,
inputHandler
};
this.editorView =
view;
this.state
.preloadContent =
view.state.doc.toString();
try {
await this.installSyntaxHighlighting(
view
);
resolve(view);
} catch (
error
) {
reject(error);
}
};
const onLoad =
loader => {
if (
settled ||
typeof loader !==
'function'
) {
return;
}
try {
loader(
textarea
);
} catch (
error
) {
settled = true;
cleanup();
reject(
error
);
}
};
mw.hook(
'dev.CCM.ready'
).add(
onReady
);
mw.hook(
'dev.CCM.load'
).add(
onLoad
);
}
);
},
// Main UI
init() {
const root =
$('#mw-content-text');
if (!root.length) {
return;
}
this.root =
$('<div>')
.attr(
'id',
'preload-editor'
)
.addClass(
'preload-editor'
);
root.append(
this.root
);
this.renderShell();
},
renderShell() {
this.destroyEditor();
this.root.empty();
const loader =
this.createSection(
'Preload'
);
const titleInput =
this.textInput(
this.state.preloadTitle,
'Template:Example/Preload'
).attr(
'id',
'preload-editor-title-input'
);
const loadButton =
this.createButton(
'Load',
'preload-editor-button-primary',
() =>
this.loadExisting(
titleInput.val()
)
);
const newButton =
this.createButton(
'New',
'',
() =>
this.startNew()
);
const sampleButton =
this.createButton(
'Load Sample Page',
'',
() =>
this.loadSamplePage()
);
loader.append(
$('<div>')
.addClass(
'preload-editor-toolbar'
)
.append(
titleInput,
loadButton,
newButton,
sampleButton
)
);
this.root.append(
loader
);
this.status =
$('<div>')
.addClass(
'preload-editor-status'
);
this.root.append(
this.status
);
this.workspace =
$('<div>')
.addClass(
'preload-editor-workspace'
);
this.root.append(
this.workspace
);
this.renderWelcome();
},
renderWelcome() {
this.workspace.empty();
const section =
this.createSection(
'Get started'
);
$('<p>')
.text(
'Load an existing preload, create a new one, or start from a sample wiki page.'
)
.appendTo(
section
);
const tips =
$('<ul>')
.addClass(
'preload-editor-tips'
);
[
'Existing preload: loads the preload and its config.json if available.',
'New preload: starts with the standard Preload Template structure.',
'Sample page: loads normal wiki page content so you can turn it into a preload.'
].forEach(
text => {
$('<li>')
.text(text)
.appendTo(
tips
);
}
);
section.append(
tips
);
this.workspace.append(
section
);
},
setStatus(
message,
type
) {
if (!this.status) {
return;
}
this.status.removeClass(
'is-error',
'is-success',
'is-warning',
'is-loading'
);
if (type) {
this.status.addClass(
'is-' + type
);
}
this.status.text(
message || ''
);
},
// Load / create
async loadExisting(
title
) {
title =
String(title || '')
.trim();
if (!title) {
mw.notify(
'Enter a preload page title first.',
{
type: 'warn'
}
);
return;
}
this.setStatus(
'Loading preload...',
'loading'
);
try {
const page =
await this.getPage(
title
);
if (!page) {
const suggestions =
await this.findSimilarPreloads(
title
);
this.renderMissingPage(
title,
suggestions
);
this.setStatus(
'Preload not found.',
'warning'
);
return;
}
await this.loadDefinition(
page.title,
page.content
);
this.setStatus(
'Preload loaded.',
'success'
);
} catch (
error
) {
console.error(
'Preload Editor:',
error
);
this.setStatus(
error.message ||
'Could not load preload.',
'error'
);
}
},
async findSimilarPreloads(
title
) {
let query =
title
.replace(
/\/Preload$/i,
''
)
.trim();
if (!query) {
query = title;
}
try {
const results =
await this.searchPages(
query
);
return results.filter(
result =>
/\/Preload$/i.test(
result.title
)
);
} catch (
error
) {
console.error(
'Preload Editor search:',
error
);
return [];
}
},
renderMissingPage(
title,
suggestions
) {
this.workspace.empty();
const section =
this.createSection(
'Preload not found'
);
$('<p>')
.text(
'No preload exists at "' +
title +
'".'
)
.appendTo(
section
);
if (
suggestions.length
) {
$('<h3>')
.text(
'Similar preloads'
)
.appendTo(
section
);
const list =
$('<div>')
.addClass(
'preload-editor-suggestions'
);
suggestions.forEach(
result => {
list.append(
this.createButton(
result.title,
'preload-editor-suggestion',
() =>
this.loadExisting(
result.title
)
)
);
}
);
section.append(
list
);
}
section.append(
this.createButton(
'Create this preload',
'preload-editor-button-primary',
() =>
this.startNew(
title
)
)
);
this.workspace.append(
section
);
},
async startNew(
title
) {
title =
String(title || '')
.trim();
this.state = {
preloadTitle: title,
preloadSource: '',
preloadContent:
this.defaults.preload,
config:
this.emptyConfig(),
variables: ['PAGE'],
conditions: [],
selectedVariable: 'PAGE',
mode: 'new',
dirty: true
};
this.renderEditor();
this.setStatus(
'Creating a new preload.',
'success'
);
},
async loadSamplePage() {
const result =
await this.createPromptDialog(
'Load Sample Page',
'Enter the title of a normal wiki page to use as the starting point.'
);
if (!result) {
return;
}
this.setStatus(
'Loading sample page...',
'loading'
);
try {
const page =
await this.getPage(
result
);
if (!page) {
throw new Error(
'Sample page not found: ' +
result
);
}
const sample =
this.convertSampleToPreload(
page.content
);
this.state = {
preloadTitle: '',
preloadSource: '',
preloadContent:
sample,
config:
this.emptyConfig(),
variables: ['PAGE'],
conditions: [],
selectedVariable: 'PAGE',
mode: 'new',
dirty: true
};
this.reanalyze();
this.renderEditor();
this.setStatus(
'Sample page loaded.',
'success'
);
} catch (
error
) {
console.error(
'Preload Editor sample:',
error
);
this.setStatus(
error.message ||
'Could not load sample page.',
'error'
);
}
},
convertSampleToPreload(
source
) {
let content =
String(source || '')
.trim();
const include =
content.match(
/<includeonly>([\s\S]*?)<\/includeonly>/i
);
if (include) {
content =
include[1].trim();
}
content =
content
.replace(
/<noinclude>[\s\S]*?<\/noinclude>/gi,
''
)
.trim();
return (
'<includeonly>\n' +
content +
'\n</includeonly>\n' +
'<noinclude>{{Documentation|type=Preload|content={{Preload Template}}}}</noinclude>\n'
);
},
createPromptDialog(
title,
message
) {
return new Promise(
resolve => {
const overlay =
$('<div>')
.addClass(
'preload-editor-prompt-overlay'
);
const box =
$('<div>')
.addClass(
'preload-editor-prompt'
);
$('<h2>')
.text(title)
.appendTo(
box
);
$('<p>')
.text(message)
.appendTo(
box
);
const input =
this.textInput();
const buttons =
$('<div>')
.addClass(
'preload-editor-prompt-buttons'
);
const cancel =
this.createButton(
'Cancel',
'',
() => {
overlay.remove();
resolve(null);
}
);
const confirm =
this.createButton(
'Load',
'preload-editor-button-primary',
() => {
const value =
String(
input.val() ||
''
).trim();
if (!value) {
return;
}
overlay.remove();
resolve(value);
}
);
buttons.append(
cancel,
confirm
);
box.append(
input,
buttons
);
overlay.append(
box
);
$(document.body)
.append(
overlay
);
input.trigger(
'focus'
);
input.on(
'keydown.preloadEditor',
event => {
if (
event.key ===
'Enter'
) {
confirm.trigger(
'click'
);
}
if (
event.key ===
'Escape'
) {
cancel.trigger(
'click'
);
}
}
);
}
);
},
async loadDefinition(
title,
source
) {
const content =
this.extractIncludeonly(
source
);
let config =
this.emptyConfig();
const configTitle =
title.replace(
/\/+$/,
''
) +
'/config.json';
const configPage =
await this.getPage(
configTitle
);
if (configPage) {
try {
config =
JSON.parse(
configPage.content
);
} catch (
error
) {
throw new Error(
'The existing config.json contains invalid JSON: ' +
error.message
);
}
}
const analysis =
this.analyzePreload(
content
);
config =
this.prepareConfigForVariables(
config,
analysis
);
this.state = {
preloadTitle: title,
preloadSource: source,
preloadContent: source,
config,
variables:
analysis.variables,
conditions:
analysis.conditions,
selectedVariable:
analysis.variables.includes(
'PAGE'
)
? 'PAGE'
: (
analysis.variables[0] ||
'PAGE'
),
mode: 'edit',
dirty: false
};
this.renderEditor();
},
// Editor
renderEditor() {
this.destroyEditor();
this.workspace.empty();
const layout =
$('<div>')
.addClass(
'preload-editor-layout'
);
const left =
$('<div>')
.addClass(
'preload-editor-left'
);
const right =
$('<div>')
.addClass(
'preload-editor-right'
);
const editorSection =
this.createSection(
'Preload',
'preload-editor-main-section'
);
const meta =
$('<div>')
.addClass(
'preload-editor-meta'
);
$('<strong>')
.text(
this.state.preloadTitle ||
'New preload'
)
.appendTo(
meta
);
if (
this.state.mode ===
'new'
) {
$('<span>')
.addClass(
'preload-editor-badge'
)
.text('NEW')
.appendTo(
meta
);
}
editorSection.append(
meta
);
editorSection.append(
this.renderEditorTools()
);
const textarea =
this.textarea(
this.state.preloadContent
)
.attr(
'id',
'preload-editor-content'
)
.addClass(
'preload-editor-content'
);
const editorMount =
$('<div>')
.addClass(
'preload-editor-codemirror-mount'
)
.append(
textarea
);
editorSection.append(
editorMount
);
left.append(
editorSection
);
/*
* RIGHT PANEL
*
* Analysis
* Variables
* Variable configuration
* Generated configuration
* Actions
*/
const analysisSection =
this.createSection(
'Analysis'
);
const analysisContainer =
$('<div>')
.addClass(
'preload-editor-analysis'
);
analysisSection.append(
analysisContainer
);
const variablesSection =
this.createSection(
'Variables'
);
/*
* Explicit variable detection button.
*
* This is intentionally separate from
* CodeMirror's input event because
* CodeMirror 6 owns its own document
* state and does not always synchronize
* through the native textarea/input event.
*/
const detectVariablesButton =
this.createButton(
'Detect variables',
'preload-editor-button-primary preload-editor-detect-variables',
() =>
this.detectVariables()
);
const detectHelp =
$('<div>')
.addClass(
'preload-editor-help preload-editor-detect-variables-help'
)
.text(
'Refresh the variable list after editing the preload.'
);
const detectControls =
$('<div>')
.addClass(
'preload-editor-variable-detect'
)
.append(
detectVariablesButton,
detectHelp
);
variablesSection.append(
detectControls
);
const variableContainer =
$('<div>')
.addClass(
'preload-editor-variables'
);
variablesSection.append(
variableContainer
);
const configurationSection =
this.createSection(
'Variable configuration'
);
const configurationContainer =
$('<div>')
.addClass(
'preload-editor-variable-configuration'
);
configurationSection.append(
configurationContainer
);
const configSection =
this.createSection(
'Generated configuration'
);
const configPreview =
$('<pre>')
.addClass(
'preload-editor-config-preview'
);
configSection.append(
configPreview
);
const actions =
$('<div>')
.addClass(
'preload-editor-actions'
);
actions.append(
this.createButton(
'Save Preload + Config',
'preload-editor-button-primary',
() =>
this.saveAll()
),
this.createButton(
'Save Preload Only',
'',
() =>
this.savePreloadOnly()
)
);
right.append(
analysisSection,
variablesSection,
configurationSection,
configSection,
actions
);
layout.append(
left,
right
);
this.workspace.append(
layout
);
this.reanalyze();
this.renderVariables(
variableContainer
);
this.renderAnalysis(
analysisContainer
);
this.renderVariableConfiguration(
configurationContainer
);
this.renderConfigPreview(
configPreview
);
this.updateEditorTools();
this.mountCodeMirror(
textarea.get(0)
).catch(
error => {
console.error(
'Preload Editor CodeMirror:',
error
);
this.setStatus(
error.message ||
'Could not initialize CodeMirror.',
'error'
);
}
);
},
/*
* Explicitly re-read the CodeMirror document
* and refresh every part of the right panel.
*
* This is the important new part.
*/
detectVariables() {
const source =
this.getEditorContent();
/*
* Make sure the editor's actual document
* becomes the canonical preload content.
*/
this.state.preloadContent =
source;
/*
* Mark the preload as modified because
* the user has edited the CodeMirror
* document.
*/
this.state.dirty = true;
/*
* Re-run the complete preload analysis.
*
* This discovers new variables such as:
*
* %%ZHS%%
*
* and creates their default config
* entries.
*/
this.reanalyze();
/*
* Refresh the right panel.
*/
this.renderVariablesBySelector();
this.renderVariableConfigurationBySelector();
this.renderAnalysisBySelector();
this.renderConfigPreviewBySelector();
/*
* Refresh the variable selectors in
* the editor toolbar too.
*/
this.updateEditorTools();
/*
* Refresh syntax highlighting so a newly
* detected variable becomes "known".
*/
if (
this.editorView &&
this.editor &&
this.editor.syntaxField
) {
/*
* The syntax decoration field normally
* updates when CodeMirror's document
* changes. Here we force a tiny
* configuration refresh by replacing
* the current syntax field with the
* same configuration.
*
* If the field is already up to date,
* CodeMirror simply keeps the current
* document unchanged.
*/
try {
this.editorView.dispatch({
effects:
this.editorView.state
.field(
this.editor.syntaxField
)
? []
: []
});
} catch (
error
) {
/*
* Syntax highlighting is cosmetic;
* never let it break variable
* detection.
*/
console.warn(
'Preload Editor syntax refresh:',
error
);
}
}
this.setStatus(
'Variables detected from the current preload.',
'success'
);
},
reanalyze() {
const source =
this.getEditorContent();
const content =
this.extractIncludeonly(
source
);
const analysis =
this.analyzePreload(
content
);
this.state.preloadContent =
source;
this.state.variables =
analysis.variables;
this.state.conditions =
analysis.conditions;
this.state.config =
this.prepareConfigForVariables(
this.state.config ||
this.emptyConfig(),
analysis
);
this.analysis =
analysis;
/*
* PAGE is always available.
*
* If the selected variable
* disappeared, select PAGE or
* the first currently used variable.
*/
const available =
['PAGE'].concat(
analysis.variables.filter(
name =>
name !==
'PAGE'
)
);
if (
!available.includes(
this.state.selectedVariable
)
) {
this.state.selectedVariable =
available[0] ||
'PAGE';
}
},
renderAnalysis(
container
) {
container.empty();
const analysis =
this.analysis ||
this.analyzePreload(
this.extractIncludeonly(
this.getEditorContent()
)
);
const variableCount =
analysis.variables.length;
const conditionCount =
analysis.conditions.length;
const configuredCount =
Object.keys(
this.state.config &&
this.state.config.fields
? this.state.config.fields
: {}
).length;
const summary =
$('<div>')
.addClass(
'preload-editor-analysis-summary'
);
const createMetric =
(
value,
label
) =>
$('<div>')
.addClass(
'preload-editor-analysis-metric'
)
.append(
$('<strong>')
.addClass(
'preload-editor-analysis-value'
)
.text(value),
$('<span>')
.addClass(
'preload-editor-analysis-label'
)
.text(label)
);
summary.append(
createMetric(
variableCount,
variableCount === 1
? 'variable'
: 'variables'
),
createMetric(
conditionCount,
conditionCount === 1
? 'condition marker'
: 'condition markers'
),
createMetric(
configuredCount,
configuredCount === 1
? 'configured field'
: 'configured fields'
)
);
container.append(
summary
);
if (
analysis.conditionVariables
.length
) {
container.append(
$('<div>')
.addClass(
'preload-editor-analysis-note'
)
.text(
'Condition variables: ' +
analysis
.conditionVariables
.join(', ')
)
);
}
const validation =
this.validateConfig(
this.state.config,
analysis
);
if (
validation.errors.length
) {
const errors =
$('<ul>')
.addClass(
'preload-editor-validation-errors'
);
validation.errors.forEach(
error => {
$('<li>')
.text(error)
.appendTo(
errors
);
}
);
container.append(
errors
);
}
if (
validation.warnings.length
) {
const warnings =
$('<ul>')
.addClass(
'preload-editor-validation-warnings'
);
validation.warnings.forEach(
warning => {
$('<li>')
.text(warning)
.appendTo(
warnings
);
}
);
container.append(
warnings
);
}
if (
!validation.errors.length &&
!validation.warnings.length
) {
container.append(
$('<div>')
.addClass(
'preload-editor-validation-success'
)
.text(
'Preload and configuration are in sync.'
)
);
}
},
renderAnalysisBySelector() {
const container =
this.root &&
this.root.find(
'.preload-editor-analysis'
);
if (
container &&
container.length
) {
this.renderAnalysis(
container
);
}
},
/*
* Variable list
*/
renderVariables(
container
) {
container.empty();
const analysis =
this.analysis ||
this.analyzePreload(
this.extractIncludeonly(
this.getEditorContent()
)
);
const variables =
analysis.variables.slice();
const ordered =
['PAGE'];
variables.forEach(
name => {
if (
name !== 'PAGE' &&
!ordered.includes(
name
)
) {
ordered.push(
name
);
}
}
);
const list =
$('<div>')
.addClass(
'preload-editor-variable-list'
);
ordered.forEach(
name => {
const isSelected =
name ===
this.state
.selectedVariable;
const isUsed =
analysis.variables.includes(
name
);
const item =
$('<button>')
.attr({
type: 'button',
'data-variable':
name
})
.addClass(
'preload-editor-variable-item'
)
.toggleClass(
'is-selected',
isSelected
)
.on(
'click.preloadEditor',
() =>
this.selectVariable(
name
)
);
const nameLabel =
$('<span>')
.addClass(
'preload-editor-variable-name'
)
.text(name);
item.append(
nameLabel
);
if (
name ===
'PAGE'
) {
item.append(
$('<span>')
.addClass(
'preload-editor-badge'
)
.text(
'AUTOMATIC'
)
);
} else if (
!isUsed
) {
item.append(
$('<span>')
.addClass(
'preload-editor-badge is-warning'
)
.text(
'UNUSED'
)
);
}
list.append(
item
);
}
);
container.append(
list
);
if (
!ordered.length
) {
container.append(
$('<div>')
.addClass(
'preload-editor-empty'
)
.text(
'No variables found in the preload.'
)
);
}
},
renderVariablesBySelector() {
const container =
this.root &&
this.root.find(
'.preload-editor-variables'
);
if (
container &&
container.length
) {
this.renderVariables(
container
);
}
},
/*
* Select a variable and display only
* its configuration.
*
* No scrolling.
*/
selectVariable(
name
) {
name =
String(name || '')
.trim()
.toUpperCase();
if (!name) {
return;
}
const available =
['PAGE'].concat(
(
this.analysis &&
this.analysis.variables
? this.analysis
.variables
: []
).filter(
variable =>
variable !==
'PAGE'
)
);
if (
!available.includes(
name
)
) {
return;
}
this.state.selectedVariable =
name;
this.renderVariablesBySelector();
this.renderVariableConfigurationBySelector();
},
renderVariableConfigurationBySelector() {
const container =
this.root &&
this.root.find(
'.preload-editor-variable-configuration'
);
if (
container &&
container.length
) {
this.renderVariableConfiguration(
container
);
}
},
renderVariableConfiguration(
container
) {
container.empty();
const analysis =
this.analysis ||
this.analyzePreload(
this.extractIncludeonly(
this.getEditorContent()
)
);
const name =
this.state.selectedVariable ||
'PAGE';
const fields =
this.state.config &&
this.state.config.fields
? this.state.config.fields
: {};
const field =
fields[name] ||
this.createDefaultField(
name,
analysis
);
if (
name ===
'PAGE'
) {
container.append(
this.createAutomaticPageCard(
field
)
);
return;
}
container.append(
this.createVariableCard(
name,
field,
analysis
)
);
},
/*
* PAGE is automatic/precompiled.
*/
createAutomaticPageCard(
field
) {
const card =
$('<div>')
.addClass(
'preload-editor-variable preload-editor-variable-automatic'
)
.attr(
'data-variable',
'PAGE'
);
const header =
$('<div>')
.addClass(
'preload-editor-variable-header'
);
header.append(
$('<h3>')
.text('PAGE'),
$('<span>')
.addClass(
'preload-editor-badge'
)
.text(
'AUTOMATIC'
)
);
card.append(
header
);
$('<p>')
.addClass(
'preload-editor-analysis-note'
)
.text(
'PAGE is a precompiled automatic variable. It is always available and is not edited like normal variables.'
)
.appendTo(
card
);
const label =
this.textInput(
field.label ||
'Page Name'
).prop(
'disabled',
true
);
const description =
this.textarea(
field.description ||
'Name of the page.'
)
.addClass(
'preload-editor-small-textarea'
)
.prop(
'disabled',
true
);
const type =
this.textInput(
field.type ||
'page'
).prop(
'disabled',
true
);
const required =
this.checkbox(
field.required !==
false
).prop(
'disabled',
true
);
const namespace =
this.textInput(
field.namespace ||
'Main'
).prop(
'disabled',
true
);
const allowNew =
this.checkbox(
field['allow-new'] ===
true
).prop(
'disabled',
true
);
card.append(
this.fieldRow(
'Label',
label
),
this.fieldRow(
'Description',
description
),
this.fieldRow(
'Type',
type
),
this.fieldRow(
'Required',
required
),
this.fieldRow(
'Namespace',
namespace
),
this.fieldRow(
'Allow new page',
allowNew
)
);
return card;
},
createVariableCard(
name,
field,
analysis
) {
const card =
$('<div>')
.addClass(
'preload-editor-variable'
)
.attr(
'data-variable',
name
);
const header =
$('<div>')
.addClass(
'preload-editor-variable-header'
);
header.append(
$('<h3>')
.text(name)
);
if (
!analysis.variables.includes(
name
)
) {
header.append(
$('<span>')
.addClass(
'preload-editor-badge is-warning'
)
.text(
'UNUSED'
)
);
}
card.append(
header
);
const label =
this.textInput(
field.label || ''
);
label.on(
'input.preloadEditor',
() => {
field.label =
label.val();
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Label',
label
)
);
const description =
this.textarea(
field.description ||
''
).addClass(
'preload-editor-small-textarea'
);
description.on(
'input.preloadEditor',
() => {
field.description =
description.val();
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Description',
description
)
);
const types = [
[
'text',
'Text'
],
[
'textarea',
'Textarea'
],
[
'number',
'Number'
],
[
'boolean',
'Boolean'
],
[
'select',
'Select'
],
[
'multiselect',
'Multi-select'
],
[
'page',
'Page'
],
[
'user',
'User'
],
[
'date',
'Date'
]
];
const typeSelect =
this.select(
types.map(
(
[
value,
label
]
) => ({
value,
label
})
),
field.type ||
'text'
);
typeSelect.on(
'change.preloadEditor',
() => {
field.type =
typeSelect.val();
this.markDirty();
this.renderVariableConfigurationBySelector();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Type',
typeSelect
)
);
const required =
this.checkbox(
field.required ===
true
);
required.on(
'change.preloadEditor',
() => {
field.required =
required.prop(
'checked'
);
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Required',
required
)
);
const placeholder =
this.textInput(
field.placeholder ||
''
);
placeholder.on(
'input.preloadEditor',
() => {
const value =
placeholder.val();
if (value) {
field.placeholder =
value;
} else {
delete field.placeholder;
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Placeholder',
placeholder
)
);
const defaultInput =
this.textInput(
field.default ===
undefined
? ''
: field.default
);
defaultInput.on(
'input.preloadEditor',
() => {
const value =
defaultInput.val();
if (value) {
field.default =
value;
} else {
delete field.default;
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Default',
defaultInput,
'For text-like fields this is used as a placeholder. For select fields it is the empty/default option.'
)
);
if (
field.type ===
'textarea'
) {
const maxRows =
this.textInput(
field.maxRows ||
''
).attr(
'type',
'number'
);
maxRows.on(
'input.preloadEditor',
() => {
const value =
parseInt(
maxRows.val(),
10
);
if (
Number.isFinite(
value
) &&
value > 0
) {
field.maxRows =
value;
} else {
delete field.maxRows;
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Maximum rows',
maxRows
)
);
}
if (
field.type ===
'select' ||
field.type ===
'multiselect'
) {
this.renderSelectConfiguration(
card,
field
);
}
return card;
},
renderSelectConfiguration(
card,
field
) {
const source =
this.textInput(
field.source || '',
'category:Example'
);
source.on(
'input.preloadEditor',
() => {
const value =
source.val();
if (value) {
field.source =
value;
} else {
delete field.source;
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Source',
source,
'Currently supported source format: category:Category Name'
)
);
const sourcePrefix =
this.textInput(
field['source-prefix'] ||
''
);
sourcePrefix.on(
'input.preloadEditor',
() => {
const value =
sourcePrefix.val();
if (value) {
field[
'source-prefix'
] = value;
} else {
delete field[
'source-prefix'
];
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Source prefix',
sourcePrefix,
'Only source values beginning with this text are included.'
)
);
const excludeCategory =
this.textInput(
field.exclude &&
field.exclude.category ||
''
);
excludeCategory.on(
'input.preloadEditor',
() => {
const value =
excludeCategory.val();
if (value) {
field.exclude =
Object.assign(
{},
field.exclude ||
{},
{
category:
value
}
);
} else if (
field.exclude
) {
delete field.exclude
.category;
if (
!Object.keys(
field.exclude
).length
) {
delete field.exclude;
}
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Exclude category',
excludeCategory
)
);
card.append(
this.createTransformControls(
field,
'value',
'Value transformation'
),
this.createTransformControls(
field,
'label',
'Label transformation'
)
);
const optionsValue =
Array.isArray(
field.options
)
? field.options
.map(
option => {
if (
typeof option ===
'string'
) {
return option;
}
return (
String(
option.value ||
''
) +
' | ' +
String(
option.label ||
option.value ||
''
)
);
}
)
.join('\n')
: '';
const options =
this.textarea(
optionsValue
).addClass(
'preload-editor-small-textarea'
);
options.on(
'input.preloadEditor',
() => {
const lines =
options
.val()
.split('\n')
.map(
line =>
line.trim()
)
.filter(
Boolean
);
if (!lines.length) {
delete field.options;
} else {
field.options =
lines.map(
line => {
const parts =
line.split(
/\s*\|\s*/
);
if (
parts.length ===
1
) {
return parts[0];
}
return {
value:
parts[0],
label:
parts
.slice(
1
)
.join(
' | '
)
};
}
);
}
this.markDirty();
this.renderConfigPreviewBySelector();
}
);
card.append(
this.fieldRow(
'Manual options',
options,
'One per line. Optional label format: value | label. Leave empty when using a source.'
)
);
},
createTransformControls(
field,
property,
title
) {
const wrapper =
$('<div>')
.addClass(
'preload-editor-transform'
);
$('<h4>')
.text(title)
.appendTo(
wrapper
);
const existing =
field[property] &&
typeof field[property] ===
'object'
? field[property]
: {};
const transform =
this.select(
[
{
value: '',
label:
'No transformation'
},
{
value:
'remove-prefix',
label:
'Remove prefix'
},
{
value:
'remove-suffix',
label:
'Remove suffix'
},
{
value: 'replace',
label:
'Replace'
}
],
existing.transform ||
''
);
const prefix =
this.textInput(
existing.prefix ||
''
);
const suffix =
this.textInput(
existing.suffix ||
''
);
const from =
this.textInput(
existing.from ||
''
);
const to =
this.textInput(
existing.to ||
''
);
const controls =
$('<div>')
.addClass(
'preload-editor-transform-controls'
);
const prefixRow =
this.fieldRow(
'Prefix',
prefix
);
const suffixRow =
this.fieldRow(
'Suffix',
suffix
);
const fromRow =
this.fieldRow(
'From',
from
);
const toRow =
this.fieldRow(
'To',
to
);
const renderInputs =
() => {
const type =
transform.val();
prefixRow.toggle(
type ===
'remove-prefix'
);
suffixRow.toggle(
type ===
'remove-suffix'
);
fromRow.toggle(
type ===
'replace'
);
toRow.toggle(
type ===
'replace'
);
};
const update =
() => {
const type =
transform.val();
let object =
null;
if (
type ===
'remove-prefix' &&
prefix.val()
) {
object = {
transform:
type,
prefix:
prefix.val()
};
} else if (
type ===
'remove-suffix' &&
suffix.val()
) {
object = {
transform:
type,
suffix:
suffix.val()
};
} else if (
type ===
'replace' &&
from.val()
) {
object = {
transform:
type,
from:
from.val(),
to:
to.val()
};
}
if (object) {
field[property] =
object;
} else {
delete field[property];
}
this.markDirty();
this.renderConfigPreviewBySelector();
};
transform.on(
'change.preloadEditor',
() => {
update();
renderInputs();
}
);
[
prefix,
suffix,
from,
to
].forEach(
input => {
input.on(
'input.preloadEditor',
update
);
}
);
controls.append(
this.fieldRow(
'Transformation',
transform
),
prefixRow,
suffixRow,
fromRow,
toRow
);
renderInputs();
wrapper.append(
controls
);
return wrapper;
},
// Config output
getCleanConfig() {
const config =
JSON.parse(
JSON.stringify(
this.state.config
)
);
const fields =
config.fields || {};
const orderedFields =
{};
/*
* PAGE is always first and automatic.
*/
orderedFields.PAGE =
this.getAutomaticPageField();
Object.keys(
fields
)
.filter(
name =>
name.toUpperCase() !==
'PAGE'
)
.forEach(
name => {
orderedFields[name] =
fields[name];
}
);
config.fields =
orderedFields;
return config;
},
getConfigJSON() {
return JSON.stringify(
this.getCleanConfig(),
null,
4
);
},
renderConfigPreview(
container
) {
if (container) {
container.text(
this.getConfigJSON()
);
}
},
renderConfigPreviewBySelector() {
const preview =
this.root &&
this.root.find(
'.preload-editor-config-preview'
);
if (
preview &&
preview.length
) {
this.renderConfigPreview(
preview
);
}
this.renderAnalysisBySelector();
},
markDirty() {
this.state.dirty = true;
},
// Save
async savePreloadOnly() {
let title =
String(
this.state.preloadTitle ||
''
).trim();
if (!title) {
const result =
await this.createPromptDialog(
'Preload title',
'Enter the full title for the preload.'
);
if (!result) {
return;
}
title = result;
this.state.preloadTitle =
title;
}
/*
* Always pull the actual CodeMirror
* document before saving.
*/
this.state.preloadContent =
this.getEditorContent();
const validation =
this.validateBeforeSave();
if (
validation.errors.length
) {
this.showValidationErrors(
validation
);
return;
}
this.setStatus(
'Saving preload...',
'loading'
);
try {
const exists =
await this.pageExists(
title
);
await this.savePage(
title,
this.state.preloadContent,
exists
? 'Updated preload with Preload Editor'
: 'Created preload with Preload Editor',
!exists
);
this.state.mode =
'edit';
this.state.dirty =
false;
this.setStatus(
'Preload saved successfully.',
'success'
);
mw.notify(
'Preload saved.',
{
type:
'success'
}
);
} catch (
error
) {
console.error(
'Preload Editor save:',
error
);
this.setStatus(
error.message ||
'Could not save preload.',
'error'
);
mw.notify(
error.message ||
'Could not save preload.',
{
type:
'error'
}
);
}
},
async saveAll() {
let title =
String(
this.state.preloadTitle ||
''
).trim();
if (!title) {
const result =
await this.createPromptDialog(
'Preload title',
'Enter the full title for the preload.'
);
if (!result) {
return;
}
title = result;
this.state.preloadTitle =
title;
}
/*
* Always use the actual CodeMirror
* document when saving.
*/
this.state.preloadContent =
this.getEditorContent();
/*
* Make sure the configuration is
* synchronized with anything newly
* typed into the preload.
*
* This means even if the user forgot
* to click Detect variables, saving
* will still catch new variables.
*/
this.reanalyze();
const validation =
this.validateBeforeSave();
if (
validation.errors.length
) {
this.showValidationErrors(
validation
);
return;
}
const configTitle =
title.replace(
/\/+$/,
''
) +
'/config.json';
this.setStatus(
'Saving preload and config...',
'loading'
);
try {
const preloadExists =
await this.pageExists(
title
);
await this.savePage(
title,
this.state.preloadContent,
preloadExists
? 'Updated preload with Preload Editor'
: 'Created preload with Preload Editor',
!preloadExists
);
const configExists =
await this.pageExists(
configTitle
);
await this.savePage(
configTitle,
this.getConfigJSON(),
configExists
? 'Updated preload config with Preload Editor'
: 'Created preload config with Preload Editor',
!configExists
);
this.state.mode =
'edit';
this.state.dirty =
false;
this.state.preloadTitle =
title;
this.setStatus(
'Preload and config saved successfully.',
'success'
);
mw.notify(
'Preload and config saved.',
{
type:
'success'
}
);
} catch (
error
) {
console.error(
'Preload Editor save:',
error
);
this.setStatus(
error.message ||
'Could not save preload/config.',
'error'
);
mw.notify(
error.message ||
'Could not save preload/config.',
{
type:
'error'
}
);
}
},
validateBeforeSave() {
const errors = [];
const warnings = [];
const title =
String(
this.state.preloadTitle ||
''
).trim();
if (!title) {
errors.push(
'A preload title is required.'
);
}
if (
title &&
!/\/Preload$/i.test(
title
)
) {
warnings.push(
'The title does not end with "/Preload".'
);
}
const content =
this.getEditorContent();
this.state.preloadContent =
content;
if (!content.trim()) {
errors.push(
'The preload cannot be empty.'
);
}
if (
!/<includeonly>/i.test(
content
)
) {
warnings.push(
'The preload does not contain an <includeonly> section.'
);
}
if (
!/<noinclude>/i.test(
content
)
) {
warnings.push(
'The preload does not contain a <noinclude> section.'
);
}
const analysis =
this.analyzePreload(
this.extractIncludeonly(
content
)
);
/*
* Synchronize configuration one final
* time before saving.
*
* This catches variables even if the
* user never clicked Detect variables.
*/
this.state.config =
this.prepareConfigForVariables(
this.state.config ||
this.emptyConfig(),
analysis
);
const configValidation =
this.validateConfig(
this.state.config,
analysis
);
errors.push(
...configValidation.errors
);
warnings.push(
...configValidation.warnings
);
let depth = 0;
analysis.conditions.forEach(
condition => {
if (
condition.type ===
'if'
) {
depth++;
} else if (
condition.type ===
'endif'
) {
depth--;
if (
depth < 0
) {
errors.push(
'Found @endif without a matching @if.'
);
depth = 0;
}
} else if (
condition.type ===
'elseif' ||
condition.type ===
'else'
) {
if (
depth === 0
) {
errors.push(
'@' +
condition.type +
' exists outside an @if block.'
);
}
}
}
);
if (depth > 0) {
errors.push(
'One or more @if blocks are missing @endif.'
);
}
return {
errors,
warnings,
valid:
errors.length === 0
};
},
showValidationErrors(
validation
) {
this.renderAnalysisBySelector();
this.setStatus(
validation.errors.join(
' '
),
'error'
);
mw.notify(
validation.errors.join(
'\n'
),
{
type:
'error'
}
);
}
};
mw.PreloadEditor =
PreloadEditor;
$(function () {
if (
mw.config.get(
'wgPageName'
) !==
'Petit_Planet:Preload_Editor'
) {
return;
}
PreloadEditor.init();
});
}(mediaWiki, jQuery));