You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cloudnote_web/pages/index/read.vue

528 lines
17 KiB

4 years ago
<template>
<div >
<v-contextmenu ref="contextmenu">
<v-contextmenu-item v-if="!disabled">
<el-popover
v-model="visible"
trigger="click"
@hide="resetNote"
>
<el-form ref="form" :model="note_form" :rules="rules" label-width="80px">
<el-form-item :label="$t('note.table.original_text')" >
<el-input autosize type="textarea" v-model="note_form.original_text" disabled></el-input>
</el-form-item>
<el-form-item :label="$t('read.form.note_title')" prop="note_title">
<el-input v-model="note_form.note_title" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_title') })"></el-input>
</el-form-item>
<el-form-item :label="$t('read.form.note_content')" prop="note_content">
<el-input autosize type="textarea" v-model="note_form.note_content" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_content') })"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="addNote">{{$t('button.add')}}</el-button>
<el-button @click="visible=false">{{$t('button.cancel')}}</el-button>
</el-form-item>
</el-form>
<el-button slot="reference">{{$t('read.contextmenu.add')}}</el-button>
</el-popover>
</v-contextmenu-item>
<v-contextmenu-item><el-button @click="showSearch=true;queryContent()" class="w-100">{{$t('read.contextmenu.search')}}</el-button></v-contextmenu-item>
</v-contextmenu>
<el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
<el-tab-pane :label="key" :name="key" v-for="(item,key) in openList" :key="key">
<el-row>
<el-col :span="18">
<el-form :inline="true" v-if="showSearch">
<el-form-item :label="$t('read.form.keyword')">
<el-input @input="queryContent" :placeholder="$t('input_please',{keyword:$t('read.form.keyword')})" v-model="search_form.keyword"
maxlength="10"
show-word-limit>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<template v-if="num>0">
<el-form-item>{{search_index+1+'/'+num}}</el-form-item>
<el-tooltip :content="$t('read.tip.search_prev')">
<el-image src="/prev.svg" class="img" @click="search_index>0?search_index--:search_index=num-1;change_search_index()"></el-image>
</el-tooltip>
<el-tooltip :content="$t('read.tip.search_next')">
<el-image src="/next.svg" class="img" @click="search_index<num-1?search_index++:search_index=0;change_search_index()"></el-image>
</el-tooltip>
</template>
</el-form>
<pre class="content" v-contextmenu:contextmenu :ref="'edit'+item.title" @mouseup="show"
@contextmenu="selectText" v-html="item.content"
/>
</el-col>
<el-col :span="5" class="ml3 note-list">
<el-row v-for="(item,index) in noteList" :key="index" class="mb2">
<el-card>
<div slot="header" class="clearfix">
<el-row type="flex" justify="space-around">
<span>{{item.title}}</span>
<el-button-group>
<el-button size="mini" type="primary" @click="edit(item)" icon="el-icon-edit"></el-button>
<el-popconfirm
@onConfirm="del(item,index)"
:title="$t('read.tip.del_confirm')"
>
<el-button size="mini" type="danger" slot="reference" icon="el-icon-delete"></el-button>
</el-popconfirm>
</el-button-group>
</el-row>
</div>
<div class="text item" @click="jump(item)" @mouseover="highlighting(item)"
@mouseout="reset(item)">
<transition v-if="item.isEdit" @after-leave="save(item)">
<el-tooltip class="item" effect="dark" :content="$t('read.tip.auto_save')" v-model="item.isEdit">
<el-input autosize type="textarea" v-model="item.content"></el-input>
</el-tooltip>
</transition>
<template v-else><pre style="background-color: white">{{item.content}}</pre></template>
</div>
</el-card>
<el-alert v-if="item.message"
@close="item.message=null;item.type=null"
:title="item.message"
:type="item.type">
</el-alert>
</el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
<el-col :span="21">
<el-row class="mt2">
<el-col :span="7" v-for="(item,index) in stars" :key="index">
<h3 class="center">{{$t('read.tip.rating_'+(index+1))}}</h3>
<el-rate
class="center star-icon"
v-model="item.value"
show-score
score-template="{value}分"
:disabled="item.value>0">
</el-rate>
</el-col>
</el-row>
<el-row class="mt2" type="flex" justify="center">
<el-col :span="3">
<el-button class="star-button" v-if="show_star_button" @click="submitRating">{{$t('button.rating')}}
</el-button>
</el-col>
</el-row>
</el-col>
</div>
4 years ago
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'read',
data() {
4 years ago
return {
//显示搜索框
showSearch:false,
//显示笔记表单
visible: false,
//正文搜索
search_form:{
keyword:''
},
//搜索结果记录数
num:0,
//搜索结果索引
search_index:-1,
//笔记表单
note_form:{
note_title:'',
note_content:'',
original_text:''
},
//表单校验规则
rules:{
note_title:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('read.form.note_title') }),
trigger: 'blur'
}],
note_content:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('read.form.note_content') }),
trigger: 'blur'
}]
},
4 years ago
//活动的论文标签
activeName: '',
//笔记列表
noteList: [],
//禁用右键菜单标志位
disabled: true,
//替换目标
replace: {},
stars: [{ value: 0 }, { value: 0 }, { value: 0 }],
show_star_button: true
4 years ago
}
},
computed: {
4 years ago
//打开的论文标签
openList() {
4 years ago
return this.$store.state.read.read
}
},
watch: {
//激活的论文标签
activeName(newVal) {
this.$store.commit('read/choose', newVal)
},
showSearch(newVal){
if(!newVal){
let pre:HTMLElement=this.$refs['edit'+this.$store.state.read.activeName][0]
this.search_form.keyword=''
this.resetQuery(pre)
}
4 years ago
}
},
4 years ago
methods: {
//激活选中的搜索结果
change_search_index(){
let ele=document.getElementsByClassName('search-light')[this.search_index]
ele.classList.add('choose-search-text')
ele.scrollIntoView({
block: 'center'
})
for(let index=0;index<this.num;index++){
if(index!==this.search_index){
document.getElementsByClassName('search-light')[index].classList.remove('choose-search-text')
}
}
},
//重置搜索
resetQuery(pre:HTMLElement){
for(let span of pre.querySelectorAll('span[class^=search-light]')){
let text=document.createTextNode(span.innerText)
span.replaceWith(text)
}
pre.normalize()
this.num=0
this.search_index=-1
},
//正文搜索
queryContent(){
let pre:HTMLElement=this.$refs['edit'+this.$store.state.read.activeName][0]
this.resetQuery(pre)
if(this.search_form.keyword.length===0){
let selection=getSelection()
if(selection&&selection.toString().length>0){
this.search_form.keyword=selection.toString()
}else{
return
}
}
let replaceObj=[]
for(let node of pre.childNodes) {
let content=node.nodeType===3?node.data:node.innerText
let matchAll = content.matchAll(new RegExp(this.search_form.keyword, 'g'))
let replaceNodes=[]
if(node.nodeType===1&&node.innerText.length===this.search_form.keyword.length) {
node.classList.add('search-light')
}else{
let length = 0
let prev
for (let match of matchAll) {
this.num+=1
let start = document.createTextNode(content.substr(prev ? prev : 0, match.index - length))
let span = document.createElement('span')
span.classList.add('search-light')
span.innerText = this.search_form.keyword
prev = match.index + this.search_form.keyword.length
replaceNodes.push(start, span)
length += start.data.length + this.search_form.keyword.length
}
if(length>0){
replaceNodes.push(document.createTextNode(content.substr(prev)))
replaceObj.push({
source: node,
target: replaceNodes
})
}
}
}
for(let item of replaceObj){
let node=item.source
let replaceNodes=item.target
if(replaceNodes.length>0) {
if(node.nodeType===3) {
node.replaceWith(replaceNodes[0])
for (let index = 1; index < replaceNodes.length; index++) {
replaceNodes[index - 1].after(replaceNodes[index])
}
}else{
node.innerHTML=''
for(let child of replaceNodes){
node.appendChild(child)
}
}
}
}
if(this.num>0) {
this.search_index=0
this.change_search_index()
}else{
this.$message.warning({
message: this.$t('read.tip.search_zero',{keyword:this.search_form.keyword}).toString(),
showClose: true,
duration: 2000
})
}
},
//编辑笔记
edit(item: any) {
if ('isEdit' in item) {
item.isEdit = !item.isEdit
} else {
this.$set(item, 'isEdit', true)
}
},
//保存笔记
save(item: any) {
this.$set(item, 'type', 'success')
this.$set(item, 'message', '保存成功')
},
//删除笔记
del(item: any,index:number) {
this.$set(item, 'type', 'success')
this.$set(item, 'message', '删除成功')
this.noteList.splice(index,1)
},
//提交评分
submitRating() {
console.info(this.stars)
},
//高亮笔记
highlighting(item: any) {
let ele = document.getElementById(item.id)
if (ele && this.GLOBAL.visible_in_container(this.$refs['edit' + this.activeName][0], ele)) {
ele.classList.add('heightlight')
}
},
reset(item: any) {
let ele = document.getElementById(item.id)
if (ele) {
ele.classList.remove('heightlight')
}
},
//跳转到笔记位置
jump(item: any) {
let ele = document.getElementById(item.id)
if (ele) {
ele.scrollIntoView({
block: 'center'
})
}
},
//是否显示右键菜单
show() {
let s = getSelection()
if (s) {
this.disabled = s.isCollapsed
} else {
this.disabled = true
}
},
4 years ago
//关闭标签
removeTab(name: string) {
this.$store.commit('read/close', name)
if (Object.keys(this.openList).length === 0) {
this.$router.push(this.localePath('/document'))
this.$store.commit('menus/none')
4 years ago
}
this.activeName = this.$store.state.read.activeName
4 years ago
},
resetNote(){
this.replace = {}
this.note_form.note_title=''
this.note_form.note_content=''
this.note_form.original_text=''
},
4 years ago
//添加笔记
addNote() {
let that=this
this.$refs.form.validate((valid: boolean)=>{
if (valid&&Object.keys(that.replace.replaceVal).length>0) {
let id=new Date().getTime()
let c=document.createElement('span')
c.setAttribute('id',id.toString())
that.replace.val.replaceWith(that.replace.replaceVal[0])
for (let index =1;index<that.replace.replaceVal.length;index++) {
that.replace.replaceVal[index-1].after(that.replace.replaceVal[index])
}
that.noteList.unshift({
id: `fuck${(Math.random()*10).toFixed()}`,
title: this.note_form.note_title,
content: this.note_form.note_content
})
that.$message.info({
message: this.$t('read.tip.add_tip_ok').toString(),
showClose: true,
duration: 1000
})
} else {
that.$message.error({
message: this.$t('read.tip.add_tip_fail').toString(),
showClose: true,
duration: 1000
})
return false;
}
this.visible=false
})
4 years ago
},
//获取选中文本
selectText() {
4 years ago
let selection = getSelection()
console.info(selection)
if (selection && !this.disabled) {
4 years ago
let range = selection.getRangeAt(0)
console.info(range)
if (range.startContainer === range.endContainer) {
let tip = '不跨节点'
let anchorNode = range.startContainer
let bold = document.createElement('span')
bold.classList.add('bold')
if (range.endOffset - range.startOffset === anchorNode.length) {
console.info(tip + '全选')
bold.innerText = anchorNode.wholeText
this.replace={
val: anchorNode,
replaceVal: [bold]
}
4 years ago
} else {
console.info(tip + '选中一部分')
let start = document.createTextNode(anchorNode.substringData(0, range.startOffset))
let end = document.createTextNode(anchorNode.substringData(range.endOffset, anchorNode.length))
bold.innerText = anchorNode.substringData(range.startOffset, range.endOffset - range.startOffset)
this.replace={
val: anchorNode,
replaceVal: [start,bold,end]
}
4 years ago
}
this.note_form.original_text=bold.innerText
4 years ago
} else {
let tip = '跨节点'
let startNode = range.startContainer
let endNode = range.endContainer
}
} else {
console.error('无法获取选中文本')
4 years ago
}
}
},
mounted() {
this.activeName = this.$store.state.read.activeName
for (let n = 0; n < 10; n++) {
this.noteList.push({
id: `fuck${n}`,
title: `笔记${n}`,
content: `内容${n}`
})
}
let that=this
addEventListener('keyup',function(event) {
//监听查找操作
if(event.shiftKey&&'F'===event.key.toUpperCase()){
event.preventDefault();
that.showSearch=!that.showSearch
}else if('ESCAPE'===event.key.toUpperCase()){
that.showSearch=false
}
},true)
4 years ago
}
})
</script>
<style>
.heightlight {
color: #74f2ff;
font-size: larger;
}
.search-light{
color:blue;
}
.choose-search-text {
animation: changeshadow 1s ease-in infinite ;
}
@keyframes changeshadow {
0%{ text-shadow: 0 0 4px blue}
50%{ text-shadow: 0 0 40px blue}
100%{ text-shadow: 0 0 4px blue}
}
.choose-note {
cursor: pointer;
}
pre {
overflow-x: hidden;
}
.content {
height: 600px;
overflow-y: auto;
}
.note-list {
height: 600px;
overflow-y: auto;
}
.text {
font-size: 14px;
}
4 years ago
.item {
margin-bottom: 18px;
}
4 years ago
.clearfix::before,
.clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both
}
.star-button {
width: 100%;
}
.star-icon i {
font-size: 30px;
}
.w-100 {
width: 100%;
}
.el-input.el-input--prefix>input[type='text'] {
height: 40px;
}
.img{
height: 30px;
width: 30px;
vertical-align: text-top;
}
</style>