From f1fe597317ef7e066fcdc6e1fd3265fa9c75756d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Thu, 14 Jan 2021 11:12:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96epub=E8=A7=A3=E6=9E=90;?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=AE=E5=BD=95;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/css/view.css | 2 +- src/css/view.scss | 8 +++++++ src/js/view.js | 17 +++++++++------ src/tools/socket.js | 53 ++++++++++++++++++++++++++++++++++++++------- 5 files changed, 65 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index e5e94fa..b190519 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "org.bytedo.epub", - "version": "1.1.0", + "version": "1.2.0", "description": "E-pub Reader", "main": "src/main.js", "scripts": { diff --git a/src/css/view.css b/src/css/view.css index 6e53718..0022347 100644 --- a/src/css/view.css +++ b/src/css/view.css @@ -1 +1 @@ -html{width:100%;height:100vh}body{display:flex;width:100%;height:100%;line-height:1.25;font-size:14px;color:var(--color-dark-1);background:rgba(255,255,255,0.3)}.app{position:relative;display:flex;width:100%;height:100%}.app .toc{width:260px;height:100%}.app .toc item{display:flex;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--color-plain-1);cursor:pointer}.app .toc item.lev-0{font-weight:bold}.app .toc item.lev-1{padding-left:24px;font-weight:bold}.app .toc item.lev-2{padding-left:36px}.app .toc item.lev-3{padding-left:48px}.app .toc item:hover{color:var(--color-blue-1)}.app .toc item.active{color:#fff;background:var(--color-blue-1)}.app .toc item:last-child{border-bottom:0}.app .chapter-box{flex:1;height:100%;border-left:1px solid var(--color-plain-2)}.app .chapter{display:flex;justify-content:center;padding:8px 24px}.app .chapter .detail{max-width:768px;line-height:1.5;font-size:14px}.app .chapter .detail a{text-decoration:underline;color:var(--color-teal-2)}.app .chapter .detail a:hover{color:var(--color-teal-1);text-decoration:none}.app .chapter .detail em,.app .chapter .detail del{color:var(--color-grey-2)}.app .chapter .detail strong,.app .chapter .detail strong em,.app .chapter .detail strong{color:var(--color-dark-3)}.app .chapter .detail a strong,.app .chapter .detail a em{color:inherit}.app .chapter .detail em,.app .chapter .detail strong,.app .chapter .detail del{padding:0 2px}.app .chapter .detail img{max-width:100%}.app .chapter .detail blockquote{margin:10px 0;padding:5px 10px;line-height:1.5;border-left:5px solid var(--color-teal-1);background:#f2faf7;color:var(--color-grey-2)}.app .chapter .detail blockquote p{margin:0}.app .chapter .detail code{display:inline;margin:0 2px;padding:0 2px;color:var(--color-orange-3);background:var(--color-plain-1);border-radius:2px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace}.app .chapter .detail>p{margin:12px 0}.app .chapter .detail ol{margin-left:1em;list-style:decimal outside none}.app .chapter .detail ul{margin-left:1em;list-style:disc outside none}.app .chapter .detail li{margin:0.5em 0}.app .chapter .detail li ol{margin-left:1em}.app .chapter .detail li ul{margin-left:1em;list-style-type:circle}.app .chapter .detail li ol ul,.app .chapter .detail li ul ul{list-style-type:square}.app .chapter .detail h1,.app .chapter .detail h2,.app .chapter .detail h3,.app .chapter .detail h4,.app .chapter .detail h5,.app .chapter .detail h6{margin:15px 0;line-height:2;font-weight:bold;font-size:16px}.app .chapter .detail h1 code,.app .chapter .detail h2 code,.app .chapter .detail h3 code,.app .chapter .detail h4 code,.app .chapter .detail h5 code,.app .chapter .detail h6 code{background:none}.app .chapter .detail h1 a,.app .chapter .detail h2 a,.app .chapter .detail h3 a,.app .chapter .detail h4 a,.app .chapter .detail h5 a,.app .chapter .detail h6 a{text-decoration:none;color:#333}.app .chapter .detail h3 a::before,.app .chapter .detail h4 a::before,.app .chapter .detail h5 a::before,.app .chapter .detail h6 a::before{content:'∮ ';color:var(--color-teal-1);font-weight:normal}.app .chapter .detail h1{margin:0 0 30px;font-size:24px;text-align:center}.app .chapter .detail h2{margin:20px 0;font-size:22px;border-bottom:1px solid var(--color-plain-2)}.app .chapter .detail h3{margin:20px 0 15px;font-size:20px}.app .chapter .detail h4{font-size:18px}.app .chapter .detail table{width:100%;border-spacing:0;border-collapse:collapse}.app .chapter .detail table tr{background-color:#fff}.app .chapter .detail table thead tr{background:var(--color-plain-1)}.app .chapter .detail table th,.app .chapter .detail table td{padding:6px 13px;border:1px solid var(--color-plain-2)}.app .chapter .detail table th{font-weight:bold}.app .chapter .detail table tr:nth-child(2n){background-color:#fcfdff} +html{width:100%;height:100vh}body{display:flex;width:100%;height:100%;line-height:1.25;font-size:14px;color:var(--color-dark-1);background:rgba(255,255,255,0.3)}.app{position:relative;display:flex;width:100%;height:100%}.app .toc{width:260px;height:100%}.app .toc item{display:flex;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--color-plain-1);cursor:pointer}.app .toc item.lev-0{font-weight:bold}.app .toc item.lev-1{padding-left:24px;font-weight:bold}.app .toc item.lev-2{padding-left:36px}.app .toc item.lev-3{padding-left:48px}.app .toc item:hover{color:var(--color-blue-1)}.app .toc item.active{color:#fff;background:var(--color-blue-1)}.app .toc item:last-child{border-bottom:0}.app .chapter-box{flex:1;height:100%;border-left:1px solid var(--color-plain-2)}.app .chapter{display:flex;justify-content:center;padding:8px 24px}.app .chapter .detail{width:100%;max-width:768px;line-height:1.5;font-size:14px}.app .chapter .detail .cover{display:block;width:100%;height:calc(100vh - 16px);-o-object-fit:contain;object-fit:contain}.app .chapter .detail a{text-decoration:underline;color:var(--color-teal-2)}.app .chapter .detail a:hover{color:var(--color-teal-1);text-decoration:none}.app .chapter .detail em,.app .chapter .detail del{color:var(--color-grey-2)}.app .chapter .detail strong,.app .chapter .detail strong em,.app .chapter .detail strong{color:var(--color-dark-3)}.app .chapter .detail a strong,.app .chapter .detail a em{color:inherit}.app .chapter .detail em,.app .chapter .detail strong,.app .chapter .detail del{padding:0 2px}.app .chapter .detail img{max-width:100%}.app .chapter .detail blockquote{margin:10px 0;padding:5px 10px;line-height:1.5;border-left:5px solid var(--color-teal-1);background:#f2faf7;color:var(--color-grey-2)}.app .chapter .detail blockquote p{margin:0}.app .chapter .detail code{display:inline;margin:0 2px;padding:0 2px;color:var(--color-orange-3);background:var(--color-plain-1);border-radius:2px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace}.app .chapter .detail>p{margin:12px 0}.app .chapter .detail ol{margin-left:1em;list-style:decimal outside none}.app .chapter .detail ul{margin-left:1em;list-style:disc outside none}.app .chapter .detail li{margin:0.5em 0}.app .chapter .detail li ol{margin-left:1em}.app .chapter .detail li ul{margin-left:1em;list-style-type:circle}.app .chapter .detail li ol ul,.app .chapter .detail li ul ul{list-style-type:square}.app .chapter .detail h1,.app .chapter .detail h2,.app .chapter .detail h3,.app .chapter .detail h4,.app .chapter .detail h5,.app .chapter .detail h6{margin:15px 0;line-height:2;font-weight:bold;font-size:16px}.app .chapter .detail h1 code,.app .chapter .detail h2 code,.app .chapter .detail h3 code,.app .chapter .detail h4 code,.app .chapter .detail h5 code,.app .chapter .detail h6 code{background:none}.app .chapter .detail h1 a,.app .chapter .detail h2 a,.app .chapter .detail h3 a,.app .chapter .detail h4 a,.app .chapter .detail h5 a,.app .chapter .detail h6 a{text-decoration:none;color:#333}.app .chapter .detail h3 a::before,.app .chapter .detail h4 a::before,.app .chapter .detail h5 a::before,.app .chapter .detail h6 a::before{content:'∮ ';color:var(--color-teal-1);font-weight:normal}.app .chapter .detail h1{margin:0 0 30px;font-size:24px;text-align:center}.app .chapter .detail h2{margin:20px 0;font-size:22px;border-bottom:1px solid var(--color-plain-2)}.app .chapter .detail h3{margin:20px 0 15px;font-size:20px}.app .chapter .detail h4{font-size:18px}.app .chapter .detail table{width:100%;border-spacing:0;border-collapse:collapse}.app .chapter .detail table tr{background-color:#fff}.app .chapter .detail table thead tr{background:var(--color-plain-1)}.app .chapter .detail table th,.app .chapter .detail table td{padding:6px 13px;border:1px solid var(--color-plain-2)}.app .chapter .detail table th{font-weight:bold}.app .chapter .detail table tr:nth-child(2n){background-color:#fcfdff} diff --git a/src/css/view.scss b/src/css/view.scss index 8044c48..c0ff769 100644 --- a/src/css/view.scss +++ b/src/css/view.scss @@ -78,10 +78,18 @@ body { padding: 8px 24px; .detail { + width: 100%; max-width: 768px; line-height: 1.5; font-size: 14px; + .cover { + display: block; + width: 100%; + height: calc(100vh - 16px); + object-fit: contain; + } + a { text-decoration: underline; color: var(--color-teal-2); diff --git a/src/js/view.js b/src/js/view.js index 146b389..cb95b60 100644 --- a/src/js/view.js +++ b/src/js/view.js @@ -88,15 +88,18 @@ Anot({ fetch(`book://cache/${this.book}/${file}`) .then(r => r.text()) .then(txt => { - this.chapter = txt.replace( - /]*?src="(.*?)"[^>]*?\/?>/g, - (m, s1) => { - // s1 = s1.replace('../', '') + this.chapter = txt + .replace(/]*?src="(.*?)"[^>]*?\/?>/g, (m, s1) => { s1 = join(dirname(file), s1) - console.log(file, s1) return `` - } - ) + }) + .replace(/]*?xlink:href="(.*?)"[^>]*?\/?>/g, (m, s1) => { + s1 = join(dirname(file), s1) + return `` + }) + .replace(/<\/?svg>/g, '') setTimeout(() => { if (hash) { diff --git a/src/tools/socket.js b/src/tools/socket.js index 1febe98..c88b582 100644 --- a/src/tools/socket.js +++ b/src/tools/socket.js @@ -63,6 +63,8 @@ module.exports = function(app, createViewWindow) { let { title } = eb.metadata let cover = '' let dir = path.join(CACHE_DIR, title) + let dict = {} + let toc = [] function saveImage(id, name) { return new Promise(done => { @@ -90,13 +92,12 @@ module.exports = function(app, createViewWindow) { .replace(/
/g, '')
                     .replace(/<\/pre>/g, '')
 
