Allow templates to be tested on the settings page

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>