Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mlk
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
mlk
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