测试文本
119 |${v}
47 | `; 48 | }); 49 | window.setTimeout(() => { 50 | this.pagination.checkPage(); 51 | this.setPageByProgress(); 52 | }); 53 | return html; 54 | }); 55 | 56 | window.Bind.bind(this, 'progress', (newV: any, oldV: any) => { 57 | if (!oldV) { 58 | return; 59 | } 60 | window.Store.setObj(`p_${this.currentBook.id}`, newV); 61 | if (this.progress.pos > this.content.length) { 62 | return; 63 | } 64 | window.Api.saveProgress(this.currentBook, this.progress); 65 | }); 66 | 67 | const current: HTMLElement = this.element.querySelector('.current-info'); 68 | const changeInfo = () => { 69 | return `${this.currentBook?.name} - ${this.currentBook?.author} - ${this.progress?.title}`; 70 | }; 71 | window.Bind.bindView(current, this, 'currentBook', changeInfo); 72 | window.Bind.bindView(current, this, 'progress', changeInfo); 73 | window.Bind.bindView(current, this, 'catalogue', changeInfo); 74 | 75 | let content: HTMLElement = this.element.querySelector('.content'); 76 | let contentInner: HTMLElement = content.querySelector('.content-inner'); 77 | window.Bind.bindStyle(contentInner, window.Layout, 'fontSize', 'fontSize', (v: any) => `${v}px`); 78 | window.Bind.bindStyle(contentInner, window.Layout, 'lineHeight', 'lineHeight', (v: any) => `${v}px`); 79 | window.Bind.bindStyle(content, window.Layout, 'lineHeight', 'height', (v: any) => { 80 | if (!this.element.offsetHeight) { 81 | return ''; 82 | } 83 | let base = this.element.offsetHeight - 230 - 20; 84 | let oo = base % window.Layout.lineHeight; 85 | if (oo < 10) { 86 | oo += window.Layout.lineHeight; 87 | } 88 | let height = base - oo + 20; 89 | current.style.height = `${oo}px`; 90 | current.style.lineHeight = `${oo}px`; 91 | window.setTimeout(() => this.pagination.checkPage()); 92 | return `${height}px`; 93 | }); 94 | 95 | let func = () => { 96 | let current = window.Store.get('current'); 97 | this.currentBook = window.BookShelf.bookMap[current]; 98 | if (!this.currentBook) { 99 | if (window.Router.current === 'article') { 100 | window.Router.go('bookshelf'); 101 | } 102 | return; 103 | } 104 | 105 | window.Layout.lineHeight = window.Layout.lineHeight; 106 | 107 | this.catalogue = window.Store.getObj(`c_${current}`) || []; 108 | 109 | this.progress = window.Store.getObj(`p_${this.currentBook.id}`); 110 | 111 | this.getContent(); 112 | }; 113 | 114 | window.Router.cbMap.article = func; 115 | func(); 116 | } 117 | 118 | getContent(): void { 119 | this.content = window.Store.get(`a_${this.currentBook.id}_${this.progress.index}`) || ''; 120 | let cb = () => { 121 | window.setTimeout(() => { 122 | window.Catalogue?.doCache(5); 123 | }); 124 | }; 125 | if (!this.content) { 126 | this.getArticle(cb); 127 | } else { 128 | cb(); 129 | } 130 | } 131 | 132 | pageChange(num: 1 | -1): void { 133 | let target = this.pagination.pageIndex + num; 134 | if (target < 0 || target >= this.pagination.pageLimit) { 135 | let index = this.progress.index + num; 136 | let pos = num === -1?999999999999:0;// to the end 137 | this.progress = changeValueWithNewObj(this.progress, {index: index, title: this.catalogue[index].title, time: new Date().getTime(), pos: pos}); 138 | this.getContent(); 139 | } else { 140 | this.pagination.setPage(target); 141 | this.getPagePos(target); 142 | } 143 | } 144 | 145 | getPagePos(target: number): void { 146 | let top = target * this.pagination.pageStep; 147 | let ps = this.element.querySelectorAll('.content-inner p'); 148 | let str = ''; 149 | for (let i = 0; i < ps.length; i++) { 150 | if ((ps[i] as HTMLElement).offsetTop >= top) { 151 | str = ps[i].innerHTML; 152 | break; 153 | } 154 | } 155 | let pos = this.content.indexOf(str); 156 | this.progress = changeValueWithNewObj(this.progress, {time: new Date().getTime(), pos: pos}); 157 | } 158 | 159 | setPageByProgress(): void { 160 | let target = this.content.slice(0, this.progress.pos).split('\n').length - 1; 161 | let ele: HTMLElement = this.element.querySelectorAll('.content-inner p')[target] as HTMLElement; 162 | let top = ele.offsetTop; 163 | let index = Math.floor(top / this.pagination.pageStep); 164 | this.pagination.setPage(index); 165 | if (this.progress.pos > this.content.length) {//reset to right 166 | this.getPagePos(index); 167 | } 168 | } 169 | 170 | getArticle(cb?: Function): void { 171 | if (this.loading === true) { 172 | window.Message.add({content: '正在加载章节内容'}); 173 | return; 174 | } 175 | this.loading = true; 176 | window.Api.getArticle(this.currentBook.source, this.progress.index, { 177 | success: (res: any) => { 178 | this.loading = false; 179 | this.content = res.data; 180 | window.Store.set(`a_${this.currentBook.id}_${this.progress.index}`, this.content); 181 | cb && cb(); 182 | }, 183 | error: (err: any) => { 184 | this.loading = false; 185 | } 186 | }); 187 | } 188 | }; 189 | 190 | export default Article; -------------------------------------------------------------------------------- /src/bookshelf/bookshelf.ts: -------------------------------------------------------------------------------- 1 | import Bar from '../common/bar/bar'; 2 | import { Book, getObject, getSpecialParent, Progress } from '../common/common'; 3 | import Pagination from '../common/pagination/pagination'; 4 | 5 | class BookShelf { 6 | element: HTMLElement; 7 | bar: Bar; 8 | pagination: Pagination; 9 | 10 | bookMap: {[key: string]: Book} = {}; 11 | bookList: Book[] = []; 12 | 13 | 14 | loading: boolean = false; 15 | 16 | pageHeight: number; 17 | 18 | constructor() { 19 | this.element = document.querySelector('.page.bookshelf'); 20 | 21 | this.pagination = new Pagination({ 22 | root: this.element.querySelector('.content') 23 | }); 24 | 25 | this.bar = new Bar({ 26 | element: this.element.querySelector('.bar'), 27 | pagination: this.pagination 28 | }); 29 | 30 | this.bookList = window.Store.getObj('bookshelf') || []; 31 | // this.bookList = window.Store.getByHead('b_').map(v => JSON.parse(window.Store.get(v) || ''));//wait 32 | 33 | window.Bind.bindView(this.element.querySelector('.book-list'), this, 'bookList', (bookList: Book[], oldV: Book[] = []) => { 34 | this.compareBookList(bookList, oldV); 35 | let height = (this.element.querySelector('.pagination-box') as HTMLElement).offsetHeight / 4; 36 | let imgWidth = height * 3 / 4; 37 | let width = Math.floor((this.element.querySelector('.book-list') as HTMLElement).offsetWidth / 2); 38 | let html = ` 39 | 44 | `; 45 | bookList.forEach(book => { 46 | let date = new Date(book.latestChapterTime); 47 | let progress: Progress = window.Store.getObj(`p_${book.id}`); 48 | html += ` 49 |测试文本
117 |