Emojis shown

TimeToKnow · Apr 14, 2016 · e6c2b63 · e6c2b63
1 parent 6f81523
commit e6c2b63
Show file tree

Hide file tree

Showing 34 changed files with 635 additions and 143 deletions.
diff --git a/dist/asset/2198fb90cd396e781a7aabb224c248e4.png b/dist/asset/2198fb90cd396e781a7aabb224c248e4.png
diff --git a/dist/asset/2a7cd0e77c69514a9374e78dc58766e9.png b/dist/asset/2a7cd0e77c69514a9374e78dc58766e9.png
diff --git a/dist/asset/37719639e33dc78bbdb894613d157a5b.png b/dist/asset/37719639e33dc78bbdb894613d157a5b.png
diff --git a/dist/asset/4bd751016ed11aae11c1484a3a883996.png b/dist/asset/4bd751016ed11aae11c1484a3a883996.png
diff --git a/dist/asset/582ccf2590bc64e38113cc76ba71af4f.png b/dist/asset/582ccf2590bc64e38113cc76ba71af4f.png
diff --git a/dist/asset/8c441eb1bf425dab65ca0f20127bfbe5.png b/dist/asset/8c441eb1bf425dab65ca0f20127bfbe5.png
diff --git a/dist/asset/8ed75e4accbc7b61f1a53e0b871d8dee.png b/dist/asset/8ed75e4accbc7b61f1a53e0b871d8dee.png
diff --git a/dist/asset/968517b0ef1f7e790b0df13e67c42908.png b/dist/asset/968517b0ef1f7e790b0df13e67c42908.png
diff --git a/dist/asset/9c7faf66d0f9866420f97fcca52c4444.png b/dist/asset/9c7faf66d0f9866420f97fcca52c4444.png
diff --git a/dist/asset/c51702ccb711180c483011345e7efc8a.png b/dist/asset/c51702ccb711180c483011345e7efc8a.png
diff --git a/dist/asset/c6a99e0b8d1aa7c403d7f4b70afc69f7.png b/dist/asset/c6a99e0b8d1aa7c403d7f4b70afc69f7.png
diff --git a/dist/asset/c89a7cdb9874a8f485ab3eb1deb0187d.png b/dist/asset/c89a7cdb9874a8f485ab3eb1deb0187d.png
diff --git a/dist/asset/c99d7c94cff6634c6d949d18c39331c7.png b/dist/asset/c99d7c94cff6634c6d949d18c39331c7.png
diff --git a/dist/asset/cc9d6b0e6925706d26a4df2b23ebecb2.png b/dist/asset/cc9d6b0e6925706d26a4df2b23ebecb2.png
diff --git a/dist/asset/dd31a73e9973d39cee5d9de2616ad911.png b/dist/asset/dd31a73e9973d39cee5d9de2616ad911.png
diff --git a/dist/asset/fbf4560dfce272c3e6523c638c58f9f9.png b/dist/asset/fbf4560dfce272c3e6523c638c58f9f9.png
diff --git a/dist/emoji-panel.css b/dist/emoji-panel.css
@@ -0,0 +1,63 @@
+.ep-e-a-16 {
+  display: inline-block;
+  background-image: url(./asset/dd31a73e9973d39cee5d9de2616ad911.png); }
+
+.ep-e-a-20 {
+  display: inline-block;
+  background-image: url(./asset/c99d7c94cff6634c6d949d18c39331c7.png); }
+
+.ep-e-a-32 {
+  display: inline-block;
+  background-image: url(./asset/968517b0ef1f7e790b0df13e67c42908.png); }
+
+.ep-e-a-64 {
+  display: inline-block;
+  background-image: url(./asset/c51702ccb711180c483011345e7efc8a.png); }
+
+.ep-e-e-16 {
+  display: inline-block;
+  background-image: url(./asset/2198fb90cd396e781a7aabb224c248e4.png); }
+
+.ep-e-e-20 {
+  display: inline-block;
+  background-image: url(./asset/4bd751016ed11aae11c1484a3a883996.png); }
+
+.ep-e-e-32 {
+  display: inline-block;
+  background-image: url(./asset/582ccf2590bc64e38113cc76ba71af4f.png); }
+
+.ep-e-e-64 {
+  display: inline-block;
+  background-image: url(./asset/37719639e33dc78bbdb894613d157a5b.png); }
+
+.ep-e-g-16 {
+  display: inline-block;
+  background-image: url(./asset/fbf4560dfce272c3e6523c638c58f9f9.png); }
+
+.ep-e-g-20 {
+  display: inline-block;
+  background-image: url(./asset/9c7faf66d0f9866420f97fcca52c4444.png); }
+
+.ep-e-g-32 {
+  display: inline-block;
+  background-image: url(./asset/8ed75e4accbc7b61f1a53e0b871d8dee.png); }
+
+.ep-e-g-64 {
+  display: inline-block;
+  background-image: url(./asset/cc9d6b0e6925706d26a4df2b23ebecb2.png); }
+
+.ep-e-t-16 {
+  display: inline-block;
+  background-image: url(./asset/2a7cd0e77c69514a9374e78dc58766e9.png); }
+
+.ep-e-t-20 {
+  display: inline-block;
+  background-image: url(./asset/8c441eb1bf425dab65ca0f20127bfbe5.png); }
+
+.ep-e-t-32 {
+  display: inline-block;
+  background-image: url(./asset/c6a99e0b8d1aa7c403d7f4b70afc69f7.png); }
+
+.ep-e-t-64 {
+  display: inline-block;
+  background-image: url(./asset/c89a7cdb9874a8f485ab3eb1deb0187d.png); }
diff --git a/dist/emoji-panel.js b/dist/emoji-panel.js
@@ -44,7 +44,8 @@
 /* 0 */
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(1);
+	__webpack_require__(1);
+	module.exports = __webpack_require__(5);
 
 
 /***/ },
