Option stubs

ext/bg/js/options-form.js

@@ -47,6 +47,8 @@ function formToOptions(section, callback) {
                 optsNew.enableAnkiConnect = $('#enable-anki-connect').prop('checked');
                 break;
             case 'anki':
+                optsNew.ankiCardTags    = $('#anki-card-tags').val().split(/[,; ]+/);
+                optsNew.ankiHtmlCards   = $('#anki-html-cards').prop('checked');
                 optsNew.ankiVocabDeck   = $('#anki-vocab-deck').val();
                 optsNew.ankiVocabModel  = $('#anki-vocab-model').val();
                 optsNew.ankiVocabFields = fieldsToDict($('#vocab .anki-field-value'));
@@ -91,8 +93,12 @@ function updateAnkiStatus() {
     yomichan().api_getVersion({callback: (version) => {
         if (version === null) {
             $('.error-dlg-connection').show();
+            $('.options-anki-controls').hide();
         } else if (version !== yomichan().getApiVersion()) {
             $('.error-dlg-version').show();
+            $('.options-anki-controls').hide();
+        } else {
+            $('.options-anki-controls').show();
         }
     }});
 }
@@ -166,7 +172,11 @@ $(document).ready(() => {
         $('#select-matched-text').prop('checked', opts.selectMatchedText);
         $('#enable-anki-connect').prop('checked', opts.enableAnkiConnect);
 
+        $('#anki-card-tags').val(opts.ankiCardTags.join(' '));
+        $('#anki-html-cards').prop('checked', opts.ankiHtmlCards);
+
         $('.options-general input').change(onOptionsGeneralChanged);
+        $('.options-anki input').change(onOptionsAnkiChanged);
         $('.anki-deck').change(onOptionsAnkiChanged);
         $('.anki-model').change(onAnkiModelChanged);
 

ext/bg/js/options.js

@@ -24,6 +24,8 @@ function sanitizeOptions(options) {
         selectMatchedText: true,
         loadEnamDict:      false,
         enableAnkiConnect: false,
+        ankiCardTags:      ['yomichan'],
+        ankiHtmlCards:     true,
         ankiVocabDeck:     '',
         ankiVocabModel:    '',
         ankiVocabFields:   {},

ext/bg/options.html

@@ -75,16 +75,33 @@
             <div class="options-anki">
                 <h2>Anki</h2>
 
-                <div class="alert alert-danger error-dlg error-dlg-connection"><strong>Unable to connect</strong>: is the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> installed and running?</div>
+                <div class="alert alert-danger error-dlg error-dlg-connection">
-                <div class="alert alert-warning error-dlg error-dlg-version"><strong>Unsupported version</strong>: the installed version of the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> is not compatible with this release.</div>
+                    <strong>Unable to connect</strong>: is the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> installed and running?
+                </div>
+                <div class="alert alert-warning error-dlg error-dlg-version">
+                    <strong>Unsupported version</strong>: the installed version of the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> is not compatible with this release.
+                </div>
 
-                <form class="form-horizontal">
+                <form class="form-horizontal options-anki-controls">
-                    <ul class="nav nav-tabs">
+                    <div class="form-group">
+                        <label for="anki-card-tags" class="control-label col-sm-2">Card tags</label>
+                        <div class="col-sm-10"><input type="text" id="anki-card-tags" class="form-control"></div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="col-sm-offset-2 col-sm-10">
+                            <div class="checkbox">
+                                <label class="control-label"><input type="checkbox" id="anki-html-cards"> Render cards using <a href="https://en.wikipedia.org/wiki/HTML">HTML</a></label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
                         <li class="active"><a href="#vocab" data-toggle="tab">Vocabulary</a></li>
                         <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
                     </ul>
 
-                    <div class="tab-content">
+                    <div class="tab-content col-sm-offset-2 col-sm-10">
                         <div id="vocab" class="tab-pane fade in active">
                             <div class="form-group">
                                 <label class="col-sm-2 control-label" for="anki-vocab-deck">Deck</label>