file loadig and file tree working
This commit is contained in:
parent
c2cc84f9dc
commit
869157c08c
15 changed files with 608 additions and 128 deletions
7
src-tauri/Cargo.lock
generated
7
src-tauri/Cargo.lock
generated
|
|
@ -144,6 +144,7 @@ name = "apographe"
|
|||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"comrak",
|
||||
"html_tag",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"shellexpand",
|
||||
|
|
@ -1582,6 +1583,12 @@ dependencies = [
|
|||
"syn 1.0.109",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "html_tag"
|
||||
version = "0.1.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "258c462501ea394856d3c6cf7ca16f384dfb928766617bf018af0068c6935dee"
|
||||
|
||||
[[package]]
|
||||
name = "http"
|
||||
version = "1.1.0"
|
||||
|
|
|
|||
|
|
@ -26,4 +26,5 @@ comrak = "0.29.0"
|
|||
tauri-plugin-fs = "2"
|
||||
tauri-plugin-log = "2"
|
||||
shellexpand = "3.1.0"
|
||||
html_tag = "0.1.3"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
use std::path::Path;
|
||||
|
||||
use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
|
||||
use html_tag::HtmlTag;
|
||||
use shellexpand;
|
||||
use tauri::Manager;
|
||||
use std::{
|
||||
collections::BTreeMap,
|
||||
env,
|
||||
ffi::{OsStr, OsString},
|
||||
fs,
|
||||
path::{absolute, Path},
|
||||
};
|
||||
use tauri::{ipc::IpcResponse, Manager};
|
||||
use tauri_plugin_fs::FsExt;
|
||||
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
#[tauri::command]
|
||||
fn greet(name: &str) -> String {
|
||||
|
|
@ -11,7 +18,7 @@ fn greet(name: &str) -> String {
|
|||
}
|
||||
|
||||
#[tauri::command]
|
||||
fn parse_markdown(document: &str, pathtemplate: &str) -> String {
|
||||
fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String {
|
||||
let mut rendered_markdown: String = String::new();
|
||||
let path = "/foo/bar.txt";
|
||||
println!("{:?}", shellexpand::full(path));
|
||||
|
|
@ -25,9 +32,16 @@ fn parse_markdown(document: &str, pathtemplate: &str) -> String {
|
|||
let root = parse_document(&arena, document, &options);
|
||||
|
||||
// Iterate over all the descendants of root.
|
||||
env::set_current_dir(basepath);
|
||||
for node in root.descendants() {
|
||||
if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
|
||||
if let Ok(resolved_path) = shellexpand::full(&image_node.url) {
|
||||
let image_path = Path::new(&image_node.url).to_path_buf();
|
||||
let absolute_image_path = absolute(image_node.url.clone());
|
||||
let absolute_image_path =
|
||||
.unwrap_or(image_path)
|
||||
.as_path()
|
||||
.to_string_lossy()
|
||||
if let Ok(resolved_path) = shellexpand::full(&absolute_image_path) {
|
||||
image_node.url = pathtemplate.replace("FILEPATH", &resolved_path);
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +53,100 @@ fn parse_markdown(document: &str, pathtemplate: &str) -> String {
|
|||
return rendered_markdown.to_owned();
|
||||
// String::from_str("lololo").unwrap()
|
||||
}
|
||||
// <div class="filetree-node" id="folder3">
|
||||
// <button class="filetree-element">
|
||||
// <img class="topbar_icon" src="images/dropdown.svg" />folder 3
|
||||
// </button>
|
||||
// </div>
|
||||
|
||||
fn add_dir_tree_node(path: &Path, filter: &Vec<String>) -> HtmlTag {
|
||||
let mut html = HtmlTag::new("div")
|
||||
.with_class("filetree-node")
|
||||
.with_id(&format!(
|
||||
"{}",
|
||||
Path::new(path)
|
||||
.file_name()
|
||||
.unwrap_or_default()
|
||||
.to_string_lossy()
|
||||
))
|
||||
.with_attribute("expanded", "false")
|
||||
.with_child(
|
||||
HtmlTag::new("button")
|
||||
.with_class("filetree-directory-button")
|
||||
.with_child(
|
||||
HtmlTag::new("img")
|
||||
.with_class("filetree-icon")
|
||||
.with_attribute("src", "images/directory.svg"),
|
||||
)
|
||||
.with_child(
|
||||
HtmlTag::new("a").with_body(
|
||||
&Path::new(path)
|
||||
.file_name()
|
||||
.unwrap_or_default()
|
||||
.to_string_lossy(),
|
||||
),
|
||||
),
|
||||
);
|
||||
if let Ok(entries) = fs::read_dir(path) {
|
||||
for dir_entry_res in entries {
|
||||
println!("{:?}", dir_entry_res);
|
||||
if let Ok(dir_entry) = dir_entry_res {
|
||||
if let Ok(metadata) = fs::metadata(dir_entry.path()) {
|
||||
if metadata.is_file() {
|
||||
let mut file_div = HtmlTag::new("div")
|
||||
.with_class("filetree-node")
|
||||
.with_id(&format!("{}", dir_entry.path().to_string_lossy()))
|
||||
.with_attribute("style", "visibility: hidden; height: 0px;");
|
||||
let mut file_button =
|
||||
HtmlTag::new("button").with_class("filetree-file-button");
|
||||
match dir_entry
|
||||
.path()
|
||||
.extension()
|
||||
.unwrap_or_default()
|
||||
.to_string_lossy()
|
||||
.to_string()
|
||||
.as_str()
|
||||
{
|
||||
"md" => file_button.add_child(
|
||||
HtmlTag::new("img")
|
||||
.with_class("filetree-icon")
|
||||
.with_attribute("src", "images/markdown.svg"),
|
||||
),
|
||||
|
||||
_ => file_button.add_child(
|
||||
HtmlTag::new("img")
|
||||
.with_class("filetree-icon")
|
||||
.with_attribute("src", "images/file.svg"),
|
||||
),
|
||||
};
|
||||
|
||||
file_button.add_child(
|
||||
HtmlTag::new("a").with_body(&dir_entry.file_name().to_string_lossy()),
|
||||
);
|
||||
file_div.add_child(file_button);
|
||||
|
||||
html.add_child(file_div)
|
||||
} else if metadata.is_dir() {
|
||||
html.add_child(
|
||||
add_dir_tree_node(&dir_entry.path(), &filter)
|
||||
.with_attribute("style", "visibility: hidden; height: 0px;"), // .with_style("visibility", "hidden")
|
||||
// .with_style("height", "0px"),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return html;
|
||||
}
|
||||
#[tauri::command]
|
||||
fn dir_tree_html(basepath: &str, filter: Vec<String>) -> String {
|
||||
match shellexpand::full(basepath) {
|
||||
Ok(path) => add_dir_tree_node(&Path::new(&path.into_owned()), &filter).to_html(),
|
||||
|
||||
Err(_) => String::new(),
|
||||
}
|
||||
}
|
||||
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||
pub fn run() {
|
||||
tauri::Builder::default()
|
||||
|
|
@ -54,8 +161,7 @@ pub fn run() {
|
|||
|
||||
Ok(())
|
||||
})
|
||||
.invoke_handler(tauri::generate_handler![greet])
|
||||
.invoke_handler(tauri::generate_handler![parse_markdown])
|
||||
.invoke_handler(tauri::generate_handler![dir_tree_html, parse_markdown])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"windows": [
|
||||
{
|
||||
"title": "apographe",
|
||||
"decorations": false,
|
||||
"width": 800,
|
||||
"height": 600
|
||||
}
|
||||
|
|
|
|||
79
src/filesystem.js
Normal file
79
src/filesystem.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
const { convertFileSrc, invoke } = window.__TAURI__.core;
|
||||
const { homeDir, join } = window.__TAURI__.path;
|
||||
const { readTextFile } = window.__TAURI__.fs;
|
||||
|
||||
function handle_file_select(filename){
|
||||
if (filename.endsWith("md")){
|
||||
readTextFile(convertFileSrc(filename) ).then(
|
||||
(ret)=>{
|
||||
var tag_id = document.getElementById('markdown_input');
|
||||
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
|
||||
}
|
||||
);
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
tag_id.dispatchEvent(new Event("input"));
|
||||
}
|
||||
}
|
||||
|
||||
function dropdown(id) {
|
||||
var dropdown_element = document.getElementById(id);
|
||||
var dropdown_children = dropdown_element.children;
|
||||
console.log(dropdown_element.getAttribute("expanded"));
|
||||
if (dropdown_element.getAttribute("expanded") == "false") {
|
||||
dropdown_element.setAttribute("expanded", "true");
|
||||
}
|
||||
else{
|
||||
dropdown_element.setAttribute("expanded", "false");
|
||||
}
|
||||
for (var i = 0; i < dropdown_children.length; i++) {
|
||||
var child = dropdown_children[i];
|
||||
console.log(child.id);
|
||||
if (child.className === "filetree-node") {
|
||||
if (document.getElementById(id).getAttribute("expanded") == "true") {
|
||||
document.getElementById(child.id).style.visibility = "visible";
|
||||
document.getElementById(child.id).style.height = "auto";
|
||||
} else {
|
||||
document.getElementById(child.id).style.visibility = "hidden";
|
||||
document.getElementById(child.id).style.height = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
window.onload = function () {
|
||||
invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"]}).then(
|
||||
(ret)=>{
|
||||
var tag_id = document.getElementById('filetree');
|
||||
tag_id.innerHTML = ret;
|
||||
}
|
||||
)
|
||||
}
|
||||
let filetree = document.getElementById('filetree');
|
||||
// Options for the observer (which mutations to observe)
|
||||
const config = { attributes: true, childList: true, subtree: true };
|
||||
|
||||
// Callback function to execute when mutations are observed
|
||||
const callback = (mutationList, observer) => {
|
||||
var anchors = document.getElementsByClassName("filetree-directory-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function () {
|
||||
dropdown(this.parentElement.id);
|
||||
};
|
||||
};
|
||||
var anchors = document.getElementsByClassName("filetree-file-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function () {
|
||||
handle_file_select(this.parentElement.id);
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// Create an observer instance linked to the callback function
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
// Start observing the target node for configured mutations
|
||||
observer.observe(filetree, config);
|
||||
|
||||
30
src/images/directory.svg
Normal file
30
src/images/directory.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="27.574734mm"
|
||||
height="19.91688mm"
|
||||
viewBox="0 0 27.574734 19.91688"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-16.675,-10.324561)">
|
||||
<path
|
||||
id="path6"
|
||||
style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 17.175,14.891444 v -4.066883 h 6 l 3,4.066879 h 11.75393 v 14.85 H 17.175 Z" />
|
||||
</g>
|
||||
<g
|
||||
id="layer2"
|
||||
transform="translate(-16.675,-10.324561)">
|
||||
<path
|
||||
id="rect1"
|
||||
style="fill:#8d8d8d;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 21.108646,21.060923 3.474687,-8.119695 6.804375,0.03094 0.608125,4.035941 h 11.75393 L 37.92893,29.74144 H 17.175 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
23
src/images/dropdown.svg
Normal file
23
src/images/dropdown.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="4.0000005mm"
|
||||
height="3.4864769mm"
|
||||
viewBox="0 0 4.0000005 3.4864769"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-5.4999998,-6.0000005)">
|
||||
<path
|
||||
style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="path42"
|
||||
d="M 7.6121703,4.8876915 5.8906701,1.905966 l 3.4430002,-1e-7 z"
|
||||
transform="matrix(1.1132792,0,0,1.1132792,-0.9744707,3.961624)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 781 B |
26
src/images/file.svg
Normal file
26
src/images/file.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="15.447813mm"
|
||||
height="20.119375mm"
|
||||
viewBox="0 0 15.447813 20.119375"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer2"
|
||||
transform="translate(-49.61875,-9.9878121)">
|
||||
<path
|
||||
id="rect6"
|
||||
style="fill:#6c6c6c;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 62.834065,12.127499 1.7325,1.701562 V 29.607186 H 50.118752 V 10.487812 h 10.967345 z" />
|
||||
<path
|
||||
id="path7"
|
||||
style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 61.070627,13.829062 c 0.358028,0.238093 3.495938,-1e-6 3.495938,-1e-6 V 29.607186 H 50.118752 V 10.487812 h 10.967345 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,010 B |
55
src/images/markdown.svg
Normal file
55
src/images/markdown.svg
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="15.447813mm"
|
||||
height="20.119373mm"
|
||||
viewBox="0 0 15.447813 20.119373"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<rect
|
||||
x="285.77481"
|
||||
y="53.202755"
|
||||
width="56.125984"
|
||||
height="51.214962"
|
||||
id="rect8" />
|
||||
</defs>
|
||||
<g
|
||||
id="layer2"
|
||||
transform="translate(-70.114011,-9.8599625)">
|
||||
<path
|
||||
id="rect6-4"
|
||||
style="fill:#bababa;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 83.329329,11.999649 1.7325,1.701562 V 29.479336 H 70.614016 V 10.359962 h 10.967345 z" />
|
||||
<path
|
||||
id="path7-9"
|
||||
style="fill:#bababa;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 81.565891,13.701212 c 0.358028,0.238093 3.495938,-10e-7 3.495938,-10e-7 V 29.479336 H 70.614016 V 10.359962 h 10.967345 z" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="matrix(0.18089399,0,0,0.18790056,22.65461,1.4354568)"
|
||||
id="text7"
|
||||
style="text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect8);fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:3.77953;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"><tspan
|
||||
x="285.77539"
|
||||
y="89.598132"
|
||||
id="tspan2"><tspan
|
||||
style="font-size:40px;font-family:Sans;-inkscape-font-specification:'Sans, Normal'"
|
||||
id="tspan1">M</tspan></tspan></text>
|
||||
<rect
|
||||
style="fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:0.599626;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3.3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect12"
|
||||
width="1.0527325"
|
||||
height="3.7217491"
|
||||
x="77.175468"
|
||||
y="21.155254" />
|
||||
<path
|
||||
style="fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:0.900731;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3.3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="path12"
|
||||
d="m 102.61969,22.958655 -3.967938,-6.87267 7.935878,0 z"
|
||||
transform="matrix(0.36867589,0,0,0.37368403,39.919915,18.066577)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
39
src/images/menu_button.svg
Normal file
39
src/images/menu_button.svg
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="4.7828827mm"
|
||||
height="3.7828834mm"
|
||||
viewBox="0 0 4.7828827 3.7828834"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-15.108558,-5.6085582)">
|
||||
<rect
|
||||
style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect41"
|
||||
width="4.6328835"
|
||||
height="0.63288289"
|
||||
x="15.183558"
|
||||
y="5.6835585" />
|
||||
<rect
|
||||
style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect41-7"
|
||||
width="4.6328835"
|
||||
height="0.63288289"
|
||||
x="15.183558"
|
||||
y="7.1835585" />
|
||||
<rect
|
||||
style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect41-7-0"
|
||||
width="4.6328835"
|
||||
height="0.63288289"
|
||||
x="15.183558"
|
||||
y="8.6835585" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
30
src/images/path6.svg
Normal file
30
src/images/path6.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="27.574734mm"
|
||||
height="19.91688mm"
|
||||
viewBox="0 0 27.574734 19.91688"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-16.675,-10.324561)">
|
||||
<path
|
||||
id="path6"
|
||||
style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 17.175,14.891444 v -4.066883 h 6 l 3,4.066879 h 11.75393 v 14.85 H 17.175 Z" />
|
||||
</g>
|
||||
<g
|
||||
id="layer2"
|
||||
transform="translate(-16.675,-10.324561)">
|
||||
<path
|
||||
id="rect1"
|
||||
style="fill:#8d8d8d;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 21.108646,21.060923 3.474687,-8.119695 6.804375,0.03094 0.608125,4.035941 h 11.75393 L 37.92893,29.74144 H 17.175 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,19 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tauri App</title>
|
||||
<!-- <script src="./main.js"></script> -->
|
||||
<script type="module" src="./main.js" defer></script>
|
||||
<script src="./main.js"></script>
|
||||
<!-- <script src="./ui.js"></script> -->
|
||||
<script type="module" src="./ui.js" defer></script>
|
||||
<!-- <script src="./filesystem.js"></script> -->
|
||||
<script type="module" src="./filesystem.js" defer></script>
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="main">
|
||||
<dialog>
|
||||
<button autofocus>Close</button>
|
||||
<p>This modal dialog has a groovy backdrop!</p>
|
||||
</dialog>
|
||||
|
||||
<div class="top-bar">
|
||||
<button class="topbar_button" id="hide-sidebar"><img class="topbar_icon" src="images/graph_icon.svg" /></button>
|
||||
<button class="topbar_button" id="hide-sidebar">
|
||||
<img class="topbar_icon" src="images/menu_button.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="sidebar">
|
||||
|
|
@ -21,13 +33,36 @@
|
|||
<button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
|
||||
<button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
|
||||
</div>
|
||||
|
||||
<div class="filetree" id="filetree">
|
||||
<!-- <div class="filetree-node"> -->
|
||||
<!-- <button class="filetree-element"> -->
|
||||
<!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 1 -->
|
||||
<!-- </button> -->
|
||||
<!-- <div class="filetree-node" id="folder2"> -->
|
||||
<!-- <button class="filetree-element"> -->
|
||||
<!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 2 -->
|
||||
<!-- </button> -->
|
||||
<!-- <div class="filetree-node" id="folder3"> -->
|
||||
<!-- <button class="filetree-element"> -->
|
||||
<!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 3 -->
|
||||
<!-- </button> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="filetree-node" id="folder4"> -->
|
||||
<!-- <button class="filetree-element"> -->
|
||||
<!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 4 -->
|
||||
<!-- </button> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="row" id="main_editor">
|
||||
<div class="col" id="markdown_input" contenteditable></div>
|
||||
<div class="col" id="rendered_markdown"></div>
|
||||
|
||||
</div>
|
||||
<div id="graph"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
33
src/main.js
33
src/main.js
|
|
@ -1,5 +1,4 @@
|
|||
const { convertFileSrc, invoke } = window.__TAURI__.core;
|
||||
// const { invoke } = window.__TAURI__.core;
|
||||
const { homeDir, join } = window.__TAURI__.path;
|
||||
const { readFile } = window.__TAURI__.fs;
|
||||
|
||||
|
|
@ -9,16 +8,10 @@ const filePath = await join(appDataDirPath, 'Pictures/wallpaper.png');
|
|||
const assetUrl = convertFileSrc(filePath);
|
||||
|
||||
let text = "";
|
||||
// window.addEventListener("DOMCharacterDataModified", () => {
|
||||
// var tag_id = document.getElementById('rendered_markdown');
|
||||
// tag_id.innerHTML = "<p>HI</p>"
|
||||
// window.addEventListener("DOMContentLoaded", () => {
|
||||
let textarea = document.getElementById('markdown_input');
|
||||
|
||||
|
||||
let placeholder_path = "FILEPATH";
|
||||
let path_template = convertFileSrc(placeholder_path);
|
||||
|
||||
let textarea = document.getElementById('markdown_input');
|
||||
textarea.addEventListener('input', ()=> {
|
||||
text = textarea.innerText;
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
|
|
@ -32,31 +25,7 @@ textarea.addEventListener('input', ()=> {
|
|||
|
||||
// });
|
||||
});
|
||||
document.getElementById("hide-sidebar").onclick = function() {toggle_visibility("sidebar");};
|
||||
function toggle_visibility(id) {
|
||||
if (document.getElementById(id).style.visibility == "hidden"){
|
||||
document.getElementById(id).style.visibility = "visible";
|
||||
var style = window.getComputedStyle(document.body);
|
||||
document.getElementById(id).style.width = style.getPropertyValue("--sidebar-width");
|
||||
}else{
|
||||
|
||||
document.getElementById(id).style.visibility = "hidden";
|
||||
document.getElementById(id).style.width = 0;
|
||||
}
|
||||
|
||||
}
|
||||
function handleShortcut(event) {
|
||||
var markdown_editor = document.getElementById('markdown_input');
|
||||
|
||||
if (document.activeElement === markdown_editor){
|
||||
if (event.ctrlKey) {
|
||||
if (event.key === "l"){
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", handleShortcut);
|
||||
// Random tree
|
||||
// const N = 300;
|
||||
// const gData = {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
|
||||
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #ffe21c);
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #4f4f4f;
|
||||
--main-bg-color: #2f2f2f;
|
||||
--sidebar-width: 3em;
|
||||
--highlight-color: #5f5f5f;
|
||||
--text-color: #ffffff;
|
||||
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -21,11 +23,13 @@
|
|||
|
||||
|
||||
}
|
||||
*{
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -44,15 +48,17 @@
|
|||
border: solid;
|
||||
border-radius: .5em;
|
||||
}
|
||||
#markdown_input
|
||||
{
|
||||
|
||||
#markdown_input {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
/*float:left;*/
|
||||
color: #f6f6f6;
|
||||
background: var(--main-bg-color);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#rendered_markdown {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
|
|
@ -62,11 +68,15 @@
|
|||
text-align: left;
|
||||
color: #f6f6f6;
|
||||
background-color: var(--main-bg-color);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
overflow: scroll;
|
||||
}
|
||||
.main_editor{
|
||||
|
||||
.main_editor {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
|
@ -78,6 +88,7 @@
|
|||
color: #f6f6f6;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
|
|
@ -102,14 +113,18 @@ li {
|
|||
.sidebar_icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar_button {
|
||||
height: 2em;
|
||||
background-color: var(--main-bg-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topbar_icon {
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
|
|
@ -117,6 +132,7 @@ li {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
#main_editor {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -125,7 +141,7 @@ li {
|
|||
|
||||
.main {
|
||||
display: flex;
|
||||
height:100vh;
|
||||
height: 95vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -136,3 +152,41 @@ li {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.filetree {
|
||||
width: 10em;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.filetree-directory-button,
|
||||
.filetree-file-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
text-align: left;
|
||||
transition: all 0.01s ease-out;
|
||||
white-space: nowrap;
|
||||
overflow-y: visible;
|
||||
color: var(--text-color);
|
||||
|
||||
}
|
||||
|
||||
.filetree-icon {
|
||||
height: 1em;
|
||||
background-color: transparent;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.filetree_expand {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.filetree-file-button:hover,
|
||||
.filetree-directory-button:hover {
|
||||
background-color: var(--highlight-color);
|
||||
/* Green */
|
||||
}
|
||||
25
src/ui.js
Normal file
25
src/ui.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
function toggle_visibility(id) {
|
||||
if (document.getElementById(id).style.visibility == "hidden") {
|
||||
document.getElementById(id).style.visibility = "visible";
|
||||
var style = window.getComputedStyle(document.body);
|
||||
document.getElementById(id).style.width = style.getPropertyValue("--sidebar-width");
|
||||
} else {
|
||||
document.getElementById(id).style.visibility = "hidden";
|
||||
document.getElementById(id).style.width = 0;
|
||||
}
|
||||
}
|
||||
function handleShortcut(event) {
|
||||
var markdown_editor = document.getElementById("markdown_input");
|
||||
|
||||
if (document.activeElement === markdown_editor) {
|
||||
if (event.ctrlKey) {
|
||||
if (event.key === "l") {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", handleShortcut);
|
||||
document.getElementById("hide-sidebar").onclick = function () {
|
||||
toggle_visibility("sidebar");
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue