Commit 5699827a authored by liujiaxin's avatar liujiaxin

1

parent 8a51c964
...@@ -30,7 +30,10 @@ ...@@ -30,7 +30,10 @@
], ],
"styles": [ "styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css" "./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css",
"src/styles.scss"
], ],
"scripts": [] "scripts": []
}, },
......
@import '../style/common_mixin.css'; .dynamic-delete-button {
cursor: pointer;
position: relative;
.model-content { top: 50%;
width: 100%; font-size: 2rem;
height: 100%; color: #999;
transition: all .3s;
}
.dynamic-delete-button:hover {
color: #777;
} }
<form nz-form style="width:100%">
<nz-form-item
style="width: 49.8%;float: left;padding: 0 .5rem"
*ngFor="let control of picArray;let i = index">
<nz-form-control [nzXs]="24" [nzSm]="24" [nzOffset]="0">
<div nz-col class="gutter-row" [nzSpan]="24">
<app-upload-image-with-preview
style="width: 300px"
[picUrl]="item.contentObj.pics && item.contentObj.pics[i] ? item.contentObj.pics[i] : null"
(imageUploaded)="onImageUploadSuccess(control, $event)"
></app-upload-image-with-preview>
</div>
<div *ngIf="picArray.length>1" style="position: absolute;right: .5rem;top: .5rem;">
<i class="anticon anticon-close dynamic-delete-button"
(click)="removeField(control,$event)"></i>
<div class="model-content"> </div>
</nz-form-control>
</nz-form-item>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <nz-form-item style="margin-top: 1rem;clear: both">
<nz-form-control [nzXs]="{span:24,offset:0}" [nzSm]="{span:20,offset:4}">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <button nz-button nzType="dashed" style="width:60%" (click)="addPictureField(null, $event)"><i class="anticon anticon-plus"></i> Add Picture</button>
</nz-form-control>
<app-upload-image-with-preview </nz-form-item>
[picUrl]="item.pic_url" </form>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
...@@ -10,26 +11,47 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,26 +11,47 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = 'ww_sequence';
// 储存对象 // 储存对象
item; item;
picArray: Array<{
controlInstance: string,
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { progress: number,
uploadStatus: number,
uploading: boolean,
res_id: number
}>;
constructor(private appRef: ApplicationRef,
private nzMessageService: NzMessageService,
private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
contentObj: {}
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (window as any).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} }
this.picArray = [];
if (Array.isArray(this.item.contentObj.pics) && this.item.contentObj.pics.length > 0) {
for (const p of this.item.contentObj.pics) {
this.addPictureField({
controlInstance: `${p}`,
res_id: p
});
}
} else {
this.addPictureField();
}
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
...@@ -53,26 +75,26 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -53,26 +75,26 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
//
/** // /**
* 储存图片数据 // * 储存图片数据
* @param e // * @param e
*/ // */
onImageUploadSuccess(e, key) { // onImageUploadSuccess(e, key) {
//
this.item[key] = e.url; // this.item[key] = e.url;
this.save(); // this.save();
} // }
/** // /**
* 储存音频数据 // * 储存音频数据
* @param e // * @param e
*/ // */
onAudioUploadSuccess(e, key) { // onAudioUploadSuccess(e, key) {
//
this.item[key] = e.url; // this.item[key] = e.url;
this.save(); // this.save();
} // }
...@@ -80,7 +102,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -80,7 +102,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (window as any).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
...@@ -93,5 +115,56 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +115,56 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
addPictureField(control?: any, e?: MouseEvent): void {
// debugger;
if (e) {
e.preventDefault();
}
// const sts = this.checkForm();
// if (!sts) {
// return;
// }
const id = this.picArray.length ; // (this.controlArray.length > 0) ? this.controlArray[ this.controlArray.length - 1 ] : 0;
if (id >= 9) {
this.nzMessageService.info('you can only add nine item!');
return;
}
if (!control) {
control = {
controlInstance: `${id}`,
res_id: 0
};
}
const index = this.picArray.push(control);
}
removeField(i: any, e: MouseEvent): void {
e.preventDefault();
if (this.picArray.length > 1) {
const index = this.picArray.indexOf(i);
this.picArray.splice(index, 1);
// console.log(this.controlArray);
this.savedata();
}
}
onImageUploadSuccess(control, info) {
// console.log(control, info)
control.res_id = info.url;
this.savedata();
}
savedata() {
this.item.contentObj.pics = [];
for (const idx in this.picArray) {
this.item.contentObj.pics[idx] = this.picArray[idx].res_id;
}
this.save();
}
} }
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
<div class="game-container" #wrap> <div class="player-preview-sequence">
<canvas id="canvas" #canvas></canvas> <div class="content-wrap ">
<!-- aspectRatioSizer-->
<!-- <svg viewBox="0 0 4 3" style="max-width: 100vmin;max-height: 100vmin;"/>-->
<!--[style.padding]="randPics.length > 2 && randPics.length <= 4 ? '12% 20% 0' : '15% 5% 0'"-->
<div class="item-wrap" #boxContainer>
<div *ngFor="let pic of randPics index as i"
class="gutter-row item"
[attr.data-idx]="pic.idx"
>
<div class="item-box">
<img src="/assets/sequence2/seq_item_bg.png" style="width: 100%;height: 100%" alt="">
<div class="item-pic drop-target"
[attr.data-idx]="pic.idx"
[id]="'tgt'+i"
(click)="checkSelectedIndex($event, pic.idx)"
[style.background-image]="pic.res_id | backgroundImage ">
</div>
<div class="item-label {{'p-font-size-'+randPics.length}}" *ngIf="pic.isRight">{{pic.idx + 1}}</div>
</div>
</div>
</div>
<div class="seq-wrap" >
<img class="seq-wrap-bg" src="/assets/sequence2/rectangle.png" style="width: 100%;height: 100%" alt="">
<div class="seq-num-box" #indexNumBox>
<img
*ngFor="let i of _itemsArr"
src="/assets/sequence2/{{i}}.png" alt="">
</div>
<div class="answer-wrap" >
<img class="btn-answer"
(click)="showRightAnswer()"
src="/assets/sequence2/answer.png" alt="">
</div>
</div>
</div>
<!--<div class="bubble-box" #bubbleContainer>-->
<!--<div *ngFor="let pic of randPics index as i"-->
<!--[id]="'bb'+i"-->
<!--[class]="'bubble b'+i+(randPics.length<5 ? ' less4item' : '')" >-->
<!--<div class="bdhandle">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div> </div>
.player-preview-sequence{
width: 100%;
height: 100%;
background-image: url('../../assets/sequence2/bg_seq.png');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
.content-wrap{
padding-top: 3%;
padding-left: 3%;
padding-right: 3%;
position: relative;
width: 100%;
height: 88%;
display: flex;
flex-flow: row wrap;
.item-wrap{
position: relative;
display: flex;
flex-flow: row wrap;
//padding-right: 18vh;
//top: 54%;
//transform: translateY(-50%);
//width: 100%;
margin-right: 18vh;
display: inline-grid;
grid-template-columns: repeat(auto-fit, var(--item-width));
grid-template-rows: repeat(auto-fit, var(--item-height));
place-content: space-evenly;
width: 100%;
height: 100%;
//background-color: green;
}
.seq-wrap{
width: 12vh;
height: calc( 100% - 6vh);
position: absolute;
right: 5%;
img.seq-wrap-bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.seq-num-box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top: 2%;
padding-bottom: 2%;
img{
margin: 4% auto 2%;
display: block;
height: 10%;
}
img.right{
animation: fadeOut .5s;
}
@keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0;visibility: hidden;height: 0; }
}
img.wrong{
animation: fadeOutIn 1s;
}
@keyframes fadeOutIn {
0% {opacity: 1}
50% {opacity: 0;}
100% {opacity: 1;}
}
}
}
.answer-wrap{
width: 13vh;
padding-top: 61.65%;
height: 0;
//right: 4.5%;
//top: -10vh;
bottom: 0;
position: absolute;
.btn-answer{
cursor: pointer;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
left: 0;
}
}
}
.content-wrap:after {
content: "";
flex: auto;
}
.gutter-row{
float: none;
padding-left: .5rem;
padding-right: .5rem;
.item-box{
/*background-image: url('../../../../assets/sequence/item-bg.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 74.75%;*/
/*background-image: url('../../../../assets/sequence/item-bg.png');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
position: relative;
height: 100%;
overflow: hidden;*/
position: relative;
top: 50%;
transform: translateY(-50%);
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content:before {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.item-pic{
width: 95%;
height: 70%;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 10%;
left: 2.5%;
cursor: pointer;
}
.item-pic.selected-right{
cursor: default;
}
.item-label{
position: absolute;
right: 6%;
bottom: 0%;
width: 17%;
height: 21%;
color: #fff;
font-size: calc(0.030 * 100vh);
font-weight: 900;
text-align: center;
}
}
}
}
.p-font-size-1, .p-font-size-2 {
font-size: calc(0.04 * 100vh) !important;
}
.p-font-size-3, .p-font-size-4 {
font-size: calc(0.05 * 100vh) !important;
line-height: 130%!important;
}
.aspectRatioSizer {
display: grid;
}
.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
This diff is collapsed.
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
html, body {
width: 100%;
height: 100%;
font-size: 16px;
}
body {
background-color: #f0f2f5 !important;
}
* {
outline: none;
}
@font-face {
font-family: ChalkboardSE-Regular;
src: url('/assets/font/ChalkboardSE-Regular.woff') format('WOFF');
}
.k-16-9 {
position: relative;
width: 100%;
height: fit-content;
&:before {
content: "";
display: block;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
}
.k-full-fill {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.k-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
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