blob: a172a091a23fa72195d524813517744c7196091a [file] [log] [blame]
// Copyright (C) 2017 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
(function() {
'use strict';
const MAX_ITEMS_DROPDOWN = 10;
const VERTICAL_OFFSET = 7;
const ALL_SUGGESTIONS = [
{value: '💯', match: '100'},
{value: '💔', match: 'broken heart'},
{value: '🍺', match: 'beer'},
{value: '✔', match: 'check'},
{value: '😎', match: 'cool'},
{value: '😕', match: 'confused'},
{value: '😭', match: 'crying'},
{value: '🔥', match: 'fire'},
{value: '👊', match: 'fistbump'},
{value: '🐨', match: 'koala'},
{value: '😄', match: 'laugh'},
{value: '🤓', match: 'glasses'},
{value: '😆', match: 'grin'},
{value: '😐', match: 'neutral'},
{value: '👌', match: 'ok'},
{value: '🎉', match: 'party'},
{value: '💩', match: 'poop'},
{value: '🙏', match: 'pray'},
{value: '😞', match: 'sad'},
{value: '😮', match: 'shock'},
{value: '😊', match: 'smile'},
{value: '😢', match: 'tear'},
{value: '😂', match: 'tears'},
{value: '😋', match: 'tongue'},
{value: '👍', match: 'thumbs up'},
{value: '👎', match: 'thumbs down'},
{value: '😒', match: 'unamused'},
{value: '😉', match: 'wink'},
{value: '🍷', match: 'wine'},
{value: '😜', match: 'winking tongue'},
];
Polymer({
is: 'gr-textarea',
/**
* @event bind-value-changed
*/
properties: {
autocomplete: Boolean,
disabled: Boolean,
rows: Number,
maxRows: Number,
placeholder: String,
fixedPositionDropdown: Boolean,
moveToRoot: Boolean,
text: {
type: String,
notify: true,
observer: '_handleTextChanged',
},
backgroundColor: {
type: String,
value: '#fff',
},
hideBorder: {
type: Boolean,
value: false,
},
monospace: {
type: Boolean,
value: false,
},
/** @type(?number) */
_colonIndex: Number,
_currentSearchString: {
type: String,
value: '',
observer: '_determineSuggestions',
},
_hideAutocomplete: {
type: Boolean,
value: true,
},
_index: Number,
_suggestions: Array,
},
behaviors: [
Gerrit.KeyboardShortcutBehavior,
],
keyBindings: {
esc: '_handleEscKey',
tab: '_handleEnterByKey',
enter: '_handleEnterByKey',
up: '_handleUpKey',
down: '_handleDownKey',
},
ready() {
this._resetEmojiDropdown();
if (this.monospace) {
this.classList.add('monospace');
}
if (this.hideBorder) {
this.$.textarea.classList.add('noBorder');
}
if (this.backgroundColor) {
this.updateStyles({'--background-color': this.backgroundColor});
}
this.listen(this.$.emojiSuggestions, 'dropdown-closed', '_resetAndFocus');
this.listen(this.$.emojiSuggestions, 'item-selected',
'_handleEmojiSelect');
},
detached() {
this.closeDropdown();
this.listen(this.$.emojiSuggestions, 'dropdown-closed', '_resetAndFocus');
this.listen(this.$.emojiSuggestions, 'item-selected',
'_handleEmojiSelect');
},
closeDropdown() {
if (!this.$.emojiSuggestions.hidden) {
this._closeEmojiDropdown();
}
},
getNativeTextarea() {
return this.$.textarea.textarea;
},
putCursorAtEnd() {
const textarea = this.getNativeTextarea();
// Put the cursor at the end always.
textarea.selectionStart = textarea.value.length;
textarea.selectionEnd = textarea.selectionStart;
this.async(() => {
textarea.focus();
});
},
_handleEscKey(e) {
if (this._hideAutocomplete) { return; }
e.preventDefault();
e.stopPropagation();
this._resetAndFocus();
},
_resetAndFocus() {
this._resetEmojiDropdown();
this.$.textarea.textarea.focus();
},
_handleUpKey(e) {
if (this._hideAutocomplete) { return; }
e.preventDefault();
e.stopPropagation();
this.$.emojiSuggestions.cursorUp();
this.$.textarea.textarea.focus();
},
_handleDownKey(e) {
if (this._hideAutocomplete) { return; }
e.preventDefault();
e.stopPropagation();
this.$.emojiSuggestions.cursorDown();
this.$.textarea.textarea.focus();
},
_handleEnterByKey(e) {
if (this._hideAutocomplete) { return; }
e.preventDefault();
e.stopPropagation();
this.text = this._getText(this.$.emojiSuggestions.getCurrentText());
this._resetEmojiDropdown();
},
_handleEmojiSelect(e) {
this.text = this._getText(e.detail.selected.dataset.value);
this._resetEmojiDropdown();
},
_getText(value) {
return this.text.substr(0, this._colonIndex || 0) +
value + this.text.substr(this.$.textarea.selectionStart) + ' ';
},
_getPositionOfCursor() {
this.$.hiddenText.textContent = this.$.textarea.value.substr(0,
this.$.textarea.selectionStart);
const caratSpan = document.createElement('span');
this.$.hiddenText.appendChild(caratSpan);
return caratSpan.getBoundingClientRect();
},
_getFontSize() {
const fontSizePx = getComputedStyle(this).fontSize || '12px';
return parseInt(fontSizePx.substr(0, fontSizePx.length - 2),
10);
},
_getScrollTop() {
return document.body.scrollTop;
},
/**
* This positions the dropdown to be just below the cursor position. It is
* calculated by having a hidden element with the same width and styling of
* the tetarea and the text up until the point of interest. Then a span
* element is added to the end so that there is a specific element to get
* the position of. Line height is determined (or falls back to 12px) as
* extra height to add.
*/
_updateSelectorPosition() {
// These are broken out into separate functions for testability.
const caratPosition = this._getPositionOfCursor();
const fontSize = this._getFontSize();
let top = caratPosition.top + fontSize + VERTICAL_OFFSET;
if (!this.fixedPositionDropdown) {
top += this._getScrollTop();
}
top += 'px';
const left = caratPosition.left + 'px';
this.$.emojiSuggestions.setPosition(top, left);
},
/**
* _handleKeydown used for key handling in the this.$.textarea AND all child
* autocomplete options.
*/
_onValueChanged(e) {
// Relay the event.
this.fire('bind-value-changed', e);
// If cursor is not in textarea (just opened with colon as last char),
// Don't do anything.
if (!e.currentTarget.focused) { return; }
const newChar = e.detail.value[this.$.textarea.selectionStart - 1];
// When a colon is detected, set a colon index, but don't do anything else
// yet.
if (newChar === ':') {
this._colonIndex = this.$.textarea.selectionStart - 1;
// If the colon index exists, continue to determine what needs to be done
// with the dropdown. It may be open or closed at this point.
} else if (this._colonIndex !== null) {
// The search string is a substring of the textarea's value from (1
// position after) the colon index to the cursor position.
this._currentSearchString = e.detail.value.substr(this._colonIndex + 1,
this.$.textarea.selectionStart);
// Under the following conditions, close and reset the dropdown:
// - The cursor is no longer at the end of the current search string
// - The search string is an space or new line
// - The colon has been removed
// - There are no suggestions that match the search string
if (this.$.textarea.selectionStart !==
this._currentSearchString.length + this._colonIndex + 1 ||
this._currentSearchString === ' ' ||
this._currentSearchString === '\n' ||
!(e.detail.value[this._colonIndex] === ':') ||
!this._suggestions.length) {
this._resetEmojiDropdown();
// Otherwise open the dropdown and set the position to be just below the
// cursor.
} else if (this.$.emojiSuggestions.hidden) {
this._hideAutocomplete = false;
this._openEmojiDropdown();
this._updateSelectorPosition();
}
this.$.textarea.textarea.focus();
}
},
_closeEmojiDropdown() {
this.$.emojiSuggestions.close();
this.$.emojiSuggestions.hidden = true;
},
_openEmojiDropdown() {
this.$.emojiSuggestions.open();
this.$.emojiSuggestions.hidden = false;
},
_formatSuggestions(matchedSuggestions) {
const suggestions = [];
for (const suggestion of matchedSuggestions) {
suggestion.dataValue = suggestion.value;
suggestion.text = suggestion.value + ' ' + suggestion.match;
suggestions.push(suggestion);
}
this._suggestions = suggestions;
},
_determineSuggestions(emojiText) {
if (!emojiText.length) {
this._formatSuggestions(ALL_SUGGESTIONS);
}
const matches = ALL_SUGGESTIONS.filter(suggestion => {
return suggestion.match.includes(emojiText);
}).splice(0, MAX_ITEMS_DROPDOWN);
this._formatSuggestions(matches);
},
_resetEmojiDropdown() {
// hide and reset the autocomplete dropdown.
Polymer.dom.flush();
this._currentSearchString = '';
this._hideAutocomplete = true;
this.closeDropdown();
this._colonIndex = null;
this.$.textarea.textarea.focus();
},
_handleTextChanged(text) {
this.dispatchEvent(
new CustomEvent('value-changed', {detail: {value: text}}));
},
});
})();