clavier.html

{% extends "base.html" %}
{% load static %}

{% block content %}
    <script type="text/javascript">
        var dicoFidels = JSON.parse("{{fidels|escapejs}}");
        var dataPage = JSON.parse("{{dataPage|escapejs}}");
    </script>

     <!-- fermeture conteneur -->

    <div class="d-flex justify-content-between mx-2 mt-2">
        <div class="d-flex param">
            <div onclick="savePage()" title="Enregistrer ce travail"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cloud-upload-fill nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/></svg></div>
            <div title="Ouvrir une nouvelle page"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-file-earmark nobg" viewBox="0 0 16 16"><path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/></svg></div>
            <a id="hrefNewPage" href="" target="_blank"></a>
            <div id="btnSwitchStress" onclick="toggleSwitchStress()" class="btnSwitchStress" title="Click on spellings to switch the accent">Switch stress</div>
        </div>

        <select id="choixLang" onchange="selectLang(this.value)">
            <option value="fr">Français</option>
            <option value="en">English</option>
        </select>

        <div class="d-flex param" id="outputParam">
            <div title="Copier/Coller le contenu" onclick="getPopUp()"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-textarea-t nobg" viewBox="0 0 16 16"><path d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v3.563a2 2 0 0 1 0 3.874V13.5A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5V9.937a2 2 0 0 1 0-3.874V2.5zm1 3.563a2 2 0 0 1 0 3.874V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.937a2 2 0 0 1 0-3.874V2.5A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5v3.563zM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/><path d="M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z"/></svg></div>
            <div onclick="bg2white()" title="Changer la couleur du fond"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-circle-half nobg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/></svg></div>
            <div id="div2png" title="Exporter en png"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-image nobg" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/></svg></div>
            <div onclick="toggleContentEditable()" id="btnContentEditable" title="(dé)vérrouiller la saisie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-pencil-square nobg" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/></svg></div>
        </div>
    </div>
    
    <div class="fenetre textSide textZone" id="textZoneBack">
        <div id="textZone" contenteditable="false" spellcheck="true"></div>
    </div>
        


    <div class="boutons">
        <button type="button" class="btn btn-secondary" onclick="writeGraph('. ','punct')">.</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(', ','punct')">,</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' ? ','punct')">?</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' ! ','punct')">!</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' : ','punct')">:</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' ; ','punct')">;</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph('-','punct')">-</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' « ','punct')">«</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' » ','punct')">»</button>
        <button type="button" class="btn btn-secondary" onclick="writeGraph(' ','punct')" class="btn-car-space"><span id="sp_btnspace" class="langspan"></span></button>
        <button type="button" class="btn btn-secondary" onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne">↵</button>
        <button type="button" class="btn btn-secondary" onclick="erasePreviousSpan()"><span id="sp_btnerase" class="langspan"></span></button>
        <button type="button" class="btn btn-secondary" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-left-fill nobg" viewBox="0 0 16 16"><path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg></button>
        <button type="button" class="btn btn-secondary" onclick="gotoNext()" title="Aller à la graphie suivante"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-right-fill nobg" viewBox="0 0 16 16"><path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg></button>
        <button type="button" class="btn btn-secondary" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-bar-right nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/></svg></button>
        <button type="button" class="btn btn-danger" onclick="eraseAll()"><span id="sp_btneraseall" class="langspan"></span></button>
    </div>
    
    <div class="clavier-graphiesZone">
        <div class="clavier" id="clavier">

            <!-- FR Claviers A. DO  -->
            <embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
            <img id="pngPochoir" class="superpose">
            <img id="pngCalq" class="superpose">
            <embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
            <img src="" class="popUpProfile" id="popDiv"/>
            <div class="doAide" style="right:0px">
                <span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
            </div>

            <!-- EN Clavier PronSci UK -->
            <embed id="svgEnPronSciBr" style="display: none;" src="../static/svg/en_pronsci-br.svg" class="superpose">

            <!-- EN Clavier ALeM -->
            <embed id="svgEnAlem" style="display: none;" src="../static/svg/alem-en.svg" class="superpose">
            <img id="pngPochoirEnAlem" style="display: none;" src="../static/png/pochoir-en.png" class="superpose">
            <img id="pngCalqEnAlemLignes" style="display: none;" src="../static/png/pochoir-en-lignes.png" class="superpose">
            <embed id="svgClickEnAlem" style="display: none;" src="../static/svg/alem-en_click.svg" class="superpose">

            <!-- BOUTONS + - -->
            <div class="control-clavier">
                <img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
                <img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
            </div>
        </div>

        <div class="graphies">
            <div class="btnPros">
                <div id="btnStress1" class="btnStress" onclick="toggleStress1()">Primary</div>
                <div id="btnStress2" class="btnStress" onclick="toggleStress2()">Secondary</div>
            </div>
            <div class="btnCasse" onclick="toggleCasse()" title="Majuscules/minuscules"><?xml-stylesheet type="text/css" href="../styles/clavier.css"?><svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 32px; height: 32px;" xml:space="preserve"><g><path class="st0" d="M502.65,394.055c-1.581-3.012-2.922-6.18-3.798-9.129c-0.884-2.942-1.293-5.646-1.289-7.849c0-10.191,0-62.152,0-98.828c0.015-12.047-2.52-23.551-7.372-33.632c-3.618-7.565-8.497-14.272-14.182-19.919c-8.544-8.484-18.813-14.547-29.7-18.479c-10.906-3.932-22.486-5.788-34.218-5.788c-2.319,0-4.643,0.079-6.963,0.22c-6.378,0.409-12.283,1.644-17.827,3.232c-8.304,2.406-15.848,5.638-22.643,8.886c-6.774,3.255-12.802,6.558-17.563,9.113l23.378,43.438c6.57-3.546,13.824-7.486,20.763-10.474c3.448-1.486,6.782-2.721,9.723-3.57c2.945-0.857,5.485-1.297,7.254-1.4c1.313-0.087,2.606-0.126,3.876-0.126c5.764,0,11.162,0.834,15.774,2.28c3.468,1.094,6.492,2.516,9.004,4.144c3.774,2.477,6.39,5.269,8.257,8.61c1.832,3.366,3.082,7.455,3.114,13.462c0,1.18,0,2.375,0,3.586c-9.354,0-20.079,0-28.128,0c-25.926,0-48.891,7.392-65.947,21.161c-8.508,6.865-15.475,15.341-20.256,24.998c-4.797,9.641-7.352,20.445-7.34,31.509c-0.012,10.734,2.21,21.028,6.381,30.173c6.24,13.761,16.777,24.73,29.362,31.957c12.602,7.258,27.243,10.946,42.498,10.954c10.746-0.008,21.22-2.147,30.991-5.889c7.856-3.02,15.267-7.093,22.029-12.071c1.726,3.483,3.523,6.739,5.32,9.664c4.234,6.872,8.37,12.157,11.402,15.703l37.45-32.09C509.916,405.497,505.776,400.087,502.65,394.055z M448.239,360.203c-0.539,2.242-1.376,4.474-2.56,6.732c-3.283,6.306-9.408,12.59-16.957,17.009c-7.522,4.458-16.274,6.943-23.914,6.912c-11.374,0-20.724-3.696-26.822-9.059c-3.074-2.698-5.406-5.803-7.05-9.405c-1.635-3.617-2.626-7.785-2.638-12.888c0.011-4.772,1.038-8.996,2.995-12.966c2.953-5.93,8.15-11.466,16.258-15.774c8.076-4.285,19.03-7.195,32.558-7.187c8.049,0,18.774,0,28.128,0C448.239,337.305,448.239,350.279,448.239,360.203z"></path>	<path class="st0" d="M183.798,72.006H145.29c-15.598,0-29.331,9.956-34.179,24.778L0,436.275h58.76l35.166-107.478H202.52l27.365,107.478h74.585L218.648,99.088C214.591,83.141,200.26,72.006,183.798,72.006z M108.127,285.421l40.497-123.763h11.356l31.505,123.763H108.127z"></path></g></svg></div>
            <div id="graphiesZone" class="graphiesZone"></div>
        </div>
    </div>

    <div class="zoneParam my-3">
        <div class="left">
            <select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
            <div id="doCalques" class="doCalques mt-2">
                <input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
                <input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
                <input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
                <input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
            </div>
        </div>
        <div class="right">
            <select id="selectFidel" onchange="selectFidel(this.value)"></select>
        </div>
    </div>


    <!-- Modal PopUp qui apparaît pour le copier coller -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <span id="sp_poptitle" class="langspan"></span>
        </div>
        <div class="modal-body">
            <p><span id="sp_popmain" class="langspan"></span></p>
            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
            <div class="copyButton">
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip"><span id="sp_popcopy1" class="langspan"></span></span><span id="sp_popcopy2" class="langspan"></span></button>
            </div>
            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="font-weight: bold;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
            <div class="copyButton">
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite"><span id="sp_popcopy3" class="langspan"></span></span><span id="sp_popcopy4" class="langspan"></span></button>
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>


    <!-- Modal PopUp qui apparaît lors de l'enregistrement -->
    <div id="myModalSave" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <span id="sp_popsavetitle" class="langspan"></span>
        </div>
        <div class="modal-body">
            <p><span id="sp_popsavemain" class="langspan"></span></p>
            <input type="text" id="pLienSave" style="width: 300px;">
            <div class="copyButton">
                <button onclick="myFunctionSave()" onmouseout="outFuncSave()"><span class="copyButtonText" id="myTooltipSave"><span id="sp_popsavecopy" class="langspan"></span></span><span id="sp_popsavecopylink" class="langspan"></span></button>
                <button onclick="openInNewTab()"><span id="sp_popsaveopen" class="langspan"></span></button>
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>


    
    
    
{% endblock %}