luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add color scheme to demo page

Browse source
This commit is contained in:
Jordan Welch 2023-09-17 08:59:24 -05:00
parent 0b76161d86
commit 84a323f0de
No known key found for this signature in database
GPG key ID: 8C1872FF2F7710B3
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
website/templates/pages/demo/content.handlebars
View file

@ -33,7 +33,7 @@
</div> </div>
<div class="columns is-desktop is-multiline"> <div class="columns is-desktop is-multiline">
<div class="column is-one-fifth-widescreen"> <div class="column is-one-sixth-widescreen">
<label title="Output format of the HTML, either line by line or side by side"> <label title="Output format of the HTML, either line by line or side by side">
<p>Output Format</p> <p>Output Format</p>
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat"> <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
@ -42,14 +42,24 @@
</select> </select>
</label> </label>
</div> </div>
<div class="column is-one-fifth-widescreen"> <div class="column is-one-sixth-widescreen">
<label title="Color scheme to render. Auto uses user preference.">
<p>Color Scheme</p>
<select class="options-label-value" id="diff-url-options-color-scheme" name="colorScheme">
<option value="light" selected>Light</option>
<option value="dark">Dark</option>
<option value="auto">Auto</option>
</select>
</label>
</div>
<div class="column is-one-sixth-widescreen">
<label title="Show the file list summary before the diff"> <label title="Show the file list summary before the diff">
<p>File Summary</p> <p>File Summary</p>
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList" <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList"
checked /> checked />
</label> </label>
</div> </div>
<div class="column is-one-fifth-widescreen"> <div class="column is-one-sixth-widescreen">
<label title="Level of matching for the comparison algorithm"> <label title="Level of matching for the comparison algorithm">
<p>Matching Type</p> <p>Matching Type</p>
<select class="options-label-value" id="diff-url-options-matching" name="matching"> <select class="options-label-value" id="diff-url-options-matching" name="matching">
@ -59,14 +69,14 @@
</select> </select>
</label> </label>
</div> </div>
<div class="column is-one-fifth-widescreen"> <div class="column is-one-sixth-widescreen">
<label title="Similarity threshold for the matching algorithm"> <label title="Similarity threshold for the matching algorithm">
<p>Words Threshold</p> <p>Words Threshold</p>
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number" <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
name="matchWordsThreshold" value="0.25" step="0.05" min="0" max="1" /> name="matchWordsThreshold" value="0.25" step="0.05" min="0" max="1" />
</label> </label>
</div> </div>
<div class="column is-one-fifth-widescreen"> <div class="column is-one-sixth-widescreen">
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes"> <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">
<p>Max Comparisons</p> <p>Max Comparisons</p>
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number" <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
@ -134,4 +144,4 @@
providing better diff support for existing online services. providing better diff support for existing online services.
</p> </p>
</div> </div>
</section> </section>

3
website/templates/pages/demo/demo.ts
View file

@ -200,6 +200,7 @@ type Elements = {
}; };
options: { options: {
outputFormat: HTMLInputElement; outputFormat: HTMLInputElement;
colorScheme: HTMLInputElement;
matching: HTMLInputElement; matching: HTMLInputElement;
wordsThreshold: HTMLInputElement; wordsThreshold: HTMLInputElement;
matchingMaxComparisons: HTMLInputElement; matchingMaxComparisons: HTMLInputElement;
@ -259,6 +260,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}, },
options: { options: {
outputFormat: getHTMLInputElementById('diff-url-options-output-format'), outputFormat: getHTMLInputElementById('diff-url-options-output-format'),
colorScheme: getHTMLInputElementById('diff-url-options-color-scheme'),
matching: getHTMLInputElementById('diff-url-options-matching'), matching: getHTMLInputElementById('diff-url-options-matching'),
wordsThreshold: getHTMLInputElementById('diff-url-options-match-words-threshold'), wordsThreshold: getHTMLInputElementById('diff-url-options-match-words-threshold'),
matchingMaxComparisons: getHTMLInputElementById('diff-url-options-matching-max-comparisons'), matchingMaxComparisons: getHTMLInputElementById('diff-url-options-matching-max-comparisons'),
@ -272,6 +274,7 @@ document.addEventListener('DOMContentLoaded', async () => {
// Update HTML inputs from any changes in URL // Update HTML inputs from any changes in URL
config.outputFormat && (elements.options.outputFormat.value = config.outputFormat); config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
config.colorScheme && (elements.options.colorScheme.value = config.colorScheme);
config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList); config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
config.matching && (elements.options.matching.value = config.matching); config.matching && (elements.options.matching.value = config.matching);
config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString()); config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());