Merge branch '1.x'

CHANGELOG.md

@@ -1,9 +1,15 @@
-# v1.0.0 (T.B.A)
+# v1.0.0
 
 * changed the recent emoji logic to only include an array with `:shortname:`
 
 * added `emoji-changed` event along with emoji value for event-based applications 
 
+# v1.0.1
+
+- Fixed merging issues
+- 
+- fixed hybrid `<paper-chip>`
+
 # v2.0.0
 
 * only supports pure v2.0 elements

bower.json

@@ -44,7 +44,8 @@
     "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"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

emojione-chip-input.html

@@ -0,0 +1,113 @@
+<link rel="import" href="../paper-input/paper-input.html">
+
+<link rel="import" href="emojione-chip.html">
+
+<!--
+
+Material design: [Chips](https://material.io/guidelines/components/chips.html)
+
+`emojione-chip-input`
+Paper-chip's represent complex entities in small blocks, such as a contact.
+
+@element paper-chip-input
+@demo demo/index.html
+-->
+
+<dom-module id="emojione-chip-input">
+  <template>
+    <style></style>
+
+    <paper-input value="{{_value}}" label="[[label]]" on-keydown="_keydown" no-label-float="[[noLabelFloat]]">
+      <slot id="slot" name="input" slot="prefix"></slot>
+      <div id="slot2" name="input2" slot="prefix">
+        <template is="dom-repeat" items="[[items]]" as="item">
+          [[item.name]]
+          <emojione-chip id="paper-chip-[[item]]-[[index]]" label="[[item]]" closable$="[[closable]]" on-chip-removed="_removeChip"></emojione-chip>
+        </template>
+      </div>
+    </paper-input>
+
+  </template>
+
+  <script>
+
+    Polymer({
+      is: 'emojione-chip-input',
+
+      properties: {
+        noLabelFloat: {
+          type: Boolean
+        },
+        items: {
+          type: Array,
+          value: []
+        },
+        closable: {
+          type: Boolean,
+          value: false
+        },
+        label: {
+          type: String,
+          value: ''
+        },
+        _value: {
+          type: String
+        }
+      },
+
+      _keydown: function (event) {
+        var keyCode_backspace = '8';
+        var keyCode_enter = '13';
+        if (event.keyCode == keyCode_backspace && this.items.length != 0 && (this._value == '' || this._value == undefined)) {
+          this._removeLastItem();
+        } else if (event.keyCode == keyCode_backspace && Polymer.dom(this.$.slot).getEffectiveChildNodes().length > 0 && (this._value == '' || this._value == undefined)) {
+          var distributedNodes = Polymer.dom(this.$.slot).getDistributedNodes()
+          var lastPaperChipIndex = _getLastPaperChipPosition(Polymer.dom(this).childNodes);
+          this._throwChipRemovedEvent(Polymer.dom(this).childNodes[lastPaperChipIndex].label);
+          Polymer.dom(this).removeChild(Polymer.dom(this).childNodes[lastPaperChipIndex]);
+        }
+
+        if (event.keyCode == keyCode_enter && this._value != '' && this._value != undefined) {
+          this._saveTag(this._value);
+          this._value = '';
+        }
+
+        Polymer.dom.flush();
+      },
+
+      _saveTag: function (name) {
+        if (this.items.indexOf(name) == -1) {
+          this.push('items', name);
+        }
+      },
+
+      _removeChip: function (event) {
+        var index = this.items.indexOf(event.detail.chipLabel);
+        if (index != -1) {
+          this.splice('items', index, 1);
+        }
+      },
+
+      _removeLastItem: function () {
+        if (this.items.length != 0) {
+          this._throwChipRemovedEvent(this.items[this.items.length - 1]);
+          this.splice('items', -1, 1);
+        }
+      },
+
+      _getLastPaperChipPosition: function (childNodes) {
+        var lastPaperChipIndex = 0;
+        for (var i = 0; i < childNodes.length; i++) {
+          if (childNodes[i].tagName == 'EMOJIONE-CHIP') {
+            lastPaperChipIndex = i;
+          }
+        }
+        return lastPaperChipIndex;
+      },
+
+      _throwChipRemovedEvent: function (chipLabel) {
+        this.fire('chip-removed', {'chipLabel': chipLabel});
+      }
+    });
+  </script>
+</dom-module>

emojione-chip.html

@@ -0,0 +1,152 @@
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<!--
+
+Material design: [Chips](https://material.io/guidelines/components/chips.html#chips-specs)
+
+`paper-chip`
+Paper-chip's represent complex entities in small blocks, such as a contact.
+
+### Styling
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-chip-label-color` | The paper-chip label-color | `rgba(0, 0, 0, 0.6)`
+`--paper-chip-background-color` | The paper-chip background-color | `#e4e4e4`
+`--paper-chip-avatar-background-color` | The paper-chip avatar background-color | `#757575`
+`--paper-chip-avatar-font-color` | The paper-chip avatar font and icon color | `#ffffff`
+`--paper-chip-close-color` | The paper-chip close icon color | `#a6a6a6`
+
+@element paper-chip
+@demo demo/index.html
+-->
+
+<dom-module id="emojione-chip">
+  <template strip-whitespace>
+    <style>
+      .chip {
+        display: inline-block;
+        height: 32px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--paper-chip-label-color, rgba(0, 0, 0, 0.6));
+        line-height: 32px;
+        padding: 0 4px 0 12px;
+        border-radius: 16px;
+        background-color: var(--paper-chip-background-color, #E0E0E0);
+        margin-bottom: 5px;
+        margin-right: 5px;
+      }
+      .hoverEffect:hover {
+        @apply --shadow-elevation-2dp;
+        cursor: default;
+      }
+      .unselectable {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .chip:active {
+        background: #d6d6d6;
+      }
+      .chip .closeIcon {
+        margin-left: 4px;
+        cursor: pointer;
+        float: right;
+        width: 12px;
+      }
+      .close {
+        top: -1px;
+      }
+      iron-icon {
+        --iron-icon-height: 16px;
+        --iron-icon-width: 16px;
+        position: relative;
+        right: 8px;
+        color: var(--paper-chip-background-color, #E0E0E0);
+        background-color: var(--paper-chip-close-color, #A6A6A6);
+        border-radius: 50%;
+      }
+      .label {
+        margin-right: 12px;
+      }
+      .chip .inline {
+        display: -webkit-inline-box;
+      }
+      slot[name='avatar']::slotted(.chip-image) {
+        float: left;
+        margin: 0 8px 0 -12px;
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+      }
+      slot[name='avatar']::slotted(.chip-background) {
+        --iron-icon-height: 19px;
+        --iron-icon-width: 19px;
+        background: var(--paper-chip-avatar-background-color, #989898);
+        border-radius: 50%;
+        color: var(--paper-chip-avatar-font-color, #ffffff);
+        float: left;
+        font-weight: bold;
+        font-size: 16px;
+        height: 32px;
+        margin: 0 8px 0 -12px;
+        text-align: center;
+        width: 32px;
+      }
+      [hidden] {
+        display: none;
+      }
+
+    </style>
+
+    <div class$="[[_computePaperChipClass(noHover)]]">
+      <span class="label">[[label]]</span>
+      <slot name="avatar"></slot>
+      <div hidden$="[[!closable]]" class="closeIcon" on-tap="_remove">
+        <iron-icon class="close" icon="emojione-icons:cancel"></iron-icon>
+      </div>
+    </div>
+
+  </template>
+
+  <script>
+    Polymer({
+      is: 'emojione-chip',
+
+      properties: {
+        label: {
+          type: String,
+          value: 'Default Label'
+        },
+        closable: {
+          type: Boolean,
+          value: false
+        },
+        noHover: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      _computePaperChipClass: function (noHover) {
+        if (noHover == true) {
+          return 'chip unselectable';
+        } else {
+          return 'chip unselectable hoverEffect';
+        }
+      },
+
+      _remove: function (event) {
+        this.fire('chip-removed', {'chipLabel': this.label});
+        if (Polymer.dom(this).parentNode.id != 'slot2') {
+          Polymer.dom(this).parentNode.removeChild(Polymer.dom(this));
+        }
+      }
+    });
+  </script>
+</dom-module>