diff options
Diffstat (limited to 'ext/bg')
| -rw-r--r-- | ext/bg/img/spinner.gif | bin | 0 -> 7358 bytes | |||
| -rw-r--r-- | ext/bg/js/ankiweb.js | 4 | ||||
| -rw-r--r-- | ext/bg/js/options-form.js | 32 | ||||
| -rw-r--r-- | ext/bg/options.html | 48 | 
4 files changed, 49 insertions, 35 deletions
| diff --git a/ext/bg/img/spinner.gif b/ext/bg/img/spinner.gifBinary files differ new file mode 100644 index 00000000..8ed30cb6 --- /dev/null +++ b/ext/bg/img/spinner.gif diff --git a/ext/bg/js/ankiweb.js b/ext/bg/js/ankiweb.js index ce909fcf..11142637 100644 --- a/ext/bg/js/ankiweb.js +++ b/ext/bg/js/ankiweb.js @@ -61,6 +61,10 @@ class AnkiWeb {      }      authenticate() { +        if (this.username.length === 0 || this.password.length === 0) { +            return Promise.reject('missing login credentials'); +        } +          if (this.logged) {              return Promise.resolve(true);          } diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js index fb8ef77b..ceee9e3f 100644 --- a/ext/bg/js/options-form.js +++ b/ext/bg/js/options-form.js @@ -110,15 +110,15 @@ function getAnkiOptions() {  function updateVisibility(opts) {      switch (opts.ankiMethod) {          case 'ankiweb': -            $('.options-anki-general').show(); -            $('.options-anki-login').show(); +            $('#options-anki-general').show(); +            $('#options-anki-login').show();              break;          case 'ankiconnect': -            $('.options-anki-general').show(); -            $('.options-anki-login').hide(); +            $('#options-anki-general').show(); +            $('#options-anki-login').hide();              break;          default: -            $('.options-anki-general').hide(); +            $('#options-anki-general').hide();              break;      } @@ -130,9 +130,14 @@ function updateVisibility(opts) {  }  function populateAnkiDeckAndModel(opts) { -    $('.options-anki-format').hide();      $('.status-dlg').hide(); +    const ankiSpinner = $('#ankiSpinner'); +    ankiSpinner.show(); + +    const ankiFormat = $('#options-anki-format'); +    ankiFormat.hide(); +      const ankiDeck = $('.anki-deck');      ankiDeck.find('option').remove(); @@ -147,17 +152,18 @@ function populateAnkiDeckAndModel(opts) {          return anki().getModelNames();      }).then(names => {          names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name}))); -        populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts); +        return populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);      }).then(() => { -        populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts); +        return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);      }).then(() => { -        $('.options-anki-format').show(); +        ankiFormat.show();          if (opts.ankiMethod !== 'none') {              $('#success-dlg').show();          }      }).catch(error => { -        $('#error-dlg').show(); -        $('#error-dlg span').text(error); +        $('#error-dlg').show().find('span').text(error); +    }).then(() => { +        ankiSpinner.hide();      });  } @@ -260,9 +266,9 @@ $(document).ready(() => {          $('#anki-card-tags').val(opts.ankiCardTags.join(' '));          $('#sentence-extent').val(opts.sentenceExtent); -        $('.options-basic').change(onOptionsBasicChanged); +        $('#options-general, #options-scanning').change(onOptionsBasicChanged); +        $('#options-anki').not('.anki-model').change(onOptionsAnkiChanged);          $('.anki-model').change(onAnkiModelChanged); -        $('.options-anki').not('.anki-model').change(onOptionsAnkiChanged);          populateAnkiDeckAndModel(opts);          updateVisibility(opts); diff --git a/ext/bg/options.html b/ext/bg/options.html index a42af97e..b5c08eaf 100644 --- a/ext/bg/options.html +++ b/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> -            .options-anki-general, .options-anki-login, .options-advanced { +            #anki-spinner, #options-anki-general, #options-anki-login, #options-advanced {                  display: none;              } @@ -24,7 +24,7 @@      </head>      <body>          <div class="container"> -            <div class="options-basic"> +            <div id="options-general">                  <h3>General Options</h3>                  <form class="form-horizontal"> @@ -54,7 +54,7 @@                  </form>              </div> -            <div class="options-basic"> +            <div id="options-scanning">                  <h3>Scanning Options</h3>                  <form class="form-horizontal"> @@ -86,9 +86,20 @@                  </form>              </div> -            <div class="options-anki"> +            <div id="options-anki"> +                <img src="img/spinner.gif" class="pull-right" id="anki-spinner" alt> +                  <h3>Anki Options</h3> +                <div class="form-group"> +                    <label class="control-label" for="anki-method">Connection method</label> +                    <select class="form-control" id="anki-method"> +                        <option value="none">None</option> +                        <option value="ankiweb">AnkiWeb</option> +                        <option value="ankiconnect">AnkiConnect</option> +                    </select> +                </div> +                  <div class="alert alert-danger status-dlg" id="error-dlg">                      <strong>Error</strong>                      <span>Unable to connect</span> @@ -99,24 +110,17 @@                      <span>Connection established</span>                  </div> -                <div class="form-group"> -                    <label class="control-label" for="anki-method">Connection method</label> -                    <select class="form-control" id="anki-method"> -                        <option value="none">None</option> -                        <option value="ankiweb">AnkiWeb</option> -                        <option value="ankiconnect">AnkiConnect</option> -                    </select> -                </div> - -                <form class="form-horizontal options-anki-general"> -                    <div class="form-group options-anki-login"> -                        <label for="anki-username" class="control-label col-sm-2">Username</label> -                        <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div> -                    </div> +                <form class="form-horizontal" id="options-anki-general"> +                    <div id="options-anki-login"> +                        <div class="form-group"> +                            <label for="anki-username" class="control-label col-sm-2">Username</label> +                            <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div> +                        </div> -                    <div class="form-group options-anki-login"> -                        <label for="anki-password" class="control-label col-sm-2">Password</label> -                        <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div> +                        <div class="form-group"> +                            <label for="anki-password" class="control-label col-sm-2">Password</label> +                            <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div> +                        </div>                      </div>                      <div class="form-group"> @@ -129,7 +133,7 @@                          <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div>                      </div> -                    <div class="options-anki-format"> +                    <div id="options-anki-format">                          <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">                              <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>                              <li><a href="#kanji" data-toggle="tab">Kanji</a></li> |