增加查看 devdocs 文档的功能

assets/index.js

@@ -1,7 +1,15 @@
 // 正则转义
-RegExp.escape = function (s) {
+escapeRe = s => {
     return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');   
-};
+}
+
+// html实体编码
+escapeHtml = s => {
+    return s.replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "");
+}
 
 // 列表
 list = (path, initial, type, name ,desc) => {
@@ -19,26 +27,29 @@ showList = (text, index, listnum) => {
     var obn = [];
     var obd = [];
     index.forEach(i => {
-        let name = i.name,
+        let reg = new RegExp(escapeRe(text), "i",)
-            desc = i.desc != undefined ? i.desc : "",
+            match1 = reg.exec(i.name),
-            initial = name.slice(0, 1).toUpperCase(),
+            match2 = reg.exec(i.desc),
-            reg = new RegExp(RegExp.escape(text), "i"),
+            name = escapeHtml(i.name),
-            match1 = reg.exec(name),
+            desc = i.desc != undefined ? escapeHtml(i.desc) : "",
-            match2 = reg.exec(desc);
+            type = i.type != undefined ? escapeHtml(i.type) : "";
+        let initial = i.name.replace(/&lt;|&gt;|&quot;|&#039;/ig, '')
+        initial = /^.*?([a-zA-Z])/.exec(initial);
+        initial = initial ? initial[1].toUpperCase() : '&nbsp;';
         // 优先显示名称匹配的内容
         if (match1) {
             name = highlightList(name, match1[0]);
             if (match2) desc = highlightList(desc, match2[0]);
             // 置顶全字匹配的内容
             if (i.name.toUpperCase() == text.toUpperCase()) {
-                obn.unshift(list(i.path, initial, i.type, name, desc));
+                obn.unshift(list(i.path, initial, type, name, desc));
             } else {
-                obn.push(list(i.path, initial, i.type, name, desc));
+                obn.push(list(i.path, initial, type, name, desc));
             }
         // 其次显示描述匹配的内容
         } else if (match2) {
             desc = highlightList(desc, match2[0]);
-            obd.push(list(i.path, initial, i.type, name, desc));
+            obd.push(list(i.path, initial, type, name, desc));
         }
     });
     window.info = obn.concat(obd);
@@ -47,39 +58,38 @@ showList = (text, index, listnum) => {
     utools.setExpendHeight(num > 11 ? 550 : 50 * num);
     $(".select").removeClass('select');
     $(".info:first").addClass('select');
+    // 鼠标锁，方式鼠标抢占选择条
     window.mouseLockTime = new Date().getTime();
 }
 
 // 显示手册
-showManual = async path => {
+showManual = path => {
     utools.setExpendHeight(550);
     if (/^((ht|f)tps?):\/\//.test(path)) {
         window.open(path);
     } else {
-        let p = path.split('.html#')
+        let e = /(.*?)(\.html)*#(.*)/.exec(path);
-        if (p.length == 2) {
+        if (e) {
-            var f = p[0] + '.html';
+            var f = e[1] + '.html';
-            var id = '#' + p[1];
+            var id = '#' + e[3];
         } else {
-            var f = p[0]
+            var f = window.dirs.idxFile ? path : path + '.html';
         }
         var file = `${window.dirs.docPath}/${f}`;
-        try {
-            var data = await readFile(file);
         $("#mainlist").fadeOut();
-            $("#manual").fadeOut().promise().done(() => {
+        $("#manual").fadeIn().html('<div class="load">Loading</div>')
-                var relPath = f.substr(0, f.lastIndexOf('/') + 1),
+        $.get(file, data => {
-                    absPath = window.dirs.docPath + relPath;
+            // $("#manual").fadeOut().promise().done(() => {
+                var relPath = f.substr(0, f.lastIndexOf('/') + 1);
+                // a 标签改为相对路径
                 data = data.replace(/(a.*?)href="(?!http)(.*?)"(.*?)(?!\#)/g, `$1href="${relPath}$2$3"`);
-                data = data.replace(/(link.*?)href="(?!http)(.*?)"(.*?)(?!\#)/g, `$1href="${absPath}$2$3"`);
+                // devdocs 语法高亮
-                data = data.replace(/src="(?!http)(.*?)"/g, `src="${absPath}$1"`);
+                data = data.replace(/<pre data-language="(.*?)">([\s\S]*?)<\/pre>/g, '<pre><code class="language-$1">$2</code></pre>')
-                $("#manual").html(`<div id="manualHead">${data}</div>`).fadeIn();
+                $("#manual").html(`<div id="manualHead">${data}</div>`);
                 Prism.highlightAll();
-                location.href = p.length == 2 ? id : '#manualHead';
+                location.href = e ? id : '#manualHead';
             })
-        } catch(e) {
+        // })
-            console.log(e)
-        } 
     }
 }
 
@@ -157,15 +167,16 @@ utools.onPluginEnter( async ({ code, type, payload }) => {
     init();
     checkUpdate();
     if (code == 'options') {
+        window.defaultPage = 0;
         showOptions();
     } else {
         $("#mainlist").fadeIn();
-        var allFts = getAllFeatures(),
+        var allFts = /^dd_/.test(code) ? await getDevdocs() : await getManuals(),
             baseDir,
             css;
         switch (allFts[code].type) {
             case "default":
-                baseDir = getDirname();
+                baseDir = dirname;
                 css = `${baseDir}/assets/${code}.css`
                 window.dirs = {
                     idxFile: `${baseDir}/index/${code}.json`,
@@ -180,14 +191,20 @@ utools.onPluginEnter( async ({ code, type, payload }) => {
                     docPath: `${baseDir}`,
                 }
                 break;
+            case "devdocs":
+                window.dirs = {
+                    docPath: allFts[code].url.slice(0, -11),
                 }      
-        if (window.exists(css)) {
-            $("#manualCSS").attr("href", css)
         }
+        window.exists(css) && $("#manualCSS").attr("href", css);
         // 读取目录文件
         try {
+            if (window.dirs.idxFile) {
                 var index = await readFile(window.dirs.idxFile);
                 index = JSON.parse(index);
+            } else {
+                var index = utools.db.get(code).data;
+            }
             if (type == 'over') {
                 showList(payload, index, 500)
             } else {
@@ -216,7 +233,7 @@ $("#mainlist").on('mousedown', '.info', function (e) {
 
 // 鼠标滑过列表，高亮
 $("#mainlist").on('mousemove', '.info', function () {
-    // 设置500ms的鼠标锁
+    // 鼠标锁 500ms
     var mouseUnlockTime = new Date().getTime();
     if (mouseUnlockTime - window.mouseLockTime > 500) {
         $(".select").removeClass('select');
@@ -276,7 +293,6 @@ $(document).keydown(e => {
             let pre = $(".select").prev();
             // 没有到达边界时移动选择条
             if(pre.length != 0){
-                // event.preventDefault();
                 if(pre.offset().top < $(window).scrollTop()){
                     $("html").animate({ scrollTop: "-=50" }, 0);
                 }
@@ -292,7 +308,6 @@ $(document).keydown(e => {
             let next = $(".select").next();
             // 没有到达边界时移动选择条
             if(next.length !=0){
-                // event.preventDefault();
                 if(next.offset().top >= $(window).scrollTop() + 550){
                     $("html").animate({ scrollTop: "+=50" }, 0);
                 }

assets/options.js

@@ -1,169 +1,94 @@
-// 默认和自定义手册
+// 选择器转义
-getAllFeatures = () => {
+escapeJq = s => {
-    var defaultFts = {
+    return s.replace( /(:|\.|\[|\]|,|=|@)/g, "\\$1" );   
-        "linux": {
-            features: {
-                "code": "linux",
-                "explain": "linux命令大全",
-                "cmds": ["linux命令"],
-                "icon": "logo/linux.png"    
-            },
-            type: "default"
-        },
-        "php": {
-            features: {
-                "code": "php",
-                "explain": "官方php函数文档",
-                "cmds": ["php函数"],
-                "icon": "logo/php.png"
-            },
-            type: "default"
-        },
-        "python": {
-            features: {
-                "code": "python",
-                "explain": "官方python标准库及常用第三方库文档",
-                "cmds": ["python库"],
-                "icon": "logo/python.png"
-            },
-            type: "default"
-        },
-        "c": {
-            features: {
-                "code": "c",
-                "explain": "C语言函数速查",
-                "cmds": ["C函数"],
-                "icon": "logo/c.png"
-            },
-            type: "default"
-        },
-        "javascript": {
-            features: {
-                "code": "javascript",
-                "explain": "MDN javascript中文文档",
-                "cmds": ["js文档"],
-                "icon": "logo/javascript.png"
-            },
-            type: "default"
-        },
-        "jQuery": {
-            features: {
-                "code": "jQuery",
-                "explain": "jQuery官方中文文档",
-                "cmds": ["jQuery文档"],
-                "icon": "logo/jQuery.png"
-            },
-            type: "default"
-        },
-        "vue": {
-            features: {
-                "code": "vue",
-                "explain": "vue官方中文API文档",
-                "cmds": ["vue文档"],
-                "icon": "logo/vue.png"
-            },
-            type: "default"
-        },
-        "vim": {
-            features: {
-                "code": "vim",
-                "explain": "vim命令大全",
-                "cmds": ["vim命令"],
-                "icon": "logo/vim.png"
-            },
-            type: "default"
-        },
-        "git": {
-            features: {
-                "code": "git",
-                "explain": "git命令概览",
-                "cmds": ["git命令"],
-                "icon": "logo/git.png"
-            },
-            type: "default"
-        },
-        "docker": {
-            features: {
-                "code": "docker",
-                "explain": "docker常用命令",
-                "cmds": ["docker命令"],
-                "icon": "logo/docker.png"
-            },
-            type: "default"
-        },
-        "sql": {
-            features: {
-                "code": "sql",
-                "explain": "sql操作手册",
-                "cmds": ["sql手册"],
-                "icon": "logo/sql.png"
-            },
-            type: "default"
-        },
-        "utools": {
-            features: {
-                "code": "utools",
-                "explain": "uTools的API文档",
-                "cmds": ["uToolsAPI"],
-                "icon": "logo/utools.png"
-            },
-            type: "default"
 }
-    };
+
+// 默认和自定义手册
+getManuals = async () => {
+    var defaultFts = await readFile(`${dirname}/features/default.json`);
+    defaultFts = JSON.parse(defaultFts);
     var db = utools.db.get("customFts"),
         customFts = db ? db.data : {},
         allFts = Object.assign(defaultFts, customFts);
     return allFts;
 }
 
+// devdocs
+getDevdocs = async () => {
+    var devDocs = await readFile(`${dirname}/features/devdocs.json`);
+    return JSON.parse(devDocs);
+}
 
 // 配置页面
-showOptions = () => {
+showOptions = async () => {
-    $("#options").show();
+    var currentFts = utools.getFeatures();
-    var currentFts = utools.getFeatures(),
+    var allFts = window.defaultPage ? await getDevdocs() : await getManuals();
-        allFts = getAllFeatures();
+    let featureList = `<table>
-    let featureList = '<table><tr><td></td><td>关键字</td><td>说明</td><td>启用</td><td>主输入框搜索</td></tr>';
+    <tr>
+    <td></td>
+    <td width="20%">关键字</td>
+    <td width="45%">说明</td>
+    <td width="10%">启用</td>
+    <td width="20%">主输入框搜索</td>
+    </tr>`;
     for (var fts in allFts) {
-        let features = allFts[fts].features;
+        let configs = allFts[fts],
+            features = configs.features;
         var cmds = '';
         features.cmds.forEach(cmd => {
             if (typeof (cmd) == "string") cmds += `<span class="keyword">${cmd}</span>`;
         });
         var isChecked1 = '',
             isChecked2 = '',
-            isDisabled = 'disabled';
+            isDisabled1 = '',
+            isDisabled2 = 'disabled';
         for(var c of currentFts){
             if (c.code == features.code) {
                 isChecked1 = 'checked';
-                isDisabled = '';
+                isDisabled2 = '';
                 if (typeof(c.cmds[c.cmds.length - 1]) != 'string') isChecked2 = 'checked';
                 break;
             }
         }
-        var editBtn = "";
+        var tailBtn = "";
-        if (allFts[fts].type != "default") {
+        if (configs.type == "custom") {
-            editBtn = `<span class="editBtn" code="${features.code}">✎</span>
+            tailBtn = `<span class="editBtn" code="${features.code}">✎</span>
             <span class="delBtn" code="${features.code}">✘</span>`;
+        } else if (configs.type == "devdocs") {
+            if (utools.db.get(features.code)) {
+                tailBtn = `<span class="delBtn" code="${features.code}">✘</span>`;
+            } else {
+                tailBtn = `<span class="editBtn" code="${features.code}">⇩</span>`;
+                isDisabled1 = 'disabled';
             }
-        featureList += `<tr><td><img class="logo" src="${features.icon}" onerror="this.src='logo.png'"></td>
+        }
-        <td>${cmds}</td><td width="300px">${features.explain}</td><td>
+        var icon = exists(`${dirname}/${features.icon}`) ? features.icon : 'logo.png';
+        featureList += `<tr><td><img class="logo" src="${icon}"></td>
+        <td>${cmds}</td><td>${features.explain}</td><td>
         <label class="switch-btn">
-        <input class="checked-switch" id="${features.code}_1" type="checkbox" ${isChecked1}>
+        <input class="checked-switch" id="${features.code}_1" type="checkbox" ${isDisabled1} ${isChecked1}>
         <span class="text-switch"></span>
         <span class="toggle-btn"></span>
         </label></td><td>
         <label class="switch-btn">
-        <input class="checked-switch" id="${features.code}_2" type="checkbox" ${isDisabled} ${isChecked2}>
+        <input class="checked-switch" id="${features.code}_2" type="checkbox" ${isDisabled2} ${isChecked2}>
         <span class="text-switch"></span>
         <span class="toggle-btn"></span>
-        </label>${editBtn}</td>`
+        </label>${tailBtn}</td>`
     };
     featureList += `</tr></table><div class="foot">
     <div id="add" class="footBtn">添加手册</div>
+    <div id="devdocs" class="footBtn">英文手册</div>
     <div id="disableAll" class="footBtn">全部禁用</div>
     <div id="enableAll" class="footBtn">全部启用</div>
     </div>`
     $("#options").html(featureList);
+    if (window.defaultPage) {
+        $("#devdocs").html('中文手册');
+        $('#add').addClass("disabled");
+    }
+    $('#options').fadeIn();
+    $('html').getNiceScroll().resize();
 }
 
 showCustomize = () => {
@@ -185,17 +110,20 @@ showCustomize = () => {
 }
 
 // 开关
-$("#options").on('change', 'input[type=checkbox]', function () {
+$("#options").on('change', 'input[type=checkbox]', async function () {
-    var allFts = getAllFeatures(),
+    var allFts = window.defaultPage ? await getDevdocs() : await getManuals();
-        id = $(this).attr('id').split('_'),
+    var id = $(this).attr('id'),
-        code = id[0];
+        code = id.slice(0, -2),
-    if (id[1] == '1') {
+        num = id.slice(-1);
-        if (!utools.removeFeature(code)) {
+    if (num == '1') {
+        id = escapeJq(code);
+        if ($(this).prop('checked')) {
             utools.setFeature(allFts[code].features);
-            $(`#${code}_2`).prop('disabled', false);
+            $(`#${id}_2`).prop('disabled', false);
         } else {
-            $(`#${code}_2`).prop('checked', false);
+            utools.removeFeature(code);
-            $(`#${code}_2`).prop('disabled', true);
+            $(`#${id}_2`).prop('checked', false);
+            $(`#${id}_2`).prop('disabled', true);
         }
     } else {
         var featureConf = allFts[code].features;
@@ -213,11 +141,20 @@ $("#options").on('change', 'input[type=checkbox]', function () {
 // 底部功能按钮
 $("#options").on('click', '.footBtn', function () {
     switch ($(this).attr('id')) {
-        case 'add': showCustomize();
+        case 'add':
+            $(this).hasClass("disabled") || showCustomize();
             break;
-        case 'enableAll': $(".checked-switch:not(:checked)[id*='_1']").click();
+        case 'devdocs':
+            window.defaultPage = (window.defaultPage + 1) % 2;
+            $('#options').fadeOut().promise().done(() => {
+                showOptions();
+            })
             break;
-        case 'disableAll': $(".checked-switch:checked").click();
+        case 'enableAll':
+            $(".checked-switch:not(:checked)[id*='_1']").click();
+            break;
+        case 'disableAll':
+            $(".checked-switch:checked").click();
             break;
     }
 })
@@ -228,8 +165,21 @@ $("#options").on('click', '.cancelBtn', function () {
 })
 
 // 编辑
-$("#options").on('click', '.editBtn', function () {
+$("#options").on('click', '.editBtn', async function () {
     var code = $(this).attr('code');
+    if (window.defaultPage) {
+        var docs = await getDevdocs(),
+            url = docs[code].url;
+        $(this).removeClass('editBtn');
+        $(this).html('<i style="font-size:12px;color:#0277BD">Waiting...</i>')
+        $.get(url, content => {
+            utools.db.put({ _id: code, data: content.entries });
+            var id = escapeJq(code)
+            $(`#${id}_1`).prop('disabled', false);
+            $(this).html('✘');
+            $(this).addClass('delBtn');
+        })
+    } else {
         var data = utools.db.get("customFts").data[code];
         showCustomize();
         $("#code").attr('disabled', true);
@@ -237,17 +187,27 @@ $("#options").on('click', '.editBtn', function () {
         $('#kw').val(data.features.cmds.toString());
         $('#desc').val(data.features.explain);
         $('#path').val(data.path);     
+    }
 })
 
 // 删除
 $("#options").on('click', '.delBtn', function () {
-    var code = $(this).attr('code'),
+    var code = $(this).attr('code');
-        db = utools.db.get("customFts"),
+    if (window.defaultPage) {
+        utools.db.remove(code);
+        $(this).html('⇩');
+        $(this).removeClass('delBtn').addClass('editBtn');
+        var id = escapeJq(code);
+        $(`#${id}_1:checked`).click();
+        $(`#${id}_1`).prop('disabled', true);
+    } else {
+        var db = utools.db.get("customFts"),
             data = db.data;
         delete data[code];
         utools.removeFeature(code);
         utools.db.put({ _id: "customFts", data: data, _rev: db._rev }); 
         showOptions();   
+    }
 })
 
 // 选择文件夹
@@ -258,7 +218,7 @@ $("#options").on('click', '.selectBtn', function () {
 // 保存
 $("#options").on('click', '.saveBtn', function () {
     var code = $('#code').val()
-    var allFts = getAllFeatures();
+    var allFts = getManuals();
     if (code in allFts && $("#code").prop('disabled') == false) {
         $('#code').css({ 'border-bottom-color': '#ec1212' })
         window.messageBox({ type: 'error', message: "名称与现有的手册重复！", buttons: ['朕知道了'] })

features/default.json

@@ -0,0 +1,110 @@
+{
+    "linux": {
+        "features": {
+            "code": "linux",
+            "explain": "linux命令大全",
+            "cmds": ["linux命令"],
+            "icon": "logo/linux.png"
+        },
+        "type": "default"
+    },
+    "php": {
+        "features": {
+            "code": "php",
+            "explain": "官方php函数文档",
+            "cmds": ["php函数"],
+            "icon": "logo/php.png"
+        },
+        "type": "default"
+    },
+    "python": {
+        "features": {
+            "code": "python",
+            "explain": "官方python标准库及常用第三方库文档",
+            "cmds": ["python库"],
+            "icon": "logo/python.png"
+        },
+        "type": "default"
+    },
+    "c": {
+        "features": {
+            "code": "c",
+            "explain": "C语言函数速查",
+            "cmds": ["C函数"],
+            "icon": "logo/c.png"
+        },
+        "type": "default"
+    },
+    "javascript": {
+        "features": {
+            "code": "javascript",
+            "explain": "MDN javascript中文文档",
+            "cmds": ["js文档"],
+            "icon": "logo/javascript.png"
+        },
+        "type": "default"
+    },
+    "jQuery": {
+        "features": {
+            "code": "jQuery",
+            "explain": "jQuery官方中文文档",
+            "cmds": ["jQuery文档"],
+            "icon": "logo/jQuery.png"
+        },
+        "type": "default"
+    },
+    "vue": {
+        "features": {
+            "code": "vue",
+            "explain": "vue官方中文API文档",
+            "cmds": ["vue文档"],
+            "icon": "logo/vue.png"
+        },
+        "type": "default"
+    },
+    "vim": {
+        "features": {
+            "code": "vim",
+            "explain": "vim命令大全",
+            "cmds": ["vim命令"],
+            "icon": "logo/vim.png"
+        },
+        "type": "default"
+    },
+    "git": {
+        "features": {
+            "code": "git",
+            "explain": "git命令概览",
+            "cmds": ["git命令"],
+            "icon": "logo/git.png"
+        },
+        "type": "default"
+    },
+    "docker": {
+        "features": {
+            "code": "docker",
+            "explain": "docker常用命令",
+            "cmds": ["docker命令"],
+            "icon": "logo/docker.png"
+        },
+        "type": "default"
+    },
+    "sql": {
+        "features": {
+            "code": "sql",
+            "explain": "sql操作手册",
+            "cmds": ["sql手册"],
+            "icon": "logo/sql.png"
+        },
+        "type": "default"
+    },
+    "utools": {
+        "features": {
+            "code": "utools",
+            "explain": "uTools的API文档",
+            "cmds": ["uToolsAPI"],
+            "icon": "logo/utools.png"
+        },
+        "type": "default"
+    }
+}

plugin.json

@@ -15,6 +15,11 @@
             "code": "options",
             "explain": "调整程序员手册的功能",
             "cmds": [ "手册设置", "ManualOptions" ]
+        },
+        {
+            "code": "devdocs",
+            "explain": "查看 devdocs 的英文文档",
+            "cmds": [ "devdocs" ]
         }
     ]
 }

preload.js

@@ -3,7 +3,7 @@ const { shell } = require('electron');
 const { dialog, BrowserWindow, nativeImage } = require('electron').remote
 const path = require("path")
 
-getDirname = () => __dirname;
+dirname = __dirname;
 
 open = url => {
     shell.openExternal(url);