ajout de l'historique de navigation avec repositionnement dans la page

pull/17/head
Nicolas Sanchez 3 years ago
parent dafb90a25a
commit 0d2cbdac9a

Binary file not shown.

Binary file not shown.

@ -1,8 +1,9 @@
use actix_web::http::header::ContentType;
use actix_web::{get, put, Responder}; use actix_web::{get, put, Responder};
use actix_web::{web, HttpResponse}; use actix_web::{web, HttpResponse};
use serde::Deserialize;
use std::fs; use std::fs;
use std::io::Write;
use askama_actix::Template; use askama_actix::Template;
use askama_actix::TemplateToResponse; use askama_actix::TemplateToResponse;
@ -19,10 +20,12 @@ pub struct PageTemplate {
pub init: String, pub init: String,
} }
#[get("/page/{page}")] #[derive(Debug, Deserialize)]
async fn page(path: web::Path<(String,)>, data: web::Data<AppData>) -> impl Responder { struct QueryParams {
let pagename = &path.0; pub data: Option<String>,
}
async fn get_data(data: & web::Data<AppData>, pagename: String) -> String {
let fut_page_datas = db::get_page_by_name(&data.pool, pagename.to_owned()); let fut_page_datas = db::get_page_by_name(&data.pool, pagename.to_owned());
let page_datas = fut_page_datas.await.unwrap(); let page_datas = fut_page_datas.await.unwrap();
let md; let md;
@ -41,10 +44,32 @@ async fn page(path: web::Path<(String,)>, data: web::Data<AppData>) -> impl Resp
} }
Some(dat) => md = (*dat.page_text).to_string(), Some(dat) => md = (*dat.page_text).to_string(),
} }
md
}
#[get("/page/{page}")]
async fn page(
path: web::Path<(String,)>,
data: web::Data<AppData>,
params: web::Query<QueryParams>,
) -> impl Responder {
let pagename = &path.0;
let md = get_data(&data, pagename.to_owned()).await;
match &params.data {
Some(_) => {
return HttpResponse::Ok()
.content_type(ContentType::plaintext())
.body(md)
}
None => {}
}
let name = data.name.to_owned() + " " + pagename.as_str(); let name = data.name.to_owned() + " - " + pagename.as_str();
let root = data.root.to_owned(); let root = data.root.to_owned();
let init = String::from("init();"); //let init = String::from("init();");
let init = format!("init();");
PageTemplate { PageTemplate {
name, name,
root, root,

@ -7,21 +7,11 @@
url(/static/MaterialIconsOutlined-Regular.otf) format('woff'); url(/static/MaterialIconsOutlined-Regular.otf) format('woff');
} }
html {
font-family: system-ui;
font-size: 12pt;
}
body {
margin: 0;
background-color: #dddddd;
}
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; /* Preferred icon size */ font-size: 22px; /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-transform: none; text-transform: none;
@ -35,27 +25,71 @@ body {
font-feature-settings: 'liga'; font-feature-settings: 'liga';
} }
html {
font-family: system-ui;
font-size: 12pt;
}
body {
margin: 0;
background-color: #dddddd;
}
div#content {
position: absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
div #margindiv {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
}
div#cheezenotes {
position: static;
margin: 0;
margin-top: 0;
margin-bottom: 3rem;
padding-top: 1rem;
padding-left: 3rem;
padding-right: 3rem;
padding-bottom: 1rem;
background-color: #ffffff;
min-height: 100%;
overflow-x: auto;
}
div#buttons { div#buttons {
position: sticky;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
box-sizing: border-box; box-sizing: border-box;
padding: .2rem; padding-top: .2rem;
position: fixed; padding-bottom: .2rem;
background-color: #dddddd; background-color: #dddddd;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 1200; max-width: 1200px;
} }
div#buttons button.button { div#buttons button.button {
color: #444444; color: #444444;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 2.8rem; height: 2.6rem;
width: 2.8rem; width: 2.6rem;
background-color: #eeeeee; background-color: #eeeeee;
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-right: none; border-right: none;
@ -69,12 +103,13 @@ div#buttons button.separator {
color: #bbbbbb; color: #bbbbbb;
border: none; border: none;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
height: 2.8rem; height: 2.6rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
div#buttons button.text { div#buttons button.text {
line-height: 1;
color: #444444; color: #444444;
font-size: 18px; font-size: 18px;
vertical-align: bottom; vertical-align: bottom;
@ -109,7 +144,7 @@ div#buttons #lockButtonLabel {
div.ta { div.ta {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 1200; max-width: 1200px;
} }
textarea#ta { textarea#ta {
@ -123,21 +158,6 @@ textarea#ta {
background-color: #cceeff; background-color: #cceeff;
} }
div#cheezenotes {
margin-top: 3rem;
margin-left: auto;
margin-right: auto;
max-width: 1200;
padding-top: 1rem;
padding-left: 3rem;
padding-right: 3rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
background-color: #ffffff;
min-height: 90%;
overflow-x: auto;
}
/*div#cheezenotes div.cheezenotes_line {*/ /*div#cheezenotes div.cheezenotes_line {*/
/* Pour firefox : white-space: pre; */ /* Pour firefox : white-space: pre; */
/*}*/ /*}*/

