关于这个markdown笔记软件(三)——视图层设计
项目源码
https://github.com/andytt/ErtuilEditor
目录
关于这个markdown笔记软件(五)——electron库
关于这个markdown笔记软件(六)——应用逻辑、electron对话框
用户界面渲染
用户界面渲染主要是由根目录下的的index.html和main.css实现渲染。
为了方便起见,主窗口固定大小,分为上下左右四块:
- 上侧提供常用的功能按钮
- 左侧是标签和目录列表
- 右侧是输入区域
- 下侧提供字数统计和信息展示
为此,index.html中主体部分定义了四个div标签,class分别定义为是按钮区’note_menus’,目录区’note_filters’,文本区’note_texts’,信息区’note_downs’。并且在main.css中对其位置进行了控制:
.note_menus{
float: top;
background-color:#FFF8F8;
border-style: solid;
border-width: 0px 0px 0.2px 0px;
border-color: #ECEFF2;
}
.note_filters{
width: 250px;
height: 730px;
margin: 10;
float: left;
background-color: #FAFAFA;
border-style: solid;
border-width: 0px 0.1px 0px 0px;
border-color: #ECEFF2;
overflow-y:scroll;
}
.note_texts{
float: right;
width: 750px;
height: 730px;
text-align:center;
background-color:white;
}
.note_downs{
clear:left;
background-color:#FFF8F8;
border-style: solid;
border-width: 0.2px 0px 0px 0px;
border-color: #ECEFF2;
}
按钮区
主要提供了操作对按钮,主要是button和selector标签,具体实现了新建、删除、修改标签、渲染样式、导出、插入、保存、生成html等功能。
目录区
这里展示了所有等标签,并根据选中等标签展示具体等笔记,这里等目录由./js/files_manage.js 的createDirs()动态生成。
先遍历数据库,找出所有标签、再筛选出标签下的所有笔记。代码如下:
function createDirs(sel_id,node_id = ''){
// if(save_note(false,false,false) == 1){
// return;
// }
removeAllChild("labels");
removeAllChild("notes");
var flag = false;
var labels = database.db_get_labels(db_path);
var label_div = document.createElement("div");
var sel_label = '';
label_div.classList.add("list-group");
for( idx in labels){
var button = document.createElement('a');
button.classList.add('list-group-item');
if(labels[idx].id == sel_id){
button.classList.add('active');
sel_label = labels[idx].label_name;
curr_label = labels[idx].label_name;
}
button.innerHTML = labels[idx].label_name;
button.setAttribute("onclick", "createDirs("+labels[idx].id+")");
label_div.appendChild(button);
}
document.getElementById('labels').appendChild(label_div);
var notes = database.db_get_notes_by_label(db_path,sel_label);
var ul = document.createElement('ul');
ul.className = "list-unstyled";
var ul_title = document.createElement('li');
ul_title.innerHTML = "<h3><span class=\"glyphicon glyphicon-bookmark\"></span>\t"+sel_label+"</h3>";
ul.appendChild(ul_title);
for(idx in notes){
var li = document.createElement('li');
var h3 = document.createElement('button');
h3.setAttribute("style","width:100%;text-align: center;")
h3.classList.add('btn');
h3.classList.add('btn-default')
h3.innerHTML = " "+notes[idx].note_name;
if(notes[idx].note_name == node_id){
curr_note = notes[idx].note_name;
h3.classList.add('btn-success');
flag = true;
}else{
h3.classList.add('btn-default');
}
h3.setAttribute("onclick","load_file('"+notes[idx].note_name+"')");
li.appendChild(h3);
ul.appendChild(li);
}
if(flag == false){
document.getElementById("raw_title").value = '';
document.getElementById("raw_text").value = '';
curr_note = '';
}
document.getElementById('notes').appendChild(ul);
}
参数分别是标签的id和笔记的标题,如果找到对应标签和笔记的话,就将对应标签和笔记选中。
其中removeAllChild()
函数用于递归删除指定id元素下的所有内容。
文本区
主题有两个元素:
一是input标签,用于输入标题。
一是textarea标签,输入正文。
正常的浏览器里面,如果按下tab键,将会使得下一个html元素获得焦点。但是,当我们输入正文时候,我们期望的行为并不是这样,而是在当前位置插入四个空格,因此,需要对文本框对输入进行检查,发现输入是tab键时,要拦截默认对行为,并插入四个空格。具体代码在./js/tab_control.js文件中。(这一段代码并非完全原创!在此向原作者致敬)。
底部信息区
目前主要有两个内容,一是字、词对统计,当监测到textarea元素有onkeyup事件时候,则调用该函数,刷新字数统计功能。代码在./js/text_work.js的text_conuts函数中:
function text_counts(){
var text = document.getElementById('raw_text').value;
var row = text.split(/\n/).length;
var char = text.length;
var word = text.split(/[\n\t\s]/).length;
var p1 = document.getElementById("text_count");
p1.innerHTML = "统计:"+"词数:"+word+"\t\t行数:"+row+"\t\t字数:"+char;
}
另外一部分就是当鼠标移动到按钮区域上方时候,出发事件,显示该按钮的功能。另外,在保存、导出的时候,也会有所提示。代码在./js/text_work.js的info函数中:
function info(value){
var info = document.getElementById('text_info');
switch(value){
case 0:info.innerHTML = "";break;
case 1:info.innerHTML = "新建一个新的笔记(ctrl+N)";break;
case 2:info.innerHTML = "新建一个新的标签(ctrl+shift+N)";break;
case 3:info.innerHTML = "删除选中的的笔记(ctrl+D)";break;
case 4:info.innerHTML = "删除当前标签(ctrl+shift+D)";break;
case 5:info.innerHTML = "更改当前笔记所属标签";break;
case 6:info.innerHTML = "选择一个好看的样式";break;
case 7:info.innerHTML = "插入文件、图片等(ctrl+I)";break;
case 8:info.innerHTML = "保存当前笔记(ctrl+S)";break;
case 9:info.innerHTML = "保存并展示当前笔记(ctrl+P)";break;
case 10:info.innerHTML = "标签";break;
case 11:info.innerHTML = "标签下的笔记";break;
case 12:info.innerHTML = "在此输入题目";break;
case 13:info.innerHTML = "导出为pdf";break;
}
}