Commit 527458ca 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{
font-size: 2rem;
cursor: pointer;
.model-content { }
width: 100%; .card-word {
height: 100%; margin-top: 1rem;
} }
<form nz-form style="width:100%">
<div class="model-content"> <nz-form-item
style="width: 25%;float: left;padding: 0 .5rem"
*ngFor="let control of cardsArray;let i = index">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <nz-form-control [nzXs]="24" [nzSm]="24" [nzOffset]="0">
<div nz-col class="gutter-row" [nzSpan]="24">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.pic_url" [picUrl]="control.pic_id ? control.pic_id : null"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" (imageUploaded)="onImageUploadSuccess(control, $event)"
></app-upload-image-with-preview> ></app-upload-image-with-preview>
<i class="anticon anticon-close dynamic-delete-button"
<app-audio-recorder (click)="removeCard(control, $event, i)"
[audioUrl]="item.audio_url" style="position: absolute;right: .5rem;top: .5rem;"></i>
(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>
<!--<div *ngIf="cardsArray.length>1" style="position: absolute;right: .5rem;top: .5rem;">-->
<!--<i class="anticon anticon-close dynamic-delete-button"-->
</div> <!--(click)="removeCard(control, $event, i)"></i>-->
<!--</div>-->
\ No newline at end of file <input nz-input placeholder="word" class="card-word"
(blur)="addCardWord(control, $event, i)"
[value]="control.word"
nzSize="large">
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-top: 1rem;clear: both">
<nz-form-control
[nzSpan]="24"
nzValidateStatus="error"
[ngStyle]="{'visibility': hasError ? 'visible' : 'hidden'}"
[nzXs]="{span:24,offset:0}"
[nzSm]="{span:20,offset:4}">
<nz-form-explain>image and word can not be empty</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-top: 1rem;clear: both">
<nz-form-control [nzXs]="{span:24,offset:0}" [nzSm]="{span:20,offset:4}">
<button nz-button nzType="dashed" style="width:60%" (click)="addCard($event)">
<i class="anticon anticon-plus"></i> Add Card</button>
</nz-form-control>
</nz-form-item>
</form>
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,25 +11,43 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,25 +11,43 @@ 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_matching_cards';
// 储存对象 // 储存对象
item; item;
hasError = false;
cardsArray: Array<{
pic_id: string,
word: string
}>;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,
private nzMessageService: NzMessageService,
private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
contentObj: {}
};
if (this.item.contentObj.cards) {
this.cardsArray = this.item.contentObj.cards;
} else {
this.cardsArray = [];
}
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (window as any).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
if (this.item.contentObj.cards) {
this.cardsArray = this.item.contentObj.cards;
} else {
this.cardsArray = [];
}
} }
this.init(); this.init();
...@@ -54,25 +73,24 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -54,25 +73,24 @@ 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 +98,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -80,7 +98,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();
} }
...@@ -92,6 +110,50 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -92,6 +110,50 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
checkValidSts() {
for (const item of this.cardsArray) {
if (!item.pic_id || !(item.word && item.word.trim())) {
return true;
}
}
return false;
}
addCard(evt) {
this.hasError = this.checkValidSts();
if (this.hasError) {
return;
}
if (this.cardsArray.length >= 8 ) {
this.nzMessageService.info('you can only add eight item!');
return;
}
this.cardsArray.push({pic_id: '', word: ''});
}
removeCard(control, evt , i) {
this.cardsArray.splice(i, 1);
this.item.contentObj.cards = this.cardsArray;
this.save();
}
addCardWord(control, evt, i) {
const val = evt.target.value.trim();
control.word = val;
if (control.word && control.pic_id) {
this.item.contentObj.cards = this.cardsArray;
this.save();
this.hasError = false;
} else {
this.hasError = true;
}
}
onImageUploadSuccess(control, info) {
control.pic_id = info.url;
if (control.word && control.pic_id) {
this.item.contentObj.cards = this.cardsArray;
this.save();
this.hasError = true;
} else {
this.hasError = false;
}
}
} }
import {AfterViewInit, HostListener} from '@angular/core';
export class BaseResizeComponent implements AfterViewInit {
resizeTimer: any;
constructor() {
}
ngAfterViewInit() {
this.autoSizeText();
}
@HostListener('window:resize', ['$event'])
onResize(event) {
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.autoSizeText();
}, 500);
}
resizeText(el: any, fontSize: number = 10) {
fontSize++; // el.computedStyleMap().get('font-size');
// Ken 2018-08-09 14:39 无文字时, 不需要计算字号
if (el.textContent.length === 0) {
return;
}
el.style.fontSize = (fontSize + 2) + 'px';
if (el.scrollHeight > el.parentElement.offsetHeight) {
el.style.fontSize = fontSize + 'px';
} else {
setTimeout(() => {
this.resizeText(el, fontSize);
}, 32);
}
}
autoSizeText() {
const elements: NodeListOf<HTMLElement> = document.querySelectorAll('.fit-font-size');
for (let i = 0; i < elements.length; i++) {
const el = elements.item(i);
this.resizeText(el);
}
}
}
.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-matching-cards">
<canvas id="canvas" #canvas></canvas> <div nz-row nzGutter="16" style="height: 100%">
<div nz-col class="gutter-row cell"
#itemContainer
[nzSpan]="24/cols"
[ngStyle]="{height: (100/rows) + '%', 'user-select': 'none'}"
*ngFor="let card of all">
<div class="item" (click)="flipCard($event, card.type, card.word)">
<div class="k-16-9">
<img class="back" src="/assets/matching-cards/cardback.png" alt="">
<div class="k-full-fill" *ngIf="card.type === 'pic'">
<img class="pic" [src]="card.pic_id">
</div>
<div class=" k-full-fill" *ngIf="card.type === 'word'">
<span class="word fit-font-size">{{card.word}}</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
.player-matching-cards {
background: #f4ffeb;
padding: 4vh 6vh;
width: 100%;
height: 100%;
.cell{
display: table;
.item{
display: table-cell;
vertical-align: middle;
}
}
.item{
.k-16-9{
cursor: pointer;
}
.k-16-9:before{
position: absolute;
top: 0;
}
.back{
width: 100%;
height: 100%;
}
.k-full-fill{
//display: none;
visibility: hidden;
padding: .25vh;
border-radius: 2vh;
border: 2px solid #c0e9c5;
//display: flex;
justify-content: center;
align-items: center;
background: #fff;
.word{
width: 100%;
//padding: 1rem;
display: block;
font-size: 4vh;
font-weight: 600;
overflow: hidden;
text-align: center;
font-family: 'ChalkboardSE-Regular';
max-width: 100%;
max-height: 100%;
word-wrap: break-word;
word-break: break-word;
overflow: hidden;
//box-sizing: border-box;
//height: 100%;
//max-width: 100%;
//max-height: 100%;
}
img.pic {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: 100%;
}
}
}
.item.flip-out{
animation-name: open_card_step_1;
animation-duration: .4s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.item.flip-in{
animation-name: open_card_step_2;
animation-duration: .4s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes open_card_step_1 {
0% {transform: scaleX(1)}
100% {transform: scaleX(0) }
}
@keyframes open_card_step_2 {
0% {transform: scaleX(0)}
100% {transform: scaleX(1) }
}
}
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 */
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