Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
jj_learn_word
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
jj_learn_word
Commits
c5ea2600
Commit
c5ea2600
authored
Jan 12, 2023
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 添加拖拽
parent
ea7c40a1
Changes
15
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
1587 additions
and
1116 deletions
+1587
-1116
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+1
-1
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+33
-0
Unit.ts
form_angular/src/app/common/custom-hot-zone/Unit.ts
+184
-791
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+197
-21
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+6
-105
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+925
-134
upload-dragon-bone.component.html
...mmon/upload-dragon-bone/upload-dragon-bone.component.html
+2
-2
upload-dragon-bone.component.ts
...common/upload-dragon-bone/upload-dragon-bone.component.ts
+39
-0
upload-image-with-preview.component.html
...age-with-preview/upload-image-with-preview.component.html
+4
-2
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+35
-0
upload-video.component.html
...r/src/app/common/upload-video/upload-video.component.html
+47
-56
upload-video.component.ts
...lar/src/app/common/upload-video/upload-video.component.ts
+50
-0
form.component.html
form_angular/src/app/form/form.component.html
+2
-4
form.component.ts
form_angular/src/app/form/form.component.ts
+15
-0
drag-test.html
form_angular/src/drag-test.html
+47
-0
No files found.
form_angular/src/app/common/audio-recorder/audio-recorder.component.html
View file @
c5ea2600
<div
class=
"d-flex"
>
<div
class=
"d-flex"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<div
class=
"p-btn-record d-flex"
>
<div
class=
"p-btn-record d-flex"
>
<div
class=
"btn-clear"
style=
"cursor: pointer"
(
click
)="
onBtnClearAudio
()"
*
ngIf=
"withRmBtn && (audioUrl || audioBlob)"
>
<div
class=
"btn-clear"
style=
"cursor: pointer"
(
click
)="
onBtnClearAudio
()"
*
ngIf=
"withRmBtn && (audioUrl || audioBlob)"
>
<fa-icon
icon=
"times"
></fa-icon>
<fa-icon
icon=
"times"
></fa-icon>
...
...
form_angular/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
c5ea2600
...
@@ -276,6 +276,39 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -276,6 +276,39 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this
.
progress
=
Math
.
floor
(
p
*
100
);
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
}
linkInputed
(
url
,
name
)
{
url
=
url
.
substring
(
0
,
url
.
lastIndexOf
(
"
.
"
))
+
"
_l.mp3
"
;
this
.
audioUrl
=
url
;
this
.
audioUploaded
.
emit
({
url
});
this
.
audioName
.
emit
(
name
);
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp3
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线音频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
}
enum
Type
{
enum
Type
{
...
...
form_angular/src/app/common/custom-hot-zone/Unit.ts
View file @
c5ea2600
This diff is collapsed.
Click to expand it.
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
c5ea2600
...
@@ -32,15 +32,112 @@
...
@@ -32,15 +32,112 @@
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<div
*
ngIf=
"customTypeGroupArr"
>
<nz-radio-group
[
ngModel
]="
it
.
gIdx
"
(
ngModelChange
)="
customRadioChange
($
event
,
it
)"
style=
"display: flex; align-items: center; justify-content: center; flex-wrap: wrap;"
>
<div
*
ngFor=
"let group of customTypeGroupArr; let gIdx = index"
style=
"display: flex; "
>
<label
nz-radio
nzValue=
"{{gIdx}}"
>
{{group.name}}
</label>
</div>
</nz-radio-group>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</nz-radio-group>
</div> -->
</div>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].text"
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].anima"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].animaSmall"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaSmallBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画(小)
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].audio"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">-->
<!-- <app-custom-action-->
<!-- style="margin: auto"-->
<!-- [item]="it ? it['actionData_' + it.gIdx] : {}"-->
<!-- [type]="customTypeGroupArr[it.gIdx].action.type"-->
<!-- [option]="customTypeGroupArr[it.gIdx].action.option"-->
<!-- (save)="onSaveCustomAction($event, it)">-->
<!-- ></app-custom-action>-->
<!-- </div>-->
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.isShowPos"
style=
"display: flex; align-items: center; justify-content: center; margin-top: 5px;"
>
x:
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
posX
"
style=
"width: 50px; margin-right: 15px;"
(
blur
)="
saveItemPos
(
it
)"
>
y:
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
posY
"
style=
"width: 50px"
(
blur
)="
saveItemPos
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.select"
align=
"center"
>
<nz-select
[(
ngModel
)]="
it
.
selectType
"
nzAllowClear
nzPlaceHolder=
"Choose"
style=
"width: 70%; margin-top: 5px;"
>
<nz-option
*
ngFor=
"let s of customTypeGroupArr[it.gIdx]?.select"
[
nzValue
]="
s
.
value
"
[
nzLabel
]="
s
.
label
"
>
</nz-option>
</nz-select>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.label"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<span
style=
"width: 30%;"
>
{{customTypeGroupArr[it.gIdx].label + ':'}}
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
labelText
"
(
blur
)="
saveText
(
it
)"
>
</div>
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">-->
<!-- <span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>-->
<!-- <app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>-->
<!-- </div>-->
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.isCopy"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<button
nz-button
(
click
)="
copyItem
(
it
)"
>
<i
nz-icon
nzType=
"copy"
nzTheme=
"outline"
></i>
复制粘贴
</button>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
[picUrl]="it?.pic_url"
...
@@ -52,13 +149,26 @@
...
@@ -52,13 +149,26 @@
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
</div>
<div
style=
"width: 100%; margin-top: 5px;"
>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<app-audio-recorder
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
></app-audio-recorder>
</div>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
</div>
</div>
...
@@ -83,12 +193,29 @@
...
@@ -83,12 +193,29 @@
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
<i
nz-icon
nzType=
"save"
></i>
Save
Save
</button>
</button>
<div
*
ngIf=
"isCopyData"
style=
"height: 40px; display: flex; justify-items: center;"
>
<label
style=
"margin-left: 40px"
nz-checkbox
[(
ngModel
)]="
bgItem
.
isShowDebugLine
"
>
显示辅助框
</label>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyHotZoneData
()"
>
复制基础数据
</button>
<div
style=
"margin-left: 10px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
</div>
</div>
...
@@ -98,3 +225,52 @@
...
@@ -98,3 +225,52 @@
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<!--龙骨面板-->
<nz-modal
[(
nzVisible
)]="
animaPanelVisible
"
nzTitle=
"配置资源文件"
(
nzAfterClose
)="
closeAfterPanel
()"
(
nzOnCancel
)="
animaPanelCancel
()"
(
nzOnOk
)="
animaPanelOk
()"
nzOkText=
"保存"
>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 ske_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
skeJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isSkeJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"skeJsonData['name']"
style=
"margin-left: 10px"
><u>
{{skeJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texJsonData['name']"
style=
"margin-left: 10px"
><u>
{{texJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_png 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texPngHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexPngLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texPngData['name']"
style=
"margin-left: 10px"
><u>
{{texPngData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames"
>
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
c5ea2600
...
@@ -81,6 +81,10 @@
...
@@ -81,6 +81,10 @@
}
}
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
h5
{
margin-top
:
1rem
;
margin-top
:
1rem
;
}
}
...
@@ -89,8 +93,8 @@ h5 {
...
@@ -89,8 +93,8 @@ h5 {
@font-face
@font-face
{
{
font-family
:
'BRLNSR_
1'
;
font-family
:
'ahronbd-
1'
;
src
:
url("/assets/font/BRLNSR_1.TTF
")
;
src
:
url("/assets/font/ahronbd-1.ttf
")
;
}
}
...
@@ -105,106 +109,3 @@ h5 {
...
@@ -105,106 +109,3 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// 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");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
c5ea2600
This diff is collapsed.
Click to expand it.
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
(
dragover
)="
handle_dragover
($
event
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
{{btnName}}
{{btnName}}
</button>
</button>
...
...
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
View file @
c5ea2600
...
@@ -178,4 +178,43 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
...
@@ -178,4 +178,43 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
linkInputed
(
ske
,
tex
,
png
)
{
this
.
skeJsonData
[
"
url
"
]
=
ske
.
url
;
this
.
skeJsonData
[
"
name
"
]
=
ske
.
name
;
this
.
texJsonData
[
"
url
"
]
=
tex
.
url
;
this
.
texJsonData
[
"
name
"
]
=
tex
.
name
;
this
.
texPngData
[
"
url
"
]
=
png
.
url
;
this
.
texPngData
[
"
name
"
]
=
png
.
name
;
this
.
animaPanelOk
();
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
ske
,
tex
,
png
}
=
JSON
.
parse
(
dt
);
if
(
!
ske
||
!
tex
||
!
png
||
ske
.
url
.
indexOf
(
"
teach
"
)
<
0
||
ske
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
ske
.
url
.
indexOf
(
"
.json
"
)
<
0
||
tex
.
url
.
indexOf
(
"
teach
"
)
<
0
||
tex
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
tex
.
url
.
indexOf
(
"
.json
"
)
<
0
||
png
.
url
.
indexOf
(
"
teach
"
)
<
0
||
png
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
png
.
url
.
indexOf
(
"
.png
"
)
<
0
||
!
ske
.
name
||
!
tex
.
name
||
!
png
.
name
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
return
;
}
this
.
linkInputed
(
ske
,
tex
,
png
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
}
}
}
}
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
[
nzShowUploadList
]="
false
"
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
>
(
nzChange
)="
handleChange
($
event
)"
>
<!--[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"
>
...
...
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
c5ea2600
...
@@ -155,4 +155,39 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
...
@@ -155,4 +155,39 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
linkInputed
(
url
)
{
const
file
=
{
response
:
{
url
}
};
const
img
=
new
Image
();
img
.
addEventListener
(
'
load
'
,
()
=>
{
const
height
=
img
.
naturalHeight
;
const
width
=
img
.
naturalWidth
;
file
[
'
height
'
]
=
height
;
file
[
'
width
'
]
=
width
;
img
.
remove
();
this
.
imageUploaded
.
emit
(
file
.
response
);
});
img
.
src
=
url
;
this
.
picUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
||
dt
.
indexOf
(
"
teach
"
)
<
0
||
dt
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.jpg
"
,
"
.jpeg
"
,
"
.png
"
,
"
.bmp
"
,
"
.JPG
"
,
"
.JPEG
"
,
"
.PNG
"
,
"
.BMP
"
];
if
(
!
white
.
includes
(
dt
.
substr
(
dt
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
dt
);
}
}
}
form_angular/src/app/common/upload-video/upload-video.component.html
View file @
c5ea2600
<div
class=
"p-video-box"
>
<div
class=
"p-video-box"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<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"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<!--style="margin-right: 1rem">-->
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
[
nzShowUploadList
]="
false
"
nzAccept=
".mp4"
[
nzShowUploadList
]="
false
"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
nzAccept =
".mp4"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
<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
nzType=
"plus"
nzTheme=
"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>-->
...
@@ -54,8 +49,8 @@
...
@@ -54,8 +49,8 @@
-->
-->
</div>
</div>
<div
class=
"p-box d-flex align-items-center p-video-uploader"
>
<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
nzType=
"upload"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"upload"
nzTheme=
"outline"
></i>
<div
class=
"m-3"
></div>
<div
class=
"m-3"
></div>
...
@@ -65,8 +60,7 @@
...
@@ -65,8 +60,7 @@
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
</div>
</div>
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
[
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-icon
icon=
"cloud-upload-alt"
></fa-icon>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
...
@@ -80,15 +74,12 @@
...
@@ -80,15 +74,12 @@
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
</div>
</div>
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!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
></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
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
<span><i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
</div>
</div>
</div>
\ No newline at end of file
</div>
form_angular/src/app/common/upload-video/upload-video.component.ts
View file @
c5ea2600
...
@@ -225,5 +225,55 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
...
@@ -225,5 +225,55 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
// console.log(Math.floor(p * 100));
// console.log(Math.floor(p * 100));
this
.
progress
=
Math
.
floor
(
p
*
100
);
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
}
linkInputed
(
url
,
name
)
{
const
file
=
{
response
:
{
url
}
};
const
vid
=
document
.
createElement
(
'
video
'
);
vid
.
addEventListener
(
'
loadedmetadata
'
,
()
=>
{
const
height
=
vid
.
videoHeight
;
const
width
=
vid
.
videoWidth
;
let
duration
=
vid
.
duration
;
if
(
duration
)
{
duration
=
duration
*
1000
;
}
file
[
"
height
"
]
=
height
;
file
[
"
width
"
]
=
width
;
file
[
"
duration
"
]
=
duration
;
vid
.
preload
=
'
none
'
;
vid
.
src
=
''
;
vid
.
remove
();
this
.
videoUploaded
.
emit
(
file
.
response
);
});
vid
.
src
=
file
.
response
.
url
;
this
.
videoUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp4
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线视频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
}
form_angular/src/app/form/form.component.html
View file @
c5ea2600
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"padding: 10px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<textarea
style=
"width: 955px; height: 300px;"
(
blur
)="
load
()"
#
itemTextarea
>
{{itemStr}}
</textarea>
<button
(
click
)="
copyData
();"
>
Copy
</button>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<span
style=
"font-size: 20px;"
>
标题:
</span>
<span
style=
"font-size: 20px;"
>
标题:
</span>
...
@@ -19,6 +15,8 @@
...
@@ -19,6 +15,8 @@
></app-audio-recorder>
></app-audio-recorder>
</div>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
class=
"border"
style=
"width: 950px;"
>
<div
class=
"border"
style=
"width: 950px;"
>
...
...
form_angular/src/app/form/form.component.ts
View file @
c5ea2600
...
@@ -40,4 +40,19 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -40,4 +40,19 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
item
.
audioFileName
=
name
;
this
.
item
.
audioFileName
=
name
;
this
.
save
();
this
.
save
();
}
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
// 网络文件 dt 的数据遵循如下格式
// 图片 "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// 音频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3", name: "test.mp3"};
// 视频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// 骨骼动画(JSON字符串) {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
}
}
}
\ No newline at end of file
form_angular/src/drag-test.html
0 → 100644
View file @
c5ea2600
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
Document
</title>
</head>
<body>
<img
id=
"drag"
style=
"width: 100px; height: 100px; background-color: gold;"
draggable=
"true"
ele-data=
"http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4"
src=
"http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png"
></img>
<div
id=
"target"
ondrop=
"handle_drop(event)"
ondragover=
"handle_dragover(event)"
style=
"position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; background: #00ffff;"
>
</div>
<script>
var
dragEl
=
document
.
getElementById
(
"
drag
"
);
dragEl
.
ondragstart
=
function
(
e
)
{
// 图片
// const dt = "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// e.dataTransfer.setData("text/plain", dt);
// 音频
const
dt
=
{
url
:
"
http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3
"
,
name
:
"
test.mp3
"
};
e
.
dataTransfer
.
setData
(
"
text/plain
"
,
JSON
.
stringify
(
dt
));
// 视频
// const dt = {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt));
// 骨骼动画
// const dt = {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt))
}
dragEl
.
drop
=
function
(
e
)
{
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
}
var
target
=
document
.
getElementById
(
'
target
'
)
// target.ondragover = handle_dragover
function
handle_dragover
(
e
)
{
e
.
preventDefault
()
}
function
handle_drop
(
e
)
{
}
</script>
</body>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment