Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_picture-group
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
ww_picture-group
Commits
858b617c
Commit
858b617c
authored
Jan 19, 2021
by
Li MingZhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 字少变大 更换背景
parent
1e7df9e2
Changes
4
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
533 additions
and
47 deletions
+533
-47
play.component.html
src/app/play/play.component.html
+2
-2
play.component.ts
src/app/play/play.component.ts
+69
-12
player-bg.png
src/assets/player-bg.png
+0
-0
yarn.lock
yarn.lock
+462
-33
No files found.
src/app/play/play.component.html
View file @
858b617c
...
...
@@ -26,7 +26,7 @@
<div
col-sm
[
style
.
width
]="
_WIDTH
"
class=
"item-box"
*
ngFor=
"let item of result[1]; let i = index"
>
<div
class=
"item"
>
<div
*
ngIf=
"item.showText"
class=
"display-item"
>
{{item.text}}
</div>
<div
*
ngIf=
"item.showText"
class=
"display-item"
[
style
]="
item
.
isBigFont
?
'
fontSize:
4vh
'
:
''"
>
{{item.text}}
</div>
<div
*
ngIf=
"item.showPic"
class=
"display-item"
>
<img
[
src
]="
item
.
pic_id
"
alt=
""
>
</div>
...
...
@@ -42,7 +42,7 @@
<div
col-sm
[
style
.
width
]="
_WIDTH
"
class=
"item-box"
*
ngFor=
"let item of options; let i = index"
>
<div
class=
"item"
(
click
)="
selectItem
(
item
,
$
event
)"
>
<div
*
ngIf=
"item.showText"
class=
"display-item"
>
{{item.text}}
</div>
<div
*
ngIf=
"item.showText"
class=
"display-item"
[
style
]="
item
.
isBigFont
?
'
fontSize:
4
.
5vh
'
:
''"
>
{{item.text}}
</div>
<div
*
ngIf=
"item.showPic"
class=
"display-item"
>
<img
[
src
]="
item
.
pic_id
"
alt=
""
>
</div>
...
...
src/app/play/play.component.ts
View file @
858b617c
import
{
Component
,
ElementRef
,
ApplicationRef
,
ChangeDetectorRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
,
OnChanges
,
AfterViewInit
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
ApplicationRef
,
ChangeDetectorRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
,
OnChanges
,
AfterViewInit
}
from
'
@angular/core
'
;
import
*
as
_
from
'
lodash
'
;
...
...
@@ -19,6 +19,8 @@ export class PlayComponent implements OnInit {
@
ViewChild
(
'
itemsContainer
'
)
itemsContainer
:
ElementRef
;
CURRENT_ITEM
=
null
;
CURRENT_ITEM_EL
=
null
;
CURRENT_ITEM_GROUP
=
-
1
;
...
...
@@ -34,39 +36,47 @@ export class PlayComponent implements OnInit {
this
.
rightAudio
.
load
();
this
.
wrongAudio
.
src
=
'
assets/wrong.mp3
'
;
this
.
wrongAudio
.
load
();
const
w
=
this
.
textSize
(
50
,
'
aaaa aaaa
'
);
}
ngOnInit
()
{
this
.
data
=
{
contentObj
:
{
groups
:
[
{
name
:
'
aaaa
'
,
options
:
[
{
showText
:
true
,
text
:
"
11111
"
},
{
showText
:
true
,
text
:
"
22222
"
}
]},
{
name
:
'
bbbb
'
,
options
:
[
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/2.png
"
},
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/3.png
"
},
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/4.png
"
}
]}
{
name
:
'
aaaa
'
,
options
:
[
{
showText
:
true
,
text
:
"
11111
"
},
{
showText
:
true
,
text
:
"
22222
"
}
]
},
{
name
:
'
bbbb
'
,
options
:
[
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/2.png
"
},
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/3.png
"
},
{
showPic
:
true
,
pic_id
:
"
assets/picture-group/4.png
"
}
]
}
]
}
};
// 获取数据
const
getData
=
(
window
as
any
).
courseware
.
getData
;
const
getData
=
(
window
as
any
).
courseware
.
getData
;
getData
((
data
)
=>
{
if
(
data
&&
typeof
data
===
'
object
'
)
{
this
.
data
=
data
;
}
this
.
init
();
this
.
addItemTextIsBigFont
();
window
[
"
air
"
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
this
.
refresh
();
},
this
.
saveKey
);
}
init
(){
init
()
{
this
.
result
=
[[],
[]];
let
item_length
=
0
;
const
groups
=
_
.
get
(
this
.
data
.
contentObj
,
'
groups
'
,
[]);
...
...
@@ -98,6 +108,21 @@ export class PlayComponent implements OnInit {
this
.
_WIDTH
=
item_length
>
4
?
'
20%
'
:
'
25%
'
;
}
addItemTextIsBigFont
()
{
const
arr
=
this
.
data
.
contentObj
.
groups
;
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
arr
[
i
].
options
)
{
arr
[
i
].
options
.
forEach
(
item
=>
{
if
(
item
.
showText
)
{
item
.
isBigFont
=
this
.
checkIsBigFont
(
item
.
text
);
}
});
}
}
console
.
log
(
'
this.data:
'
,
this
.
data
);
}
selectItem
(
item
,
evt
)
{
const
el
=
evt
.
currentTarget
.
parentNode
;
...
...
@@ -183,4 +208,36 @@ export class PlayComponent implements OnInit {
}
checkIsBigFont
(
text
)
{
text
=
text
.
replace
(
/
(
^
\s
*
)
|
(\s
*$
)
/g
,
""
);
const
index
=
text
.
search
(
/
\s
/
);
if
(
index
!=
-
1
)
{
return
false
;
}
const
size
=
this
.
textSize
(
50
,
text
);
console
.
log
(
`text is:
${
text
}
, size is:
${
size
.
width
}
`
)
return
size
.
width
<
54
;
}
textSize
(
fontSize
,
text
)
{
var
span
=
document
.
createElement
(
"
span
"
);
var
result
=
{
width
:
0
,
height
:
0
};
result
.
width
=
span
.
offsetWidth
;
result
.
height
=
span
.
offsetWidth
;
span
.
style
.
visibility
=
"
hidden
"
;
span
.
style
.
fontFamily
=
"
ChalkboardSE-Regular
"
;
span
.
style
.
fontSize
=
fontSize
;
document
.
body
.
appendChild
(
span
);
if
(
typeof
span
.
textContent
!=
"
undefined
"
)
span
.
textContent
=
text
;
else
span
.
innerText
=
text
;
result
.
width
=
span
.
offsetWidth
-
result
.
width
;
result
.
height
=
span
.
offsetHeight
-
result
.
height
;
span
.
parentNode
.
removeChild
(
span
);
return
result
;
}
}
src/assets/player-bg.png
View replaced file @
1e7df9e2
View file @
858b617c
47.2 KB
|
W:
|
H:
45 KB
|
W:
|
H:
2-up
Swipe
Onion skin
yarn.lock
View file @
858b617c
This diff is collapsed.
Click to expand it.
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