Made new development and preview page, fancier

TimeToKnow · Apr 25, 2016 · 94a7bd7 · 94a7bd7
1 parent 9cf2fad
commit 94a7bd7
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 15 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,8 @@
   },
   "globals": {
     "__DEV__": false,
-    "__PROD__": false
+    "__PROD__": false,
+    "$": false
   },
   "rules": {
 		"comma-dangle": [2, "never"],

diff --git a/example/example.css b/example/example.css
diff --git a/example/example.js b/example/example.js
@@ -1,5 +1,38 @@
 import EmojiPanel from 'emoji-panel';
 
-new EmojiPanel(document.getElementById('panel-example-1'), { onClick: ({ index } = {}) => {
-  console.log(index);
-} });
+// ***************************************
+// Start of examples
+// ***************************************
+// Example 1
+
+new EmojiPanel(document.getElementById('example-1'));
+
+// Example 2
+new EmojiPanel(
+  document.getElementById('example-2'), {
+    onClick: e => {
+      alert(e.index); // eslint-disable-line no-alert
+      alert(e.unified);// eslint-disable-line no-alert
+    }
+  }
+);
+
+// Example 3
+new EmojiPanel(document.getElementById('example-3'));
+document.getElementById('example-3-btn').addEventListener('click', () => {
+  document.getElementById('example-3-container').classList.toggle('open');
+});
+
+// Example 4
+new EmojiPanel(document.getElementById('example-4'));
+$('#example-4-btn').click(e => {
+  $('#example-4').dialog({
+    minWidth: 274,
+    height: 600,
+    width: 800
+  });
+});
+
+// ***************************************
+// End of examples
+// ***************************************
diff --git a/example/example.scss b/example/example.scss
@@ -0,0 +1,69 @@
+body {
+  background-color: #00BCD4;
+  margin: 0 auto;
+  max-width: 762px;
+}
+html, body {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.tagline {
+  position: relative;
+  margin-top: 0;
+}
+.tagline-text {
+  vertical-align: middle;
+}
+.fork {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+pre {
+  white-space: normal;
+  margin-bottom: 0;
+}
+pre code {
+  white-space: pre;
+}
+
+.example {
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 50px 0;
+  padding: 20px;
+}
+
+
+/* Example 1 */
+#example-1 {
+  height: 400px;
+}
+
+/* Example 2 */
+#example-2 {
+  height: 400px;
+}
+
+/* Example 3 */
+#example-3-container {
+  position: relative;
+  &.open #example-3 {
+    visibility: visible;
+  }
+}
+
+#example-3 {
+  visibility: hidden;
+  border: 2px solid darken(#00BCD4, 20%);
+  bottom: 100%;
+  position: absolute;
+  height: 250px;
+  width: 350px;
+}
+
+/* Example 4 */
+#example-4 {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -2,15 +2,87 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Emoji panel example</title>
+    <title>emoji-panel</title>
+    <link rel="stylesheet" href="dist/example.min.css">
+    <link rel="stylesheet" href="dist/emoji-panel-apple-32.min.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
+    <script   src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"   integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="   crossorigin="anonymous"></script>
   </head>
   <body>
-    <div>
-      <div>Example 1</div>
-      <div id="panel-example-1"></div>
+    <h1>
+      <a href="https://github.com/TimeToKnow/emoji-panel">Emoji panel</a>
+    </h1>
+    <h3 class="tagline">
+      <span class="tagline-text">
+        create emoji picker panel anywhere easily
+      </span>
+    </h3>
+    <a class="fork" href="https://github.com/TimeToKnow/emoji-panel">
+      <img class="gh-fork" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" />
+    </a>
+    <div class="example">
+      <div id="example-1"></div>
+      <pre>
+        <code>
+// es6
+import EmojiPanel from 'emoji-panel';
+new EmojiPanel(document.getElementById('example-1'));
+
+// es5
+var EmojiPanel = require('emoji-panel');
+new EmojiPanel(document.getElementById('example-1'));
+        </code>
+      </pre>
+    </div>
+    <div class="example">
+      <div id="example-2"></div>
+      <pre>
+        <code>
+new EmojiPanel(
+  document.getElementById('example-2'), {
+    onClick: e => {
+      alert(e.index);
+      alert(e.unified);
+    }
+  }
+);
+        </code>
+      </pre>
+    </div>
+    <div class="example">
+      <div id="example-3-container">
+        <button id="example-3-btn">Click me to toggle dialog</button>
+        <div id="example-3"></div>
+      </div>
+    </div>
+    <div class="example">
+      <button id="example-4-btn">Click me to open jQuery dialog</button>
+      <div id="example-4"></div>
+      <pre>
+        <code>
+// Create the panel before opening the dialog for quick opening
+// Though lazy creation also works and is blazing fast! (3ms)
+new EmojiPanel(document.getElementById('example-4'));
+$('#example-4').dialog({
+  minWidth: 274,
+  height: 800,
+  width: 600
+});
+        </code>
+      </pre>
+      <pre>
+        <code>
+/* So the dialog won't be visible before opening, jQuery will override the `dispaly`*/
+#example-4 {
+  display: none;
+}
+        </code>
+      </pre>
     </div>
     <script type="text/javascript" src="dist/example.min.js"></script>
-    <link rel="stylesheet" href="dist/example.min.css">
-    <link rel="stylesheet" href="dist/emoji-panel-apple-32.min.css">
   </body>
 </html>
diff --git a/src/emoji-panel.scss b/src/emoji-panel.scss
@@ -30,6 +30,7 @@ $size-slide: 3px;
   padding-bottom: $size-slide;
   display: flex;
   position: relative;
+  background-color: #fff;
 }
 .ep-slide {
   position: absolute;
@@ -57,8 +58,9 @@ $size-slide: 3px;
   display: none;
 }
 .ep-emojies {
+  background-color: #F0F0F0;
   position: relative;
-  height: calc(100% - #{$size-categories});
+  height: calc(100% - #{$size-categories + $size-slide});
   overflow-y: auto;
 }
 .ep-emojies-c:last-child {

diff --git a/src/set.js b/src/set.js
@@ -59,6 +59,9 @@ module.exports = (api, imageSet, size) => {
     },
     '.ep-slide': {
       width: `${100 / categoryOrder.length}%`
+    },
+    '.ep': {
+      'min-width': categoryOrder.length * 32 + 'px'
     }
   }, categoryOrder.reduce((catObj, category) => Object.assign(catObj,
     emojiData[category].reduce((emojiObj, emoji) => Object.assign(emojiObj, {

diff --git a/webpack.config.js b/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = {
     ],
     example: [
       './example/example.js',
-      './example/example.css'
+      './example/example.scss'
     ]
   },
   walk(path.join(__dirname, 'src', 'sets'))