Modularize template
This commit is contained in:
jaseg
parent
c3f4bd6b27
commit
715ddb8602
1 changed files with 102 additions and 105 deletions
207
src/wsdiff.py
207
src/wsdiff.py
|
|
@ -40,17 +40,21 @@ from pygments.lexer import RegexLexer
|
||||||
from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, get_all_lexers, LEXERS
|
from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, get_all_lexers, LEXERS
|
||||||
from pygments import token
|
from pygments import token
|
||||||
|
|
||||||
|
DIFF_STYLE_TOGGLE = r'''
|
||||||
|
<div id="js-controls">
|
||||||
|
<div class="single-control">
|
||||||
|
<span class="control-label">Split view</span>
|
||||||
|
<span class="three-way-toggle">
|
||||||
|
<div class="field-group">
|
||||||
|
<div class="field"><input type="checkbox" id="toggle-split-auto" checked></input><label for="toggle-split-auto">Auto</label></div>
|
||||||
|
<div class="field"><input type="checkbox" id="toggle-split-force" disabled></input><label for="toggle-split-force">Split view</label></div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
'''
|
||||||
|
|
||||||
HTML_TEMPLATE = r'''
|
MAIN_CSS = r'''
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>$title</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
|
||||||
<style id="main-style">
|
|
||||||
@layer base-style {
|
@layer base-style {
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -340,80 +344,87 @@ HTML_TEMPLATE = r'''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
'''
|
||||||
<style>
|
|
||||||
$pygments_css
|
DIFF_STYLE_SCRIPT = r'''
|
||||||
</style>
|
const findStylesheet = (id => Array.from(document.styleSheets).find(element => element.ownerNode && element.ownerNode.id == id));
|
||||||
|
const findRule = ((stylesheet, name) => Array.from(stylesheet.cssRules).find(
|
||||||
|
element => (element instanceof CSSLayerBlockRule && element.name == name)).cssRules[0]);
|
||||||
|
|
||||||
|
const automaticMediaElement = findRule(findStylesheet('main-style'), 'automatic-media-rule');
|
||||||
|
const automaticMediaRule = automaticMediaElement.media[0];
|
||||||
|
const impossibleMediaRule = "screen and (max-width: 0px)";
|
||||||
|
const tautologicalMediaRule = "screen and (min-width: 0px)";
|
||||||
|
|
||||||
|
const toggleAuto = document.getElementById("toggle-split-auto");
|
||||||
|
const toggleForce = document.getElementById("toggle-split-force");
|
||||||
|
toggleAuto.checked = true;
|
||||||
|
toggleForce.disabled = true;
|
||||||
|
|
||||||
|
toggleAuto.addEventListener('change', (event) => {
|
||||||
|
const automatic = toggleAuto.checked;
|
||||||
|
toggleForce.disabled = automatic;
|
||||||
|
if (automatic) {
|
||||||
|
automaticMediaElement.media.deleteMedium(automaticMediaElement.media[0]);
|
||||||
|
automaticMediaElement.media.appendMedium(automaticMediaRule);
|
||||||
|
} else {
|
||||||
|
automaticMediaElement.media.deleteMedium(automaticMediaRule);
|
||||||
|
if (toggleForce.checked) {
|
||||||
|
automaticMediaElement.media.appendMedium(impossibleMediaRule);
|
||||||
|
} else {
|
||||||
|
automaticMediaElement.media.appendMedium(tautologicalMediaRule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
toggleForce.addEventListener('change', (event) => {
|
||||||
|
const automatic = toggleAuto.checked;
|
||||||
|
if (!automatic) {
|
||||||
|
automaticMediaElement.media.deleteMedium(automaticMediaElement.media[0]);
|
||||||
|
if (toggleForce.checked) {
|
||||||
|
automaticMediaElement.media.appendMedium(impossibleMediaRule);
|
||||||
|
} else {
|
||||||
|
automaticMediaElement.media.appendMedium(tautologicalMediaRule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mediaMatch = window.matchMedia(automaticMediaRule);
|
||||||
|
mediaMatch.addEventListener('change', (event) => {
|
||||||
|
const automatic = toggleAuto.checked;
|
||||||
|
if (automatic) {
|
||||||
|
toggleForce.checked = !event.matches;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toggleForce.checked = !mediaMatch.matches;
|
||||||
|
|
||||||
|
document.getElementById('js-controls').style = 'display: flex';
|
||||||
|
'''
|
||||||
|
|
||||||
|
HTML_TEMPLATE = r'''
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>$title</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<style id="main-style">
|
||||||
|
$main_css
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
$pygments_css
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="js-controls">
|
$diff_style_toggle
|
||||||
<div class="single-control">
|
<script>
|
||||||
<span class="control-label">Split view</span>
|
$diff_style_script
|
||||||
<span class="three-way-toggle">
|
</script>
|
||||||
<div class="field-group">
|
<div class="diff-files">
|
||||||
<div class="field"><input type="checkbox" id="toggle-split-auto" checked></input><label for="toggle-split-auto">Auto</label></div>
|
$body
|
||||||
<div class="field"><input type="checkbox" id="toggle-split-force" disabled></input><label for="toggle-split-force">Split view</label></div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
const findStylesheet = (id => Array.from(document.styleSheets).find(element => element.ownerNode && element.ownerNode.id == id));
|
|
||||||
const findRule = ((stylesheet, name) => Array.from(stylesheet.cssRules).find(
|
|
||||||
element => (element instanceof CSSLayerBlockRule && element.name == name)).cssRules[0]);
|
|
||||||
|
|
||||||
const automaticMediaElement = findRule(findStylesheet('main-style'), 'automatic-media-rule');
|
|
||||||
const automaticMediaRule = automaticMediaElement.media[0];
|
|
||||||
const impossibleMediaRule = "screen and (max-width: 0px)";
|
|
||||||
const tautologicalMediaRule = "screen and (min-width: 0px)";
|
|
||||||
|
|
||||||
const toggleAuto = document.getElementById("toggle-split-auto");
|
|
||||||
const toggleForce = document.getElementById("toggle-split-force");
|
|
||||||
toggleAuto.checked = true;
|
|
||||||
toggleForce.disabled = true;
|
|
||||||
|
|
||||||
toggleAuto.addEventListener('change', (event) => {
|
|
||||||
const automatic = toggleAuto.checked;
|
|
||||||
toggleForce.disabled = automatic;
|
|
||||||
if (automatic) {
|
|
||||||
automaticMediaElement.media.deleteMedium(automaticMediaElement.media[0]);
|
|
||||||
automaticMediaElement.media.appendMedium(automaticMediaRule);
|
|
||||||
} else {
|
|
||||||
automaticMediaElement.media.deleteMedium(automaticMediaRule);
|
|
||||||
if (toggleForce.checked) {
|
|
||||||
automaticMediaElement.media.appendMedium(impossibleMediaRule);
|
|
||||||
} else {
|
|
||||||
automaticMediaElement.media.appendMedium(tautologicalMediaRule);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
toggleForce.addEventListener('change', (event) => {
|
|
||||||
const automatic = toggleAuto.checked;
|
|
||||||
if (!automatic) {
|
|
||||||
automaticMediaElement.media.deleteMedium(automaticMediaElement.media[0]);
|
|
||||||
if (toggleForce.checked) {
|
|
||||||
automaticMediaElement.media.appendMedium(impossibleMediaRule);
|
|
||||||
} else {
|
|
||||||
automaticMediaElement.media.appendMedium(tautologicalMediaRule);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const mediaMatch = window.matchMedia(automaticMediaRule);
|
|
||||||
mediaMatch.addEventListener('change', (event) => {
|
|
||||||
const automatic = toggleAuto.checked;
|
|
||||||
if (automatic) {
|
|
||||||
toggleForce.checked = !event.matches;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
toggleForce.checked = !mediaMatch.matches;
|
|
||||||
|
|
||||||
document.getElementById('js-controls').style = 'display: flex';
|
|
||||||
</script>
|
|
||||||
<div class="diff-files">
|
|
||||||
$body
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
'''
|
'''
|
||||||
|
|
@ -513,22 +524,6 @@ span.clearbg {
|
||||||
}
|
}
|
||||||
'''
|
'''
|
||||||
|
|
||||||
class SexprLexer(RegexLexer):
|
|
||||||
name = 'KiCad S-Expression'
|
|
||||||
aliases = ['sexp']
|
|
||||||
filenames = ['*.kicad_mod', '*.kicad_sym']
|
|
||||||
|
|
||||||
tokens = {
|
|
||||||
'root': [
|
|
||||||
(r'\s+', token.Whitespace),
|
|
||||||
(r'[()]', token.Punctuation),
|
|
||||||
(r'([+-]?\d+\.\d+)(?=[)\s])', token.Number),
|
|
||||||
(r'(-?\d+)(?=[)\s])', token.Number),
|
|
||||||
(r'"((?:[^"]|\\")*)"(?=[)\s])', token.String),
|
|
||||||
(r'([^()"\s]+)(?=[)\s])', token.Name),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
from pygments.formatter import Formatter
|
from pygments.formatter import Formatter
|
||||||
from pygments.token import STANDARD_TYPES
|
from pygments.token import STANDARD_TYPES
|
||||||
|
|
||||||
|
|
@ -674,6 +669,9 @@ def cli():
|
||||||
print(string.Template(HTML_TEMPLATE).substitute(
|
print(string.Template(HTML_TEMPLATE).substitute(
|
||||||
title=pagetitle,
|
title=pagetitle,
|
||||||
pygments_css=syntax_css,
|
pygments_css=syntax_css,
|
||||||
|
main_css=MAIN_CSS,
|
||||||
|
diff_style_toggle=DIFF_STYLE_TOGGLE,
|
||||||
|
diff_style_script=DIFF_STYLE_SCRIPT,
|
||||||
body='$body'), file=args.output)
|
body='$body'), file=args.output)
|
||||||
sys.exit(0)
|
sys.exit(0)
|
||||||
|
|
||||||
|
|
@ -717,14 +715,10 @@ def cli():
|
||||||
if args.lexer:
|
if args.lexer:
|
||||||
lexer = get_lexer_by_name(lexer)
|
lexer = get_lexer_by_name(lexer)
|
||||||
else:
|
else:
|
||||||
if new.suffix.lower() in ('.kicad_mod', '.kicad_mod', '.kicad_pcb', '.kicad_sch')\
|
try:
|
||||||
or new.name == 'sym_lib_table':
|
lexer = guess_lexer_for_filename(new, new_text)
|
||||||
lexer = SexprLexer()
|
except:
|
||||||
else:
|
lexer = get_lexer_by_name('text')
|
||||||
try:
|
|
||||||
lexer = guess_lexer_for_filename(new, new_text)
|
|
||||||
except:
|
|
||||||
lexer = get_lexer_by_name('text')
|
|
||||||
|
|
||||||
diff_blocks.append(html_diff_block(old_text, new_text, suffix, lexer, hide_filename=args.nofilename))
|
diff_blocks.append(html_diff_block(old_text, new_text, suffix, lexer, hide_filename=args.nofilename))
|
||||||
body = '\n'.join(diff_blocks)
|
body = '\n'.join(diff_blocks)
|
||||||
|
|
@ -735,6 +729,9 @@ def cli():
|
||||||
print(string.Template(HTML_TEMPLATE).substitute(
|
print(string.Template(HTML_TEMPLATE).substitute(
|
||||||
title=pagetitle,
|
title=pagetitle,
|
||||||
pygments_css=syntax_css,
|
pygments_css=syntax_css,
|
||||||
|
main_css=MAIN_CSS,
|
||||||
|
diff_style_toggle=DIFF_STYLE_TOGGLE,
|
||||||
|
diff_style_script=DIFF_STYLE_SCRIPT,
|
||||||
body=body), file=args.output)
|
body=body), file=args.output)
|
||||||
|
|
||||||
if args.open:
|
if args.open:
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue