Adding tabs

This commit is contained in:
Alex Yatskov 2016-05-21 20:17:12 -07:00
parent f1850defa6
commit 10226663bd
2 changed files with 44 additions and 25 deletions

View File

@ -38,16 +38,16 @@ function formToOptions() {
function updateAnkiFormDataVis(opts) {
if (opts.enableAnkiConnect) {
updateAnkiFormData();
$('.options-anki').show();
$('.options-anki').fadeIn();
} else {
$('.options-anki').hide();
$('.options-anki').fadeOut();
}
}
function updateAnkiFormData() {
const yomichan = chrome.extension.getBackgroundPage().yomichan;
const ankiDeck = $('#ankiDeck');
const ankiDeck = $('.ankiDeck');
ankiDeck.find('option').remove();
yomichan.api_getDeckNames({callback: (names) => {
if (names !== null) {
@ -55,7 +55,7 @@ function updateAnkiFormData() {
}
}});
const ankiModel = $('#ankiModel');
const ankiModel = $('.ankiModel');
ankiModel.find('option').remove();
yomichan.api_getModelNames({callback: (names) => {
if (names !== null) {

View File

@ -19,7 +19,8 @@
<div class="options-general">
<h2>General</h2>
<div class="form-horizontal">
<form class="form-horizontal">
<div class="form-group">
<label for="scanLength" class="control-label col-sm-2">Scan length</label>
<div class="col-sm-10"><input type="number" value="20" min="1" id="scanLength" class="form-control"></div>
@ -56,35 +57,53 @@
</div>
</div>
</div>
</div>
</form>
</div>
<div class="options-anki">
<h2>Anki</h2>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Profile</label>
<div class="col-sm-10">
<label class="radio-inline"><input type="radio" name="ankiProfile" checked>Vocab</label>
<label class="radio-inline"><input type="radio" name="ankiProfile">Kanji</label>
</div>
</div>
<form class="form-horizontal">
<ul class="nav nav-tabs">
<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="form-group">
<label class="col-sm-2 control-label" for="ankiDeck">Deck</label>
<div class="col-sm-10">
<select class="form-control" id="ankiDeck"></select>
</div>
</div>
<div class="tab-content">
<div id="vocab" class="tab-pane fade in active">
<div class="form-group">
<label class="col-sm-2 control-label" for="ankiVocabDeck">Deck</label>
<div class="col-sm-10">
<select class="form-control ankiDeck" id="ankiVocabDeck"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="ankiModel">Model</label>
<div class="col-sm-10">
<select class="form-control" id="ankiModel"></select>
<div class="form-group">
<label class="col-sm-2 control-label" for="ankiVocabModel">Model</label>
<div class="col-sm-10">
<select class="form-control ankiModel" id="ankiVocabModel"></select>
</div>
</div>
</div>
<div id="kanji" class="tab-pane fade">
<div class="form-group">
<label class="col-sm-2 control-label" for="ankiKanjiDeck">Deck</label>
<div class="col-sm-10">
<select class="form-control ankiDeck" id="ankiKanjiDeck"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="ankiKanjiModel">Model</label>
<div class="col-sm-10">
<select class="form-control ankiModel" id="ankiKanjiModel"></select>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div style="text-align: right;">