Commit 5411fff8 authored by liujiaxin's avatar liujiaxin

1

parent 8a51c964
......@@ -30,7 +30,10 @@
],
"styles": [
"./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": []
},
......
......@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { AngularCropperjsModule } from 'angular-cropperjs';
registerLocaleData(zh);
......@@ -50,7 +51,8 @@ registerLocaleData(zh);
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
FontAwesomeModule
FontAwesomeModule,
AngularCropperjsModule
],
providers: [
{provide: ErrorHandler, useClass: MyErrorHandler},
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div nz-row nzType="flex" nzGutter = '16' class="editor-reading-wrap">
<div class="model-content">
<div nz-col nzSpan="12">
<div class="upload-wrap" [style.display]="!picId ? 'block' : 'none'" #uploadImage>
<app-upload-image-with-preview
[picUrl]="picId"
(imageUploaded)="onImageUploadSuccess($event)"
></app-upload-image-with-preview>
</div>
<div class="edit-wrap" *ngIf="picId">
<!--<img [src]="picId | resource" alt="" #img>-->
<angular-cropper [cropperOptions]="cropperConfig"
[imageUrl]="picId"
#angularCropper></angular-cropper>
</div>
</div>
<div nz-col nzSpan="12">
<div nz-row>
<div nz-col nzSpan="24" style="text-align:right;">
<button nz-button
(click)="changeImage()"
style="margin-left: 1rem">
<i class="anticon anticon-upload"></i><span>Change Image</span>
</button>
<button nz-button
(click)="addPart()"
style="margin-left: 1rem">
<i class="anticon anticon-plus"></i><span>Add Crop</span>
</button>
<hr>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12"
#partConfigBoxes
*ngFor="let part of cropperParts;let i = index"
class="part-item" >
<div class="part-item-wrap" style="margin-right: 2.5rem;">
<i class="anticon anticon-edit"
nz-tooltip nzTitle="edit mode"
*ngIf="currentEditPartIndex !== i"
(click)="editPart(i)"></i>
<i class="anticon anticon-close-square dynamic-delete-button"
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
nz-popconfirm
nzTitle="Are you sure?"
(nzOnConfirm)="confirmRemovePart(i,$event)"
nz-tooltip></i>
<i class="anticon anticon-logout"
*ngIf="currentEditPartIndex === i"
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
nz-tooltip nzTitle="exit edit mode"
(click)="exitEditPart($event, i)"></i>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<div class="part-view-wrap">
<div class="part-view"
(click)="previewUserSelectPart(i)"
[ngStyle]="part.previewCss">
<img *ngIf="currentEditPartIndex !== i"
[ngStyle]="part.imgCss"
(load)="initPart($event, i)"
[src]="picId">
</div>
</div>
<div class="part-text-wrap" >
<div *ngIf="currentEditPartIndex === i" style="height:2.5rem;">
<input nz-input
class="part-word"
[style.fontWeight] = "900"
nzSize="default"
autofocus
[(ngModel)]="part.word"
[value]="part.word"
(ngModelChange)="onChangePartWord($event, i)"
(keydown.enter)="savePart($event, i)"
(keydown.esc)="exitEditPart($event, i)"
>
<!--(blur)="savePart($event, i)"-->
<!--[(ngModel)]="part.word"-->
<!--(ngModelChange)="onChangePartWord($event, i)"-->
<!--(focus)="setCurrentInputField($event)"-->
<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>
<i class="anticon anticon-check-square"
nz-tooltip nzTitle="save"
(click)="savePart($event,i)"></i>
</div>
<div *ngIf="currentEditPartIndex !== i" class="text-word" style="">
{{part.word}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
.editor-reading-wrap{
input.err{
border-color: red;
}
//::ng-deep .cropper-wrapper {
// max-width: 100%!important;
// ::ng-deep .cropper{
//
// position: relative;
// padding-bottom: 56.25%;
// height: 0;
// overflow: hidden;
// }
//}
::ng-deep .cropper-wrapper {
max-width: 100%!important;
::ng-deep .cropper{
max-width: 100%!important;
width: 100%;
> img{
max-width: 100%!important;
}
}
}
.edit-wrap{
max-width: 100%;
min-width: 100%;
width: 100%;
position: relative;
img{
width: 100%;
}
}
.p-progress-bar {
position: relative;
width: 100%;
height: 0.3rem;
border: 1px solid #ccc;
border-radius: 1rem;
.p-progress-bg {
background-color: #1890ff;
border-radius: 1rem;
height: 100%;
}
.p-progress-value {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-shadow: 0 0 4px #000;
color: white;
text-align: center;
font-size: 0.9rem;
line-height: 1.5rem;
}
}
.parts-box{
.crop-preview-box{
border: 1px solid #ddd;
overflow: hidden;
box-shadow: 0 0 20px 0px gainsboro;
.crop-preview{
width: 100%;
padding-bottom: 56.25%;
//border: 1px solid #eee;
overflow: hidden;
//box-shadow: 0 0 20px 0px gainsboro;
position: relative;
margin: 0 auto;
}
}
}
.previewer{
border: 2px dashed #ddd;
//display: inline-block;
max-width: 100%;
width: 100%;
height: auto;
overflow: hidden;
}
.previewer img{
max-width: 100%;
}
.part-view-wrap{
width: 100%;
max-width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
margin-bottom: .5rem;
border: 1px solid #ddd;
overflow: hidden;
box-shadow: 0 0 20px 0px gainsboro;
.part-view{
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
width: 100%;
height: 0;
padding-bottom: 56.25%;
img {
display: block;
min-width: 0px !important;
min-height: 0px !important;
max-width: none !important;
max-height: none !important;
}
}
}
.part-item{
float: none;
display: inline-block;
vertical-align: top;
margin-bottom: 1rem;
//padding-top: 1rem;
//border-top: 1px solid #ddd;
position: relative;
.part-text-wrap{
position: relative;
font-weight: 900;
.text-word{
//height:2.5rem;
line-height:2.5rem;
text-align: center;
word-wrap: break-word;
word-break: break-word;
font-size: 2rem;
}
}
.part-text{
text-align: center;
font-size: 2rem;
font-family: 'ChalkboardSE-Regular';
font-weight: 900;
}
i.anticon-edit, i.anticon-logout{
cursor: pointer;
position: absolute;
top: 4px;
font-size: 22px;
color: #1890ff;
transition: all .3s;
z-index: 1;
top: 2rem;
right: 1rem;
opacity: .7;
}
i.anticon-close-square{
cursor: pointer;
position: absolute;
top: 4px;
font-size: 24px;
color: #f5222d;
transition: all .3s;
z-index: 1;
top: 0rem;
right: 1rem;
opacity: .7;
}
i.anticon-check-square{
cursor: pointer;
position: absolute;
top: 4px;
font-size: 24px;
color: #1890ff;
transition: all .3s;
z-index: 1;
right: -1.5rem;
opacity: .7;
}
i.anticon-check-square:hover, i.anticon-edit:hover, i.anticon-close-square:hover {
opacity: 1;
}
}
}
This diff is collapsed.
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>
<canvas id="canvas" #canvas></canvas>
<div class="player-reading" #readingContainer>
<div class="imgDetailBox"
(click)="closeDetailView($event)"
[style.display]="partDetailVisible? 'block' : 'none'">
<div class="detail-preview-box" [ngStyle]="partViewDetailCss" >
<img [src]="data.contentObj.pic_id | resource" [ngStyle]="partViewImgDetailCss">
</div>
</div>
<div class="fill">
<div class="row fill" style="margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;">
<div class="col-6">
<div class="bar">
<div class="parts-wrap">
<div class="parts" #previewParts>
<div class="row" *ngFor="let part of parts;let i = index">
<div class="col-6 word-wrap" [style.color]="part.color">
<span class="word " [style.color]="part.color">
{{part.word}}
</span>
</div>
<div class="col-6">
<div class="part-pic-box-border" (click)="highlightSelect(i)" [style.borderColor]="part.color">
<div class="part-pic-box" [ngStyle]="part.previewCss">
<img [src]="data.contentObj.pic_id | resource" [ngStyle]="part.imgCss">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6" style="display: flex;justify-content: center;align-items: center;">
<div class="pic-preview" [ngStyle]="previewContainerCss" #previewContainer>
<img [src]="data.contentObj.pic_id | resource" alt="">
<div class="highlight" #highlightBox>
<div class="t-b"></div>
<div class="r-b"></div>
<div class="b-b"></div>
<div class="l-b"></div>
</div>
</div>
</div>
</div>
</div>
</div>
.player-reading{
background: url("../../assets/reading/bg_reading.png") 50% 50% no-repeat;
width: 100%;
height: 100%;
position: relative;
//.container{
// padding-left: 2.5vh;
// padding-right: 2.5vh;
// .col-6{
// padding-left: 2.5vh;
// padding-right: 2.5vh;
// }
//}
.imgDetailBox{
width: 50%;
height: 100%;
position: absolute;
display: none;
z-index: 9999;
background: #fff;
overflow: hidden;
box-shadow: 0 0 20px 0px #444;
left: 2vh;
.close-detail-view{
position: absolute;
top: 1rem;
right: 1rem;
position: absolute;
font-size: 2rem;
cursor: pointer;
opacity: .7;
}
.close-detail-view:hover{
opacity: 1;
}
.detail-preview-box{
//display: flex;
//justify-content: center;
//align-items: center;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
left: 50%;
overflow: hidden;
img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
}
.detail-preview-box.c0{border: 3px solid #4FC200;}
.detail-preview-box.c1{border: 3px solid #00C0FF;}
.detail-preview-box.c2{border: 3px solid #FFDC00;}
.detail-preview-box.c3{border: 3px solid #FF8F00;}
.detail-preview-box.c4{border: 3px solid #CF0000;}
.detail-preview-box.c5{border: 3px solid #8E33D4;}
.detail-preview-box.c6{border: 3px solid #FF0075;}
}
.fill{
min-height: 100%;
height: 100%;
}
.bar {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
width: calc(100% - 30px);
position: absolute;
z-index: 10;
.parts-wrap{
display: table;
height: 100%;
width: 100%;
.parts{
display: table-cell;
vertical-align: middle;
}
}
}
.parts-wrap{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
.parts{
//position: absolute;
//width: 100%;
//top: 50%;
//transform: translateY(-50%);
//
//display: grid;
//grid-template-columns: repeat(1, 1fr);
//grid-column-gap: .3rem;
//grid-row-gap: .3rem;
//grid-auto-rows: 16vh;
//.box-row{
// position: relative;
// display: block;
// width: 100%;
// overflow: hidden;
//}
.row{
max-height: 16vh;
min-height: 16vh;
height: 16vh;
}
.word-wrap{
word-wrap: break-word;
word-break: break-word;
position: relative;
//white-space: nowrap;
//display: table;
.word{
//display: table-cell;
//vertical-align: middle;
//margin: 0 auto;
font-weight: 900;
font-size: 2.5vh;
font-family: 'ChalkboardSE-Regular';
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
left: 50%;
width: calc( 100% - 30px);
display: block;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: normal;
//white-space: nowrap;
//white-space: pre-wrap;
text-align: left;
}
}
.part-pic-box-border{
cursor: pointer;
max-width: calc(100% - 1vh);
overflow: hidden;
margin: 0 auto;
border: .5vh solid #333;
border-radius: 1vh;
max-height: calc(100% - 1vh);
position: relative;
display: block;
width: calc(100% - 1vh);
height: 0;
padding-bottom: 56.25%;
top: 50%;
transform: translateY(-50%);
.part-pic-box{
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
left: 50%;
overflow: hidden;
}
}
}
}
.pic-preview{
object-fit: contain;
position: relative;
//display: initial;
//top: 50%;
//left: 50%;
//transform: translateY(-50%) translateX(-50%);
max-height: 100%;
max-width: 100%;
//margin-top: 1rem;
//margin-bottom: 1rem;
//height: calc(100% - 2rem);
//max-width: calc(100% - 30px);
//border: 1px solid #666;
overflow: hidden;
box-shadow: 0 0 20px 0px #444;
img{
//object-fit: contain;
//display: flex;
max-width: 100%;
width: auto;
height: auto;
max-height: 100%;
}
.highlight.c0 {
.t-b,.r-b,.l-b,.b-b{
background: #4FC200!important;
}
}
.highlight.c1 {
.t-b,.r-b,.l-b,.b-b{
background: #00C0FF!important;
}
}
.highlight.c2 {
.t-b,.r-b,.l-b,.b-b{
background: #FFDC00!important;
}
}
.highlight.c3 {
.t-b,.r-b,.l-b,.b-b{
background: #FF8F00!important;
}
}
.highlight.c4 {
.t-b,.r-b,.l-b,.b-b{
background: #CF0000!important;
}
}
.highlight.c5 {
.t-b,.r-b,.l-b,.b-b{
background: #8E33D4!important;
}
}
.highlight.c6 {
.t-b,.r-b,.l-b,.b-b{
background: #FF0075!important;
}
}
.highlight{
position: absolute;
z-index: 100;
.t-b{
position: absolute;
width: 100%;
height: 2px ;
top: 0;
background: red;
}
.r-b{
position: absolute;
height: calc(100% - 2px);
width: 2px ;
right: 0;
background: red;
}
.b-b{
position: absolute;
width: 100%;
height: 2px ;
bottom: 0;
background: red;
}
.l-b{
position: absolute;
height: calc(100% - 2px);
width: 2px ;
left: 0;
background: red;
}
}
}
}
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