ebt-vue3/public/content/guide/keyboard.html

Vue3 Library for SuttaCentral Voice EBT-Sites

<article class="ebt-wiki">
<div class="ebt-wiki-heading">
 <a href="https://unsplash.com/photos/2xU7rYxsTiM" target="_blank" tabindex=-1>
  <img src="/img/sergi-kabrera-2xU7rYxsTiM-unsplash.png" alt="picture of keyooard" title="picture of keyooard"/>
 </a>
 <div class="ebt-wiki-heading-text">
  <div class="ebt-wiki-breadcrumbs">
   <a href="/#/wiki/toc" >wiki</a>&nbsp;&gt;&nbsp;
   <a href="/#/wiki/guide/toc" >guide</a>&nbsp;&gt;&nbsp;
   keyboard
  </div><!--ebt-wiki-breadcrumbs-->
  <h1>Keyboard Shortcuts</h1>
  <div class="ebt-wiki-description">Save time with keyboard shortcust</div>
 </div><!--ebt-wiki-heading-text-->
</div><!--ebt-wiki-heading-->
<h3>Cards</h3>
<p>Content is presented within different types of <strong>cards</strong>:</p>
<ul>
<li><em>Wiki card:</em> shows website documentation, newsletters, etc.</li>
<li><em>Search cards:</em>  show search terms and search results</li>
<li><em>Sutta cards:</em> show individual suttas for segmented documents from <a href="https://suttacentral.net" target="_blank">SuttaCentral.net</a></li>
</ul>
<p>Cards allow you to review multiple documents.
On wider screens, you will even be able to compare cards side-by-side.</p>
<h3>Card tabs</h3>
<p>Each card has a <strong>tab</strong> that can be clicked to scroll to the associated card.</p>
<p>
<img src="img/tabs.png" class="ebt-image" alt="image of card tabs" style="width:400px;"/>
</p>
<h3>Keyboard navigation</h3>
<table>
<thead>
<tr>
<th style="text-align:left">Card</th>
<th style="text-align:left">Key</th>
<th style="text-align:left">Function</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">all</td>
<td style="text-align:left">HOME</td>
<td style="text-align:left">Select card tab</td>
</tr>
<tr>
<td style="text-align:left">all</td>
<td style="text-align:left">TAB</td>
<td style="text-align:left">Select next user interface element</td>
</tr>
<tr>
<td style="text-align:left">all</td>
<td style="text-align:left">SHIFT-TAB</td>
<td style="text-align:left">Select previous user interface element</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">UP</td>
<td style="text-align:left">Select previous segment in sutta</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">DOWN</td>
<td style="text-align:left">Select next segment in sutta</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">CTRL-UP</td>
<td style="text-align:left">Select first segment in sutta</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">CTRL-DOWN</td>
<td style="text-align:left">Select last segment in sutta</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">SHIFT-UP</td>
<td style="text-align:left">Select first segment in group or prior group</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">SHIFT-DOWN</td>
<td style="text-align:left">Select first segment in next group</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">SPACE</td>
<td style="text-align:left">Play current segment or stop existing playback</td>
</tr>
<tr>
<td style="text-align:left">sutta</td>
<td style="text-align:left">ENTER</td>
<td style="text-align:left">Play from current segment to end of sutta</td>
</tr>
<tr>
<td style="text-align:left">tabs</td>
<td style="text-align:left">LEFT-ARROW</td>
<td style="text-align:left">Select previous tab</td>
</tr>
<tr>
<td style="text-align:left">tabs</td>
<td style="text-align:left">RIGHT-ARROW</td>
<td style="text-align:left">Select next tab</td>
</tr>
</tbody>
</table>
</article>