Half-decent demo continuing

dmitrizzle · Feb 22, 2017 · c600b3f · c600b3f
1 parent 50bbe1d
commit c600b3f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 48 deletions.
diff --git a/Moo.ChatBubble.css b/Moo.ChatBubble.css
@@ -138,9 +138,9 @@ color: #029235;
 
 /* animated typing dogs */
 .bubbleTyping {
-	width: 68px;
+	width: 40px;
 	padding: 14px 16px;
-	height: 35px;
+	height: 8px;
 }
 .bubbleTyping.preBubble,
 .chatBubble.preBubble {

diff --git a/Moo.ChatBubble.html b/Moo.ChatBubble.html
diff --git a/Moo.ChatBubble.js b/Moo.ChatBubble.js
@@ -6,7 +6,7 @@ var chatBubble = new Class({
 		scrollSensitivity: 1000,
 		mediumBubble: {
 			charLength: [80, 120],
-			width: 450
+			width: 350
 		},
 		contentWidthShim: 50
 	},

diff --git a/demo/Moo.ChatBubble.html b/demo/Moo.ChatBubble.html
@@ -0,0 +1,49 @@
+<html>
+	<head>
+		<title>Moo.ChatBubble DEMO</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" media="all" href="../Moo.ChatBubble.css">
+
+		<script src="../vendor/mootools/dist/mootools-core-compat.js"></script>
+
+		<script src="../vendor/mootools-more/Source/More/More.js"></script>
+		<script src="../vendor/mootools-more/Source/Types/String.Extras.js"></script>
+		<script src="../vendor/mootools-more/Source/Types/Object.Extras.js"></script>
+		<script src="../vendor/mootools-more/Source/Locale/Locale.js"></script>
+		<script src="../vendor/mootools-more/Source/Locale/Locale.en-US.Date.js"></script>
+		<script src="../vendor/mootools-more/Source/Types/Date.js"></script>
+		<script src="../vendor/mootools-more/Source/Element/Element.Shortcuts.js"></script>
+		<script src="../vendor/mootools-more/Source/Fx/Fx.Scroll.js"></script>
+
+
+		<script src="../Moo.ChatBubble.js"></script>
+	</head>
+	<body>
+		<main>
+			<section>
+				<h1 style="text-align: center;">Moo.ChatBubble DEMO</h1>
+				<div id="chatBubble" style="background:#eee;padding:1em;height:350px; width: 750px;overflow:scroll;border-radius: 5px; margin: 0 auto">
+					<div class="bubbleTyping preBubble">
+						<div class="circleG_1 circleG"></div>
+						<div class="circleG_2 circleG"></div>
+						<div class="circleG_3 circleG"></div>
+					</div>
+				</div>
+			</seciton>
+		</section>
+		<script>
+			var myChat = new chatBubble({ chatWindow: $('chatBubble') });
+			myChat.add('Hi!');
+			myChat.add('Bunch of "Hipster Ipsm" is coming your way &#x1F602;');
+			myChat.add('Deep v chartreuse kitsch, neutra godard listicle lyft tumeric man braid letterpress waistcoat marfa pour-over brooklyn vape.');
+			myChat.add('Blue bottle semiotics chambray helvetica chartreuse fap 3 wolf moon. Occupy meggings asymmetrical vexillologist XOXO hell of, pitchfork +1 craft beer. Subway tile retro air plant pinterest pour-over gentrify. Meh mustache humblebrag, occupy flannel chillwave everyday carry direct trade man braid. La croix humblebrag banjo fanny pack, etsy fam man bun poke cray deep v fingerstache disrupt XOXO meditation distillery. ');
+			myChat.add('Distillery try-hard thundercats hashtag vaporware.');
+			myChat.add('Microdosing everyday carry locavore fam, vape helvetica tote bag unicorn iceland whatever. Meggings squid af la croix blue bottle. Vexillologist pop-up heirloom, kogi activated charcoal pork belly tumeric hot chicken. Vice raw denim salvia four dollar toast, vegan PBR&B art party raclette bicycle rights shoreditch mlkshk skateboard.');
+			myChat.add('Deep v chartreuse kitsch, neutra godard listicle lyft tumeric man braid letterpress waistcoat marfa pour-over brooklyn vape.');
+			myChat.add('Blue bottle semiotics chambray helvetica chartreuse fap 3 wolf moon. Occupy meggings asymmetrical vexillologist XOXO hell of, pitchfork +1 craft beer. Subway tile retro air plant pinterest pour-over gentrify. Meh mustache humblebrag, occupy flannel chillwave everyday carry direct trade man braid. La croix humblebrag banjo fanny pack, etsy fam man bun poke cray deep v fingerstache disrupt XOXO meditation distillery. ');
+			myChat.add('Distillery try-hard thundercats hashtag vaporware.');
+			myChat.add('Microdosing everyday carry locavore fam, vape helvetica tote bag unicorn iceland whatever. Meggings squid af la croix blue bottle. Vexillologist pop-up heirloom, kogi activated charcoal pork belly tumeric hot chicken. Vice raw denim salvia four dollar toast, vegan PBR&B art party raclette bicycle rights shoreditch mlkshk skateboard.');
+		</script>
+	</body>
+</html>