@@ -86,6 +87,8 @@
 
 	    var _ref$imageSet = _ref.imageSet;
 	    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;
 
 	    _classCallCheck(this, EmojiPanel);
 
@@ -99,9 +102,14 @@
 	        throw new Error('`imageSet` should have one of `EmojiPanel.IMAGE_SET` values, got ${imageSet}.');
 	      }
 	    }
-	    var windowImageSet = EmojiPanel.createWindowImageSet(imageSet);
+	    var windowImageSet = EmojiPanel.createWindowImageSet({ imageSet: imageSet, size: size });
 	    el.innerHTML = '';
 	    el.appendChild(windowImageSet);
+
+	    // Privates
+	    this._eventListeners = {
+	      click: []
+	    };
 	  }
 
 	  return EmojiPanel;
@@ -111,12 +119,13 @@
 
 	exports.default = EmojiPanel;
 	EmojiPanel.IMAGE_SET = _constant.IMAGE_SET;
+	EmojiPanel.SIZE = _constant.SIZE;
 
 /***/ },
 /* 2 */
 /***/ function(module, exports) {
 
-	'use strict';
+	"use strict";
 
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
@@ -128,16 +137,23 @@
 	  EMOJIONE: 4
 	};
 
-	var CATEGORIES = exports.CATEGORIES = {
-	  Activity: 'Activity',
-	  Flags: 'Flags',
-	  Foods: 'Foods',
-	  Nature: 'Nature',
-	  Objects: 'Objects',
-	  People: 'People',
-	  Places: 'Places',
-	  Symbols: 'Symbols',
-	  Other: null
+	var SIZE = exports.SIZE = {
+	  16: 0,
+	  20: 1,
+	  32: 2,
+	  64: 4
+	};
+
+	var CATEGORY = exports.CATEGORY = {
+	  ACTIVITY: 0,
+	  FLAGS: 1,
+	  FOODS: 2,
+	  NATURE: 4,
+	  OBJECTS: 8,
+	  PEOPLE: 16,
+	  PLACES: 32,
+	  SYMBOLS: 64,
+	  OTHER: 128
 	};
 
 /***/ },
