STEINNI
91 lines
3.5 KiB
JavaScript
91 lines
3.5 KiB
JavaScript
class codeTemplateDialog extends WindozDialogContent {
|
|
|
|
actions = [
|
|
{
|
|
label: 'Close',
|
|
onclick: this.cancel.bind(this),
|
|
severity: 'secondary'
|
|
}
|
|
]
|
|
|
|
beautifySettings = {
|
|
"indent_size": "4",
|
|
"indent_char": " ",
|
|
"max_preserve_newlines": "-1",
|
|
"preserve_newlines": false,
|
|
"keep_array_indentation": true,
|
|
"break_chained_methods": true,
|
|
"indent_scripts": "normal",
|
|
"brace_style": "collapse",
|
|
"space_before_conditional": false,
|
|
"unescape_strings": false,
|
|
"jslint_happy": false,
|
|
"end_with_newline": false,
|
|
"wrap_line_length": "0",
|
|
"indent_inner_html": false,
|
|
"comma_first": false,
|
|
"e4x": false,
|
|
"indent_empty_lines": false
|
|
};
|
|
|
|
DOMContentLoaded(options) {
|
|
this.codeclass = options.codeclass;
|
|
this.styleguideView = options.styleguideView;
|
|
this.styleguideEl = document.createElement('div');
|
|
this.styleguideEl.innerHTML = options.styleguideTemplate;
|
|
this.styleguideCode = options.styleguideCode;
|
|
|
|
let content = '';
|
|
let snipet, re, mstart, mend, startidx, endidx, code;
|
|
for(let el of this.styleguideEl.querySelectorAll('.'+this.codeclass)) {
|
|
// Remove all instances of the code-show button themselves from the (cloned, src) markup.
|
|
for(let node of el.querySelectorAll('button.show-code')) node.remove();
|
|
// Get the proper template part(s) -before it was eicfy
|
|
let title = el.dataset.codetitle;
|
|
snipet = el.outerHTML.replace(this.codeclass,'');
|
|
snipet = snipet.replace(/data-codetitle=".+?"/g, '')
|
|
snipet = snipet.replace('class=""','');
|
|
snipet = snipet.replace(/ (\w+)=""/g,' $1'); // brutal: will cleanup outside tags
|
|
snipet = html_beautify(snipet, this.beautifySettings);
|
|
snipet = hljs.highlight(snipet, { 'language':'html'} );
|
|
content += `
|
|
<article eiccard collapsable>
|
|
<header><h1>${title} Markup</h1></header>
|
|
<section class="code">
|
|
<pre><code class="language-html">${snipet.value}</code></pre>
|
|
</section>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
// Now get the corresponding JS
|
|
re = new RegExp(`\\/\\* *${this.codeclass} *\\: *show_code_start *\\*\\/`,'gm')
|
|
mstart = re.exec(this.styleguideCode);
|
|
re = new RegExp(`\\/\\* *${this.codeclass} *\\: *show_code_end *\\*\\/`,'gm')
|
|
mend = re.exec(this.styleguideCode);
|
|
if(mstart && mend){
|
|
startidx= mstart.index+mstart[0].length
|
|
endidx = mend.index;
|
|
if(endidx > startidx) {
|
|
snipet = this.styleguideCode.substring(startidx, endidx);
|
|
snipet = js_beautify(snipet, this.beautifySettings);
|
|
snipet = hljs.highlight(snipet, { 'language':'javascript'});
|
|
content += `
|
|
<article eiccard collapsable>
|
|
<header><h1>Javascript</h1></header>
|
|
<section class="code">
|
|
<pre><code class="language-html">${snipet.value}</code></pre>
|
|
</section>
|
|
</article>
|
|
`;
|
|
}
|
|
}
|
|
|
|
this.find('.snipets').innerHTML = content;
|
|
|
|
ui.eicfy(this.el);
|
|
}
|
|
|
|
}
|
|
|
|
app.registerClass('codeTemplateDialog',codeTemplateDialog); |