ui.html

<div id="uiTemplate">
    
    <div style="display: none">{{ title }} : {{ locationHash }}</div>

    <div id="rootContainer">
        
        <div class="page-form">

            <button title="Page précédente (←|r)"
                    v-on:click="decrementPage">

                        &larr;

            </button>
            
            &nbsp;

            <input type="number"
                class="pages"
                name="pages"
                title="Page (p)"
                v-bind:value="currentPage"
                v-on:change="changePage(parseInt($event.target.value))"
            />
            
            &nbsp;

            <button title="Page suivante (→|a)"
                    v-on:click="incrementPage">

                    &rarr;
                
            </button>
            
            &nbsp;

            <button id="installButton" title="Installer l’application" style="display: none">
                
                ⊞+ Installer l’application

            </button>

        </div>

        <div id="pageContainer">
        
            <div id="hammer">

                <div v-if="displayMode === 'onePage'"
                    class="image">

                    <img id="page"
                        class="hover-cursor borders"
                        v-on:click="incrOrDecrFromPage($event)"
                        v-bind:src="currentPageImgSrc"
                        v-bind:style="pageStyle" />

                </div>

                <div v-if="displayMode === 'twoPages'"
                    class="image">

                    <img id="page-paire"
                        class="hover-cursor borders"
                        v-on:click="decrementPage"
                        v-bind:src="currentPageImgPaireSrc"
                        v-bind:style="pagePaireStyle"  />

                    <img id="page-impaire"
                        class="hover-cursor borders"
                        v-on:click="incrementPage"
                        v-bind:src="currentPageImgImpaireSrc"
                        v-bind:style="pageImpaireStyle"  />

                </div>
            </div>

            <div id="fautes" v-if="errata && errata.length > 0">

                <a href=""
                    v-for="erratum in errata"
                    :key="erratum.href"
                    v-bind:href="erratum.href">
                    Erratum : voir <i>{{ erratum.book }}</i> p. {{ erratum.page }}
                </a>

            </div>

            <div id="digitizedDivCenter"
                v-if="showNavBar">

                {{ footerText }}

                &nbsp;&nbsp;

                <a v-bind:href="footerLink">{{ footerLinkLabel }}</a>

            </div>

            <div id="digitizedDivRight"
                v-if="!showNavBar">

                <span id="digitizedSpanRight">
                    
                    {{ footerText }}

                    &nbsp;&nbsp;

                    <a v-bind:href="footerLink">{{ footerLinkLabel }}</a>
                
                </span>

                <span id="stickyToggleNavBarContainer">
                    
                    <button id="stickyToggleNavBar"
                        v-on:click="toggleNavBar">
        
                        <span id="toggleNavBarIcon">
                            {{ showNavBar ? ' ˅ ' : ' ˄ ' }}
                        </span>
                        
                        <span class="small-hide">&nbsp;navigation</span>
        
                    </button>

                </span>

            </div>

        </div>

        <div id="navContainer">

            <div id="infoWindow"
                v-if="showInfo">
                
                <hr />
                
                Page courante tirée de :
                <span id="bookInfo">{{ bookInfo }}</span>,
                <span id="editionInfo">{{ editionInfo }}</span>
                
                (<a id="pdfLink" target="_blank" v-bind:href="pdfLink">PDF</a> d’origine)

                <button id="permalink" tooltip="Permalien copié !" v-bind:data-clipboard-text="permalink">📋 Copier le permalien</button>
                
                <br />
                
                <br />
                
                <span v-for="link in links" :key="link.url">&ThickSpace;<a v-bind:href="link.url" target="_blank">{{ link.title }}</a>&ThickSpace;</span>
                
                <br />
                
                <br />
                
                <i>Raccourcis clavier :</i>
                
                <br />
                
                <span v-for="shortcut in shortcuts"
                    :key="shortcut.key">

                    &ThickSpace;<b>({{ shortcut.key }})&nbsp;:</b>&nbsp;{{ shortcut.str }}&ThickSpace;

                </span>
                
                <br />
                
                <button id="hideInfo"
                    v-on:click="toggleInfo"
                    title="Cacher ces informations (i)">

                    <small>❌&nbsp;cacher ces informations</small>
                
                </button>
                
                <hr />

            </div>

            <div id="pageSelectorSection"
                v-if="showNavBar">

                <button id="prev-top"
                    title="Page précédente (←|r)"
                    v-on:click="decrementPage">
                        &larr;
                </button>
                
                &nbsp;

                <span>

                    <button title="Rétrécir l’image (-)"
                        v-on:click="decrZoom">
                    
                        <b>&nbsp;−&nbsp;</b>

                    </button>
                    
                    <span class="small-hide">{{ zoom }}%</span>
                    
                    <button title="Agrandir l’image (+)"
                        v-on:click="incrZoom">
                        
                        <b>&nbsp;+&nbsp;</b>

                    </button>
                </span>

                &nbsp;
                
                <button id="displayInfo"
                    v-on:click="toggleInfo"
                    title="Informations (i)">
                
                    <span id="infoIcon">ℹ</span><span class="small-hide">&nbsp;info</span>
                
                </button>
                

                &nbsp;

                <button id="newTabButton" onclick="window.open(window.location, '_blank').focus()"
                    title="Ouvrir un nouvel onglet (o|t)">
                
                    📑

                </button>
                &nbsp;
                
                <button id="toggleViewButton"
                    title="Changer la vue (v)"
                    v-on:click="toggleDisplayMode">
                    
                    {{ displayMode === 'onePage' ? '📖' : '📃' }}

                </button>
                            
                &nbsp;

                <button id="next-top"
                    title="Page suivante (→|a)"
                    v-on:click="incrementPage">
                    
                    &rarr;
                
                </button>

            </div>

            <div id="headerBarSection"
                v-if="showNavBar">

                <select name="sites" id="sites"
                    title="Changer de site (s)"
                    v-on:change="changeSite($event.target.selectedOptions[0].value)"
                    v-bind:value="canonical">
                    <option
                        v-for="site in sites"
                        :key="site.url"
                        v-bind:value="site.url"
                        v-bind:selected="canonical === site.url">
                        {{ site.title }}
                    </option>
                </select>
                
                <div id="book-form">

                    <label for="books">{{ bookSelectorLabel }}</label>
                    <select name="books" id="books"
                        title="Change de livre (l)"
                        v-on:change="changeBook({ key: $event.target.selectedOptions[0].value })">
                        
                        <option
                            v-for="book in books"
                            :key="book.key"
                            v-bind:value="book.key"
                            v-bind:selected="currentBook === book.key">
                                {{ book.label }}
                        </option>

                    </select>
                    
                    <label for="chapters">{{ chapterSelectorLabel }}</label>
                    <select name="chapters" id="chapters"
                        title="Change de chapitre (c)"
                        v-bind:value="currentChapter ? currentChapter.title : null"
                        v-on:change="changeChapter($event.target.selectedOptions[0].value)">
                        
                        <option
                            v-for="chapter in chapters"
                            :key="chapter.key"
                            v-bind:value="chapter.title"
                            v-bind:selected="currentChapter && chapter.title === currentChapter.title">
                                {{ chapter.roman }}
                        </option>

                    </select>

                </div>

            </div>

            <div class="slidecontainer"
                v-if="showNavBar">

                <input v-bind:value="currentPage"
                    v-on:change="changePage(parseInt($event.target.value))"
                    type="range"
                    v-bind:min="minPage"
                    v-bind:max="maxPage"
                    class="slider"
                    id="headerRange">
                &nbsp;
                <button id="toggleNavBar"
                    v-on:click="toggleNavBar"
                    title="Barre de navigation (n)">
    
                    <span id="toggleNavBarIcon">
                        {{ showNavBar ? ' ˅ ' : ' ˄ ' }}
                    </span>
    
                </button>
    
            </div>

        </div>

    </div>

</div>