ajout des liens

3 years ago · 33a8555e82
parent 33fedc9f35
commit 33a8555e82
4 changed files with 50 additions and 9 deletions
--- a/static/mdnotes.css
+++ b/static/mdnotes.css
@ -7,6 +7,15 @@ body {
  margin: 0;
 }

+textarea#ta {
+  display: none;
+  width: 100%;
+  height: 10rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  background-color: #aaddff;
+}
+
 div#mdnotes {
  padding-top: 1rem;
  padding-left: 3rem;
@ -45,7 +54,6 @@ div#mdnotes div.h4 {
 }

 div#mdnotes div.bq1 {
-  font-style: italic;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: .9rem;
@ -54,7 +62,6 @@ div#mdnotes div.bq1 {
 }

 div#mdnotes div.bq2 {
-  font-style: italic;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: .6rem;
@ -63,7 +70,6 @@ div#mdnotes div.bq2 {
 }

 div#mdnotes div.bq3 {
-  font-style: italic;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: .3rem;
@ -71,7 +77,6 @@ div#mdnotes div.bq3 {
  border-left: .9rem solid #6688bb;
 }

-
 div#mdnotes div.ul {
  padding-left: 1rem;
 }
--- a/static/modules/md.js
+++ b/static/modules/md.js
@ -1,4 +1,5 @@
 function load(textarea, div) {
+    div.innerHTML = '';
    let lines = textarea.value.split('\n');
    for (let i = 0; i < lines.length; i++) {
        let line = lines[i];
@ -8,6 +9,15 @@ function load(textarea, div) {
    }
 }

+function save(textarea, div) {
+    let lines = div.children;
+    let text = '';
+    for (let i=0; i<lines.length; i++) {
+        text += lines[i].innerText + '\n';
+    }
+    textarea.value = text;
+}
+
 function formatLine(line) {
    let normLine = line.trimStart();
    let styleClass = null;
@ -41,6 +51,7 @@ function formatLine(line) {
    let elem = document.createElement('div');
    elem.classList.add('mdnotes_line');
    elem.classList.add(styleClass);
+    normLine = addLink(normLine);
    normLine = addBold(normLine);
    normLine = addMono(normLine);
    if (token != null) {
@ -56,10 +67,15 @@ function addMono(line) {
    return line;
 }

+function addLink(line) {
+    line = line.replace(/(\[(.*?)\]\((.*?)\))/ig, '<span class="token">[</span><a class="link" href="$3">$2</a><span class="token">]($3)</span>');
+    return line;
+}
+
 function addBold(line) {
    line = line.replace(/\*\*([^\s].*?)\*\*/ig, '<span class="bold"><span class="token">**</span>$1<span class="token">**</span></span>');
    line = line.replace(/__([^\s].*?)__/ig, '<span class="bold"><span class="token">__</span>$1<span class="token">__</span></span>');
    return line;
 }

-export { load, formatLine };
+export { load, save, formatLine };
--- a/static/modules/mdnotes.js
+++ b/static/modules/mdnotes.js
@ -1,5 +1,22 @@
 import { getStartPositionInLine, setStartPositionInLine } from './position.js';
-import { formatLine, load } from './md.js';
+import { formatLine, load, save } from './md.js';
+
+function ontextarea(e) {
+    let ta = document.getElementById('ta');
+    if (ta.style.display == 'none') {
+        ta.style.display = 'inline';
+    } else {
+        ta.style.display = 'none';
+    }
+}
+
+function onsave(e) {
+    save(document.getElementById('ta'), document.getElementById('mdnotes'));
+}
+
+function onload(e) {
+    load(document.getElementById('ta'), document.getElementById('mdnotes'));
+}

 function onedit(e) {
    let ret = getStartPositionInLine();
@ -19,10 +36,12 @@ function onedit(e) {
 function init() {
    let mdnotesdiv = document.getElementById('mdnotes');
    mdnotesdiv.addEventListener('input', onedit);
+    let saveButton = document.getElementById('saveButton');
+    saveButton.addEventListener('click', onsave);
+    loadButton.addEventListener('click', onload);
+    taButton.addEventListener('click', ontextarea);

-    load(document.getElementById('ta'), mdnotesdiv);
+    onload();
 }

-export { onedit };
-
 init();
--- a/templates/index.html
+++ b/templates/index.html
@ -11,6 +11,7 @@
        <link rel="stylesheet" href="static/mdnotes.css">
    </head>
    <body>
+        <div><button id="saveButton">Save</button><button id="loadButton">Load</button><button id="taButton">Textarea</button></div>
        <textarea id="ta" class="mdnotes" style="display: none;">
 # Titre 1
 Un petit texte