-                  htm = htm.replace(/([\w\W]*?)<\/wc-code>/g, function(
-                    m,
-                    s
-                  ) {
-                    s = s.replace(/<\/?\w+>/g, '')
-                    return `${s}`
-                  })
+                  htm = htm
+                    .replace(/([\w\W]*?)<\/wc-code>/g, function(m, s) {
+                      s = s.replace(/<\/?\w+>/g, '')
+                      return `${s}`
+                    })
+                    .trim()
 
                   fs.echo(htm, path.join(dir, name.replace('.xhtml', '.html')))
                 } else {
@@ -116,7 +117,10 @@ module.exports = function(app, createViewWindow) {
                 break
 
               case 'application/x-dtbncx+xml':
-                fs.echo(JSON.stringify(eb.toc), path.join(dir, 'toc.json'))
+                eb.toc.forEach(_ => {
+                  dict[_.id] = _
+                })
+
                 break
 
               case 'application/xhtml+xml':
@@ -133,6 +137,39 @@ module.exports = function(app, createViewWindow) {
                 break
             }
           }
+
+          toc = eb.flow.map((it, i) => {
+            let tmp = dict[it.id] || { level: i === 0 ? i : undefined }
+            if (!tmp.hasOwnProperty('level')) {
+              tmp.level = 1
+            }
+            if (it.id === 'titlepage') {
+              it.level = 0
+              it.title = '封面'
+            } else {
+              it.level = tmp.level
+              let cp
+
+              if (it.title) {
+                cp = it.title
+              } else {
+                cp = fs
+                  .cat(path.join(dir, it.href.replace('.xhtml', '.html')))
+                  .toString()
+                cp = cp.split(/[\r\n]/).shift()
+                cp = cp.replace(/<\/?[\w\-]+[^>]*?>/g, '').trim()
+              }
+
+              it.title = cp
+                .slice(0, 20)
+                .replace(/</g, '<')
+                .replace(/>/g, '>')
+            }
+            return it
+          })
+
+          fs.echo(JSON.stringify(toc), path.join(dir, 'toc.json'))
+
           if (!cover) {
             cover = 'cover.webp'
             app.__main__.webContents.send('app', {