Rewrite InputWaiter to be less messy.

Don't create a DOM element for every tab, just reuse the same ones.
Display file information while the files are loading.
(Output tabs no longer work)
This commit is contained in:
j433866 2019-03-29 13:29:24 +00:00
parent a2cc7a84db
commit c289e1beef
6 changed files with 884 additions and 378 deletions

View file

@ -229,6 +229,15 @@
<div class="title no-select">
<label for="input-text">Input</label>
<span class="float-right">
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-previous-tab" data-toggle="tooltip" title="Go to the previous tab">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-go-to-tab" data-toggle="tooltip" title="Go to a specific tab">
<i class="material-icons">more_horiz</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-next-tab" data-toggle="tooltip" title="Go to the next tab">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
<i class="material-icons">add</i>
</button>
@ -243,19 +252,12 @@
<i class="material-icons">view_compact</i>
</button>
</span>
<div class="io-info" id="input-files-info"></div>
<div class="io-info" id="input-info"></div>
<div class="io-info" id="input-selection-info"></div>
</div>
<div id="input-tabs" style="display: none;">
<ul>
<li id="input-tab-1" class="active-input-tab">
<div class="input-tab-content">
1: New Tab
</div>
<button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
<i class="material-icons">clear</i>
</button>
</li>
</ul>
</div>
<div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
@ -315,11 +317,8 @@
<ul>
<li id="output-tab-1" class="active-output-tab">
<div class="output-tab-content">
1: New Tab
Tab 1
</div>
<button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
<i class="material-icons">clear</i>
</button>
</li>
</ul>
</div>