@@ -160,29 +176,99 @@
 
 	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-	var getSortedEmojiData = function getSortedEmojiData() {
-	  var categoryMap = Object.keys(_constant.CATEGORIES).reduce(function (obj, category) {
-	    return Object.assign(obj, _defineProperty({}, _constant.CATEGORIES[category], category));
-	  }, {});
+	var categoryMap = {
+	  Activity: _constant.CATEGORY.ACTIVITY,
+	  Flags: _constant.CATEGORY.FLAGS,
+	  Foods: _constant.CATEGORY.FOODS,
+	  Nature: _constant.CATEGORY.NATURE,
+	  Objects: _constant.CATEGORY.OBJECTS,
+	  People: _constant.CATEGORY.PEOPLE,
+	  Places: _constant.CATEGORY.PLACES,
+	  Symbols: _constant.CATEGORY.SYMBOLS,
+	  null: _constant.CATEGORY.OTHER
+	};
+
+	var getBoolNameByImageSet = function getBoolNameByImageSet(imageSet) {
+	  switch (imageSet) {
+	    case _constant.IMAGE_SET.APPLE:
+	      return 'has_img_apple';
+	    case _constant.IMAGE_SET.GOOGLE:
+	      return 'has_img_google';
+	    case _constant.IMAGE_SET.TWITTER:
+	      return 'has_img_twitter';
+	    case _constant.IMAGE_SET.EMOJIONE:
+	      return 'has_img_emojione';
+	  }
+	};
+
+	var sizeMap = Object.keys(_constant.SIZE).reduce(function (obj, sizeKey) {
+	  return Object.assign(obj, _defineProperty({}, _constant.SIZE[sizeKey], sizeKey));
+	}, {});
+
+	var getSizeKeyByValue = function getSizeKeyByValue(size) {
+	  return sizeMap[size];
+	};
+
+	var getEmojiClassNameByImageSetAndSize = function getEmojiClassNameByImageSetAndSize() {
+	  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+	  var imageSet = _ref.imageSet;
+	  var size = _ref.size;
+
+	  var sizeString = getSizeKeyByValue(size);
+
+	  var imageSetString = void 0;
+	  switch (imageSet) {
+	    case _constant.IMAGE_SET.APPLE:
+	      imageSetString = 'a';
+	      break;
+	    case _constant.IMAGE_SET.GOOGLE:
+	      imageSetString = 'g';
+	      break;
+	    case _constant.IMAGE_SET.TWITTER:
+	      imageSetString = 't';
+	      break;
+	    case _constant.IMAGE_SET.EMOJIONE:
+	      imageSetString = 'e';
+	      break;
+	  }
+
+	  var emojiClassName = 'ep-e-' + imageSetString + '-' + sizeString;
+	  return emojiClassName;
+	};
+
+	var getSortedEmojiData = function getSortedEmojiData(imageSet) {
+	  var boolName = getBoolNameByImageSet(imageSet);
 
 	  var sortedEmojiData = _emojiData2.default.sort(function (emojiA, emojiB) {
 	    return emojiA['sort_order'] - emojiB['sort_order'];
 	  }).reduce(function (obj, emoji) {
-	    var categoryName = categoryMap[emoji.category];
-	    var categoryArray = obj[categoryName] || [];
-	    return Object.assign(obj, _defineProperty({}, categoryName, categoryArray.concat(emoji)));
+	    if (emoji[boolName]) {
+	      var category = categoryMap[emoji.category];
+	      var categoryArray = obj[category] || [];
+	      return Object.assign(obj, _defineProperty({}, category, categoryArray.concat(emoji)));
+	    } else {
+	      return obj;
+	    }
 	  }, {});
 	  return sortedEmojiData;
 	};
 
-	exports.default = function (imageSet) {
-	  var sortedEmojiData = getSortedEmojiData();
+	exports.default = function () {
+	  var _ref2 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
-	  return '\n    <div>\n      <div>\n        ' + Object.keys(_constant.CATEGORIES).map(function (category) {
-	    return '\n        <span>\n          ' + category + '\n        </span>\n        ';
-	  }).join('') + '\n      </div>\n      <div>\n        ' + Object.keys(_constant.CATEGORIES).map(function (category) {
-	    return '\n        <div>\n          <div>\n            ' + category + '\n          </div>\n          <div>\n            ' + sortedEmojiData[category].map(function (emoji) {
-	      return '\n            <span>\n              ' + emoji.name + '\n            </span>\n            ';
+	  var imageSet = _ref2.imageSet;
+	  var size = _ref2.size;
+
+	  var sortedEmojiData = getSortedEmojiData(imageSet);
+	  var emojiClassName = getEmojiClassNameByImageSetAndSize({ imageSet: imageSet, size: size });
+	  var sizeNumber = Number(getSizeKeyByValue(size));
+
+	  return '\n    <div>\n      <div>\n        ' + Object.keys(_constant.CATEGORY).map(function (categoryKey) {
+	    return '\n        <span>\n          ' + categoryKey + '\n        </span>\n        ';
+	  }).join('') + '\n      </div>\n      <div>\n        ' + Object.keys(_constant.CATEGORY).map(function (categoryKey) {
+	    return '\n        <div>\n          <div>\n            ' + categoryKey + '\n          </div>\n          <div>\n            ' + sortedEmojiData[_constant.CATEGORY[categoryKey]].map(function (emoji) {
+	      return '\n            <span class=' + emojiClassName + ' style="width: ' + sizeNumber + 'px; height: ' + sizeNumber + 'px; 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    ';
 	};
@@ -35041,5 +35127,11 @@
 		}
 	];
 
+/***/ },
+/* 5 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
 /***/ }
 /******/ ]);
diff --git a/dist/emoji-panel.min.css b/dist/emoji-panel.min.css
diff --git a/dist/emoji-panel.min.js b/dist/emoji-panel.min.js
diff --git a/dist/example.css b/dist/example.css
@@ -0,0 +1,63 @@
+.ep-e-a-16 {
+  display: inline-block;
+  background-image: url(./asset/dd31a73e9973d39cee5d9de2616ad911.png); }
+
+.ep-e-a-20 {
+  display: inline-block;
+  background-image: url(./asset/c99d7c94cff6634c6d949d18c39331c7.png); }
+
+.ep-e-a-32 {
+  display: inline-block;
+  background-image: url(./asset/968517b0ef1f7e790b0df13e67c42908.png); }
+
+.ep-e-a-64 {
+  display: inline-block;
+  background-image: url(./asset/c51702ccb711180c483011345e7efc8a.png); }
+
+.ep-e-e-16 {
+  display: inline-block;
+  background-image: url(./asset/2198fb90cd396e781a7aabb224c248e4.png); }
+
+.ep-e-e-20 {
+  display: inline-block;
+  background-image: url(./asset/4bd751016ed11aae11c1484a3a883996.png); }
+
+.ep-e-e-32 {
+  display: inline-block;
+  background-image: url(./asset/582ccf2590bc64e38113cc76ba71af4f.png); }
+
+.ep-e-e-64 {
+  display: inline-block;
+  background-image: url(./asset/37719639e33dc78bbdb894613d157a5b.png); }
+
+.ep-e-g-16 {
+  display: inline-block;
+  background-image: url(./asset/fbf4560dfce272c3e6523c638c58f9f9.png); }
+
+.ep-e-g-20 {
+  display: inline-block;
+  background-image: url(./asset/9c7faf66d0f9866420f97fcca52c4444.png); }
+
+.ep-e-g-32 {
+  display: inline-block;
+  background-image: url(./asset/8ed75e4accbc7b61f1a53e0b871d8dee.png); }
+
+.ep-e-g-64 {
+  display: inline-block;
+  background-image: url(./asset/cc9d6b0e6925706d26a4df2b23ebecb2.png); }
+
+.ep-e-t-16 {
+  display: inline-block;
+  background-image: url(./asset/2a7cd0e77c69514a9374e78dc58766e9.png); }
+
+.ep-e-t-20 {
+  display: inline-block;
+  background-image: url(./asset/8c441eb1bf425dab65ca0f20127bfbe5.png); }
+
+.ep-e-t-32 {
+  display: inline-block;
+  background-image: url(./asset/c6a99e0b8d1aa7c403d7f4b70afc69f7.png); }
+
+.ep-e-t-64 {
+  display: inline-block;
+  background-image: url(./asset/c89a7cdb9874a8f485ab3eb1deb0187d.png); }