Electron实现markdown笔记软件（三）

关于这个markdown笔记软件（三）——视图层设计

项目源码

https://github.com/andytt/ErtuilEditor

目录

关于这个markdown笔记软件（一）——总体的思路和介绍

关于这个markdown笔记软件（二）——模型层设计

关于这个markdown笔记软件（三）——视图层设计

关于这个markdown笔记软件（四）——md的渲染和生成

关于这个markdown笔记软件（五）——electron库

关于这个markdown笔记软件（六）——应用逻辑、electron对话框

关于这个markdown笔记软件（七）——其他细节、总结

用户界面渲染

用户界面渲染主要是由根目录下的的index.html和main.css实现渲染。

为了方便起见，主窗口固定大小，分为上下左右四块：

1. 上侧提供常用的功能按钮
2. 左侧是标签和目录列表
3. 右侧是输入区域
4. 下侧提供字数统计和信息展示

为此，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 = "&nbsp;&nbsp;&nbsp;"+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;
    }
}