@ -118,15 +118,10 @@ function onsave(e) {
let saveButton = document.getElementById('saveButton'); let saveButton = document.getElementById('saveButton');
saveButton.disabled = true; saveButton.disabled = true;
let text = save(document.getElementById('ta'), document.getElementById('cheezenotes')); let text = save(document.getElementById('ta'), document.getElementById('cheezenotes'));
var xhttp = new XMLHttpRequest(); fetch(document.location.href, { method: "PUT", body: text }).catch((error) => {
xhttp.onreadystatechange = function () { saveButton.disabled = false;
if (this.readyState == 4 && this.status != 200) { alert(error);
saveButton.disabled = false; })
alert(xhttp.responseText);
}
}
xhttp.open("PUT", document.location.href, true);
xhttp.send(text);
} }
function onload(e) { function onload(e) {
@ -338,11 +333,33 @@ function onfocus() {
enableFormatButtons(); enableFormatButtons();
} }
function init(pagename = null) { function onpopstate(e) {
let top = 0;
let left = 0;
if (e.state.top) {
top = e.state.top;
}
if (e.state.left) {
left = e.state.left;
}
fetch(document.location.href + "?data=").then((response) => {
let ta = document.getElementById('ta');
response.text().then((data) => {
ta.value = data;
load(document.getElementById('ta'), document.getElementById('cheezenotes'));
let content = document.getElementById('content');
content.scrollTop = top;
content.scrollLeft = left;
});
}).catch((error) => { alert(error); });
}
function init() {
let cheezenotes = document.getElementById('cheezenotes'); let cheezenotes = document.getElementById('cheezenotes');
dpwidth(cheezenotes); dpwidth(cheezenotes);
window.addEventListener('popstate', onpopstate);
cheezenotes.addEventListener('input', onedit); cheezenotes.addEventListener('input', onedit);
cheezenotes.addEventListener('keyup', onkeyup); cheezenotes.addEventListener('keyup', onkeyup);
cheezenotes.addEventListener('keypress', onkeypress); cheezenotes.addEventListener('keypress', onkeypress);
@ -366,7 +383,7 @@ function init(pagename = null) {
addButton('h1Button', 'H1', onh1button); addButton('h1Button', 'H1', onh1button);
addButton('h2Button', 'H2', onh2button); addButton('h2Button', 'H2', onh2button);
addButton('h3Button', 'H3', onh3button); addButton('h3Button', 'H3', onh3button);
lastButton(addButton('bqButton', ':format_quote', onbqbutton)); addButton('bqButton', ':format_quote', onbqbutton);
addSeparator(); addSeparator();
addOnOffButton('editModeButton', ':edit_note', ':visibility', addOnOffButton('editModeButton', ':edit_note', ':visibility',
function (e) { function (e) {
@ -380,6 +397,13 @@ function init(pagename = null) {
disableFormatButtons(); disableFormatButtons();
/*if (pagename != null) {
fetch(pagename + "?data=").then((response) => {
let ta = document.getElementById('ta');
response.text().then((data) => { ta.value = data; onload(); });
}).catch((error) => { alert(error); });
}*/
onload(); onload();
} }

@ -32,7 +32,7 @@ function appendData(div, data) {
newline = formatLine(lineBegin + lines[0]); newline = formatLine(lineBegin + lines[0]);
line.parentNode.replaceChild(newline, line); line.parentNode.replaceChild(newline, line);
let prevline = newline; let prevline = newline;
for(let i=1; i<lines.length - 1; i++) { for (let i = 1; i < lines.length - 1; i++) {
newline = formatLine(lines[i]); newline = formatLine(lines[i]);
prevline.after(newline); prevline.after(newline);
prevline = newline; prevline = newline;
@ -62,7 +62,7 @@ function dpwidth(div) {
function save(textarea, div) { function save(textarea, div) {
let lines = div.children; let lines = div.children;
let text = ''; let text = '';
for (let i=0; i<lines.length; i++) { for (let i = 0; i < lines.length; i++) {
if (lines[i].innerText != '\n') { if (lines[i].innerText != '\n') {
text += lines[i].innerText.replace(emsp(), '\t'); text += lines[i].innerText.replace(emsp(), '\t');
} }
@ -94,7 +94,21 @@ function onlink(e) {
if (link.host !== document.location.host) { if (link.host !== document.location.host) {
open(link.href); open(link.href);
} else { } else {
open(link.href, '_self'); //open(link.href, '_self');
fetch(link.href + "?data=").then((response) => {
let ta = document.getElementById('ta');
response.text().then((data) => {
let content = document.getElementById('content');
let left = content.scrollLeft;
let top = content.scrollTop;
window.history.replaceState({top: top, left: left}, "");
window.history.pushState({}, "", link.href);
ta.value = data;
load(document.getElementById('ta'), document.getElementById('cheezenotes'));
content.scrollTop = 0;
content.scrollLeft = 0;
});
}).catch((error) => { alert(error); });
} }
return false; return false;
} else { } else {
@ -106,7 +120,7 @@ function onlinkout(e) {
let cheezenotes = document.getElementById('cheezenotes'); let cheezenotes = document.getElementById('cheezenotes');
if (cheezenotes.contentEditable == 'false') { if (cheezenotes.contentEditable == 'false') {
cheezenotes.contentEditable = true; cheezenotes.contentEditable = true;
} }
} }
function formatLine(line) { function formatLine(line) {
@ -205,7 +219,7 @@ function formatLine(line) {
if (elem.getElementsByClassName('tablerow').length > 0) { if (elem.getElementsByClassName('tablerow').length > 0) {
if (elem.childNodes[0].childNodes.length > 0) { if (elem.childNodes[0].childNodes.length > 0) {
let child = elem.childNodes[0].childNodes[0]; let child = elem.childNodes[0].childNodes[0];
while(child != null) { while (child != null) {
if (child.nodeType == 3) { if (child.nodeType == 3) {
let newchild = document.createElement('span'); let newchild = document.createElement('span');
newchild.innerText = child.nodeValue; newchild.innerText = child.nodeValue;
@ -219,7 +233,7 @@ function formatLine(line) {
elem.classList.add('tablerow'); elem.classList.add('tablerow');
} }
let links = elem.getElementsByClassName('link'); let links = elem.getElementsByClassName('link');
for (let i=0; i<links.length; i++) { for (let i = 0; i < links.length; i++) {
let link = links[i]; let link = links[i];
link.addEventListener('mouseover', onlinkin); link.addEventListener('mouseover', onlinkin);
link.addEventListener('click', onlink); link.addEventListener('click', onlink);
@ -243,7 +257,7 @@ function addTableLine(line) {
cpt++; cpt++;
} }
matches = matches.reverse(); matches = matches.reverse();
for(let i=0; i<matches.length; i++) { for (let i = 0; i < matches.length; i++) {
let match = matches[i]; let match = matches[i];
if (i == matches.length - 1) { if (i == matches.length - 1) {
// premier | // premier |
@ -295,13 +309,13 @@ function redrawTables(cheezenotes, dpwidth = 0) {
} }
let child = cheezenotes.childNodes[0]; let child = cheezenotes.childNodes[0];
let firsttableline = null; let firsttableline = null;
while(child != null) { while (child != null) {
if (firsttableline == null) { if (firsttableline == null) {
if (child.classList.contains('tablerow')) { if (child.classList.contains('tablerow')) {
firsttableline = child; firsttableline = child;
} }
} else { } else {
if (! child.classList.contains('tablerow')) { if (!child.classList.contains('tablerow')) {
formatTable(firsttableline, dpwidth); formatTable(firsttableline, dpwidth);
firsttableline = null; firsttableline = null;
} }
@ -314,7 +328,7 @@ function redrawTables(cheezenotes, dpwidth = 0) {
} }
function formatTable(line, dpwidth = 0) { function formatTable(line, dpwidth = 0) {
if (! line.classList.contains('tablerow')) { if (!line.classList.contains('tablerow')) {
return; return;
} }
@ -345,7 +359,7 @@ function resizeTableCols(firstline, lastline, dpwidth) {
let currentwidth = 0; let currentwidth = 0;
let col = 0; let col = 0;
let currentleft; let currentleft;
for(let i=0; i<childNodes.length; i++) { for (let i = 0; i < childNodes.length; i++) {
let child = childNodes[i]; let child = childNodes[i];
if (child.classList != null && child.classList.contains('lefttablespacer')) { if (child.classList != null && child.classList.contains('lefttablespacer')) {
currentleft = child; currentleft = child;
@ -377,7 +391,7 @@ function resizeTableCols(firstline, lastline, dpwidth) {
currentline = currentline.nextSibling; currentline = currentline.nextSibling;
} }
for (let i=0; i<colsmaxwidth.length; i++) { for (let i = 0; i < colsmaxwidth.length; i++) {
if (colsjustif[i] == null) { if (colsjustif[i] == null) {
colsjustif[i] = 'l'; colsjustif[i] = 'l';
} }
@ -389,7 +403,7 @@ function resizeTableCols(firstline, lastline, dpwidth) {
let childNodes = tablerow.childNodes; let childNodes = tablerow.childNodes;
let col = 0; let col = 0;
let currentleft; let currentleft;
for(let i=0; i<childNodes.length; i++) { for (let i = 0; i < childNodes.length; i++) {
let child = childNodes[i]; let child = childNodes[i];
if (child.classList != null && child.classList.contains('lefttablespacer')) { if (child.classList != null && child.classList.contains('lefttablespacer')) {
currentleft = child; currentleft = child;
@ -418,7 +432,7 @@ function resizeTableCols(firstline, lastline, dpwidth) {
if (justif == 'c') { if (justif == 'c') {
leftwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + lplus); leftwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + lplus);
rightwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + rplus); rightwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + rplus);
} else if(justif == 'r') { } else if (justif == 'r') {
leftwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + lplus); leftwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + lplus);
rightwidth = 10 + rplus; rightwidth = 10 + rplus;
} }
@ -437,7 +451,7 @@ function removeMono(line) {
if (listMono == null) { if (listMono == null) {
return [line, null]; return [line, null];
} }
line = line.replace(/`(`|.*?)`/g, "``"); line = line.replace(/`(`|.*?)`/g, "``");
return [line, listMono.reverse()]; return [line, listMono.reverse()];
} }
@ -458,10 +472,10 @@ function addMono(line, listMono) {
cpt++; cpt++;
} }
matches = matches.reverse(); matches = matches.reverse();
for(let i=0; i<matches.length; i++) { for (let i = 0; i < matches.length; i++) {
let mono = listMono[i]; let mono = listMono[i];
mono = mono.substring(1, mono.length - 1); mono = mono.substring(1, mono.length - 1);
line = line.substring(0, matches[i]) + '<span class="token">`</span><span class="mono">' + mono + '</span><span class="token">`</span>' + line.substring(matches[i]+2, line.length); line = line.substring(0, matches[i]) + '<span class="token">`</span><span class="mono">' + mono + '</span><span class="token">`</span>' + line.substring(matches[i] + 2, line.length);
} }
return line; return line;
} }
@ -471,7 +485,7 @@ function removeLink(line) {
if (listLink == null) { if (listLink == null) {
return [line, null]; return [line, null];
} }
line = line.replace(/(\[([^\]]*?)\]\(([^\)]*?)\))/g, "[]()"); line = line.replace(/(\[([^\]]*?)\]\(([^\)]*?)\))/g, "[]()");
return [line, listLink.reverse()]; return [line, listLink.reverse()];
} }
@ -492,8 +506,8 @@ function addLink(line, listLink) {
cpt++; cpt++;
} }
matches = matches.reverse(); matches = matches.reverse();
for(let i=0; i<matches.length; i++) { for (let i = 0; i < matches.length; i++) {
line = line.substring(0, matches[i]) + formatLink(listLink[i]) + line.substring(matches[i]+4, line.length); line = line.substring(0, matches[i]) + formatLink(listLink[i]) + line.substring(matches[i] + 4, line.length);
} }
return line; return line;
} }

@ -1,30 +1,31 @@
<html> <html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta http-equiv="Content-Language" content="fr"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="mobile-web-app-capable" content="yes"> <meta http-equiv="Content-Language" content="fr">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>{{name}}</title> <meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="{{ root|safe }}static/cheezenotes.css"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="module" src="{{ root|safe }}static/modules/cheezenotes.js"></script> <title>{{name}}</title>
</head> <link rel="stylesheet" href="{{ root|safe }}static/cheezenotes.css">
<body> <script type="module" src="{{ root|safe }}static/modules/cheezenotes.js"></script>
<div id="buttons"> </head>
<!--<button id="saveButton">💾</button>
<input type="checkbox" id="taButton" /><label id="taButtonLabel" for="taButton">📋</label> <body>
<input type="checkbox" id="lockButton" /><label id="lockButtonLabel" for="lockButton" class="material-icons">visibility_off</label> <div id="content">
<button id="boldButton"><b>B</b></button> <div id="margindiv">
<button id="italicButton"><i>I</i></button> <div id="buttons"></div>
<button id="strikeButton"><s>S</s></button>--> <div class="ta"><textarea id="ta" class="cheezenotes" spellcheck="false">{{md}}</textarea></div>
<div id="cheezenotes" class="cheezenotes" contenteditable="true" spellcheck="false"></div>
</div> </div>
<div class="ta"><textarea id="ta" class="cheezenotes" spellcheck="false">{{md}}</textarea></body><div> </div>
<div id="cheezenotes" class="cheezenotes" contenteditable="true" spellcheck="false"></div> <script type="module">
<script type="module"> import { init } from '{{ root|safe }}static/modules/cheezenotes.js';
import { init } from '{{ root|safe }}static/modules/cheezenotes.js'; {{ init|safe }}
{{ init|safe }} </script>
</script> </body>
</body>
</html> </html>
Loading…
Cancel
Save