Initial commit.

diy · Sep 29, 2012 · 85b513f · 85b513f
commit 85b513f
Show file tree

Hide file tree

Showing 16 changed files with 627 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+(this is currently in development)
+
+### Notes
+
+Huge props to [Tim Down](http://stackoverflow.com/users/96100/tim-down) (a beast at cross-browser selection handling).
+
+For a giant list of emojis (used by Github, Basecamp, et al), see ["Emoji cheat sheet"](http://www.emoji-cheat-sheet.com/).
+
+## License
+
+Copyright (c) 2010 DIY Co
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/build.sh b/build.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+IFS='%'
+out=jquery.emojiarea.js
+out_min=jquery.emojiarea.min.js
+banner="/*! jquery.emojiarea.js | https://github.com/diy/jquery-emojiarea | Apache License (v2) */"
+
+# generate minified version...
+
+curl -s -d compilation_level=SIMPLE_OPTIMIZATIONS \
+        -d output_format=text \
+        -d output_info=compiled_code \
+		--data-urlencode "js_code@$out" \
+        http://closure-compiler.appspot.com/compile \
+        > $out_min
+
+echo "$banner" | cat - $out_min > temp && mv temp $out_min
+
+unset IFS
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title></title>
+		<meta name="description" content="">
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="../jquery.emojiarea.css">
+		<link rel="stylesheet" href="stylesheet.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<script src="../jquery.emojiarea.js"></script>
+		<script src="../packs/basic/emojis.js"></script>
+	</head>
+	<body>
+		<h1>jquery.emojiarea.js Example</h1>
+
+		<div class="example">
+			<h2>Plain-Text</h2>
+			<form><textarea rows="5" class="emojis-plain">Hello :neckbeard:</textarea></form>
+		</div>
+
+		<div class="example">
+			<h2>WYSIWYG</h2>
+			<form><textarea rows="5" class="emojis-wysiwyg">Hello :neckbeard:</textarea></form>
+			<h3>Value:</h3>
+			<div class="value"><pre id="emojis-wysiwyg-value"></pre></div>
+		</div>
+
+		<script>
+		$('.emojis-plain').emojiarea({wysiwyg: false});
+
+		var $wysiwyg = $('.emojis-wysiwyg').emojiarea({wysiwyg: true});
+		var $wysiwyg_value = $('#emojis-wysiwyg-value');
+
+		$wysiwyg.on('change', function() {
+			$wysiwyg_value.text($(this).val());
+		});
+		$wysiwyg.trigger('change');
+		</script>
+	</body>
+</html>
diff --git a/example/stylesheet.css b/example/stylesheet.css
@@ -0,0 +1,39 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+body {
+	font-family: Helvetica, arial, sans-serif;
+	font-size: 13px;
+	font-weight: 300;
+	padding: 100px;
+	-webkit-font-smoothing: antialiased;
+}
+h2, h3, h4 {
+	font-weight: normal;
+}
+h1, h2, h3, h4, p, form {
+	margin: 0 0 15px 0;
+}
+textarea, .emoji-wysiwyg-editor {
+	width: 100%;
+	height: 100px;
+	border: 1px solid #d0d0d0;
+	padding: 15px;
+	font-size: 13px;
+	font-family: Helvetica, arial, sans-serif;
+	font-weight: normal;
+	-webkit-font-smoothing: antialiased;
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+}
+.example {
+	position: relative;
+}
+.value {
+	background: #f8f8f8;
+	box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
+	border-radius: 3px;
+	padding: 15px;
+}
diff --git a/jquery.emojiarea.css b/jquery.emojiarea.css
@@ -0,0 +1,57 @@
+.emoji-wysiwyg-editor {
+	border: 1px solid #d0d0d0;
+	overflow: auto;
+}
+.emoji-wysiwyg-editor img {
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+	margin: -3px 0 0 0;
+}
+.emoji-button {
+	position: absolute;
+	z-index: 1;
+	margin-top: 10px;
+	right: 10px;
+}
+.emoji-menu {
+	background: #fff;
+	position: absolute;
+	z-index: 1;
+	width: 180px;
+	margin-left: -100px;
+	padding: 0;
+	max-height: 200px;
+	overflow: hidden;
+	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+.emoji-menu img {
+	width: 25px;
+	height: 25px;
+	vertical-align: middle;
+	border: 0 none;
+}
+.emoji-menu a {
+	margin: -1px 0 0 -1px;
+	border: 1px solid #f2f2f2;
+	padding: 5px;
+	display: block;
+	float: left;
+}
+.emoji-menu a:hover {
+	background-color: #fffae7;
+}
+.emoji-menu:after {
+	content: ' ';
+	display: block;
+	clear: left;
+}
+.emoji-menu a .label {
+	display: none;
+}