Force editor not to expand
This commit is contained in:
parent
869157c08c
commit
0d41825928
5 changed files with 120 additions and 139 deletions
|
|
@ -1,52 +1,51 @@
|
|||
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"));
|
||||
}
|
||||
import { render_markdown } from "./main.js";
|
||||
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>");
|
||||
render_markdown();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
)
|
||||
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)
|
||||
|
|
@ -54,20 +53,20 @@ 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-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);
|
||||
};
|
||||
};
|
||||
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);
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
<script type="module" src="./ui.js" defer></script>
|
||||
<!-- <script src="./filesystem.js"></script> -->
|
||||
<script type="module" src="./filesystem.js" defer></script>
|
||||
<script type="text/javascript" src="./main.js"></script>
|
||||
<script type="text/javascript" src="./filesystem.js"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -35,26 +38,6 @@
|
|||
</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>
|
||||
|
|
@ -65,4 +48,4 @@
|
|||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
18
src/main.js
18
src/main.js
|
|
@ -12,18 +12,22 @@ 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');
|
||||
invoke("parse_markdown", { document: text, pathtemplate: path_template}).then(
|
||||
|
||||
|
||||
export function render_markdown(){
|
||||
text = textarea.innerText;
|
||||
invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then(
|
||||
(ret)=>{
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
|
||||
// tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
|
||||
}
|
||||
);
|
||||
}
|
||||
textarea.addEventListener('input', ()=> {
|
||||
render_markdown();
|
||||
|
||||
|
||||
// });
|
||||
});
|
||||
|
||||
// Random tree
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
|
||||
:root {
|
||||
--main-bg-color: #2f2f2f;
|
||||
--sidebar-width: 3em;
|
||||
--highlight-color: #5f5f5f;
|
||||
--text-color: #ffffff;
|
||||
--text-color: #f6f6f6;
|
||||
|
||||
--sidebar-width: 3em;
|
||||
--filetree-width: 10em;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -20,8 +21,6 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -32,62 +31,59 @@
|
|||
|
||||
.container {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding-top: 1vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
text-align: left;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#main_editor {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: var(--text-color);
|
||||
background-color: var(--main-bg-color);
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 0 0 49%;
|
||||
width: 50%;
|
||||
padding: 0.5em;
|
||||
margin: .1em;
|
||||
border: solid;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
#markdown_input {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
/*float:left;*/
|
||||
color: #f6f6f6;
|
||||
color: var(--text-color);
|
||||
background: var(--main-bg-color);
|
||||
overflow: scroll;
|
||||
overflow-x: wrap;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#rendered_markdown {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
|
||||
|
||||
/*float:right;*/
|
||||
text-align: left;
|
||||
color: #f6f6f6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--main-bg-color);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
overflow: scroll;
|
||||
overflow-x: wrap;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.main_editor {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #f6f6f6;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
|
|
@ -98,10 +94,10 @@ h1 {
|
|||
}
|
||||
|
||||
li {
|
||||
line-height: 0.1em;
|
||||
margin 0px 0;
|
||||
/* line-height: 0.1em; */
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
padding 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar_button {
|
||||
|
|
@ -133,11 +129,6 @@ li {
|
|||
|
||||
}
|
||||
|
||||
#main_editor {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
@ -149,14 +140,16 @@ li {
|
|||
visibility: visible;
|
||||
width: var(--sidebar-width);
|
||||
transition: all 0.1s ease-out;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.filetree {
|
||||
width: 10em;
|
||||
float: left;
|
||||
border: solid;
|
||||
/* width: var(--filetree-width); */
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
resize: width;
|
||||
}
|
||||
|
||||
.filetree-directory-button,
|
||||
|
|
@ -172,7 +165,9 @@ li {
|
|||
color: var(--text-color);
|
||||
|
||||
}
|
||||
|
||||
.filetree-node{
|
||||
margin-left: 1em;
|
||||
}
|
||||
.filetree-icon {
|
||||
height: 1em;
|
||||
background-color: transparent;
|
||||
|
|
@ -189,4 +184,4 @@ li {
|
|||
.filetree-directory-button:hover {
|
||||
background-color: var(--highlight-color);
|
||||
/* Green */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue