Scroll animation with category highlight

example/example.js

@@ -1,3 +1,5 @@
 import EmojiPanel from 'emoji-panel';
 
-new EmojiPanel(document.getElementById('panel-example-1'));
+new EmojiPanel(document.getElementById('panel-example-1'), { onClick: ({ index } = {}) => {
+  console.log(index);
+} });

index.html

@@ -11,6 +11,6 @@
     </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.css">
+    <link rel="stylesheet" href="dist/emoji-panel-apple-32.min.css">
   </body>
 </html>

package.json

@@ -7,6 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --progress && rimraf ./dist/emoji-panel-*.js",
     "start": "webpack-dev-server --port 8080 --inline --progress --colors --config ./webpack.dev.config.js",
+    "start:prod": "set NODE_ENV=production&& npm start",
     "predeploy": "set NODE_ENV=development&& npm run build && set NODE_ENV=production&& npm run build",
     "deploy": "npm run predeploy && git add dist && git add dist/* && git commit -m \"Deploy build files\" && git checkout gh-pages && git merge master && git push && git checkout master && git push"
   },
@@ -37,6 +38,7 @@
     "eslint": "^2.7.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
+    "html-minify-loader": "^1.1.0",
     "html-webpack-plugin": "^2.15.0",
     "json-loader": "^0.5.4",
     "node-sass": "^3.4.2",

src/category-order.js

