More work on options

ext/bg/js/options-form.js

@@ -91,7 +91,7 @@ function getFormValues() {
         optsNew.ankiKanjiModel = $('#anki-kanji-model').val();
         optsNew.ankiKanjiFields = fieldsToDict($('#kanji .anki-field-value'));
 
-        $('.dictionary').each((index, element) => {
+        $('.dict').each((index, element) => {
             const dictionary = $(element);
             const name = dictionary.data('name');
             const enableTerms = dictionary.find('.dict-enable-terms').prop('checked');
@@ -163,7 +163,7 @@ function populateAnkiDeckAndModel(opts) {
 }
 
 function populateDictionaries(opts) {
-    const container = $('.dictionaries');
+    const container = $('.dicts');
     container.empty();
 
     yomichan().translator.dictionary.getInfo().then(rows => {
@@ -181,7 +181,7 @@ function populateDictionaries(opts) {
             container.append($(html));
         });
 
-        container.find('.dictionary input').change(onOptionsChanged);
+        container.find('.dict input').change(onOptionsChanged);
     });
 }
 
@@ -289,6 +289,23 @@ $(document).ready(() => {
         $('input, select').not('.anki-model').change(onOptionsChanged);
         $('.anki-model').change(onAnkiModelChanged);
 
+        $('#dict-import a').click(e => {
+            e.preventDefault();
+            const control = $('#dict-import-url');
+            const url = $(e.target).data('url');
+            if (url.includes('/')) {
+                control.val(url);
+            } else {
+                control.val(chrome.extension.getURL(`bg/data/${url}`));
+            }
+            control.trigger('change');
+        });
+
+        $('#dict-import-url').on('change keyup paste', () => {
+            const disable = $('#dict-import-url').val().trim().length === 0;
+            $('#dict-import-start').prop('disabled', disable);
+        });
+
         populateDictionaries(opts);
         populateAnkiDeckAndModel(opts);
         updateVisibility(opts);

ext/bg/js/templates.js

@@ -7,7 +7,7 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "<div class=\"dictionary well well-sm\" data-name=\""
+  return "<div class=\"dict well well-sm\" data-name=\""
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + "\">\n    <div class=\"row\">\n        <div class=\"col-xs-8\">\n            <h4><span class=\"text-muted glyphicon glyphicon-book\"></span> "
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))

ext/bg/options.html

@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            #anki-spinner, #anki-general, #anki-error, #options-advanced {
+            #anki-spinner, #anki-general, #anki-error, #dict-error, #dict-import-progress, #options-advanced {
                 display: none;
             }
 
@@ -65,7 +65,7 @@
             <div>
                 <h3>Dictionaries</h3>
 
-                <div class="dictionaries"></div>
+                <div class="dicts"></div>
 
                 <div class="alert alert-danger" id="dict-error">
                     <strong>Error:</strong>
@@ -80,16 +80,16 @@
                     <div class="input-group-btn">
                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                         <ul class="dropdown-menu">
-                            <li><a href="#" id="dict-import-jmdict">JMdict</a></li>
+                            <li><a href="#" data-url="edict">JMdict</a></li>
-                            <li><a href="#" id="dict-import-jmnedict">JMnedict</a></li>
+                            <li><a href="#" data-url="enamdict">JMnedict</a></li>
-                            <li><a href="#" id="dict-import-kanjidic2">KANJIDIC2</a></li>
+                            <li><a href="#" data-url="kanjidic">KANJIDIC2</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="#" id="dict-import-local">Local dictionary</a></li>
+                            <li><a href="#" data-url="http://localhost:9876">Local dictionary</a></li>
                         </ul>
                     </div>
                     <input type="text" id="dict-import-url" class="form-control" placeholder="Dictionary import URL">
-                    <div class="input-group-btn">
+                    <div class="input-group-btn disabled">
-                        <button type="button" id="dict-import-start" class="btn btn-primary">Import</button>
+                        <button type="button" id="dict-import-start" class="btn btn-primary" disabled>Import</button>
                     </div>
                 </div>
             </div>

tmpl/dictionary.html

@@ -1,4 +1,4 @@
-<div class="dictionary well well-sm" data-name="{{name}}">
+<div class="dict well well-sm" data-name="{{name}}">
     <div class="row">
         <div class="col-xs-8">
             <h4><span class="text-muted glyphicon glyphicon-book"></span> {{name}} <small>v.{{version}}</small></h4>