Commit 6512cb21 authored by liujiaxin's avatar liujiaxin

upgrade angular to 9.0.2

remove scss
add fontawesome solid and regular
remove useless package
parent a7e92ed4
...@@ -3,13 +3,9 @@ ...@@ -3,13 +3,9 @@
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"ng-one": { "origin-angular": {
"projectType": "application", "projectType": "application",
"schematics": { "schematics": {},
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "", "root": "",
"sourceRoot": "src", "sourceRoot": "src",
"prefix": "app", "prefix": "app",
...@@ -17,39 +13,26 @@ ...@@ -17,39 +13,26 @@
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist", "outputPath": "dist/origin-angular",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"aot": false, "aot": true,
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets", "src/assets",
{ "glob": "**/*", "input": "src/assets/libs/service-worker/", "output": "/" },
{ {
"glob": "**/*", "glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/" "output": "/assets/"
},
{
"glob": "**/*",
"input": "./dist/game/",
"output": "/assets/cocos/"
} }
], ],
"styles": [ "styles": [
"src/styles.scss",
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"./node_modules/font-awesome/css/font-awesome.css", "src/styles.css"
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css"
], ],
"scripts": [ "scripts": []
"src/assets/libs/audio-recorder/lame.min.js",
"src/assets/libs/audio-recorder/worker.js",
"src/assets/libs/audio-recorder/recorder.js"
]
}, },
"configurations": { "configurations": {
"production": { "production": {
...@@ -64,28 +47,39 @@ ...@@ -64,28 +47,39 @@
"sourceMap": false, "sourceMap": false,
"extractCss": true, "extractCss": true,
"namedChunks": false, "namedChunks": false,
"aot": true,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": false, "vendorChunk": false,
"buildOptimizer": true "buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
} }
} }
}, },
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "ng-one:build" "browserTarget": "origin-angular:build"
}, },
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "ng-one:build:production" "browserTarget": "origin-angular:build:production"
} }
} }
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "ng-one:build" "browserTarget": "origin-angular:build"
} }
}, },
"test": { "test": {
...@@ -100,7 +94,8 @@ ...@@ -100,7 +94,8 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"src/styles.scss" "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css"
], ],
"scripts": [] "scripts": []
} }
...@@ -122,15 +117,16 @@ ...@@ -122,15 +117,16 @@
"builder": "@angular-devkit/build-angular:protractor", "builder": "@angular-devkit/build-angular:protractor",
"options": { "options": {
"protractorConfig": "e2e/protractor.conf.js", "protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ng-one:serve" "devServerTarget": "origin-angular:serve"
}, },
"configurations": { "configurations": {
"production": { "production": {
"devServerTarget": "ng-one:serve:production" "devServerTarget": "origin-angular:serve:production"
} }
} }
} }
} }
}}, }
"defaultProject": "ng-one" },
} "defaultProject": "origin-angular"
\ No newline at end of file }
{ {
"name": "ng-template-generator", "name": "ng-template-generator",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"start": "ng serve", "start": "ng serve",
"build": "ng build --build--optimizer --aot --base-href /JGT/v3/", "build": "ng build --build--optimizer --aot --base-href /JGT/v3/",
"publish": "node ./bin/publish.js" "publish": "node ./bin/publish.js",
"ng": "ng",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^7.2.10", "@angular/animations": "~9.0.2",
"@angular/cdk": "^7.2.2", "@angular/common": "~9.0.2",
"@angular/common": "^7.2.10", "@angular/compiler": "~9.0.2",
"@angular/compiler": "^7.2.10", "@angular/core": "~9.0.2",
"@angular/core": "^7.2.10", "@angular/forms": "~9.0.2",
"@angular/flex-layout": "^7.0.0-beta.24", "@angular/platform-browser": "~9.0.2",
"@angular/forms": "^7.2.10", "@angular/platform-browser-dynamic": "~9.0.2",
"@angular/http": "^7.2.10", "@angular/router": "~9.0.2",
"@angular/material": "^7.2.2", "@fortawesome/angular-fontawesome": "^0.6.0",
"@angular/platform-browser": "^7.2.10", "@fortawesome/fontawesome-svg-core": "^1.2.27",
"@angular/platform-browser-dynamic": "^7.2.10", "@fortawesome/free-regular-svg-icons": "^5.12.1",
"@angular/platform-server": "^7.2.10", "@fortawesome/free-solid-svg-icons": "^5.12.1",
"@angular/router": "^7.2.10", "@tweenjs/tween.js": "^18.5.0",
"@tweenjs/tween.js": "^17.3.0", "ali-oss": "^6.5.1",
"ali-oss": "^6.0.0", "ng-zorro-antd": "^8.5.2",
"angular-cropperjs": "^1.0.1", "rxjs": "~6.5.4",
"angular2-draggable": "^2.1.9",
"angular2-fontawesome": "^5.2.1",
"angularx-qrcode": "^1.5.3",
"animate.css": "^3.7.0",
"bootstrap": "^4.1.1",
"browser-image-compression": "^1.0.5",
"compressing": "^1.4.0",
"core-js": "^2.6.1",
"cropperjs": "1.4.1",
"css-element-queries": "^1.0.2",
"decimal.js": "^10.0.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"install": "^0.12.2",
"karma-cli": "^2.0.0",
"lodash": "^4.17.10",
"nedb": "^1.8.0",
"ng-lottie": "^0.3.1",
"ng-zorro-antd": "^7.2.0",
"npm": "^6.5.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"rxjs-tslint": "^0.1.6",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"webpack": "^4.28.2", "tslib": "^1.10.0",
"zone.js": "^0.8.26" "zone.js": "~0.10.2"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^0.11.4", "@angular-devkit/build-angular": "~0.900.3",
"@angular/cli": "^7.2.10", "@angular/cli": "~9.0.3",
"@angular/compiler-cli": "^7.2.10", "@angular/compiler-cli": "~9.0.2",
"@angular/language-service": "^7.2.10", "@angular/language-service": "~9.0.2",
"@types/jasmine": "^3.3.5", "@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "^10.12.18", "@types/node": "^12.11.1",
"codelyzer": "^4.5.0", "codelyzer": "^5.1.2",
"jasmine-core": "^3.3.0", "jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "^4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "^3.1.4", "karma": "~4.3.0",
"karma-chrome-launcher": "^2.2.0", "karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.0.0", "karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "^2.0.1", "karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0", "karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2", "protractor": "~5.4.3",
"ts-node": "~5.0.1", "ts-node": "~8.3.0",
"tslint": "^5.12.0", "tslint": "~5.18.0",
"typescript": "3.1.1" "typescript": "~3.7.5"
} }
} }
...@@ -5,12 +5,12 @@ import { Component , OnInit} from '@angular/core'; ...@@ -5,12 +5,12 @@ import { Component , OnInit} from '@angular/core';
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit{ export class AppComponent implements OnInit {
type = 'play'; type = 'play';
constructor() { constructor() {
let tp = this.getQueryString("type"); const tp = this.getQueryString('type');
if (tp){ if (tp) {
this.type = tp; this.type = tp;
} }
} }
......
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import {Angular2FontawesomeModule} from 'angular2-fontawesome/angular2-fontawesome';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { PlayComponent } from "./play/play.component"; import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component';
import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.component';
import { PlayerContentWrapperComponent } from './common/player-content-wrapper/player-content-wrapper.component';
/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
import {UploadImageWithPreviewComponent} from "./common/upload-image-with-preview/upload-image-with-preview.component"; import {FormComponent} from './form/form.component';
import {BackgroundImagePipe} from "./pipes/background-image.pipe"; import {PlayComponent} from './play/play.component';
import {UploadVideoComponent} from "./common/upload-video/upload-video.component"; import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component';
import {ResourcePipe} from "./pipes/resource.pipe"; import {BackgroundImagePipe} from './pipes/background-image.pipe';
import {TimePipe} from "./pipes/time.pipe"; import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component';
import {CustomHotZoneComponent} from "./common/custom-hot-zone/custom-hot-zone.component"; import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe';
import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
registerLocaleData(zh); registerLocaleData(zh);
@NgModule({ @NgModule({
...@@ -42,20 +40,21 @@ registerLocaleData(zh); ...@@ -42,20 +40,21 @@ registerLocaleData(zh);
CustomHotZoneComponent, CustomHotZoneComponent,
PlayerContentWrapperComponent PlayerContentWrapperComponent
], ],
imports: [ imports: [
BrowserModule,
NgZorroAntdModule,
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
BrowserModule, FontAwesomeModule
Angular2FontawesomeModule,
NgZorroAntdModule,
],
/** 配置 ng-zorro-antd 国际化(文案 及 日期) **/
providers : [
{ provide: NZ_I18N, useValue: zh_CN }
], ],
providers: [{ provide: NZ_I18N, useValue: zh_CN }],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
<div class="d-flex"> <div class="d-flex">
<div class="p-btn-record d-flex"> <div class="p-btn-record d-flex">
<div class="btn-clear" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)"> <div class="btn-clear" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
<fa name="close"></fa> <fa-icon icon="close"></fa-icon>
</div> </div>
<div class="btn-record" *ngIf="type===Type.RECORD && !isUploading" <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading"
[class.p-recording]="isRecording" [class.p-recording]="isRecording"
(click)="onBtnRecord()"> (click)="onBtnRecord()">
<fa name="microphone"></fa> <fa-icon icon="microphone"></fa-icon>
Record Audio Record Audio
</div> </div>
<nz-upload <nz-upload
[nzAccept] = "'.mp3'" [nzAccept] = "'.mp3'"
[nzShowUploadList]="false" [nzShowUploadList]="false"
[nzAction]="uploadUrl" [nzAction]="uploadUrl"
[nzData]="uploadData" [nzData]="uploadData"
(nzChange)="handleChange($event)"> (nzChange)="handleChange($event)">
<div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading"> <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading">
<fa name="upload"></fa> <fa-icon icon="upload"></fa-icon>
Upload Audio Upload Audio
</div> </div>
</nz-upload> </nz-upload>
<div class="p-upload-progress-bg" *ngIf="isUploading"> <div class="p-upload-progress-bg" *ngIf="isUploading">
<div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text"> <div class="i-text">
<fa name="cloud-upload"></fa> <fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading... Uploading...
</div> </div>
</div> </div>
...@@ -35,14 +35,14 @@ ...@@ -35,14 +35,14 @@
<ng-template #truthyTemplate > <ng-template #truthyTemplate >
<div class="btn-delete" (click)="onBtnDeleteAudio()"> <div class="btn-delete" (click)="onBtnDeleteAudio()">
<fa name="close"></fa> <fa-icon icon="close"></fa-icon>
</div> </div>
</ng-template> </ng-template>
<ng-template #falsyTemplate> <ng-template #falsyTemplate>
<div class="btn-switch" (click)="onBtnSwitchType()"> <div class="btn-switch" (click)="onBtnSwitchType()">
<fa name="cog"></fa> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText" <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
nzType="circle"></nz-progress> nzType="circle"></nz-progress>
<div class="p-btn-play" [style.left]="isPlaying?'8px':''"> <div class="p-btn-play" [style.left]="isPlaying?'8px':''">
<fa [name]="playIcon"></fa> <fa-icon [icon]="playIcon"></fa-icon>
</div> </div>
</div> </div>
</div> </div>
.d-flex{
display: flex;
}
.p-btn-record { .p-btn-record {
font-size: 0.9rem; font-size: 0.9rem;
color: #555; color: #555;
......
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core';
import {NzMessageService, NzNotificationService, UploadFile} from 'ng-zorro-antd'; import {NzMessageService, NzNotificationService, UploadFile} from 'ng-zorro-antd';
import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http'; import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
import {environment} from '../../../environments/environment'; import {environment} from '../../../environments/environment';
declare var Recorder; declare var Recorder;
...@@ -9,7 +9,7 @@ declare var Recorder; ...@@ -9,7 +9,7 @@ declare var Recorder;
selector: 'app-audio-recorder', selector: 'app-audio-recorder',
templateUrl: './audio-recorder.component.html', templateUrl: './audio-recorder.component.html',
styleUrls: ['./audio-recorder.component.scss'] styleUrls: ['./audio-recorder.component.scss']
}) })
export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
_audioUrl: string; _audioUrl: string;
audio = new Audio(); audio = new Audio();
...@@ -21,8 +21,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -21,8 +21,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
Type = Type; Type = Type;
withRmBtn = false; withRmBtn = false;
uploadUrl = (<any>window).courseware.uploadUrl(); uploadUrl = (window as any).courseware.uploadUrl();
uploadData = (<any>window).courseware.uploadData(); uploadData = (window as any).courseware.uploadData();
@Input() @Input()
needRemove = false; needRemove = false;
...@@ -32,7 +32,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -32,7 +32,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
set audioUrl(url) { set audioUrl(url) {
this._audioUrl = url this._audioUrl = url;
if (url) { if (url) {
this.audio.src = this._audioUrl; this.audio.src = this._audioUrl;
this.audio.load(); this.audio.load();
...@@ -52,8 +52,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -52,8 +52,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
recorder: any; recorder: any;
audioBlob: any; audioBlob: any;
constructor( private nzMessageService: NzMessageService ) { constructor( private nzMessageService: NzMessageService ) {
} }
...@@ -137,11 +137,11 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -137,11 +137,11 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
} }
// 开始录音 // 开始录音
onBtnRecord = () => { onBtnRecord = () => {
} }
// 切换模式 // 切换模式
onBtnSwitchType() { onBtnSwitchType() {
} }
onBtnClearAudio() { onBtnClearAudio() {
this.audioRemoved.emit(); this.audioRemoved.emit();
...@@ -152,7 +152,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -152,7 +152,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.audioRemoved.emit(); this.audioRemoved.emit();
} }
handleChange(info: { type: string, file: UploadFile, event: any }): void { handleChange(info: { type: string, file: UploadFile, event: any }): void {
switch (info.type) { switch (info.type) {
case 'start': case 'start':
this.isUploading = true; this.isUploading = true;
...@@ -185,19 +185,19 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -185,19 +185,19 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
} }
return true; return true;
} }
beforeUpload = (file: File) => { beforeUpload = (file: File) => {
this.audioUrl = null; this.audioUrl = null;
if (!this.checkSelectFile(file)) { if (!this.checkSelectFile(file)) {
return false; return false;
} }
this.isUploading = true; this.isUploading = true;
this.progress = 0; this.progress = 0;
} }
uploadSuccess = (url) => { uploadSuccess = (url) => {
this.nzMessageService.info('Upload Success'); this.nzMessageService.info('Upload Success');
this.isUploading = false; this.isUploading = false;
this.audioUrl = url; this.audioUrl = url;
} }
uploadFailure = (err, file) => { uploadFailure = (err, file) => {
this.isUploading = false; this.isUploading = false;
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="bg-box"> <div class="bg-box">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="bgItem.url" [picUrl]="bgItem?.url"
(imageUploaded)="onBackgroundUploadSuccess($event)"> (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()"> (click)="saveClick()">
<i nz-icon type="save"></i> <i nz-icon nzType="save"></i>
Save Save
</button> </button>
......
...@@ -42,8 +42,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -42,8 +42,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Output() @Output()
save = new EventEmitter(); save = new EventEmitter();
@ViewChild('canvas') canvas: ElementRef; @ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef; @ViewChild('wrap', {static: true }) wrap: ElementRef;
// @HostListener('window:resize', ['$event']) // @HostListener('window:resize', ['$event'])
canvasWidth = 1280; canvasWidth = 1280;
...@@ -613,7 +613,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -613,7 +613,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
update() { update() {
if (!this.ctx) {
return;
}
this.animationId = window.requestAnimationFrame(this.update.bind(this)); this.animationId = window.requestAnimationFrame(this.update.bind(this));
......
<div class="title-config"> <div class="title-config">
<div class="title-wrap"> <div class="title-wrap">
<div class="row" style="margin: 5px;"> <div class="row" style="margin: 5px;">
<div class="p-content" style="width:100%"> <div class="p-content" style="width:100%">
<div class="p-tool-box d-flex" style="background: #fff;"> <div class="p-tool-box d-flex" style="background: #fff;">
<nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily" <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily"
(ngModelChange)="onChangeFontFamily($event)" (ngModelChange)="onChangeFontFamily($event)"
nzPlaceHolder="Font Family" nzPlaceHolder="Font Family"
[nzDropdownMatchSelectWidth]="false" [nzDropdownMatchSelectWidth]="false">
> <nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList">
<nz-option [nzValue]="font" [nzLabel]="font" *ngFor="let font of fontFamilyList"></nz-option> <span [ngStyle]="{'font-family': font}" >{{font}}</span>
</nz-select> </nz-option>
</nz-select>
<nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize" <nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize"
(ngModelChange)="onChangeFontSize()" (ngModelChange)="onChangeFontSize()"
nzPlaceHolder="Font Size"> nzPlaceHolder="Font Size">
<nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option> <nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option>
</nz-select> </nz-select>
<div class="p-divider"></div> <div class="p-divider"></div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeBold()"> <div class="position-relative fa-icon" (click)="onChangeBold()">
<div class="fa fa-bold"></div> <!-- <div class="fa fa-bold"></div>-->
<fa-icon icon="bold"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeItalic()"> <div class="position-relative fa-icon" (click)="onChangeItalic()">
<div class="fa fa-italic"></div> <!-- <div class="fa fa-italic"></div>-->
<fa-icon icon="italic"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeUnderline()"> <div class="position-relative fa-icon" (click)="onChangeUnderline()">
<div class="fa fa-underline"></div> <!-- <div class="fa fa-underline"></div>-->
<fa-icon icon="underline"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex"> <div class="i-tool-font-btn d-flex">
<div class="position-relative fa-icon" (click)="onChangeStrikethrough()"> <div class="position-relative fa-icon" (click)="onChangeStrikethrough()">
<div class="fa fa-strikethrough"></div> <!-- <div class="fa fa-strikethrough"></div>-->
<fa-icon icon="strikethrough"></fa-icon>
</div> </div>
</div> </div>
<div class="p-divider"></div> <div class="p-divider"></div>
<div class="i-tool-font-color d-flex"> <div class="i-tool-font-color d-flex">
<div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)"> <div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)">
<div class="fa fa-font"></div> <!-- <div class="fa fa-font"></div>-->
<fa-icon icon="palette"></fa-icon>
<div class="i-color" [style.background-color]="__fontColor"></div> <div class="i-color" [style.background-color]="__fontColor"></div>
</div> </div>
<div class="i-dropdown-menu" nzPlacement="bottom" <div class="i-dropdown-menu" nzPlacement="bottom"
nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click" nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click"
[nzContent]="colorPane"> [nzContent]="colorPane">
<i nz-icon type="down" theme="outline"></i> <i nz-icon type="down" theme="outline"></i>
</div> </div>
</div> </div>
<div class="p-divider"></div> <div class="p-divider"></div>
<div style="background: #fff;display: block;"> <div style="background: #fff;display: block;">
<div class="position-relative" (click)="onChangeStrikethrough()"> <div class="position-relative">
<app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder> <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder>
</div> </div>
</div> </div>
</div> </div>
<div class="width-100 d-flex"> <div class="width-100 d-flex">
<iframe #titleEl frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe> <iframe #titleEl id="titleContentEgret" frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe>
</div> </div>
</div> </div>
...@@ -76,37 +83,11 @@ ...@@ -76,37 +83,11 @@
<ng-container *ngIf="withIcon">
<div class="row type-row">
课程类型:
<nz-radio-group [(ngModel)]="titleObj && titleObj.type" (ngModelChange)="typeChange($event)">
<label nz-radio nzValue="a">单数课</label>
<label nz-radio nzValue="b">双数课</label>
<label nz-radio nzValue="c">复习课</label>
</nz-radio-group>
</div>
</ng-container>
</div>
</div>
<ng-container *ngIf="withIcon">
<div class="title-icons">
<div class="icons-list">
<nz-checkbox-wrapper style="width: 100%;clear:both" (nzOnChange)="iconsChanges($event)">
<div [class]="'icon-item icon-'+i" *ngFor="let i of groupIconsCount[titleObj.type];">
<div class="img-box">
<nz-badge class="icon-badge" [nzCount]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) + 1">
<img [src]="'assets/title-icons/'+titleObj.type+'/icon-'+i+'.png'" alt="">
</nz-badge>
</div>
<label nz-checkbox [nzValue]="i" [ngModel]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) > -1"></label>
</div>
</nz-checkbox-wrapper>
</div>
</div>
</ng-container>
</div> </div>
@import '../../style/common_mixin'; @import '../../style/common_mixin.css';
.title-config { .title-config {
.letter-wrap{ .letter-wrap{
...@@ -11,39 +11,73 @@ ...@@ -11,39 +11,73 @@
.type-row{ .type-row{
margin: 0;padding-top: 1rem; margin: 0;padding-top: 1rem;
} }
.icon-item{
margin-right: 16px;
float: left;
width: 45px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.icon-badge{
position: absolute;
top: 0;
right: 0;
}
.img-box{
top: 0;
position: absolute;
width: 45px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
img{
max-width: 100%;
}
}
label{
position: absolute;
bottom: 0;
}
}
}
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'BRLNSB';
src: url("../../../assets/font/BRLNSB.TTF") ;
}
@font-face
{
font-family: 'BRLNSR';
src: url("../../../assets/font/BRLNSR.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHICBI';
src: url("../../../assets/font/GOTHICBI.TTF") ;
}
@font-face
{
font-family: 'GOTHICI';
src: url("../../../assets/font/GOTHICI.TTF") ;
}
@font-face
{
font-family: 'MMTextBook';
src: url("../../../assets/font/MMTextBook.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'MMTextBook-BoldItalic';
src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Italic';
src: url("../../../assets/font/MMTextBook-Italic.otf") ;
}
@mixin tool-btn { @mixin tool-btn {
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
...@@ -54,16 +88,37 @@ ...@@ -54,16 +88,37 @@
border-radius: 6px; border-radius: 6px;
color: #555; color: #555;
} }
.d-flex{
display: flex;
}
.position-relative {
position: relative;
}
.flex-fill {
-webkit-box-flex: 1;
flex: 1 1 auto;
justify-content: center;
display: flex;
}
.p-title-box { .i-dropdown-menu{
.p-title { width: 15px;
font-size: 10px;
border-left: 1px solid #ddd;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
flex: 0
}
.p-title-box .p-title {
font-size: 20px; font-size: 20px;
} }
input { .p-title-box input {
width: 300px; width: 300px;
margin-left: 10px; margin-left: 10px;
} }
}
.p-content { .p-content {
border: 1px solid #ddd; border: 1px solid #ddd;
...@@ -85,115 +140,110 @@ ...@@ -85,115 +140,110 @@
align-items: center; align-items: center;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
// save
.i-tool-save {
@include tool-btn();
color: white;
}
.i-tool-save:disabled {
color: #555;
}
// font-size
.i-tool-font-size {
@include tool-btn();
width: 37px;
& > span { }
position: absolute; // save
top: -5px; .i-tool-save {
right: 5px; //@include tool-btn();
} color: white;
} }
.i-tool-font-size:hover { .i-tool-save:disabled {
color: black; color: #555;
border-color: #bbb; }
}
// font-color // font-size
.i-tool-font-color, .i-tool-font-btn { .i-tool-font-size {
border: 1px solid #ddd; //@include tool-btn();
//padding: 3px 7px; width: 37px;
border-radius: 6px;
width: 45px; }
height: 31px; .i-tool-font-size:hover {
background-color: white; color: black;
color: #555; border-color: #bbb;
::ng-deep > span { }
display: flex;
// font-color
.i-tool-font-color, .i-tool-font-btn {
border: 1px solid #ddd;
//padding: 3px 7px;
border-radius: 6px;
width: 45px;
height: 31px;
background-color: white;
color: #555;
::ng-deep > span {
display: flex;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 3px 7px;
}
.i-left {
.fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline {
font-size: 10px;
position: absolute; position: absolute;
left: 0; color: #555;
right: 0; left: 8px;
top: 0; top: 7px;
bottom: 0;
padding: 3px 7px;
}
.i-left {
.fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline {
font-size: 10px;
position: absolute;
color: #555;
left: 8px;
top: 7px;
}
.i-color {
width: 68%;
height: 5px;
background-color: black;
position: absolute;
top: 21px;
left: 5px;
}
} }
.i-dropdown-menu { .i-color {
width: 15px; width: 68%;
font-size: 10px; height: 5px;
border-left: 1px solid #ddd; background-color: black;
display: flex; position: absolute;
align-items: center; top: 21px;
.anticon-down { left: 5px;
transform: scale(0.6);
}
} }
} }
.i-tool-font-btn{ .i-dropdown-menu {
width: 31px; width: 15px;
} font-size: 10px;
.fa-icon{ border-left: 1px solid #ddd;
width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
cursor: pointer; .anticon-down {
} transform: scale(0.6);
// bg-color
.i-tool-bg-color {
@include tool-btn();
padding: 0 9px;
::ng-deep > span {
display: flex;
align-items: center;
}
.i-color {
display: block;
width: 16px;
height: 16px;
background-color: white;
margin-left: 10px;
} }
} }
}
.i-tool-font-btn{
width: 31px;
}
.fa-icon{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
// bg-color
.i-tool-bg-color {
@include tool-btn();
padding: 0 9px;
::ng-deep > span {
display: flex;
align-items: center;
}
// horizontal-center .i-color {
.i-tool-horizontal-center { display: block;
@include tool-btn(); width: 16px;
width: 37px; height: 16px;
background-color: white;
margin-left: 10px;
} }
} }
// horizontal-center
.i-tool-horizontal-center {
@include tool-btn();
width: 37px;
}
.p-box { .p-box {
width: 1280px; width: 1280px;
height: 720px; height: 720px;
...@@ -203,9 +253,7 @@ ...@@ -203,9 +253,7 @@
overflow: hidden; overflow: hidden;
} }
.p-sentence {
@include k-no-select();
}
.p-animation-index-box { .p-animation-index-box {
.i-animation-index { .i-animation-index {
...@@ -278,7 +326,6 @@ ...@@ -278,7 +326,6 @@
::ng-deep .ant-radio-button-wrapper { ::ng-deep .ant-radio-button-wrapper {
padding: 0 10px; padding: 0 10px;
@include k-no-select();
} }
.i-toolbox { .i-toolbox {
...@@ -309,7 +356,6 @@ ...@@ -309,7 +356,6 @@
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
display: flex; display: flex;
@include k-no-select();
} }
.i-active { .i-active {
background-color: antiquewhite; background-color: antiquewhite;
......
import { import {
Component, Component,
ElementRef, ElementRef,
...@@ -10,6 +11,82 @@ import { ...@@ -10,6 +11,82 @@ import {
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
const editorTpl = `<html lang="en"><head><meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<style>
@font-face{
font-family: 'BRLNSDB';
src: url("../../../assets/font/BRLNSDB.TTF") ;
}
@font-face{
font-family: 'BRLNSB';
src: url("../../../assets/font/BRLNSB.TTF") ;
}
@font-face{
font-family: 'BRLNSR';
src: url("../../../assets/font/BRLNSR.TTF") ;
}
@font-face{
font-family: 'GOTHIC';
src: url("../../../assets/font/GOTHIC.TTF") ;
}
@font-face{
font-family: 'GOTHICB';
src: url("../../../assets/font/GOTHICB.TTF") ;
}
@font-face{
font-family: 'GOTHICBI';
src: url("../../../assets/font/GOTHICBI.TTF") ;
}
@font-face{
font-family: 'GOTHICI';
src: url("../../../assets/font/GOTHICI.TTF") ;
}
@font-face{
font-family: 'MMTextBook';
src: url("../../../assets/font/MMTextBook.otf") ;
}
@font-face{
font-family: 'MMTextBook-Bold';
src: url("../../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face{
font-family: 'MMTextBook-BoldItalic';
src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
}
@font-face{
font-family: 'MMTextBook-Italic';
src: url("../../../assets/font/MMTextBook-Italic.otf") ;
}
html, body{
/*font-size: 30px;*/
}
body{
height:48px;
overflow: hidden;
margin: 0;
padding: 0 .5rem;
font-family: 'BRLNSB, BRLNSDB, BRLNSR, GOTHIC, GOTHICB, MMTextBook';
background: #FFF;
line-height: 48px;
}
</style>
</head>
<body>{{content}}</body>
</html>`;
@Component({ @Component({
selector: 'app-lesson-title-config', selector: 'app-lesson-title-config',
templateUrl: './lesson-title-config.component.html', templateUrl: './lesson-title-config.component.html',
...@@ -19,22 +96,45 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -19,22 +96,45 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
fontFamilyList = [ fontFamilyList = [
'Arial', 'Arial',
'ARBLI' 'BRLNSB',
'BRLNSDB',
'BRLNSR',
'GOTHIC',
'GOTHICB',
// "GOTHICBI",
// "GOTHICI",
'MMTextBook',
// "MMTextBook-Bold",
// "MMTextBook-Italic",
// "MMTextBook-BoldItalic",
]; ];
colorList = [ colorList = [
'#111111', '#000000',
'#ffffff', '#ffffff',
'#595959', '#595959',
'#0075c2', '#0075c2',
'#c61c1e', '#c61c1e',
'#9cbc3a' '#9cbc3a',
'#008000',
'#FF0000',
'#D2691E',
]; ];
MIN_FONT_SIZE = 1; MIN_FONT_SIZE = 1;
MAX_FONT_SIZE = 7; MAX_FONT_SIZE = 7;
isShowFontColorPane = false; isShowFontColorPane = false;
isShowBGColorPane = false; isShowBGColorPane = false;
fontSizeRange: number[]; fontSizeRange = [
// {name: '1号', value: 9},
// {name: '2号', value: 13},
// {name: '3号', value: 16},
// {name: '4号', value: 18},
// {name: '5号', value: 24},
// {name: '6号', value: 32},
];
editorContent = ''; editorContent = '';
...@@ -45,25 +145,17 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -45,25 +145,17 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
loopCnt = 0; loopCnt = 0;
maxLoops = 20; maxLoops = 20;
groupIconsCount = {
a: Array.from(Array(11).keys()), @ViewChild('titleEl', {static: true}) titleEl: ElementRef;
b: Array.from(Array(8).keys()),
c: Array.from(Array(8).keys()),
};
prevIcons = [];
prevType = '';
@ViewChild('titleEl') titleEl: ElementRef;
titleEW = null; titleEW = null;
@Input() @Input()
titleObj = { titleObj = {
type: 'a',
content: '', content: '',
icons: [],
audio_url: '' audio_url: ''
}; };
@Input()
withIcon = true;
@Output() @Output()
titleUpdated = new EventEmitter(); titleUpdated = new EventEmitter();
...@@ -84,16 +176,12 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -84,16 +176,12 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
let defObj = this.titleObj; let defObj = this.titleObj;
if (!vars.titleObj.currentValue) { if (!vars.titleObj.currentValue) {
defObj = { defObj = {
type: 'a',
content: '', content: '',
icons: [],
audio_url: '' audio_url: ''
}; };
} else { } else {
defObj = vars.titleObj.currentValue; defObj = vars.titleObj.currentValue;
} }
this.titleObj.icons = defObj.icons || [];
this.titleObj.type = defObj.type || 'a';
this.titleObj.content = defObj.content || ''; this.titleObj.content = defObj.content || '';
this.titleObj.audio_url = defObj.audio_url || ''; this.titleObj.audio_url = defObj.audio_url || '';
this.titleEW.document.body.innerHTML = this.titleObj.content; this.titleEW.document.body.innerHTML = this.titleObj.content;
...@@ -102,33 +190,23 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -102,33 +190,23 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
ngOnInit() { ngOnInit() {
if (!this.titleObj) { if (!this.titleObj) {
this.titleObj = { this.titleObj = {
type: 'a',
content: '', content: '',
icons: [],
audio_url: '' audio_url: ''
}; };
} }
this.titleObj.icons = this.titleObj.icons || [];
this.titleObj.type = this.titleObj.type || 'a';
this.titleObj.content = this.titleObj.content || ''; this.titleObj.content = this.titleObj.content || '';
this.titleObj.audio_url = this.titleObj.audio_url || ''; this.titleObj.audio_url = this.titleObj.audio_url || '';
this.editorContent = `<html lang="en"><head><meta charset="utf-8"> this.editorContent = editorTpl.replace('{{content}}', this.titleObj.content) ;
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body style="height:48px;overflow: hidden;margin: 0;padding: 0 .5rem;background: #FFF;line-height: 48px;">
${this.titleObj.content}
</body>
</html>`;
this.titleEW = this.titleEl.nativeElement.contentWindow; this.titleEW = this.titleEl.nativeElement.contentWindow;
console.log('this.titleEW', this.titleEW);
const tdoc = this.titleEW.document; const tdoc = this.titleEW.document;
tdoc.designMode = "on"; tdoc.designMode = 'on';
tdoc.open('text/html', 'replace'); tdoc.open('text/html', 'replace');
tdoc.write(this.editorContent); tdoc.write(this.editorContent);
tdoc.close(); tdoc.close();
tdoc.addEventListener("keypress", this.keyPress, true); tdoc.addEventListener('keypress', this.keyPress, true);
tdoc.addEventListener("blur", () => { tdoc.addEventListener('blur', () => {
if (this.titleObj.content === this.titleEW.document.body.innerHTML.trim()) { if (this.titleObj.content === this.titleEW.document.body.innerHTML.trim()) {
return; return;
} }
...@@ -159,30 +237,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -159,30 +237,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
ngOnDestroy(): void { ngOnDestroy(): void {
} }
iconsChanges(val) {
let a = this.titleObj.icons;
let b = val;
if (a.length > b.length) {
const diff = a.filter(x => !b.includes(x));
const ti = [...this.titleObj.icons];
for (let i = 0; i < diff.length; i++) {
const d = diff[i];
const idx = ti.indexOf(d);
ti.splice(idx, 1);
}
this.titleObj.icons = ti;
} else {
const diff = b.filter(x => !a.includes(x));
this.titleObj.icons = [...this.titleObj.icons, ...diff];
}
this.shouldSave();
}
typeChange(val) {
this.titleObj.icons = [];
this.shouldSave();
}
keyPress(evt) { keyPress(evt) {
try { try {
...@@ -195,9 +250,9 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -195,9 +250,9 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
const key = String.fromCharCode(evt.charCode).toLowerCase(); const key = String.fromCharCode(evt.charCode).toLowerCase();
let cmd = ''; let cmd = '';
switch (key) { switch (key) {
case 'b': cmd = "bold"; break; case 'b': cmd = 'bold'; break;
case 'i': cmd = "italic"; break; case 'i': cmd = 'italic'; break;
case 'u': cmd = "underline"; break; case 'u': cmd = 'underline'; break;
} }
...@@ -214,10 +269,13 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -214,10 +269,13 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
alert(e); alert(e);
} }
} }
execEditorCommand(command, option?: any) { execEditorCommand(command, option?: any) {
console.log('sssss');
try { try {
this.titleEW.focus(); this.titleEW.focus();
this.titleEW.document.execCommand(command, false, option); const result = this.titleEW.document.execCommand(command, false, option);
console.log(result);
this.loopCnt = 0; this.loopCnt = 0;
return false; return false;
...@@ -229,7 +287,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -229,7 +287,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
}, 100); }, 100);
this.loopCnt += 1; this.loopCnt += 1;
} else { } else {
alert("Error executing command."); alert('Error executing command.');
} }
} }
} }
...@@ -242,7 +300,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -242,7 +300,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
this.execEditorCommand('forecolor', this.__fontColor); this.execEditorCommand('forecolor', this.__fontColor);
} }
onChangeFontFamily(font) { onChangeFontFamily(font) {
this.execEditorCommand('fontname', font); this.execEditorCommand('fontName', font);
} }
onChangeFontSize(size?: any) { onChangeFontSize(size?: any) {
...@@ -272,9 +330,10 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ...@@ -272,9 +330,10 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy,
this.titleUpdated.emit(this.titleObj); this.titleUpdated.emit(this.titleObj);
} }
shouldSave = () => { shouldSave = () => {
console.log('title shouldSave'); console.log('title shouldSave', this.titleObj);
this.titleObj.content = this.titleEW.document.body.innerHTML.trim(); this.titleObj.content = this.titleEW.document.body.innerHTML.trim();
this.titleUpdated.emit(this.titleObj); this.titleUpdated.emit(this.titleObj);
} }
} }
@import '../../style/common_mixin'; @import '../../style/common_mixin.css';
.cmp-player-content-wrapper{ .cmp-player-content-wrapper{
max-height: 100%; max-height: 100%;
......
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
ElementRef, ElementRef,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
OnInit, OnInit,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
@Component({ @Component({
...@@ -18,21 +18,21 @@ import { ...@@ -18,21 +18,21 @@ import {
export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
@ViewChild('wrapperEl') wrapperEl: ElementRef; @ViewChild('wrapperEl', {static: true }) wrapperEl: ElementRef;
// // aspect ratio? // // aspect ratio?
@Input() ratio; @Input() ratio;
_w: string; _w: string;
_h: string; _h: string;
constructor() { constructor() {
if (window.innerHeight < window.innerWidth) { if (window.innerHeight < window.innerWidth) {
this._h = '100%'; this._h = '100%';
this._w = 'auto'; this._w = 'auto';
} else { } else {
this._w = '100%'; this._w = '100%';
this._h = 'auto'; this._h = 'auto';
} }
} }
ngOnInit() { ngOnInit() {
if (!this.ratio) { if (!this.ratio) {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<!--[nzBeforeUpload]="customUpload">--> <!--[nzBeforeUpload]="customUpload">-->
<div class="p-box d-flex align-items-center"> <div class="p-box d-flex align-items-center">
<div class="p-upload-icon" *ngIf="!picUrl && !uploading"> <div class="p-upload-icon" *ngIf="!picUrl && !uploading">
<i nz-icon type="cloud-upload" theme="outline" [style.font-size]="iconSize + 'em'"></i> <i nz-icon nzType="cloud-upload" nzTheme="outline" [style.font-size]="iconSize + 'em'"></i>
<div class="m-3"></div> <div class="m-3"></div>
<span>{{TIP}}</span> <span>{{TIP}}</span>
<!--<div class="mt-5 p-progress-bar" *ngIf="uploading">--> <!--<div class="mt-5 p-progress-bar" *ngIf="uploading">-->
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="p-upload-progress-bg" *ngIf="uploading"> <div class="p-upload-progress-bg" *ngIf="uploading">
<div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text"> <div class="i-text">
<fa name="cloud-upload"></fa> <fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading... Uploading...
</div> </div>
</div> </div>
...@@ -32,6 +32,6 @@ ...@@ -32,6 +32,6 @@
nz-popconfirm nzTitle="Are you sure ?" nz-popconfirm nzTitle="Are you sure ?"
(nzOnConfirm)="onDelete()" (nzOnConfirm)="onDelete()"
> >
<i nz-icon type="close" theme="outline"></i> <i nz-icon nzType="close" nzTheme="outline"></i>
</div> </div>
</div> </div>
@import '../../style/common_mixin'; @import '../../style/common_mixin.css';
.p-image-uploader { .p-image-uploader {
position: relative; position: relative;
...@@ -53,9 +53,11 @@ ...@@ -53,9 +53,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
@include k-img-bg();
} }
} }
.d-flex{
display: flex;
}
} }
.p-btn-delete { .p-btn-delete {
......
<div class="p-video-box">
<div class="up-video" style="display: flex;"> <div class="up-video" style="display: flex;">
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"--> <!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"--> <!--[nzShowUploadList]="false"-->
...@@ -16,8 +16,7 @@ ...@@ -16,8 +16,7 @@
<button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading" <button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
[nzLoading]="uploading" > [nzLoading]="uploading" >
<i nz-icon type="plus" theme="outline"></i> <i nz-icon nzType="plus" nzTheme="outline"></i>
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span> <span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
<!--<span>Select Video</span>--> <!--<span>Select Video</span>-->
</button> </button>
...@@ -56,9 +55,9 @@ ...@@ -56,9 +55,9 @@
</div> </div>
<div class="p-box d-flex align-items-center p-video-uploader" style="top: 20px;"> <div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading"> <div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon type="upload" theme="outline"></i> <i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div> <div class="m-3"></div>
<span>Click here to upload video</span> <span>Click here to upload video</span>
<div class="mt-5 p-progress-bar" *ngIf="uploading"> <div class="mt-5 p-progress-bar" *ngIf="uploading">
...@@ -70,26 +69,26 @@ ...@@ -70,26 +69,26 @@
[ngClass]="{'smart-bar': showUploadBtn}" > [ngClass]="{'smart-bar': showUploadBtn}" >
<div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text"> <div class="i-text">
<fa name="cloud-upload"></fa> <fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading... Uploading...
</div> </div>
</div> </div>
<div class="p-upload-check-bg" *ngIf="checking"> <div class="p-upload-check-bg" *ngIf="checking">
<div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text"> <div class="i-text">
<fa name="cloud-upload"></fa> <fa-icon icon="cloud-upload-alt"></fa-icon>
<i nz-icon type="loading" theme="outline"></i>Checking... <i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
</div> </div>
</div> </div>
<div class="p-preview" *ngIf="!showUploadBtn && !uploading && videoUrl " > <div class="p-preview" *ngIf="!uploading && videoUrl " >
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>--> <!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video [src]="safeVideoUrl(videoUrl)" controls #videoNode (loadedmetadata)="videoLoadedMetaData()"></video> <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video>
</div> </div>
</div> </div>
<div [style.display]="!checkVideoExists?'none':''"> <div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon type="loading" theme="outline"></i> checking file to upload</span> <span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
</div> </div>
@import '../../style/common_mixin'; @import '../../style/common_mixin.css';
/*.p-video-box{
bottom: 0;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
padding-top: 56.25%;
//font-size: 4rem;
position: relative;
.p-upload-icon{
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50% ,-50%);
}
}*/
.p-video-uploader { .p-video-uploader {
position: relative; position: relative;
display: block; display: block;
...@@ -17,50 +33,56 @@ ...@@ -17,50 +33,56 @@
background-color: #fafafa; background-color: #fafafa;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
.p-upload-icon {
text-align: center;
margin: auto;
.anticon-upload {
color: #888;
font-size: 5rem;
}
.p-progress-bar {
position: relative;
width: 20rem;
height: 1.5rem;
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;
}
}
}
.p-preview {
width: 100%;
height: 100%;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
video{
max-height: 100%;
max-width: 100%;
}
}
} }
} }
.p-upload-icon {
text-align: center;
margin: auto;
}
.p-upload-icon .anticon-upload {
color: #888;
font-size: 5rem;
}
p-progress-bar {
position: relative;
width: 20rem;
height: 1.5rem;
border: 1px solid #ccc;
border-radius: 1rem;
}
.p-progress-bar .p-progress-bg {
background-color: #1890ff;
border-radius: 1rem;
height: 100%;
}
.p-progress-bar .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;
}
.p-preview {
width: 100%;
height: 100%;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
}
.p-preview video{
max-height: 100%;
max-width: 100%;
position: absolute;
display: flex;
}
.p-btn-delete { .p-btn-delete {
position: absolute; position: absolute;
right: -0.5rem; right: -0.5rem;
......
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SecurityContext, ViewChild} from '@angular/core'; import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SecurityContext, ViewChild} from '@angular/core';
import {NzMessageService, UploadFile} from 'ng-zorro-antd'; import {NzMessageService, UploadChangeParam, UploadFile, UploadFileStatus} from 'ng-zorro-antd';
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
...@@ -24,7 +24,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -24,7 +24,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
@Input() @Input()
videoUrl = ''; videoUrl = '';
@ViewChild('videoNode') @ViewChild('videoNode', {static: true })
videoNode: ElementRef; videoNode: ElementRef;
...@@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
item: any; item: any;
// videoItem = null; // videoItem = null;
uploadUrl = (<any> window).courseware.uploadUrl(); uploadUrl = (window as any).courseware.uploadUrl();
uploadData = (<any> window).courseware.uploadData(); uploadData = (window as any).courseware.uploadData();
constructor(private nzMessageService: NzMessageService, constructor(private nzMessageService: NzMessageService,
private sanitization: DomSanitizer private sanitization: DomSanitizer
...@@ -71,7 +71,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -71,7 +71,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
} }
safeVideoUrl(url) { safeVideoUrl(url) {
console.log(url) console.log(url);
return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`; return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
} }
videoLoadedMetaData() { videoLoadedMetaData() {
...@@ -79,7 +79,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -79,7 +79,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
} }
handleChange(info: { type: string, file: UploadFile, event: any }): void { handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void {
console.log('info:' , info); console.log('info:' , info);
...@@ -109,7 +109,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -109,7 +109,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
break; break;
case 'progress': case 'progress':
this.progress = parseInt(info.event.percent, 10); this.progress = info.event.percent;
this.doProgress(this.progress); this.doProgress(this.progress);
break; break;
} }
...@@ -152,9 +152,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -152,9 +152,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
if (duration) { if (duration) {
duration = duration * 1000; duration = duration * 1000;
} }
file['height'] = height; file.height = height;
file['width'] = width; file.width = width;
file['duration'] = duration; file.duration = duration;
vid.preload = 'none'; vid.preload = 'none';
vid.src = ''; vid.src = '';
vid.remove(); vid.remove();
......
@import '../style/common_mixin'; @import '../style/common_mixin.css';
.model-content { .model-content {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="model-content"> <div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 300px;"> <div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
...@@ -15,12 +15,14 @@ ...@@ -15,12 +15,14 @@
[audioUrl]="item.audio_url" [audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder> ></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 style="position: absolute; left: 1000px; top: 100px; width: 300px;"> <!-- div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()"> <input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder> ></app-audio-recorder>
</div> </div -->
......
...@@ -5,7 +5,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -5,7 +5,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'] styleUrls: ['./form.component.css']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
......
...@@ -15,7 +15,7 @@ class Sprite { ...@@ -15,7 +15,7 @@ class Sprite {
constructor(ctx = null) { constructor(ctx = null) {
if (!ctx) { if (!ctx) {
this.ctx = window['curCtx']; this.ctx = (window as any).curCtx;
} else { } else {
this.ctx = ctx; this.ctx = ctx;
} }
...@@ -158,6 +158,7 @@ export class MySprite extends Sprite { ...@@ -158,6 +158,7 @@ export class MySprite extends Sprite {
if (this._shadowFlag) { if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX; this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY; this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur; this.ctx.shadowBlur = this._shadowBlur;
...@@ -175,6 +176,8 @@ export class MySprite extends Sprite { ...@@ -175,6 +176,8 @@ export class MySprite extends Sprite {
} }
} }
updateChildren() { updateChildren() {
...@@ -359,7 +362,7 @@ export class ColorSpr extends MySprite { ...@@ -359,7 +362,7 @@ export class ColorSpr extends MySprite {
g = 0; g = 0;
b = 0; b = 0;
createGSCanvas() { createGSCanvas(){
if (!this.img) { if (!this.img) {
return; return;
...@@ -502,15 +505,15 @@ export class Label extends MySprite { ...@@ -502,15 +505,15 @@ export class Label extends MySprite {
fontSize = 40; fontSize = 40;
fontColor = '#000000'; fontColor = '#000000';
fontWeight = 900; fontWeight = 900;
maxWidth; _maxWidth;
outline = 0; outline = 0;
outlineColor = '#ffffff'; outlineColor = '#ffffff';
_shadowFlag = false; // _shadowFlag = false;
_shadowColor; // _shadowColor;
_shadowOffsetX; // _shadowOffsetX;
_shadowOffsetY; // _shadowOffsetY;
_shadowBlur; // _shadowBlur;
_outlineFlag = false; _outlineFlag = false;
_outLineWidth; _outLineWidth;
...@@ -541,7 +544,7 @@ export class Label extends MySprite { ...@@ -541,7 +544,7 @@ export class Label extends MySprite {
setMaxSize(w) { setMaxSize(w) {
this.maxWidth = w; this._maxWidth = w;
this.refreshSize(); this.refreshSize();
if (this.width >= w) { if (this.width >= w) {
this.scaleX *= w / this.width; this.scaleX *= w / this.width;
...@@ -568,16 +571,16 @@ export class Label extends MySprite { ...@@ -568,16 +571,16 @@ export class Label extends MySprite {
.start(); // Start the tween immediately. .start(); // Start the tween immediately.
} }
setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') { // setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
//
this._shadowFlag = true; // this._shadowFlag = true;
this._shadowColor = color; // this._shadowColor = color;
// 将阴影向右移动15px,向上移动10px // // 将阴影向右移动15px,向上移动10px
this._shadowOffsetX = 5; // this._shadowOffsetX = 5;
this._shadowOffsetY = 5; // this._shadowOffsetY = 5;
// 轻微模糊阴影 // // 轻微模糊阴影
this._shadowBlur = 5; // this._shadowBlur = 5;
} // }
setOutline(width = 5, color = '#ffffff') { setOutline(width = 5, color = '#ffffff') {
...@@ -836,6 +839,40 @@ export class RichText extends Label { ...@@ -836,6 +839,40 @@ export class RichText extends Label {
export class LineRect extends MySprite {
lineColor = "#ffffff";
lineWidth = 10;
setSize(w, h) {
this.width = w;
this.height = h;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
this.ctx.lineTo(this._offX, this._offY + this.height);
this.ctx.closePath();
this.ctx.lineWidth = this.lineWidth;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite { export class ShapeRect extends MySprite {
...@@ -1076,7 +1113,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1076,7 +1113,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
} }
if (update) { if (update) {
tween.onUpdate( (a, b) => { tween.onUpdate( (a, b) => {
update(a, b); update(a, b);
}); });
} }
...@@ -1129,7 +1166,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) ...@@ -1129,7 +1166,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
callBack(); callBack();
}); });
} }
if (easing) { if (easing) {
...@@ -1327,16 +1364,6 @@ export function removeItemFromArr(arr, item) { ...@@ -1327,16 +1364,6 @@ export function removeItemFromArr(arr, item) {
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
...@@ -1380,6 +1407,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = ...@@ -1380,6 +1407,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
} }
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
export function delayCall(callback, second) { export function delayCall(callback, second) {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
...@@ -1461,9 +1495,9 @@ export function jelly(item, time = 0.7) { ...@@ -1461,9 +1495,9 @@ export function jelly(item, time = 0.7) {
export function showPopParticle(img, pos, parent) { export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
const num = 20;
for (let i = 0; i < num; i ++) { for (let i = 0; i < num; i ++) {
const particle = new MySprite(); const particle = new MySprite();
...@@ -1475,8 +1509,8 @@ export function showPopParticle(img, pos, parent) { ...@@ -1475,8 +1509,8 @@ export function showPopParticle(img, pos, parent) {
const randomR = 360 * Math.random(); const randomR = 360 * Math.random();
particle.rotation = randomR; particle.rotation = randomR;
const randomS = 0.5 + Math.random() * 0.5; const randomS = 0.3 + Math.random() * 0.7;
particle.setScaleXY(randomS); particle.setScaleXY(randomS * 0.3);
const randomX = Math.random() * 20 - 10; const randomX = Math.random() * 20 - 10;
particle.x += randomX; particle.x += randomX;
...@@ -1484,16 +1518,32 @@ export function showPopParticle(img, pos, parent) { ...@@ -1484,16 +1518,32 @@ export function showPopParticle(img, pos, parent) {
const randomY = Math.random() * 20 - 10; const randomY = Math.random() * 20 - 10;
particle.y += randomY; particle.y += randomY;
const randomL = 40 + Math.random() * 40; const randomL = minLen + Math.random() * (maxLen - minLen);
const randomA = 360 * Math.random(); const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL); const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => { moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
}, TWEEN.Easing.Exponential.Out); }, TWEEN.Easing.Exponential.Out);
scaleItem(particle, 0, 0.6, () => { // scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem(particle, randomS, 0.6, () => {
}, TWEEN.Easing.Exponential.Out);
setTimeout(() => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
});
} }
} }
...@@ -1535,7 +1585,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1535,7 +1585,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}; };
const move1 = () => { const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 8, () => { moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
move2(); move2();
}, easing); }, easing);
}; };
......
...@@ -18,12 +18,12 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -18,12 +18,12 @@ import TWEEN from '@tweenjs/tween.js';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
styleUrls: ['./play.component.scss'] styleUrls: ['./play.component.css']
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas') canvas: ElementRef; @ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef; @ViewChild('wrap', {static: true }) wrap: ElementRef;
// 数据 // 数据
data; data;
......
@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;
}
.anticon{
vertical-align: .1em!important;
}
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>NgOne</title> <title>NgOne</title>
<base href="/"> <base href="/">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
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