|
|
@@ -1,5 +1,7 @@
|
|
1
|
1
|
import common from '../../utils/util';
|
|
2
|
2
|
import main from '../../utils/main';
|
|
|
3
|
+import animation from '../../utils/animation';
|
|
|
4
|
+
|
|
3
|
5
|
const Theme=[{
|
|
4
|
6
|
"Name":"DarkColor",
|
|
5
|
7
|
"backgroundColor": "#004433",
|
|
|
@@ -137,64 +139,86 @@ Page({
|
|
137
|
139
|
updateData:function(content){
|
|
138
|
140
|
let that=this;
|
|
139
|
141
|
//console.log(content);
|
|
|
142
|
+
|
|
140
|
143
|
if (typeof content === 'string') {
|
|
141
|
144
|
content = JSON.parse(content);
|
|
142
|
145
|
}
|
|
143
|
146
|
if (typeof content === 'string') {
|
|
144
|
147
|
content = JSON.parse(content);
|
|
145
|
148
|
}
|
|
146
|
|
- let hl="nonelight";
|
|
147
|
|
- if (that.data.IsShowKeyword)
|
|
148
|
|
- hl="highlight";
|
|
|
149
|
+ let hl = that.data.IsShowKeyword ? "highlight" : "nonelight";
|
|
149
|
150
|
|
|
150
|
|
- // 简化的解决方案:按长度排序并使用临时标记
|
|
151
|
|
- for(let i=0;i<content.ArticleEnglish.length;i++){
|
|
152
|
|
- // 1. 先对单词按长度从长到短排序,确保先处理"Come on"再处理"Come"
|
|
153
|
|
- let sortedWords = [...content.FormsOfWords].sort((a, b) => b.length - a.length);
|
|
|
151
|
+ // 初始化ArticleEnglishArr数组
|
|
|
152
|
+ content.ArticleEnglishArr = [];
|
|
|
153
|
+
|
|
|
154
|
+ for(let i=0; i<content.ArticleEnglish.length; i++){
|
|
|
155
|
+ // 确保每个句子末尾有空格,避免和下一句紧挨着
|
|
|
156
|
+ const sentence = content.ArticleEnglish[i] + " ";
|
|
|
157
|
+ // 按长度从长到短排序单词,确保先匹配较长的词组
|
|
|
158
|
+ const sortedWords = [...content.FormsOfWords].sort((a, b) => b.length - a.length);
|
|
154
|
159
|
|
|
155
|
|
- // 2. 使用临时标记替换匹配的单词,避免HTML解析问题
|
|
156
|
|
- let text = content.ArticleEnglish[i];
|
|
157
|
|
- let placeholders = [];
|
|
158
|
|
- for(let j=0;j<sortedWords.length;j++){
|
|
159
|
|
- let word = sortedWords[j];
|
|
160
|
|
- let regex = new RegExp(`\\b${word}\\b[.,!?;:]?`, 'gi');
|
|
|
160
|
+ // 创建一个句子的分段数组
|
|
|
161
|
+ let segments = [{
|
|
|
162
|
+ Sentence: sentence,
|
|
|
163
|
+ CSS: ""
|
|
|
164
|
+ }];
|
|
|
165
|
+
|
|
|
166
|
+ // 对每个单词进行处理
|
|
|
167
|
+ for(let j=0; j<sortedWords.length; j++){
|
|
|
168
|
+ const word = sortedWords[j];
|
|
|
169
|
+ // 创建一个新的分段数组,用于存储处理后的结果
|
|
|
170
|
+ let newSegments = [];
|
|
161
|
171
|
|
|
162
|
|
- text = text.replace(regex, match => {
|
|
163
|
|
- let punctuation = match.match(/[.,!?;:]$/);
|
|
164
|
|
- let punc = punctuation ? punctuation[0] : '';
|
|
165
|
|
- let wordPart = match.replace(/[.,!?;:]$/, '');
|
|
|
172
|
+ // 处理每个现有分段
|
|
|
173
|
+ for(let k=0; k<segments.length; k++){
|
|
|
174
|
+ const segment = segments[k];
|
|
166
|
175
|
|
|
167
|
|
- // 使用唯一的占位符
|
|
168
|
|
- let placeholder = `__PLACEHOLDER_${placeholders.length}__`;
|
|
169
|
|
- placeholders.push(`<span class='${hl}'>${wordPart}</span>${punc}`);
|
|
170
|
|
- return placeholder;
|
|
171
|
|
- });
|
|
172
|
|
- }
|
|
173
|
|
-
|
|
174
|
|
- // 3. 将临时标记替换为实际的HTML标签
|
|
175
|
|
- for(let j=0; j<placeholders.length; j++){
|
|
176
|
|
- text = text.replace(`__PLACEHOLDER_${j}__`, placeholders[j]);
|
|
177
|
|
- }
|
|
178
|
|
-
|
|
179
|
|
- content.ArticleEnglish[i] = text;
|
|
180
|
|
- }
|
|
181
|
|
- content.ArticleEnglishArr=[];
|
|
182
|
|
- for(let i=0;i<content.ArticleEnglish.length;i++){
|
|
183
|
|
- let obj=common.splitByMultipleDelimiters(content.ArticleEnglish[i],["<span class='"+hl+"'>","</span>"]);
|
|
184
|
|
- obj=common.removeDuplicateAndTrimStrings(obj);
|
|
185
|
|
- //debugger;
|
|
186
|
|
- let arr=[];
|
|
187
|
|
- for(let j=0;j<obj.length;j++){
|
|
188
|
|
- let objChild={};
|
|
189
|
|
- objChild.Content=obj[j]+" ";
|
|
190
|
|
- objChild.CSS="";
|
|
191
|
|
- if (j%2==1){
|
|
192
|
|
- objChild.CSS=hl;
|
|
193
|
|
- objChild.Content=" "+objChild.Content;
|
|
|
176
|
+ // 如果当前分段已经被标记为高亮,则不再处理
|
|
|
177
|
+ if(segment.CSS !== ""){
|
|
|
178
|
+ newSegments.push(segment);
|
|
|
179
|
+ continue;
|
|
|
180
|
+ }
|
|
|
181
|
+
|
|
|
182
|
+ const text = segment.Sentence;
|
|
|
183
|
+ // 使用正则表达式查找单词边界
|
|
|
184
|
+ const regex = new RegExp(`\\b${word}\\b`, 'gi');
|
|
|
185
|
+ let lastIndex = 0;
|
|
|
186
|
+ let match;
|
|
|
187
|
+
|
|
|
188
|
+ // 查找所有匹配项
|
|
|
189
|
+ while((match = regex.exec(text)) !== null){
|
|
|
190
|
+ // 添加匹配前的文本
|
|
|
191
|
+ if(match.index > lastIndex){
|
|
|
192
|
+ newSegments.push({
|
|
|
193
|
+ Sentence: text.substring(lastIndex, match.index),
|
|
|
194
|
+ CSS: ""
|
|
|
195
|
+ });
|
|
|
196
|
+ }
|
|
|
197
|
+
|
|
|
198
|
+ // 添加匹配的单词(高亮)
|
|
|
199
|
+ newSegments.push({
|
|
|
200
|
+ Sentence: match[0],
|
|
|
201
|
+ CSS: hl
|
|
|
202
|
+ });
|
|
|
203
|
+
|
|
|
204
|
+ lastIndex = match.index + match[0].length;
|
|
|
205
|
+ }
|
|
|
206
|
+
|
|
|
207
|
+ // 添加最后一个匹配后的文本
|
|
|
208
|
+ if(lastIndex < text.length){
|
|
|
209
|
+ newSegments.push({
|
|
|
210
|
+ Sentence: text.substring(lastIndex),
|
|
|
211
|
+ CSS: ""
|
|
|
212
|
+ });
|
|
|
213
|
+ }
|
|
194
|
214
|
}
|
|
195
|
|
- arr.push(objChild);
|
|
|
215
|
+
|
|
|
216
|
+ // 更新分段数组
|
|
|
217
|
+ segments = newSegments;
|
|
196
|
218
|
}
|
|
197
|
|
- content.ArticleEnglishArr.push(arr);
|
|
|
219
|
+
|
|
|
220
|
+ // 将分段数组添加到ArticleEnglishArr
|
|
|
221
|
+ content.ArticleEnglishArr.push(segments);
|
|
198
|
222
|
}
|
|
199
|
223
|
|
|
200
|
224
|
for(let i=0;i<content.Question.length;i++){
|
|
|
@@ -415,9 +439,6 @@ Page({
|
|
415
|
439
|
//console.log("选中的句子索引:", selectedIndex);
|
|
416
|
440
|
//console.log("选中的句子:", that.data.Content.ArticleEnglish[selectedIndex]);
|
|
417
|
441
|
engSentence=that.data.Content.ArticleEnglish[selectedIndex];
|
|
418
|
|
- engSentence=common.ReplaceAllString(engSentence,"<span class='highlight'>","");
|
|
419
|
|
- engSentence=common.ReplaceAllString(engSentence,"<span class='nonelight'>","");
|
|
420
|
|
- engSentence=common.ReplaceAllString(engSentence,"</span>","");
|
|
421
|
442
|
chnSentence=that.data.Content.ArticleChinese[selectedIndex];
|
|
422
|
443
|
}
|
|
423
|
444
|
else if (strType=="question"){
|
|
|
@@ -431,31 +452,16 @@ Page({
|
|
431
|
452
|
this.setData({
|
|
432
|
453
|
EnglishSentence:engSentence,
|
|
433
|
454
|
ChineseSentence:chnSentence,
|
|
434
|
|
- remindAnimation: "remind-slide-up", // 添加上滑动画
|
|
435
|
|
- IsShowRemind:true,
|
|
|
455
|
+ });
|
|
|
456
|
+ // 使用动画工具函数显示弹窗,并指定显示动画
|
|
|
457
|
+ animation.toggleRemindWithAnimation(this, {
|
|
|
458
|
+ showAnimation: 'remind-slide-up'
|
|
436
|
459
|
});
|
|
437
|
460
|
},
|
|
438
|
461
|
showRemind:function(e){
|
|
439
|
|
- let that = this;
|
|
440
|
|
- if (that.data.IsShowRemind) {
|
|
441
|
|
- // 如果当前是显示状态,先播放下滑动画,然后再隐藏
|
|
442
|
|
- that.setData({
|
|
443
|
|
- remindAnimation: "remind-slide-down" // 添加下滑动画
|
|
444
|
|
- });
|
|
445
|
|
-
|
|
446
|
|
- // 等待动画完成后再隐藏弹窗
|
|
447
|
|
- setTimeout(function() {
|
|
448
|
|
- that.setData({
|
|
449
|
|
- IsShowRemind: false
|
|
450
|
|
- });
|
|
451
|
|
- }, 300); // 动画持续时间为0.3秒
|
|
452
|
|
- } else {
|
|
453
|
|
- // 如果当前是隐藏状态,直接显示并播放上滑动画
|
|
454
|
|
- that.setData({
|
|
455
|
|
- IsShowRemind: true,
|
|
456
|
|
- remindAnimation: "remind-slide-up"
|
|
457
|
|
- });
|
|
458
|
|
- }
|
|
|
462
|
+ animation.toggleRemindWithAnimation(this, {
|
|
|
463
|
+ showAnimation: 'remind-slide-down'
|
|
|
464
|
+ });
|
|
459
|
465
|
},
|
|
460
|
466
|
onShareAppMessage: function () {
|
|
461
|
467
|
return {
|