Deploy build files

TimeToKnow · Apr 20, 2016 · 576450a · 576450a
1 parent ebee201
commit 576450a
Show file tree

Hide file tree

Showing 8 changed files with 328 additions and 54 deletions.
diff --git a/dist/emoji-panel.css b/dist/emoji-panel.css
@@ -1,16 +1,82 @@
+@font-face {
+  font-family: 'apple-category';
+  src: url(data:application/x-font-ttf;base64,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) format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+.cat {
+  font-family: 'apple-category' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.cat-0:before {
+  content: "\E900"; }
+
+.cat-1:before {
+  content: "\E901"; }
+
+.cat-2:before {
+  content: "\E902"; }
+
+.cat-4:before {
+  content: "\E903"; }
+
+.cat-8:before {
+  content: "\E904"; }
+
+.cat-16:before {
+  content: "\E905"; }
+
+.cat-128:before {
+  content: "\E906"; }
+
+.cat-64:before {
+  content: "\E907"; }
+
+.cat-32:before {
+  content: "\E908"; }
+
 .ep {
   height: 100%; }
 
 .ep-container {
   height: 100%; }
 
 .ep-categories {
-  height: 20px; }
+  height: 40px;
+  display: flex; }
+
+.ep-c {
+  cursor: pointer;
+  flex: 1 1;
+  text-align: center;
+  font-size: 32px;
+  color: silver;
+  opacity: 1; }
+  .ep-c:hover {
+    opacity: 0.8; }
+  .ep-c > * {
+    vertical-align: middle; }
+
+.ep-c-text {
+  display: none; }
 
 .ep-emojies {
-  height: calc(100% - 20px);
+  position: relative;
+  height: calc(100% - 40px);
   overflow-y: auto; }
 
+.ep-emojies-c:last-child {
+  position: absolute;
+  min-height: 100%; }
+
 .ep-e {
   display: inline-block;
   margin: 6px;

diff --git a/dist/emoji-panel.js b/dist/emoji-panel.js
@@ -75,6 +75,8 @@
 	  var imageSet = _ref$imageSet === undefined ? _constant.IMAGE_SET.APPLE : _ref$imageSet;
 	  var _ref$size = _ref.size;
 	  var size = _ref$size === undefined ? _constant.SIZE['64'] : _ref$size;
+	  var _ref$animationDuratio = _ref.animationDuration;
+	  var animationDuration = _ref$animationDuratio === undefined ? 300 : _ref$animationDuratio;
 
 	  _classCallCheck(this, EmojiPanel);
 
@@ -88,7 +90,7 @@
 	      throw new Error('`imageSet` should have one of `EmojiPanel.IMAGE_SET` values, got ${imageSet}.');
 	    }
 	  }
-	  var windowImageSet = (0, _createPanel2.default)({ imageSet: imageSet, size: size });
+	  var windowImageSet = (0, _createPanel2.default)({ imageSet: imageSet, size: size, animationDuration: animationDuration });
 	  el.innerHTML = '';
 	  el.appendChild(windowImageSet);
 
@@ -164,12 +166,13 @@
 
 	  var imageSet = _ref.imageSet;
 	  var size = _ref.size;
+	  var animationDuration = _ref.animationDuration;
 
 	  var panelEl = document.createElement('div');
 	  panelEl.setAttribute('class', 'ep-container');
 	  var panelTemplate = (0, _getPanelTemplate2.default)({ imageSet: imageSet, size: size });
 	  panelEl.innerHTML = panelTemplate;
-	  (0, _setEventsForTemplate2.default)(panelEl);
+	  (0, _setEventsForTemplate2.default)(panelEl, { animationDuration: animationDuration });
 
 	  return panelEl;
 	};
