This repository has been archived by the owner on Jan 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 471
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
274 additions
and
26 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta charset="UTF-8" /> | ||
<title>live2d</title> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
</head> | ||
|
||
<body> | ||
<div id="app"> | ||
<canvas id="glcanvas" width="680" height="940" | ||
style="border:dashed 1px #CCC"> | ||
</canvas> | ||
</div> | ||
<script type="text/javascript" src="bundle.js?2247b509b28997915747"></script></body> | ||
|
||
</html> | ||
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>live2d</title> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> </head> <body> <div id=app> <canvas id=glcanvas width=680 height=940 style="border:dashed 1px #ccc"> </canvas> </div> <script type="text/javascript" src="bundle.js?ef3dcb53979916e0a13a"></script></body> </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -64,7 +64,9 @@ hexo.extend.helper.register('live2d', function (config) { | |
); | ||
return ` | ||
<script type="text/javascript" src="/live2d/script.js"></script> | ||
<canvas id="${config.id}" width="${config.width}" height="${config.height}" class="${config.className}"></canvas> | ||
<div id="[email protected]"> | ||
<canvas id="${config.id}" width="${config.width}" height="${config.height}" class="${config.className}"></canvas> | ||
</div> | ||
<style> | ||
#${config.id} { | ||
position: fixed; | ||
|
@@ -73,7 +75,19 @@ hexo.extend.helper.register('live2d', function (config) { | |
pointer-events: none; | ||
bottom: ${config.bottom}px; | ||
} | ||
live2d-message-dialog { | ||
position: fixed; | ||
right: ${config.width - 30}px; | ||
bottom: ${config.height - 70}px; | ||
z-index: 99999; | ||
font-size: 20px; | ||
} | ||
</style> | ||
<script>loadlive2d(${JSON.stringify(config.id)} ,${JSON.stringify(url.resolve("/live2d/assets/",models[config.model]))})</script> | ||
<script> | ||
setTimeout(function() { | ||
loadlive2d(${JSON.stringify(config.id)} ,${JSON.stringify(url.resolve("/live2d/assets/",models[config.model]))}); | ||
loadMessageDialog("[email protected]"); | ||
},0) | ||
</script> | ||
` | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
module.exports = { | ||
plugins: [ | ||
require('autoprefixer') | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
require('./style/message.scss') | ||
|
||
const htmltext = require('./template/message.html'); | ||
|
||
const defaultOption = { | ||
tagName: "live2d-message-dialog" | ||
}; | ||
|
||
let RootElement; | ||
|
||
let loading = true; | ||
|
||
let ElementLinks; | ||
|
||
function autoFitMessage() { | ||
ElementLinks.main.style.height = ElementLinks.message.clientHeight + 'px'; | ||
ElementLinks.main.style.width = ElementLinks.message.clientWidth + 'px'; | ||
} | ||
|
||
function loadMessageDialog(targetID, option) { | ||
option = Object.assign({}, defaultOption, option) | ||
RootElement = document.createElement(option.tagName); | ||
RootElement.innerHTML = htmltext; | ||
ElementLinks = { | ||
message: RootElement.getElementsByClassName("l2m-message")[0], | ||
main: RootElement.getElementsByClassName("l2m-main")[0], | ||
loading: RootElement.getElementsByClassName("l2m-loading")[0], | ||
messageBox: RootElement.getElementsByClassName("l2m-message-box")[0], | ||
messageDate: RootElement.getElementsByClassName("l2m-message-date")[0], | ||
sendMessage: RootElement.getElementsByClassName("l2m-send-button")[0], | ||
messageInput: RootElement.getElementsByClassName("l2m-message-input")[0] | ||
} | ||
ElementLinks.loading.addEventListener("click", handleClickLoading); | ||
ElementLinks.sendMessage.addEventListener("click", handleClickSendMessage); | ||
const target = document.getElementById(targetID); | ||
target.appendChild(RootElement); | ||
} | ||
|
||
function hiddenLoading() { | ||
ElementLinks.loading.classList.add("l2m-hidden"); | ||
ElementLinks.messageBox.classList.remove("l2m-hidden"); | ||
loading = false; | ||
autoFitMessage(); | ||
} | ||
|
||
function Loading() { | ||
ElementLinks.loading.classList.remove("l2m-hidden"); | ||
ElementLinks.messageBox.classList.add("l2m-hidden"); | ||
loading = true; | ||
ElementLinks.main.style.height = ''; | ||
ElementLinks.main.style.width = ''; | ||
} | ||
|
||
function handleClickLoading() { | ||
if (loading) { | ||
hiddenLoading(); | ||
} | ||
} | ||
|
||
function handleClickSendMessage() { | ||
let input = ElementLinks.messageInput.value.replace(/(^\s*)|(\s*$)/g,""); | ||
ElementLinks.messageInput.value = ""; | ||
if (input && input != "") { | ||
ElementLinks.messageDate.innerText = "You say: " + input; | ||
autoFitMessage(); | ||
} | ||
} | ||
|
||
window.loadMessageDialog = loadMessageDialog; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
@keyframes l2m-loading-b { | ||
0% { opacity:0.5;transform: scale(1) } | ||
30% { opacity:0.5;transform: scale(1) } | ||
100% { opacity:1;transform: scale(1.25) } | ||
} | ||
|
||
@keyframes l2m-main { | ||
0% { transform: scale(0) translateY(1.25em) translateX(100%); } | ||
100% { transform: scale(1) translateY(0em) translateX(0); } | ||
} | ||
|
||
live2d-message-dialog { | ||
*, | ||
*::before, | ||
*::after { | ||
box-sizing: border-box; | ||
backface-visibility: hidden; | ||
} | ||
.l2m-main { | ||
min-height: 1.25em; | ||
min-width: 1.5em; | ||
height: 1.25em; | ||
width: 1.7em; | ||
background: rgba(206,206,206,0.8); | ||
border-radius: 1em; | ||
line-height: 1.25em; | ||
border-bottom-right-radius: 0; | ||
padding: 0.25em 0.5em; | ||
backface-visibility: hidden; | ||
animation: l2m-main 1s 1s cubic-bezier(.16,1.43,.47,1.14) both; | ||
transition: width 0.5s cubic-bezier(.16,1.43,.47,1.14), height 0.5s cubic-bezier(.16,1.43,.47,1.14); | ||
overflow: hidden; | ||
box-sizing: content-box; | ||
} | ||
.l2m-loading { | ||
position: relative; | ||
z-index: 1; | ||
transition: opacity 0.5s; | ||
cursor: pointer; | ||
user-select:none; | ||
display: flex; | ||
justify-content: space-between; | ||
b { | ||
width: 0.4em; | ||
color: rgba(0, 0, 0, .5); | ||
display: inline-block; | ||
@for $i from 1 through 3 { | ||
&.l2m-offset-#{$i} { | ||
animation: l2m-loading-b 0.75s $i * 200ms + 1s infinite alternate both; | ||
} | ||
} | ||
} | ||
} | ||
.l2m-message-box { | ||
position: absolute; | ||
top: 0.25em; | ||
left: 0.5em; | ||
width: 10em; | ||
z-index: -1; | ||
transition: opacity 0.5s; | ||
} | ||
.l2m-hidden { | ||
opacity: 0; | ||
pointer-events: none; | ||
animation: none; | ||
} | ||
.l2m-message { | ||
padding: 5px 0px; | ||
display: inline-block; | ||
font-size: .75em; | ||
user-select:none; | ||
max-width: 100%; | ||
} | ||
.l2m-send-message { | ||
display: flex; | ||
align-items: center; | ||
} | ||
.l2m-message-input { | ||
outline: none; | ||
border: none; | ||
border-radius: 5px; | ||
display: block; | ||
flex-grow: 1; | ||
height: 1.7em; | ||
margin: 5px 5px; | ||
padding: 2px 5px; | ||
min-width: 10em; | ||
width: 0px; | ||
} | ||
.l2m-message-date { | ||
margin-top: 0px; | ||
} | ||
.l2m-send-button { | ||
height: 1.5em; | ||
width: 1.5em; | ||
margin-left: 5px; | ||
margin-right: 2px; | ||
cursor: pointer; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<div class="l2m-main"> | ||
<div class="l2m-loading"> | ||
<b class="l2m-offset-1">•</b><b class="l2m-offset-2">•</b><b class="l2m-offset-3">•</b> | ||
</div> | ||
<div class="l2m-message-box l2m-hidden"> | ||
<div class="l2m-message"> | ||
<p class="l2m-message-date"> | ||
这里是妹抖酱哦~有什么问题可以在这里提问哦。 | ||
</p> | ||
<div class="l2m-send-message"> | ||
<input class="l2m-message-input" placeholder="有什么问题呢" type="text" /> | ||
<svg class="l2m-send-button" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M1020.10745 34.4c-1.7-2.9-8.4-12.8-24.2-16.8-20-5-45.8 1.9-75.6 20L31.90745 507.4C24.30745 510.8-0.49255 524.1 0.00745 547.5c0.4 15.6 11.5 27.9 34.1 37L315.00745 677.3l42 17.2 458-451-356 492.7 57.8 23.7L799.00745 853.6c4.1 1.9 13 5.4 23.9 5.4 6.8 0 14.2-1.4 21.8-5.2 18.9-9.8 30.2-31.5 33.5-62.8l144.4-742c0.9-5.1 0.1-10.2-2.5-14.6z" fill="#8995A7" p-id="986"></path><path d="M470.70745 965.6c-6.9-2.8-11.5-9.5-11.5-16.9L455.00745 814.3c0-5.6 2.6-10.9 7.1-14.5 4.4-3.4 10.2-4.7 15.8-3.3l105.1 38c6.4 1.5 11.5 6.5 13.3 12.8 1.8 6.3 0.1 13.1-4.6 17.9l-100.9 96.3c-2.9 3-6.8 4.8-10.8 5.4-3 0.4-6.2-0.1-9.3-1.3z" fill="#8894A6"></path> | ||
</svg> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters