Skip to content
This repository has been archived by the owner on Jan 27, 2021. It is now read-only.

Commit

Permalink
feat(message): new message system
Browse files Browse the repository at this point in the history
  • Loading branch information
@EYHN
EYHN committed Aug 5, 2017
1 parent ae5cf70 commit 1fb37ed
Show file tree
Hide file tree
Showing 11 changed files with 274 additions and 26 deletions.
2 changes: 1 addition & 1 deletion dist/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/bundle.js.map
View file

Large diffs are not rendered by default.

20 changes: 1 addition & 19 deletions dist/index.html
View file
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>
18 changes: 16 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
`
});
12 changes: 10 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,29 @@
"description": "为你的hexo添加色气满满的live2d吧！",
"main": "./index.js",
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.5.0",
"css-loader": "^0.28.4",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"source-map-loader": "^0.2.1",
"uglify-js": "^3.0.10",
"webpack": "^2.5.1"
"webpack": "^3.3.0",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"hexo-fs": "^0.1.6",
"path": "^0.12.7"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"dev": "webpack -w",
"build": "webpack"
},
"author": "EYHN",
"license": "GPL-2.0",
Expand Down
5 changes: 5 additions & 0 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('autoprefixer')
]
}
2 changes: 2 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import MatrixStack from "./lib/MatrixStack"

import {setContext} from "./webglcontext"

import "./message"

// window.onerror = function (msg, url, line, col, error) {
// let errmsg = "file:" + url + "<br>line:" + line + " " + msg;
// console.error(errmsg);
Expand Down
69 changes: 69 additions & 0 deletions src/message.js
View file
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;
100 changes: 100 additions & 0 deletions src/style/message.scss
View file
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;
}
}
18 changes: 18 additions & 0 deletions src/template/message.html
View file
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>
52 changes: 51 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,57 @@ module.exports = {
presets: ["env"]
}
}],
}
},
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
minimize: true
}
}
},
]
},
devServer: {
port: process.env.PORT || 8888,
host: 'localhost',
publicPath: '/',
contentBase: './src',
historyApiFallback: true,
open: true,
watchContentBase: true,
compress: true,
proxy: {
// OPTIONAL: proxy configuration:
// '/optional-prefix/**': { // path pattern to rewrite
// target: 'http://target-host.com',
// pathRewrite: path => path.replace(/^\/[^\/]+\//, '') // strip first path segment
// }
}
}
}

0 comments on commit 1fb37ed

Please sign in to comment.