Merge remote-tracking branch 'origin/master'

joypixels · Sep 25, 2014 · 225684f · 225684f
2 parents 703cbc0 + 5ddbe87
commit 225684f
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -23,8 +23,8 @@ When storing user inputted text in your database, say from a guestbook or throug
 We've teamed up with [JSDelivr](http://jsdelivr.com) to provide a simple way to install these emoji on any javascript-enabled website. Add the following script and stylesheet links to the head of your webpage:
 
 ```
-<script src="//cdn.jsdelivr.net/emojione/1.1.0/lib/js/emojione.min.js" type="text/javascript"></script>
-<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.1.0/assets/css/emojione.min.css" type="text/css" media="all" />
+<script src="//cdn.jsdelivr.net/emojione/1.2.0/lib/js/emojione.min.js" type="text/javascript"></script>
+<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.2.0/assets/css/emojione.min.css" type="text/css" media="all" />
 ```
 
 Quick installs can also be done using NPM and Bower (for the Javascript toolkit) or Composer (for the PHP toolkit).

diff --git a/assets/css/emojione.css b/assets/css/emojione.css
@@ -1,16 +1,16 @@
 .emojione {
   /* Emoji Sizing */
   font-size: inherit;
-  height: 1.3em;
-  width: 1.4em;
+  height: 2.4ex;
+  width: 2.6ex;
+  min-height: 20px;
+  min-width: 20px;
 
   /* Inline Text Alignment */
   display: inline-block;
-  top: -3px;
-  position: relative;
   margin: 0 .15em;
   line-height: normal;
-  vertical-align: middle;
+  vertical-align: -.4ex;
 }
 
 img.emojione {

diff --git a/assets/css/emojione.min.css b/assets/css/emojione.min.css
diff --git a/assets/sprites/emojione.sprites.css b/assets/sprites/emojione.sprites.css
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "emojione",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main:": [
     "assets/css/emojione.css",
     "lib/js/emojione.js"

diff --git a/demos/sprites-png.html b/demos/sprites-png.html
@@ -10,7 +10,6 @@
   <!-- jQuery: -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
-
   <!-- Syntax Highlighting -->
   <script type="text/javascript" src="scripts/shCore.js"></script>
   <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
@@ -86,7 +85,7 @@ <h1 class="masthead-title">Emoji One Labs</h1>
 
       <h1>Emoji One PNG Sprites</h1>
 
-      <p class="convert-emoji" style="font-size: 27px; text-align: center">
+      <p class="convert-emoji" style="font-size: 26px; text-align: center">
         &#x1f352;
 
         :)

diff --git a/demos/sprites-svg.html b/demos/sprites-svg.html
@@ -10,6 +10,8 @@
   <!-- Emoji One CSS: -->
   <link rel="stylesheet" href="./../assets/css/emojione.css"/>
 
+  <!-- jQuery: -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
   <!-- Syntax Highlighting -->
   <script type="text/javascript" src="scripts/shCore.js"></script>
@@ -26,6 +28,41 @@
   <script type="text/javascript" src="//use.typekit.net/ivu8ilu.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
+  <script src="./../lib/js/emojione.js"></script>
+
+  <script type="text/javascript">
+    // #################################################
+    // # Optional
+
+    // default is PNG but you may also use SVG
+    emojione.imageType = 'svg';
+
+    //Turn on sprites
+    emojione.sprites = true;
+
+    // default is ignore ASCII smileys like :) but you can easily turn them on
+    emojione.ascii = true;
+
+    // if you want to host the images somewhere else
+    // you can easily change the default paths
+    emojione.imagePathPNG = './../assets/png/';
+    emojione.imagePathSVG = './../assets/svg/';
+    emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg'
+
+    // #################################################
+  </script>
+
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $(".convert-emoji").each(function() {
+        var original = $(this).html();
+        // use .shortnameToImage if only converting shortnames (for slightly better performance)
+        var converted = emojione.toImage(original);
+        $(this).html(converted);
+      });
+    });
+  </script>
+
 </head>
 <body>
 
@@ -52,26 +89,18 @@ <h1 class="masthead-title">Emoji One Labs</h1>
 
     <h1>Emoji One SVG Sprites</h1>
 
-    <p style="font-size: 64px; text-align: center">
-      <svg class="emojione">
-        <use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F350"></use>
-      </svg>
+    <p class="convert-emoji" style="font-size: 48px; text-align: center">
+      &#x1f352;
+
+      :)
 
-      <svg class="emojione">
-        <use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F351"></use>
-      </svg>
+      :coffee:
 
-      <svg class="emojione">
-        <use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F352"></use>
-      </svg>
+      :(
 
-      <svg class="emojione">
-        <use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F353"></use>
-      </svg>
+      :fire:
 
-      <svg class="emojione">
-        <use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F355"></use>
-      </svg>
+      &#x1f354;
     </p>
 
     <p>
@@ -90,20 +119,30 @@ <h3>1. Add IE Fix:</h3>    <p>
     <pre class="brush: php">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;
 &lt;script src=&quot;svg4everybody.min.js&quot;&gt;&lt;/script&gt;</pre>
 
-    <h3>2. Enable SVG Sprite mode</h3>
+    <h3>2. Enable SVG Sprite mode and set the relative path</h3>
 
     <p>Once that's done, it's just a matter of enabling SVG Sprites in your Emoji One configuration</p>
 
+    <p class="notice" style="margin-bottom: 2em">
+      <strong>Note: </strong> SVG sprites require a third configuration variable: <code>emojione.imagePathSVGSprites</code>. This is in contrast to the PNG sprites, which set the path within the sprite CSS file. Thankfully with SVG Sprites we don't need to include additional CSS, so it needs to be set as a variable in the script.
+    </p>
+
     <p>Javascript Example</p>
-    <pre class="brush: php">//JS Example goes here</pre>
+
+      <pre class="brush: php">emojione.imageType = 'svg';
+emojione.sprites = true;
+emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';</pre>
 
     <p>PHP Example</p>
-    <pre class="brush: php">//PHP Example goes here</pre>
+      <pre class="brush: php">Emojione::$imageType = 'svg';
+Emojione::$sprites = true;
+Emojione::$imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg'; </pre>
 
-    <p>If you are not using our conversion scripts, SVG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka <svg class="emojione"><use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F433"></use></svg>
+    <p>If you are not using our conversion scripts, SVG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka <svg class="emojione"><description>&#x1f433;</description><use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F433"></use></svg>. The <code>&lt;description&gt;</code> tag works similarly to alt text, enabling copy pasting of the emoji unicode characters.
     </p>
       <pre class="brush: php">
 &lt;svg class=&quot;emojione&quot;&gt;
+    &lt;description&gt;&amp;#x1f433;&lt;/description&gt;
     &lt;use xlink:href=&quot;path/to/emojione.sprites.svg#emoji-1F433&quot;&gt;&lt;/use&gt;
 &lt;/svg&gt;</pre>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "emojione",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Emoji One is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG and SVG formats provided for the emoji images.",
     "author": "Emoji One <[email protected]> (http://emojione.com)",
     "main:": "lib/js/emojione.js",