@@ -3,6 +3,7 @@ const CATEGORY = require('./constant').CATEGORY;
 module.exports = [
   CATEGORY.PEOPLE,
   CATEGORY.NATURE,
+  CATEGORY.FOODS,
   CATEGORY.ACTIVITY,
   CATEGORY.PLACES,
   CATEGORY.OBJECTS,

src/create-panel.js

@@ -1,11 +1,11 @@
 import panelTemplate from './template.ahtml';
 import setEventsForTemplate from './set-events-for-template';
 
-export default ({ imageSet, size, animationDuration } = {}) => {
+export default ({ animationDuration, panelVariables, eventListeners } = {}) => {
   const panelEl = document.createElement('div');
   panelEl.setAttribute('class', 'ep-container');
   panelEl.innerHTML = panelTemplate;
-  setEventsForTemplate(panelEl, { animationDuration });
+  setEventsForTemplate(panelEl, { animationDuration, panelVariables, eventListeners });
 
   return panelEl;
 };

src/emoji-panel.js

@@ -2,25 +2,29 @@ import { IMAGE_SET, SIZE } from './constant';
 import createPanel from './create-panel';
 
 export default class EmojiPanel {
-  constructor(el, { imageSet = IMAGE_SET.APPLE, size = SIZE['64'], animationDuration = 300 } = {}) {
+  constructor(el, { animationDuration = 300, onClick } = {}) {
     if (__DEV__) {
       if (!(el && el.nodeType)) {
         throw new Error('Element must be provided to the first argument of `EmojiPanel` constructor.');
       }
-      if (Object.keys(IMAGE_SET).map(key => IMAGE_SET[key]).indexOf(imageSet) === -1) {
-        throw new Error('`imageSet` should have one of `EmojiPanel.IMAGE_SET` values, got ${imageSet}.');
+      if (typeof animationDuration !== 'number') {
+        throw new Error('`animationDuration` should be a number, got ${typeof animationDuration}.');
+      }
+      if (onClick !== undefined && typeof onClick !== 'function') {
+        throw new Error('`onClick` should be a function, got ${typeof onClick}.');
       }
     }
-    const windowImageSet = createPanel({ imageSet, size, animationDuration });
+    // Privates
+    this._panelVariables = {};
+    this._eventListeners = { onClick };
+
+    const windowImageSet = createPanel({
+      animationDuration,
+      panelVariables: this._panelVariables,
+      eventListeners: this._eventListeners
+    });
+
     el.innerHTML = '';
     el.appendChild(windowImageSet);
-
-    // Privates
-    this._eventListeners = {
-      click: []
-    };
   }
 }
-// EmojiPanel static properties
-EmojiPanel.IMAGE_SET = IMAGE_SET;
-EmojiPanel.SIZE = SIZE;

src/emoji-panel.scss

@@ -2,16 +2,43 @@
 
 $size-categories-icons: 32px;
 $size-categories: 40px;
+$size-slide: 3px;
 
 .ep {
   height: 100%;
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+
+  ::-webkit-scrollbar {
+    width: 6px!important;
+  }
+  ::-webkit-scrollbar-thumb {
+      background-color: rgba(0,0,0,.2);
+  }
+  ::-webkit-scrollbar-track {
+      background: rgba(255,255,255,.08);
+  }
 }
 .ep-container {
   height: 100%;
 }
 .ep-categories {
   height: $size-categories;
+  padding-bottom: $size-slide;
   display: flex;
+  position: relative;
+}
+.ep-slide {
+  position: absolute;
+  height: $size-slide;
+  width: 12.5%;
+  will-change: margin-left;
+  transition: margin-left ease-in-out;
+  background-color: #93D3CC;
+  bottom: 0;
 }
 .ep-c {
   cursor: pointer;

src/emoji.data.js

@@ -2,12 +2,13 @@ const emojiData = require('emoji-data');
 const categoryDataMap = require('./map').categoryDataMap;
 
 const sortedEmojiData = emojiData
+  .map((emoji, index) => Object.assign(emoji, { index }))
   .sort((emojiA, emojiB) => emojiA['sort_order'] - emojiB['sort_order'])
-  .reduce((obj, emoji, index) => {
+  .reduce((obj, emoji) => {
     const category = categoryDataMap[emoji.category];
     const categoryArray = obj[category] || [];
     return Object.assign(obj, {
-      [category]:  categoryArray.concat(Object.assign(emoji, { index }))
+      [category]:  categoryArray.concat(emoji)
     });
   }, {});
 

src/set-events-for-template.js

@@ -1,3 +1,7 @@
+// import emojiData from 'emoji-data';
+import categoryOrder from './category-order';
+import { CATEGORY } from './constant';
+
 const getIsElementScrollable = el => {
   return el.clientHeight !== el.scrollHeight;
 };
@@ -18,7 +22,7 @@ const scrollElementTo = (el, done, newScrollHeight = 0, scrollDuration = 300) =>
         requestAnimationFrame(step);
         scrollCount = scrollCount + 1;
         scrollMargin = round(cosParameter - cosParameter * Math.cos(scrollCount * scrollStep));
-        el.scrollTo(0, scrollHeight - scrollMargin);
+        el.scrollTop = scrollHeight - scrollMargin;
       } else {
         done();
       }
@@ -27,11 +31,36 @@ const scrollElementTo = (el, done, newScrollHeight = 0, scrollDuration = 300) =>
 
   requestAnimationFrame(step);
 };
-export default (el, { animationDuration } = {}) => {
+
+const marginParam = 100 / categoryOrder.length;
+const slideToCategory = (panelVariables, slideEl, categoryId) => {
+  if (panelVariables.selectedCategoryId !== categoryId) {
+    panelVariables.selectedCategoryId = categoryId;
+    const selectedCategoryIndex = categoryOrder.indexOf(categoryId);
+    slideEl.style.marginLeft = selectedCategoryIndex * marginParam + '%';
+  }
+};
+
+export default (el, { animationDuration, panelVariables, eventListeners } = {}) => {
   let isMidScrollAnimation = false;
 
   const categoriesEl = el.querySelector('.ep-categories');
+  const slideEl = el.querySelector('.ep-slide');
   const emojiesContainer = el.querySelector('.ep-emojies');
+
+  // Set styles
+  slideEl.style.transitionDuration = animationDuration + 'ms';
+
+  const scrollListener = () => {
+    const scrollHeight = emojiesContainer.scrollTop;
+    const emojiesContainerChildren = Array.from(emojiesContainer.children);
+    const lastVisibleContainerChild = emojiesContainerChildren
+      .find(node => scrollHeight >= node.offsetTop && (!node.nextElementSibling || scrollHeight < node.nextElementSibling.offsetTop));
+
+    const categoryId = Number(lastVisibleContainerChild.dataset.categoryId);
+    slideToCategory(panelVariables, slideEl, categoryId);
+  };
+
   categoriesEl.addEventListener('click', e => {
     if (isMidScrollAnimation === false) {
       let target = e.target;
@@ -41,15 +70,35 @@ export default (el, { animationDuration } = {}) => {
       if (target.classList.contains('ep-c')) {
         const isElementScrollable = getIsElementScrollable(emojiesContainer);
         if (isElementScrollable) {
-          const categoryId = target.dataset.categoryId;
+          const categoryId = Number(target.dataset.categoryId);
           const categoryEl = emojiesContainer.querySelector(`[data-category-id="${categoryId}"]`);
           const categoryHeight = categoryEl.offsetTop;
+
           isMidScrollAnimation = true;
+          // Remove scroll event listener for better performance
+          emojiesContainer.removeEventListener('scroll', scrollListener);
           scrollElementTo(emojiesContainer, () => {
             isMidScrollAnimation = false;
+            // Readd scroll event listener after javascript animation has finished
+            emojiesContainer.addEventListener('scroll', scrollListener);
           }, categoryHeight, animationDuration);
+
+          slideToCategory(panelVariables, slideEl, categoryId);
         }
       }
     }
   });
+
+  emojiesContainer.addEventListener('scroll', scrollListener);
+
+  if (eventListeners.onClick) {
+    emojiesContainer.addEventListener('click', e => {
+      const target = e.target;
+      if (target.classList.contains('ep-e')) {
+        const index = Number(target.dataset.index);
+        const unified = target.dataset.unified;
+        eventListeners.onClick({ index, unified });
+      }
+    });
+  }
 };

src/template.ahtml.js

@@ -11,18 +11,21 @@ const categoryNameMap = Map.categoryNameMap;
 module.exports = api => {
   api.morph('html').add({
     'div[class="ep"]': {
-      'div[class="ep-categories"]': categoryOrder.reduce((obj, category) => Object.assign(obj, {
-        [`span[class="ep-c" data-category-id="${category}"]`]: {
-          [`span[class="cat cat-${category}"]`]: '',
-          'span[class="ep-c-text"]': categoryNameMap[category]
-        }
-      }), {}),
+      'div[class="ep-categories"]': [
+        {
+          'span[class="ep-slide"]': ''
+        },
+        categoryOrder.reduce((obj, category) => Object.assign(obj, {
+          [`span[class="ep-c" data-category-id="${category}"]`]: {
+            [`span[class="cat cat-${category}"]`]: '',
+            'span[class="ep-c-text"]': categoryNameMap[category]
+          }
+        }), {})
+      ],
       'div[class="ep-emojies"]': categoryOrder.reduce((catObj, category) => Object.assign(catObj, {
-        [`div[class="ep-emojies-c" data-category-id="${category}"]`]: {
-          'div': emojiData[category].reduce((emojiObj, emoji) => Object.assign(emojiObj, {
-            [`span[class="ep-e" data-index="${emoji.index}"]`]: ''
-          }), {})
-        }
+        [`div[class="ep-emojies-c" data-category-id="${category}"]`]: emojiData[category].reduce((emojiObj, emoji) => Object.assign(emojiObj, {
+          [`span[class="ep-e" data-index="${emoji.index}" data-unified="${emoji.unified}"]`]: ''
+        }), {})
       }), {})
     }
   });

webpack.config.js

@@ -96,7 +96,7 @@ module.exports = {
         include: [
           path.resolve(__dirname, 'src')
         ],
-        loader: 'raw!absurd'
+        loader: 'raw!html-minify!absurd'
       },
       {
         test: /\.acss.js$/,

webpack.dev.config.js

@@ -6,13 +6,19 @@ const webpackBaseConfig = require('./webpack.config');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const __PROD__ = process.env.NODE_ENV === 'production';
+
 module.exports =
 Object.assign(webpackBaseConfig, {
   devtool: 'source-map',
-  entry: Object.assign({},  {
-    'dist/example.min': webpackBaseConfig.entry.example, // Change location and file name to match the ones in github page
+  entry: Object.assign({
     base: [] // Hot reload will be injected here
-  }),
+  },
+  Object.keys(webpackBaseConfig.entry)
+  .filter(entryName => entryName !== 'emoji-panel')
+  .reduce((obj, entryName) => Object.assign(obj, {
+    [`dist/${entryName}${__PROD__ ? '' : '.min'}`]: webpackBaseConfig.entry[entryName]
+  }), {})),
   module: Object.assign(webpackBaseConfig.module, {
     loaders: webpackBaseConfig.module.loaders.map(loaderObj => {
       const loaderTestString = loaderObj.test.toString();