correction alignement des tableaux

pull/1/head
Nicolas Sanchez 3 years ago
parent 7ee9df47e9
commit 02d0a4a107

@ -37,10 +37,18 @@ La numérotation n'est pas automatique.
3.1. élément 3.1.
3.1.1. élément 3.1.1.
### Tableaux
Pour l'instant la syntaxe n'est pas complètement implémentée, il n'est pas possible d'aligner le texte.
|Nom|Prénom|Âge|
|Sanchez|Sofia|8 ans|
|:Nom:|:Prénom:|:Âge:|
|:Sanchez|:Sofia|8 ans:|
|Sanchez|Paul|6 ans|
|Sanchez|Elena|10 ans|
|Sanchez|Sunga|44 ans|
|Sanchez|Nicolas|44 ans|
### **Gras**, *italic* etc.
|Syntaxe|Résultat|
|`**gras**`|**gras**|
|`*italic*`|*italic*|
|`__gras__`|__gras__|
|`_italic_`|_italic_|
|`***gras_italic***`|***gras_italic***|
|`___gras_italic___`|___gras_italic___|
|````texte formaté````|`texte formaté`|

@ -26,6 +26,7 @@ div#mdnotes {
padding-left: 3rem;
padding-right: 3rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
background-color: #ffffff;
min-height: 90%;
}