@@ -273,9 +276,9 @@
 	  var sizeNumber = Number(getSizeKeyByValue(size));
 
 	  return '\n    <div class="ep">\n      <div class="ep-categories">\n        ' + _categoryOrder2.default.map(function (category) {
-	    return '\n        <span class="ep-category" data-category-id=' + category + '>\n          ' + _map.categoryNameMap[category] + '\n        </span>\n        ';
+	    return '\n        <span class="ep-c" data-category-id=' + category + '>\n          <span class="cat cat-' + category + '"></span>\n          <span class="ep-c-text">' + _map.categoryNameMap[category] + '</span>\n        </span>\n        ';
 	  }).join('') + '\n      </div>\n      <div class="ep-emojies">\n        ' + _categoryOrder2.default.map(function (category) {
-	    return '\n        <div data-category-id=' + category + '>\n          <div>\n            ' + sortedEmojiData[category].map(function (emoji) {
+	    return '\n        <div class="ep-emojies-c" data-category-id=' + category + '>\n          <div>\n            ' + sortedEmojiData[category].map(function (emoji) {
 	      return '\n            <span class="ep-e ' + emojiClassName + '" style="background-position: -' + emoji.sheet_x * sizeNumber + 'px -' + emoji.sheet_y * sizeNumber + 'px">\n            </span>\n            ';
 	    }).join('') + '\n          </div>\n        </div>\n        ';
 	  }).join('') + '\n      </div>\n    </div>\n    ';
@@ -35196,10 +35199,76 @@
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
+	var getIsElementScrollable = function getIsElementScrollable(el) {
+	  return el.clientHeight !== el.scrollHeight;
+	};
+
+	var round = function round(num) {
+	  return (num * 2).toFixed() / 2;
+	};
+
+	var scrollElementTo = function scrollElementTo(el, done) {
+	  var newScrollHeight = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
+	  var scrollDuration = arguments.length <= 3 || arguments[3] === undefined ? 300 : arguments[3];
+
+	  var scrollHeight = el.scrollTop;
+	  var scrollDiff = scrollHeight - newScrollHeight;
+	  var scrollStep = Math.PI / (scrollDuration / 15);
+	  var cosParameter = scrollDiff / 2;
+	  var scrollCount = 0;
+	  var scrollMargin = void 0;
+
+	  var step = function step() {
+	    setTimeout(function () {
+	      if (el.scrollTop !== newScrollHeight) {
+	        requestAnimationFrame(step);
+	        scrollCount = scrollCount + 1;
+	        scrollMargin = round(cosParameter - cosParameter * Math.cos(scrollCount * scrollStep));
+	        el.scrollTo(0, scrollHeight - scrollMargin);
+	      } else {
+	        done();
+	      }
+	    }, 15);
+	  };
+
+	  requestAnimationFrame(step);
+	};
+
+	exports.default = function (el) {
+	  var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+	  var animationDuration = _ref.animationDuration;
+
+	  var isMidScrollAnimation = false;
 
-	exports.default = function (el, callback) {
 	  var categoriesEl = el.querySelector('.ep-categories');
-	  categoriesEl.addEventListener('click', function (e) {});
+	  var emojiesContainer = el.querySelector('.ep-emojies');
+	  categoriesEl.addEventListener('click', function (e) {
+	    if (isMidScrollAnimation === false) {
+	      (function () {
+	        var target = e.target;
+	        if (['cat', 'ep-c-text'].map(function (className) {
+	          return target.classList.contains(className);
+	        }).some(function (v) {
+	          return v === true;
+	        })) {
+	          target = target.parentElement;
+	        }
+	        if (target.classList.contains('ep-c')) {
+	          var isElementScrollable = getIsElementScrollable(emojiesContainer);
+	          if (isElementScrollable) {
+	            var categoryId = target.dataset.categoryId;
+	            var categoryEl = emojiesContainer.querySelector('[data-category-id="' + categoryId + '"]');
+	            var categoryHeight = categoryEl.offsetTop;
+	            isMidScrollAnimation = true;
+	            scrollElementTo(emojiesContainer, function () {
+	              isMidScrollAnimation = false;
+	            }, categoryHeight, animationDuration);
+	          }
+	        }
+	      })();
+	    }
+	  });
 	};
 
 /***/ },