Commit 14e1c5cd authored by limingzhe's avatar limingzhe

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

parent 5b19c6fd
......@@ -3,6 +3,8 @@
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
......@@ -10,7 +12,6 @@
}
@font-face
{
font-family: 'BRLNSDB';
......
......@@ -2,13 +2,13 @@
<span style="font-family:'Aileron-Black'" ></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>
</div>
<div #iframeContent style="position: absolute; top: 0;">
<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">
<div #iframeContent style="position: absolute; top: 0; overflow: hidden; ">
<div *ngFor="let t of templateArr; let i = index" >
<iframe [style.left]="t?.leftOff || '100vw'" [src]="t?.playUrl || safeDefaultUrl" style="position: fixed; width: 100vw; height: 100vh; border: 0px solid #ccc; " frameborder="0">
</iframe>
</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 {
MySprite,
......@@ -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 {
sentenceArr = [];
submitCount = 0;
safeDefaultUrl;
initData() {
......@@ -279,7 +279,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.submitCount = 0;
this.replaceSentenceText();
this.safeDefaultUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
......@@ -563,7 +563,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.relink();
}
relink() {
......@@ -571,7 +570,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const progress = this.getPageData('progress');
if (this.isTeacher) {
if (progress == '1') {
if (progress != null) {
this.gameStart();
return;
}
......@@ -591,10 +590,15 @@ export class PlayComponent implements OnInit, OnDestroy {
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 {
// this.showSubTemplate(0);
console.log(' in checkShowSubTemplateOne')
const progress = this.getPageData('progress');
console.log(' progress: ', progress);
if (progress == '2') {
if (this.submitCount == 1) {
this.showSubTemplate(1);
this.sendSubTempIsShowMore(1, true);
} else {
this.showSubTemplate(0);
this.sendSubTempIsShowMore(0, true);
}
return;
}
if (progress == '3') {
let index;
if (this.submitCount == 1) {
this.showSubTemplate(0);
index = 0;
} 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 {
const isAllRight = this.checkAnswer();
if (isAllRight || this.submitCount >= 2) {
this.changeBtnOff();
this.btnArr = [];
......@@ -1653,12 +1677,57 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('arr: ', this.templateArr);
for (let i=0; i<this.templateArr.length; i++) {
const {name, last_version, play_url} = this.templateArr[i].template;
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);
const c = window['courseware'];
if (!c) {
console.error('not found window.courseware')
return;
}
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);
......@@ -1669,23 +1738,30 @@ export class PlayComponent implements OnInit, OnDestroy {
}
showSubTemplate(index) {
if (this.isTeacher) {
return;
}
console.log('showSubTemplate _ ', index);
const arr = this.templateArr;
console.log('arr: ', arr);
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() {
const iframeArr = [];
const iframeArr = this.iframeArr;
setTimeout(() => {
// setTimeout(() => {
console.log("iframeContent: ", this.iframeContent);
let divArr = this.iframeContent.nativeElement.children;
......@@ -1697,7 +1773,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
console.log('iframeArr: ', iframeArr);
}, 1);
// }, 1);
window.addEventListener('message', (e) => {
......@@ -1711,6 +1787,10 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('msgData.urlParams: ', msgData);
const key = this.getQueryVariable(msgData.urlParams, 'key');
if (!key) {
return;
}
console.log('key: ', key);
......@@ -1730,8 +1810,8 @@ export class PlayComponent implements OnInit, OnDestroy {
iframecont.contentWindow.postMessage({ action: 'getData', data: JSON.stringify(data) }, '*');
const data2 = { msg: 'success', data: JSON.stringify({isShowMore: false})};
iframecont.contentWindow.postMessage({ action: 'is_show_more', data: JSON.stringify(data2) }, '*');
// const data2 = { msg: 'success', data: JSON.stringify({'isShowMore': false})};
// iframecont.contentWindow.postMessage({ action: 'is_show_more', data: JSON.stringify(data2) }, '*');
// setTimeout(() => {
// _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