emojione v3, v1.0.0 and loads of bug fixes

puranjayjain · Jun 12, 2017 · 427b0f5 · 427b0f5
2 parents 506dd48 + c7f4e5a
commit 427b0f5
Show file tree

Hide file tree

Showing 5 changed files with 465 additions and 486 deletions.
diff --git a/bower.json b/bower.json
@@ -22,7 +22,8 @@
     "yarn.lock"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.0",
+    "emojione": "ranks/emojione#^3.0.3",
+    "polymer": "Polymer/polymer#^1.9.1 || ^2.0.0",
     "iron-image": "PolymerElements/iron-image#^2.1.1",
     "iron-ajax": "PolymerElements/iron-ajax#^2.0.2",
     "iron-list": "PolymerElements/iron-list#^2.0.0",
@@ -35,33 +36,20 @@
     "iron-selector": "PolymerElements/iron-selector#^2.0.0",
     "paper-styles": "PolymerElements/paper-styles#^2.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
-    "emojione": "ranks/emojione#^3.0.3",
     "neon-animation": "PolymerElements/neon-animation#^2.0.0",
     "web-animations-js": "web-animations/web-animations-js#^2.2.5",
     "iron-icon": "PolymerElements/iron-icon#^2.0.0",
     "iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
     "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
-    "paper-chip": "ThomasCybulski/paper-chip#^2.0.3",
     "iron-meta": "PolymerElements/iron-meta#^2.0.0",
     "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^2.0.0",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0"
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
+    "lodash": "lodash/lodash#^4.17.4",
+    "paper-input-autocomplete-chips": "WebPaperElements/paper-input-autocomplete-chips#^0.30.4"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
-  },
-  "resolutions": {
-    "polymer": "^2.0.0",
-    "webcomponentsjs": "^v1.0.0",
-    "lodash": "^4.17.4",
-    "iron-flex-layout": "^2.0.0",
-    "iron-selector": "^2.0.0",
-    "paper-icon-button": "^2.0.0",
-    "paper-material": "^2.0.0",
-    "paper-styles": "^2.0.0",
-    "paper-ripple": "^2.0.0",
-    "iron-meta": "^2.0.0",
-    "iron-a11y-keys-behavior": "^2.0.0"
   }
 }
diff --git a/emojione-badge.html b/emojione-badge.html
@@ -1,53 +1,41 @@
-<link rel="import" href="../iron-fit-behavior/iron-fit-behavior.html">
-
 <dom-module id="emojione-badge">
   <template strip-whitespace>
-    <custom-style>
-      <style>
-        :host {
-          position: absolute;
-          pointer-events: none;
-          padding: 8px;
-          border-radius: 4px;
-          background-color: rgba(0, 0, 0, .8);
-          color: #fff;
-          text-align: center;
-          z-index: 1;
-        }
+    <style is="custom-style">
+      :host {
+        position: absolute;
+        pointer-events: none;
+        padding: 8px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, .8);
+        color: #fff;
+        text-align: center;
+        z-index: 1;
+      }
 
-      </style>
-    </custom-style>
+    </style>
 
     <slot></slot>
   </template>
   <script>
-    class EmojioneBadge extends Polymer.Element {
-
-      static get is() {
-        return 'emojione-badge';
-      }
+    Polymer({
 
-      static get properties() {
-        return {
-          position: {
-            type: Object
-          }
-        };
-      }
+      is: 'emojione-badge',
 
-      static get observers() {
-        return ['onPositionChange(position)'];
-      }
+      properties: {
+        position: {
+          type: Object
+        }
+      },
+
+      observers: ['onPositionChange(position)'],
 
-      onPositionChange(position) {
+      onPositionChange: function (position) {
         if (position) {
           for (var i in position) {
             this.style[i] = position[i] + 'px';
           }
         }
       }
-    }
-
-    window.customElements.define(EmojioneBadge.is, EmojioneBadge);
+    });
   </script>
 </dom-module>
diff --git a/emojione-emoji.html b/emojione-emoji.html
@@ -2,47 +2,43 @@
 
 <dom-module id="emojione-emoji">
   <template strip-whitespace>
-    <custom-style>
-      <style>
-        :host {
-          position: relative;
-          outline: none;
-          height: 48px;
-          width: 48px;
-          padding: 8px;
-          box-sizing: border-box;
-          border-radius: 3px;
-          cursor: pointer;
-          @apply --emojione-emoji-container;
-        }
-        paper-ripple {
-          color: var(--paper-grey-400);
-          @apply --emojione-emoji-ripple;
-        }
+    <style is="custom-style">
+      :host {
+        position: relative;
+        outline: none;
+        height: 48px;
+        width: 48px;
+        padding: 8px;
+        box-sizing: border-box;
+        border-radius: 3px;
+        cursor: pointer;
+        @apply --emojione-emoji-container;
+      }
+      paper-ripple {
+        color: var(--paper-grey-400);
+        @apply --emojione-emoji-ripple;
+      }
 
-      </style>
-    </custom-style>
+    </style>
 
     <slot></slot>
   </template>
   <script>
-    class EmojioneEmoji extends Polymer.mixinBehaviors([Polymer.PaperInkyFocusBehavior], Polymer.Element) {
+    Polymer({
 
-      static get is() {
-        return 'emojione-emoji';
-      }
+      is: 'emojione-emoji',
+
+      behaviors: [Polymer.PaperInkyFocusBehavior],
 
       /**
        * @override the createRipple function in paper ripple
        * https://github.com/PolymerElements/paper-behaviors/blob/master/paper-inky-focus-behavior.html
        */
-      _createRipple() {
+      _createRipple: function () {
         const ripple = Polymer.PaperRippleBehavior._createRipple();
         ripple.id = 'ink';
         return ripple;
       }
-    }
-
-    window.customElements.define(EmojioneEmoji.is, EmojioneEmoji);
+    });
   </script>
 </dom-module>