alex/yomichan
1
Fork 0
Code Releases Activity

Adding tabs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ext/bg/js/options-form.js
View File

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

61
ext/bg/options.html
View File

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