metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
80 lines (71 loc) • 12.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test Chart - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="container">
<h1>Chat test page</h1>
<div>
<div id="chat" class="mx-auto"
data-role="chat"
data-width="480"
data-height="640"
data-title="Direct chat"
data-cls-send-button="success"
data-random-color="true"
data-welcome="Welcome to Metro 4 chat component!"
data-cls-message-left="default"
data-cls-message-right="bg-cyan fg-white bd-cyan"
data-on-send="sendMessage"
data-on-message="onMessage"
data-avatar="data:image/png;base64,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"
data-readonly="false"
></div>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
var messages = [
"Confucius says: vision and om."
, "Be unconditional."
, "Scholars, winds, and inward lovers will always protect them."
, "The meditation of hurting yogis is closest."
, "One mediocre silence i give you: meet each other."
, "You have to preach, and love blessing by your rising."
, "Acceptance, resurrection and a boundless great unknown."
, "Demissios mori, tanquam gratis buxum."
, "Aye, ah."
, "Stutter calmly like a salty dubloon."
, "Devastation at the holodeck was the rumour of faith, avoided to a solid planet."
, "Solitudos volare, tanquam brevis torquis."
, "When mashing small shrimps, be sure they are room temperature."
, "Try fluffing cheesecake garnished with cocktail sauce, blended with onion powder."
, "You have to sit, and know core by your balancing."
, "Gar, mighty lubber. you won't crush the pacific ocean."
];
var opponent = {
name: "Jackie Chan",
avatar: Metro.defaults.ChatAvatar
};
function onMessage(msg, el){
}
function sendMessage(msg){
var chat = Metro.getPlugin("#chat", "chat");
setTimeout(function(){
var _m = {
name: opponent.name,
avatar: opponent.avatar,
time: (new Date()),
text: messages[$.random(0, messages.length - 1)],
position: "left"
};
chat.add(_m);
}, $.random(1000, 3000));
}
</script>
</body>
</html>