Your IP : 216.73.216.86
import { Dom } from 'main.core';
import Keyboard from '../mixins/keyboard';
export default
{
mixins: [Keyboard],
props: {
name: {
type: String,
required: true,
},
type: {
type: Number,
required: true,
},
value: {
type: String,
required: false,
default: '',
},
isEditable: {
type: Boolean,
required: false,
default: true,
},
},
data: () => {
return {
isFocused: false,
};
},
mounted()
{
this.adjustQueryNodeHeight();
},
computed: {
isTitleVisible(): boolean
{
return this.isFocused || this.value;
},
titleClasses(): Object
{
return {
'mobile-address-field-title': true,
'mobile-address-field-title-focused': this.isFocused,
};
},
placeholder(): string
{
return this.isTitleVisible
? this.$Bitrix.Loc.getMessage('LOCATION_MOBILE_APP_NOT_ENTERED')
: this.name;
},
},
methods: {
onFocusIn(): void
{
this.isFocused = true;
if (window.platform === 'android')
{
setTimeout(() => {
this.adjustWindowHeight()
const container = this.$refs['container'];
const buttonOffset = 50;
const containerPosition = container.getBoundingClientRect().top;
const offsetPosition = containerPosition - buttonOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}, 300);
}
},
onFocusOut(): void
{
this.isFocused = false;
},
onInput(event): void
{
this.$emit('input', {
type: this.type,
value: event.target.value,
});
this.adjustQueryNodeHeight();
},
adjustQueryNodeHeight(): void
{
setTimeout(() => {
const queryNode = this.$refs['textarea-query'];
if (queryNode)
{
Dom.style(queryNode, 'height', 'auto');
Dom.style(queryNode, 'height', `${queryNode.scrollHeight}px`);
}
}, 0);
},
},
template: `
<div ref="container" class="mobile-address-field-container">
<div
v-show="isTitleVisible"
:class="titleClasses"
>
{{name}}
</div>
<textarea
:placeholder="placeholder"
:value="value"
:disabled="!isEditable"
@focus="onFocusIn"
@focusout="onFocusOut"
@input="onInput"
class="mobile-address-field"
ref="textarea-query"
type="text"
rows="1"
></textarea>
</div>
`
};