Commit 14e1c5cd authored by limingzhe's avatar limingzhe

feat: 添加隐藏 子模板更多按钮

parent 5b19c6fd
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
height: 100%; height: 100%;
background: #ffffff; background: #ffffff;
background-size: cover; background-size: cover;
} }
#canvas { #canvas {
...@@ -10,7 +12,6 @@ ...@@ -10,7 +12,6 @@
} }
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'BRLNSDB';
......
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
<span style="font-family:'Aileron-Black'" ></span> <span style="font-family:'Aileron-Black'" ></span>
<span style="font-family:'Aileron-Bold'" ></span> <span style="font-family:'Aileron-Bold'" ></span>
<div class="game-container" #wrap> <div class="game-container" #wrap >
<canvas id="canvas" style="width: 100%; height: 100%;" #canvas></canvas> <canvas id="canvas" style="width: 100%; height: 100%;" #canvas></canvas>
</div> </div>
<div #iframeContent style="position: absolute; top: 0;"> <div #iframeContent style="position: absolute; top: 0; overflow: hidden; ">
<div *ngFor="let t of templateArr; let i = index"> <div *ngFor="let t of templateArr; let i = index" >
<iframe *ngIf="t.isShow" [src]="t.playUrl || ''" style="width: 100vw; height: 100vh; border: 0px solid #ccc; " frameborder="0"> <iframe [style.left]="t?.leftOff || '100vw'" [src]="t?.playUrl || safeDefaultUrl" style="position: fixed; width: 100vw; height: 100vh; border: 0px solid #ccc; " frameborder="0">
</iframe> </iframe>
</div> </div>
</div> </div>
......
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, ApplicationRef } from '@angular/core';
import { import {
MySprite, MySprite,
...@@ -132,7 +132,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -132,7 +132,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
constructor(private sanitizer: DomSanitizer) { constructor(private sanitizer: DomSanitizer, private appRef: ApplicationRef) {
} }
...@@ -243,7 +243,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -243,7 +243,7 @@ export class PlayComponent implements OnInit, OnDestroy {
sentenceArr = []; sentenceArr = [];
submitCount = 0; submitCount = 0;
safeDefaultUrl;
initData() { initData() {
...@@ -279,7 +279,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -279,7 +279,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.submitCount = 0; this.submitCount = 0;
this.replaceSentenceText(); this.replaceSentenceText();
this.safeDefaultUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
...@@ -563,7 +563,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -563,7 +563,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.relink(); this.relink();
} }
relink() { relink() {
...@@ -571,7 +570,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -571,7 +570,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const progress = this.getPageData('progress'); const progress = this.getPageData('progress');
if (this.isTeacher) { if (this.isTeacher) {
if (progress == '1') { if (progress != null) {
this.gameStart(); this.gameStart();
return; return;
} }
...@@ -591,10 +590,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -591,10 +590,15 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
if (progress == '2' || progress == '3') {
const submitCount = this.getPageData('submitCount')
this.submitCount = submitCount;
this.checkShowSubTemplateOne();
return;
}
const submitCount = this.getPageData('submitCount')
this.submitCount = submitCount;
this.checkShowSubTemplateOne();
} }
...@@ -1388,26 +1392,45 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1388,26 +1392,45 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.showSubTemplate(0); // this.showSubTemplate(0);
console.log(' in checkShowSubTemplateOne')
const progress = this.getPageData('progress'); const progress = this.getPageData('progress');
console.log(' progress: ', progress);
if (progress == '2') { if (progress == '2') {
if (this.submitCount == 1) { if (this.submitCount == 1) {
this.showSubTemplate(1); this.showSubTemplate(1);
this.sendSubTempIsShowMore(1, true);
} else { } else {
this.showSubTemplate(0); this.showSubTemplate(0);
this.sendSubTempIsShowMore(0, true);
} }
return; return;
} }
if (progress == '3') { if (progress == '3') {
let index;
if (this.submitCount == 1) { if (this.submitCount == 1) {
this.showSubTemplate(0); index = 0;
} else { } else {
this.showSubTemplate(1); index = 1;
} }
this.showSubTemplate(index);
this.sendSubTempIsShowMore(index, false);
} }
}
sendSubTempIsShowMore(index, isShowMore) {
const divArr = this.iframeContent.nativeElement.children;
const iframecont = divArr[index].children[0];
const data = { msg: 'success', data: JSON.stringify({isShowMore})};
iframecont.contentWindow.postMessage({ action: 'is_show_more', data: JSON.stringify(data) }, '*');
console.log(' post msg is_show_more ')
} }
...@@ -1442,6 +1465,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1442,6 +1465,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const isAllRight = this.checkAnswer(); const isAllRight = this.checkAnswer();
if (isAllRight || this.submitCount >= 2) { if (isAllRight || this.submitCount >= 2) {
this.changeBtnOff(); this.changeBtnOff();
this.btnArr = []; this.btnArr = [];
...@@ -1653,12 +1677,57 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1653,12 +1677,57 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('arr: ', this.templateArr); console.log('arr: ', this.templateArr);
for (let i=0; i<this.templateArr.length; i++) { const c = window['courseware'];
const {name, last_version, play_url} = this.templateArr[i].template; if (!c) {
const playUrl = `https://staging-teach.cdn.ireadabc.com/h5template/${name}/v${last_version}/${play_url}?key=${i+1}` console.error('not found window.courseware')
this.templateArr[i].playUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playUrl); return;
console.log('playUrl: ', playUrl);
} }
const addPlayUrl = (name, index) => {
c.getTemplateUrl(name, (data) => {
console.log('name~: ', name)
const urlData = JSON.parse(data)
console.log('data~~:' , data)
console.log('urlData~~:' , urlData)
console.log('i~~:' , index)
this.templateArr[index].playUrl = this.sanitizer.bypassSecurityTrustResourceUrl(urlData.play_url + `?key=${index+1}`);
this.appRef.tick();
index ++;
if (index < this.templateArr.length) {
const {name, last_version, play_url} = this.templateArr[index].template;
addPlayUrl(name, index);
}
})
}
const {name, last_version, play_url} = this.templateArr[0].template;
addPlayUrl(name, 0);
// for (let i=0; i<this.templateArr.length; i++) {
// const {name, last_version, play_url} = this.templateArr[i].template;
// const index = i;
// c.getTemplateUrl(name, (data) => {
// console.log('name~: ', name)
// const urlData = JSON.parse(data)
// console.log('data~~:' , data)
// console.log('urlData~~:' , urlData)
// console.log('i~~:' , index)
// this.templateArr[index].playUrl = this.sanitizer.bypassSecurityTrustResourceUrl(urlData.play_url + `?key=${index+1}`);
// })
// const playUrl = `https://staging-teach.cdn.ireadabc.com/h5template/${name}/v${last_version}/${play_url}?key=${i+1}`
// this.templateArr[i].playUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playUrl);
// console.log('playUrl: ', playUrl);
// }
// this.showSubTemplate(0); // this.showSubTemplate(0);
...@@ -1669,23 +1738,30 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1669,23 +1738,30 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
showSubTemplate(index) { showSubTemplate(index) {
if (this.isTeacher) {
return;
}
console.log('showSubTemplate _ ', index); console.log('showSubTemplate _ ', index);
const arr = this.templateArr; const arr = this.templateArr;
console.log('arr: ', arr);
for (let i=0; i<arr.length; i++) { for (let i=0; i<arr.length; i++) {
arr[i].isShow = false; arr[i].leftOff = '100vw';
} }
arr[index].isShow = true; arr[index].leftOff = '0vw';
this.appRef.tick();
} }
iframeArr;
initWindowListener() { initWindowListener() {
const iframeArr = []; const iframeArr = this.iframeArr;
setTimeout(() => { // setTimeout(() => {
console.log("iframeContent: ", this.iframeContent); console.log("iframeContent: ", this.iframeContent);
let divArr = this.iframeContent.nativeElement.children; let divArr = this.iframeContent.nativeElement.children;
...@@ -1697,7 +1773,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1697,7 +1773,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
console.log('iframeArr: ', iframeArr); console.log('iframeArr: ', iframeArr);
}, 1); // }, 1);
window.addEventListener('message', (e) => { window.addEventListener('message', (e) => {
...@@ -1711,6 +1787,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1711,6 +1787,10 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('msgData.urlParams: ', msgData); console.log('msgData.urlParams: ', msgData);
const key = this.getQueryVariable(msgData.urlParams, 'key'); const key = this.getQueryVariable(msgData.urlParams, 'key');
if (!key) {
return;
}
console.log('key: ', key); console.log('key: ', key);
...@@ -1730,8 +1810,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1730,8 +1810,8 @@ export class PlayComponent implements OnInit, OnDestroy {
iframecont.contentWindow.postMessage({ action: 'getData', data: JSON.stringify(data) }, '*'); iframecont.contentWindow.postMessage({ action: 'getData', data: JSON.stringify(data) }, '*');
const data2 = { msg: 'success', data: JSON.stringify({isShowMore: false})}; // const data2 = { msg: 'success', data: JSON.stringify({'isShowMore': false})};
iframecont.contentWindow.postMessage({ action: 'is_show_more', data: JSON.stringify(data2) }, '*'); // iframecont.contentWindow.postMessage({ action: 'is_show_more', data: JSON.stringify(data2) }, '*');
// setTimeout(() => { // setTimeout(() => {
// _this.frameLoaded = true; // _this.frameLoaded = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment