451 lines
15 KiB
JavaScript
451 lines
15 KiB
JavaScript
import Util from '../../../js_sdk/util.js'
|
||
export default {
|
||
props: {
|
||
measureSize: {
|
||
type: Object,
|
||
default () {
|
||
return new Object
|
||
}
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
computedResolve: null,
|
||
chineseSize: 0,
|
||
spaceSize: 0,
|
||
lowerSize: 0,
|
||
upperSize: 0,
|
||
numberSize: 0,
|
||
specialSize: 0
|
||
}
|
||
},
|
||
methods: {
|
||
reset (data, pages = []) {
|
||
if ( data.custom && data.custom.length > 0 ) {
|
||
pages.length > 0 ? pages[pages.length - 1].isLastPage = false : null
|
||
data.custom.forEach(custom => {
|
||
let type = ''
|
||
if ( custom.indexOf('slot:') > -1 ) {
|
||
type = 'slot'
|
||
custom = custom.split(':')[1]
|
||
} else {
|
||
type = 'custom'
|
||
let clicks = custom.match(/onclick=\"*([\s\S]*?)\"/ig);
|
||
if ( clicks ) {
|
||
clicks.forEach(click => {
|
||
let name = click.match(/onclick=\"*([\s\S]*?)(\(|\")/)[1]
|
||
let func = click.match(/onclick=\"*([\s\S]*?)\"/)
|
||
let args = func[1].replace(name, '')
|
||
args = args ? args.slice(1, args.length - 1).replace(/\s/g, '') : ''
|
||
custom = custom.replace(func[0], `onclick="triggerCustomClick('${name}', [${args}])"`)
|
||
})
|
||
}
|
||
|
||
}
|
||
let end = pages.length > 0 ? pages[pages.length - 1].end : 0
|
||
pages.push({
|
||
chapter: data.chapter,
|
||
title: data.title || '',
|
||
type: type,
|
||
dataId: data.chapter * 100000 + end,
|
||
start: end,
|
||
end: end + 10,
|
||
isLastPage: false,
|
||
text: custom
|
||
})
|
||
})
|
||
pages[pages.length - 1].isLastPage = true
|
||
}
|
||
this.computedResolve(pages)
|
||
this.computedResolve = null
|
||
},
|
||
measureText (text, fontSize=10) {
|
||
text = new String(text);
|
||
text = text.split('');
|
||
let width = 0;
|
||
text.forEach((item) => {
|
||
if (/[a-z]/.test(item)) {
|
||
width += this.measureSize.lower || this.lowerSize || 7
|
||
} else if ( /[A-Z]/.test(item) ) {
|
||
width += this.measureSize.upper || this.upperSize || 7
|
||
} else if (/[0-9]/.test(item)) {
|
||
width += this.measureSize.number || this.numberSize || 5.5
|
||
} else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
|
||
width += this.measureSize.chinese || this.chineseSize || 10
|
||
} else if (/\s/.test(item)) {
|
||
width += this.measureSize.space || this.spaceSize || 3.5
|
||
} else if (/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(item)) {
|
||
width += this.measureSize.special || this.specialSize || 8
|
||
} else {
|
||
width += this.measureSize.other || this.chineseSize || 10
|
||
}
|
||
});
|
||
return width * fontSize / 10;
|
||
},
|
||
getComputedTextSize (selector, el) {
|
||
let arr = []
|
||
arr.push(Util.getRect('.computed-text-chinese', this.$refs.computedTextChinese, this))
|
||
arr.push(Util.getRect('.computed-text-space', this.$refs.computedTextSpace, this))
|
||
arr.push(Util.getRect('.computed-text-lower', this.$refs.computedTextLower, this))
|
||
arr.push(Util.getRect('.computed-text-upper', this.$refs.computedTextUpper, this))
|
||
arr.push(Util.getRect('.computed-text-number', this.$refs.computedTextNumber, this))
|
||
arr.push(Util.getRect('.computed-text-special', this.$refs.computedTextSpecial, this))
|
||
Promise.all(arr).then(ress => {
|
||
ress.forEach((res, key) => {
|
||
if ( key == 0 ) {
|
||
this.chineseSize = res.width * (10 / 20)
|
||
}
|
||
if ( key == 1 ) {
|
||
this.spaceSize = res.width * (10 / 20)
|
||
}
|
||
if ( key == 2 ) {
|
||
this.lowerSize = res.width * (10 / 20)
|
||
}
|
||
if ( key == 3 ) {
|
||
this.upperSize = res.width * (10 / 20)
|
||
}
|
||
if ( key == 4 ) {
|
||
this.numberSize = res.width * (10 / 20)
|
||
}
|
||
if ( key == 5 ) {
|
||
this.specialSize = res.width * (10 / 20)
|
||
}
|
||
// console.log('chineseSize', this.chineseSize);
|
||
// console.log('spaceSize', this.spaceSize);
|
||
// console.log('lowerSize', this.lowerSize);
|
||
// console.log('upperSize', this.upperSize);
|
||
// console.log('numberSize', this.numberSize);
|
||
// console.log('specialSize', this.specialSize);
|
||
})
|
||
})
|
||
},
|
||
async computedText (data, start) {
|
||
let rect = await this.getRect()
|
||
let viewWidth = rect.width - (this.options.slide * 2)
|
||
let viewHeight = rect.height - this.options.topGap - this.options.bottomGap
|
||
if ( this.options.headerShow ) viewHeight = viewHeight - uni.upx2px(50)
|
||
if ( this.options.footerShow ) viewHeight = viewHeight - uni.upx2px(50)
|
||
let pageHeight = this.options.fontSize + this.options.lineHeight;
|
||
let strs = [];
|
||
let page = {
|
||
title: data.title || '',
|
||
chapter: data.chapter,
|
||
type: 'text',
|
||
dataId: data.chapter * 100000 + start,
|
||
start: start,
|
||
end: 0,
|
||
isLastPage: false,
|
||
text: []
|
||
}
|
||
let length = 0;
|
||
let contentSync = data.content.substr(start).replace(/\t/g, ' ').replace(/ /g, ' ');
|
||
let lastIndex = 0;
|
||
while ( (pageHeight + this.options.fontSize + this.options.lineHeight) <= viewHeight ) {
|
||
strs.push('');
|
||
let lineWidth = 0;
|
||
let charText = ''
|
||
for ( let i = lastIndex; i < contentSync.length; i++ ) {
|
||
const char = contentSync.charAt(i)
|
||
if ( JSON.stringify(char) == JSON.stringify('\r') || JSON.stringify(char) == JSON.stringify('\n') ) {
|
||
lineWidth += this.measureText(charText, this.options.fontSize);
|
||
if ( lineWidth >= viewWidth ) {
|
||
lastIndex = i - charText.length+ 1;
|
||
break;
|
||
}
|
||
strs[strs.length - 1] += charText
|
||
length += charText.length + 1
|
||
page.end = page.start + length;
|
||
lastIndex = i + 1;
|
||
break;
|
||
}
|
||
charText += char
|
||
if ( !this.split || char == this.split ) {
|
||
lineWidth += this.measureText(charText, this.options.fontSize);
|
||
if ( lineWidth >= viewWidth ) {
|
||
lastIndex = i - charText.length+ 1;
|
||
break;
|
||
}
|
||
strs[strs.length - 1] += charText
|
||
length += charText.length
|
||
page.end = page.start + length
|
||
charText = ''
|
||
}
|
||
}
|
||
pageHeight += this.options.fontSize + this.options.lineHeight;
|
||
if ( page.end >= data.content.length - 1 ) {
|
||
page.isLastPage = true;
|
||
break;
|
||
}
|
||
}
|
||
page.text = strs;
|
||
return page;
|
||
},
|
||
getRect () {
|
||
return new Promise (resolve => {
|
||
// #ifndef APP-NVUE
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.yingbing-read-page').boundingClientRect(data => {
|
||
resolve(data)
|
||
}).exec();
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
uni.requireNativePlugin('dom').getComponentRect(this.$refs.yingbingReadPage, res => {
|
||
resolve(res.size)
|
||
})
|
||
// #endif
|
||
})
|
||
},
|
||
getPages (data) {
|
||
let pages = [];
|
||
const doWhile = (start = 0) => {
|
||
this.computedText(data, start).then(page => {
|
||
pages.push(page);
|
||
if ( page.isLastPage ) {
|
||
this.reset(data, pages)
|
||
} else {
|
||
doWhile(page.end);
|
||
}
|
||
});
|
||
}
|
||
doWhile();
|
||
},
|
||
computedChapter(data) {
|
||
return new Promise(resolve => {
|
||
this.computedResolve = resolve
|
||
data.content ? this.getPages(data) : this.reset(data)
|
||
})
|
||
},
|
||
//绘制页面
|
||
resetPage(data) {
|
||
setTimeout(() => {
|
||
//一次最多渲染3章的内容，根据定位的章节剪切出3章内容渲染
|
||
let currentChapter = data.currentChapter || this.contents[0].chapter
|
||
let nowIndex = this.contents.findIndex(item => item.chapter == currentChapter);
|
||
let prevIndex = -1;
|
||
let nextIndex = -1;
|
||
let contents = [];
|
||
if (!this.contents[nowIndex].isStart) prevIndex = this.contents.findIndex(item => item.chapter == currentChapter - 1);
|
||
if (!this.contents[nowIndex].isEnd) nextIndex = this.contents.findIndex(item => item.chapter == currentChapter + 1);
|
||
if (prevIndex > -1) {
|
||
contents.push(this.contents[prevIndex])
|
||
}
|
||
contents.push(this.contents[nowIndex])
|
||
if (nextIndex > -1) {
|
||
contents.push(this.contents[nextIndex])
|
||
}
|
||
let arr = [];
|
||
const dowhile = (i) => {
|
||
let item = contents[i];
|
||
this.computedChapter(item).then(pages => {
|
||
if (currentChapter == item.chapter) {
|
||
let index = Object.keys(pages).findIndex(key => data.start >= pages[key].start && data.start < pages[key].end)
|
||
this.currentDataId = pages[index > -1 ? index : 0].dataId;
|
||
}
|
||
arr = arr.concat(pages)
|
||
if (i == contents.length - 1) {
|
||
if ( this.options.pageType != 'scroll' ) {
|
||
if ( !this.firstTipUnable ) {
|
||
arr.unshift({
|
||
title: contents[0].title || '',
|
||
chapter: contents[0].chapter,
|
||
type: contents[0].isStart ? 'top' : 'loading',
|
||
direction: 'prev',
|
||
dataId: arr[0].dataId - 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
} else if ( !contents[0].isStart ) {
|
||
arr.unshift({
|
||
title: contents[0].title || '',
|
||
chapter: contents[0].chapter,
|
||
type: 'loading',
|
||
direction: 'prev',
|
||
dataId: arr[0].dataId - 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
}
|
||
if ( !this.lastTipUnable ) {
|
||
arr.push({
|
||
title: item.title || '',
|
||
chapter: item.chapter,
|
||
type: item.isEnd ? 'bottom' : 'loading',
|
||
direction: 'next',
|
||
dataId: arr[arr.length - 1].dataId + 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
} else if ( !contents[0].isEnd ) {
|
||
arr.push({
|
||
title: item.title || '',
|
||
chapter: item.chapter,
|
||
type: 'loading',
|
||
direction: 'next',
|
||
dataId: arr[arr.length - 1].dataId + 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
}
|
||
}
|
||
this.pages = arr
|
||
if ( this.options.pageType == 'scroll' ) {
|
||
this.$refs.list.scrollTo(0)
|
||
}
|
||
this.$nextTick(() => {
|
||
if ( this.options.pageType != 'scroll' ) {
|
||
this.$refs.flip.refresh()
|
||
this.handleFlipChange(this.currentDataId);
|
||
} else {
|
||
setTimeout(() => {
|
||
Util.getRect('#scroll-item_' + this.currentDataId, Util.getRefs(this, 'scrollItem_' + this.currentDataId, 0), this).then(rect => {
|
||
this.$refs.list.scrollTo(rect.top)
|
||
})
|
||
}, 50)
|
||
}
|
||
this.initLoading = false;
|
||
this.preload(currentChapter);
|
||
})
|
||
} else {
|
||
setTimeout(() => {
|
||
dowhile(i + 1)
|
||
}, 100)
|
||
}
|
||
})
|
||
}
|
||
dowhile(0)
|
||
}, 50)
|
||
},
|
||
computedPage(e) {
|
||
this.computedChapter(e.content).then((pages) => {
|
||
let arr = [];
|
||
const pagesSync = e.type == 'prev' ? pages.concat(this.pages) : this.pages.concat(pages);
|
||
let newPages = pagesSync.filter(item => (item.type == 'text' || item.type == 'custom' || item.type == 'slot'))
|
||
// pagesSync.forEach(item => {
|
||
// if (arr.indexOf(item.chapter) == -1) arr.push(item.chapter)
|
||
// })
|
||
// if (arr.length > 3) {
|
||
// let reChapter = e.type == 'prev' ? pagesSync[pagesSync.length - 1].chapter : pagesSync[0].chapter;
|
||
// newPages = pagesSync.filter(item => item.chapter != reChapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot'));
|
||
// } else {
|
||
// newPages = pagesSync.filter(item => (item.type == 'text' || item.type == 'custom' || item.type == 'slot'));
|
||
// }
|
||
if ( this.options.pageType != 'scroll' ) {
|
||
const prevIndex = this.contents.findIndex(content => content.chapter == newPages[0].chapter);
|
||
const nextIndex = this.contents.findIndex(content => content.chapter == newPages[newPages.length - 1].chapter);
|
||
if ( !this.firstTipUnable && this.contents[prevIndex].isStart ) {
|
||
newPages.unshift({
|
||
title: this.contents[prevIndex].title || '',
|
||
chapter: this.contents[prevIndex].chapter,
|
||
type: 'top',
|
||
direction: 'prev',
|
||
dataId: newPages[0].dataId - 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
} else {
|
||
newPages.unshift({
|
||
title: this.contents[prevIndex].title || '',
|
||
chapter: this.contents[prevIndex].chapter,
|
||
type: 'loading',
|
||
direction: 'prev',
|
||
dataId: newPages[0].dataId - 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
}
|
||
if ( !this.lastTipUnable && this.contents[nextIndex].isEnd ) {
|
||
newPages.push({
|
||
title: this.contents[nextIndex].title || '',
|
||
chapter: this.contents[nextIndex].chapter,
|
||
type: 'bottom',
|
||
direction: 'next',
|
||
dataId: newPages[newPages.length - 1].dataId + 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
} else {
|
||
newPages.push({
|
||
title: this.contents[nextIndex].title || '',
|
||
chapter: this.contents[nextIndex].chapter,
|
||
type: 'loading',
|
||
direction: 'next',
|
||
dataId: newPages[newPages.length - 1].dataId + 1,
|
||
start: 0,
|
||
end: 0
|
||
})
|
||
}
|
||
this.pages = newPages
|
||
const nowIndex = newPages.findIndex(page => page.dataId == this.currentDataId);
|
||
if ( nowIndex == -1 ) {
|
||
this.currentDataId = e.type == 'next' ? pages[0].dataId : pages[pages.length - 1].dataId;
|
||
this.handleFlipChange(this.currentDataId)
|
||
} else {
|
||
this.startAutoplay()
|
||
}
|
||
} else {
|
||
let dataId = e.type == 'prev' ? this.pages[0].dataId : this.pages[this.pages.length-1].dataId
|
||
Util.getRect('.scroll-item-wrapper', this.$refs.scrollItemWrapper, this).then(rect => {
|
||
let lastHeight = rect.height
|
||
this.pages = e.type == 'prev' ? pages.concat(this.pages) : this.pages.concat(pages)
|
||
if ( e.type == 'prev' ) {
|
||
this.$nextTick(function () {
|
||
setTimeout(() => {
|
||
Util.getRect('.scroll-item-wrapper', this.$refs.scrollItemWrapper, this).then(rect => {
|
||
this.$refs.list.scrollTo(rect.height - lastHeight)
|
||
})
|
||
}, 50)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//预加载章节
|
||
preload (chapter) {
|
||
if ( !this.enablePreload ) return false
|
||
const nowIndex = this.contents.findIndex(item => item.chapter == chapter);
|
||
let prevIndex = -2;
|
||
let nextIndex = -2;
|
||
let chapters = [];
|
||
if ( !this.contents[nowIndex].isStart ) prevIndex = this.contents.findIndex(item => item.chapter == chapter - 1);
|
||
if ( !this.contents[nowIndex].isEnd ) nextIndex = this.contents.findIndex(item => item.chapter == chapter + 1);
|
||
if ( prevIndex == -1 ) {
|
||
chapters.push(chapter - 1);
|
||
}
|
||
if ( nextIndex == -1 ) {
|
||
chapters.push(chapter + 1);
|
||
}
|
||
if ( chapters.length > 0 ) {
|
||
this.$emit('preload', chapters, (status, contents) => {
|
||
if (status == 'success') {
|
||
contents.forEach(item => {
|
||
const index = this.contents.findIndex(content => content.chapter == item.chapter)
|
||
if (index > -1) {
|
||
this.contents[index] = item;
|
||
} else {
|
||
this.contents.push(item);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
filterPage (pageInfo) {
|
||
if ( pageInfo && pageInfo.dataId > -1 ) {
|
||
const nowChapters = this.pages.filter(item => item.chapter == pageInfo.chapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot'))
|
||
const currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId)
|
||
if ( currentPage > -1 ) {
|
||
return (currentPage + 1) + ' / ' + nowChapters.length
|
||
} else {
|
||
return pageInfo.type == 'top' ? '最前面' : pageInfo.type == 'bottom' ? '最后面' : pageInfo.type.indexOf('Loading') > -1 ? '请等待' : ''
|
||
}
|
||
} else {
|
||
return '加载中'
|
||
}
|
||
},
|
||
filterDate () {
|
||
let date = new Date()
|
||
return Util.zeroize(date.getHours()) + ':' + Util.zeroize(date.getMinutes())
|
||
}
|
||
}
|
||
} |