prise en compte de la vraie largeur du ":"

3 years ago · 94caed69c4
parent 02d0a4a107
commit 94caed69c4
3 changed files with 25 additions and 4 deletions
--- a/static/mdnotes.css
+++ b/static/mdnotes.css
@ -31,6 +31,11 @@ div#mdnotes {
  min-height: 90%;
 }

+div#mdnotes span.tokenfictif {
+  font-weight: 1;
+  color: #1353b3;
+}
+
 div#mdnotes:focus {
  outline: none;
 }
--- a/static/modules/mdnotes.js
+++ b/static/modules/mdnotes.js
@ -45,7 +45,7 @@ function onedit(e) {

    let newline = formatLine(line.innerText);
    line.parentNode.replaceChild(newline, line);
-    formatTable(newline, 5.5);
+    formatTable(newline, dpwidth());
    setStartPositionInLine(newline, position);
 }

@ -104,11 +104,28 @@ function oncopy(e) {
    alert(e.clipboardData.getData('text/plain'));
 }

+var _dpwidth = null;
+function dpwidth(div) {
+    if (_dpwidth != null) {
+        return _dpwidth;
+    }
+    let dp = document.createElement('span');
+    dp.classList.add('tokenfictif');
+    div.append(dp);
+    dp.innerText = ':';
+    _dpwidth = dp.getBoundingClientRect().width;
+    div.removeChild(dp);
+    return _dpwidth;
+}
+
 function init(pagename = null) {
    /*if (pagename != null) {
        window.history.replaceState(null, '', '/page/' + pagename);
    }*/
    let mdnotesdiv = document.getElementById('mdnotes');
+
+    dpwidth(mdnotesdiv);
+
    mdnotesdiv.addEventListener('input', onedit);
    mdnotesdiv.addEventListener('keyup', onkeyup);
    mdnotesdiv.addEventListener('keypress', onkeypress);
@ -116,10 +133,9 @@ function init(pagename = null) {
    mdnotesdiv.addEventListener('paste', onpaste);
    mdnotesdiv.addEventListener('copy', oncopy);
    mdnotesdiv.addEventListener('blur', () => {redrawTables(mdnotesdiv);});
-    mdnotesdiv.addEventListener('focus', () => {redrawTables(mdnotesdiv, 5.5);});
+    mdnotesdiv.addEventListener('focus', () => {redrawTables(mdnotesdiv, dpwidth());});
    let saveButton = document.getElementById('saveButton');
    saveButton.addEventListener('click', onsave);
-    loadButton.addEventListener('click', onload);
    taButton.addEventListener('click', ontextarea);

    onload();
--- a/templates/page.html
+++ b/templates/page.html
@ -12,7 +12,7 @@
        <script type="module" src="/static/modules/mdnotes.js"></script>
    </head>
    <body>
-        <div><button id="saveButton">💾</button> <button id="loadButton">Load</button> <button id="taButton">📋</button></div>
+        <div><button id="saveButton">💾</button> <button id="taButton">📋</button></div>
        <textarea id="ta" class="mdnotes" style="display: none;">{{md}}</textarea>
        <div id="mdnotes" class="mdnotes" contenteditable="true" spellcheck="false"></div>