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

src/page.rs

@@ -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}")]
+#[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 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,

static/cheezenotes.css

@@ -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;
+  padding-top: .2rem;
-  position: fixed;
+  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;
+  height: 2.6rem;
-  width: 2.8rem;
+  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; */
 /*}*/

static/modules/cheezenotes.js

@@ -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();
+    fetch(document.location.href, { method: "PUT", body: text }).catch((error) => {
-    xhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status != 200) {
         saveButton.disabled = false;
-            alert(xhttp.responseText);
+        alert(error);
-        }
+    })
-    }
-    xhttp.open("PUT", document.location.href, true);
-    xhttp.send(text);
 }
 
 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();
 }
 

static/modules/md.js

@@ -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 {

templates/page.html

@@ -1,6 +1,8 @@
 <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 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">
@@ -11,20 +13,19 @@
     <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">
+    <div id="content">
-            <!--<button id="saveButton">💾</button>
+        <div id="margindiv">
-            <input type="checkbox" id="taButton" /><label id="taButtonLabel" for="taButton">📋</label>
+            <div id="buttons"></div>
-            <input type="checkbox" id="lockButton" /><label id="lockButtonLabel" for="lockButton" class="material-icons">visibility_off</label>
+            <div class="ta"><textarea id="ta" class="cheezenotes" spellcheck="false">{{md}}</textarea></div>
-            <button id="boldButton"><b>B</b></button>
-            <button id="italicButton"><i>I</i></button>
-            <button id="strikeButton"><s>S</s></button>-->
-        </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>
+        </div>
+    </div>
     <script type="module">
         import { init } from '{{ root|safe }}static/modules/cheezenotes.js';
         {{ init|safe }}
     </script>
 </body>
+
 </html>