summaryrefslogtreecommitdiff
path: root/ext/bg/settings.html
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-11-09 16:34:39 -0500
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-11-09 16:34:39 -0500
commit184cc4cf28594f3bef9e141a8cbf9d7eb7a39e88 (patch)
tree4b8139029ed0779f35dbcba7bc065edef188cd3b /ext/bg/settings.html
parent085881d3426c5a872739d56e286514317b2ec8f3 (diff)
Allow templates to be tested on the settings page
Diffstat (limited to 'ext/bg/settings.html')
-rw-r--r--ext/bg/settings.html57
1 files changed, 54 insertions, 3 deletions
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 86d8935d..bdcc11d3 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -272,7 +272,7 @@
<div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
<label for="settings-popup-preview-text">Popup preview text</label>
- <input type="text" id="settings-popup-preview-text" class="form-control" value="読め">
+ <input type="text" id="settings-popup-preview-text" class="form-control" value="読め" placeholder="Preview text">
</div>
<div class="form-group ignore-form-changes">
@@ -699,10 +699,60 @@
<p class="help-block">
Fields are formatted using the <a href="https://handlebarsjs.com/" target="_blank" rel="noopener">Handlebars.js</a> template rendering
engine. Advanced users can modify these templates for ultimate control of what information gets included in
- their Anki cards. If you encounter problems with your changes you can always <a href="#" id="field-templates-reset">reset to default</a>
- template settings.
+ their Anki cards. If you encounter problems with your changes, you can always reset to the default template settings.
</p>
<textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
+ <div>
+ <button class="btn btn-danger" id="field-templates-reset">Reset Templates</button>
+ </div>
+ <p></p>
+ <pre id="field-template-compile-result" hidden></pre>
+
+ <p>Templates can be tested using the inputs below.</p>
+
+ <div class="form-group">
+ <div class="row">
+ <div class="col-xs-6">
+ <label for="field-templates-preview-text">Preview text</label>
+ <input type="text" id="field-templates-preview-text" class="form-control" value="読め" placeholder="Preview text">
+ </div>
+ <div class="col-xs-6">
+ <label for="field-template-render-text">Test field</label>
+ <div class="input-group">
+ <div class="input-group-btn">
+ <button class="btn btn-default" id="field-template-render" title="Test"><span class="glyphicon glyphicon-play"></span></button>
+ </div>
+ <input type="text" class="form-control" id="field-template-render-text" value="{expression}" placeholder="{marker}">
+ <div class="input-group-btn">
+ <button class="btn btn-default dropdown-toggle" id="field-templates-dropdown" data-toggle="dropdown"><span class="caret"></span></button>
+ <ul class="dropdown-menu dropdown-menu-right" id="field-templates-list"></ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <p></p>
+ <pre id="field-template-render-result" hidden></pre>
+ </div>
+
+ <div class="modal fade" tabindex="-1" role="dialog" id="field-template-reset-modal">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+ <h4 class="modal-title">Confirm template reset</h4>
+ </div>
+ <div class="modal-body">
+ Are you sure you want to reset the field templates to the default value?
+ Any changes you made will be lost.
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-danger" id="field-templates-reset-confirm">Reset Templates</button>
+ </div>
+ </div>
+ </div>
</div>
<template id="anki-field-template"><tr>
@@ -777,6 +827,7 @@
<script src="/mixed/lib/wanakana.min.js"></script>
<script src="/mixed/js/extension.js"></script>
+ <script src="/mixed/js/japanese.js"></script>
<script src="/bg/js/anki.js"></script>
<script src="/bg/js/api.js"></script>