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::{web, HttpResponse};
use serde::Deserialize;
use std::fs;
use std::io::Write;
use askama_actix::Template;
use askama_actix::TemplateToResponse;
@ -19,10 +20,12 @@ pub struct PageTemplate {
pub init: String,
}
#[get("/page/{page}")]
async fn page(path: web::Path<(String,)>, data: web::Data<AppData>) -> impl Responder {
let pagename = &path.0;
#[derive(Debug, Deserialize)]
struct QueryParams {
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 page_datas = fut_page_datas.await.unwrap();
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(),
}
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 init = String::from("init();");
//let init = String::from("init();");
let init = format!("init();");
PageTemplate {
name,
root,

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

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

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

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