@ -1,23 +1,12 @@
function load(textarea, div) {
div.innerHTML = '';
let lines = textarea.value.split('\n');
let firsttableline = null;
for (let i = 0; i < lines.length; i++) {
let line = lines[i];
let elem = formatLine(line);
div.append(elem);
if (elem.classList.contains('tablerow')) {
if (firsttableline == null) {
firsttableline = elem;
}
} else if (firsttableline != null) {
formatTable(firsttableline);
firsttableline = null;
}
}
if (firsttableline != null) {
formatTable(firsttableline);
}
redrawTables(div, 0);
}
function save(textarea, div) {
@ -177,13 +166,14 @@ function formatLine(line) {
}
function addTableLine(line) {
if (line.match(/^\s*\|(\s*.*?\|)*/)) {
if (line.match(/^\s*\|:{0,1}(\s*.*?:{0,1}\|:{0,1})*/)) {
let cpt = 0;
let re = /\|/g;
let re = /:{0,1}\|:{0,1}/g;
let match;
let matches = [];
let lengthes = []
while ((match = re.exec(line)) != null) {
matches[cpt] = match.index;
matches[cpt] = match;
if (cpt > 1000) {
continue;
}
@ -191,25 +181,76 @@ function addTableLine(line) {
}
matches = matches.reverse();
for(let i=0; i<matches.length; i++) {
let index = matches[i];
let match = matches[i];
if (i == matches.length - 1) {
// premier |
line = line.substring(0, index) + '<span class="token">|</span><span class="lefttablespacer"></span>' + line.substring(index+1, line.length);
continue;
}
if (i == 0 && index == line.length - 1) {
let leftdp = ' data-dp="false"';
if (match[0].length == 2) {
leftdp = ' data-dp="true"';
}
let line1 = line.substring(0, match.index);
let line2 = '<span class="token">' + match[0] + '</span><span class="lefttablespacer"' + leftdp + '></span>'
let line3 = line.substring(match.index + match[0].length, line.length);
line = line1 + line2 + line3;
} else if (i == 0 && match.index == line.length - 1) {
// dernier |
line = line.substring(0, index) + '<span class="righttablespacer"></span><span class="token">|</span>' + line.substring(index+1, line.length);
continue;
let rightdp = ' data-dp="false"';
if (match[0].charAt(0) == ':') {
rightdp = ' data-dp="true"';
}
let line1 = line.substring(0, match.index);
let line2 = '<span class="righttablespacer"' + rightdp + '></span><span class="token">' + match[0] + '</span>'
let line3 = line.substring(match.index + match[0].length, line.length);
line = line1 + line2 + line3;
} else {
let rightdp = ' data-dp="false"';
let leftdp = ' data-dp="false"';
if (match[0].length == 3) {
rightdp = ' data-dp="true"';
leftdp = ' data-dp="true"';
} else if (match[0].length == 2) {
if (match[0].charAt(0) == ':') {
rightdp = ' data-dp="true"';
} else {
leftdp = ' data-dp="true"';
}
}
let line1 = line.substring(0, match.index);
let line2 = '<span class="righttablespacer"' + rightdp + '></span><span class="token">' + match[0] + '</span><span class="lefttablespacer"' + leftdp + '></span>';
let line3 = line.substring(match.index + match[0].length, line.length);
line = line1 + line2 + line3;
}
line = line.substring(0, index) + '<span class="righttablespacer"></span><span class="token">|</span><span class="lefttablespacer"></span>' + line.substring(index+1, line.length);
}
line = '<span class="tablerow">' + line + '</span>';
}
return line;
}
function formatTable(line) {
function redrawTables(mdnotes, dpwidth = 0) {
if (mdnotes.childNodes.length == 0) {
return;
}
let child = mdnotes.childNodes[0];
let firsttableline = null;
while(child != null) {
if (firsttableline == null) {
if (child.classList.contains('tablerow')) {
firsttableline = child;
}
} else {
if (! child.classList.contains('tablerow')) {
formatTable(firsttableline, dpwidth);
firsttableline = null;
}
}
child = child.nextSibling;
}
if (firsttableline != null) {
formatTable(firsttableline, dpwidth);
}
}
function formatTable(line, dpwidth = 0) {
if (! line.classList.contains('tablerow')) {
return;
}
@ -228,12 +269,12 @@ function formatTable(line) {
}
firstline.classList.add('firsttablerow');
lastline.classList.add('lasttablerow');
resizeTableCols(firstline, lastline)
resizeTableCols(firstline, lastline, dpwidth)
}
function resizeTableCols(firstline, lastline) {
function resizeTableCols(firstline, lastline, dpwidth) {
let colsmaxwidth = [];
let colsjustif = [];
let currentline = firstline;
while (currentline !== null && currentline.classList.contains('tablerow')) {
let tablerow = currentline.getElementsByClassName('tablerow')[0];
@ -243,10 +284,20 @@ function resizeTableCols(firstline, lastline) {
let currentleft;
for(let i=0; i<childNodes.length; i++) {
let child = childNodes[i];
if (currentleft == null && child.classList != null && child.classList.contains('lefttablespacer')) {
if (child.classList != null && child.classList.contains('lefttablespacer')) {
currentleft = child;
} else {
if (child.classList != null && child.classList.contains('righttablespacer')) {
} else if (child.classList != null && child.classList.contains('righttablespacer')) {
let leftdp = currentleft.getAttribute('data-dp');
let rightdp = child.getAttribute('data-dp');
if (colsjustif[col] == null) {
if (leftdp == 'true' && rightdp == 'true') {
colsjustif[col] = 'c';
} else if (leftdp == 'true' && rightdp == 'false') {
colsjustif[col] = 'l';
} else if (leftdp == 'false' && rightdp == 'true') {
colsjustif[col] = 'r';
}
}
if (colsmaxwidth[col] == null || colsmaxwidth[col] < currentwidth) {
colsmaxwidth[col] = currentwidth;
}
@ -255,15 +306,20 @@ function resizeTableCols(firstline, lastline) {
currentleft = null;
currentwidth = 0;
col += 1;
} else {
} else if (currentleft != null) {
let width = child.getBoundingClientRect().width;
currentwidth += width;
}
}
}
currentline = currentline.nextSibling;
}
for (let i=0; i<colsmaxwidth.length; i++) {
if (colsjustif[i] == null) {
colsjustif[i] = 'l';
}
}
currentline = firstline;
while (currentline !== null && currentline.classList.contains('tablerow')) {
let tablerow = currentline.getElementsByClassName('tablerow')[0];
@ -272,19 +328,43 @@ function resizeTableCols(firstline, lastline) {
let currentleft;
for(let i=0; i<childNodes.length; i++) {
let child = childNodes[i];
if (currentleft == null && child.classList != null && child.classList.contains('lefttablespacer')) {
if (child.classList != null && child.classList.contains('lefttablespacer')) {
currentleft = child;
} else if (child.classList != null && child.classList.contains('righttablespacer')) {
let lplus = dpwidth;
let rplus = dpwidth;
let justif = 'l';
let leftdp = currentleft.getAttribute('data-dp');
let rightdp = child.getAttribute('data-dp');
if (leftdp == 'true' && rightdp == 'true') {
justif = 'c';
lplus = 0;
rplus = 0;
} else if (leftdp == 'true' && rightdp == 'false') {
justif = 'l';
lplus = 0;
} else if (leftdp == 'false' && rightdp == 'true') {
justif = 'r';
rplus = 0;
} else {
if (child.classList != null && child.classList.contains('righttablespacer')) {
let leftwidth = 10;
let rightwidth = Math.ceil(colsmaxwidth[col] - child.dataWidth) + 10;
justif = colsjustif[col];
}
colsjustif[col] = justif;
let leftwidth = 10 + lplus;
let rightwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + rplus);
if (justif == 'c') {
leftwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + lplus);
rightwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + rplus);
} else if(justif == 'r') {
leftwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + lplus);
rightwidth = 10 + rplus;
}
currentleft.style.width = '' + leftwidth + 'px';
child.style.width = '' + rightwidth + 'px';
currentleft = null;
col += 1;
}
}
}
currentline = currentline.nextSibling;
}
}
@ -342,4 +422,4 @@ function addItalic(line) {
return line;
}
export { load, save, formatLine, formatTable };
export { load, save, formatLine, formatTable, redrawTables };

@ -1,5 +1,5 @@
import { getStartPositionInLine, setStartPositionInLine } from './position.js';
import { formatLine, load, save, formatTable } from './md.js';
import { formatLine, load, save, formatTable, redrawTables } from './md.js';
function timeoutSave() {
if (window.tos !== null) {
@ -45,7 +45,7 @@ function onedit(e) {
let newline = formatLine(line.innerText);
line.parentNode.replaceChild(newline, line);
formatTable(newline);
formatTable(newline, 5.5);
setStartPositionInLine(newline, position);
}
@ -115,6 +115,8 @@ function init(pagename = null) {
mdnotesdiv.addEventListener('keydown', onkeydown);
mdnotesdiv.addEventListener('paste', onpaste);
mdnotesdiv.addEventListener('copy', oncopy);
mdnotesdiv.addEventListener('blur', () => {redrawTables(mdnotesdiv);});
mdnotesdiv.addEventListener('focus', () => {redrawTables(mdnotesdiv, 5.5);});
let saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', onsave);
loadButton.addEventListener('click', onload);

Loading…
Cancel
Save