| Server IP : 37.220.80.31 / Your IP : 3.141.7.144 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/sale/address/src/ |
Upload File : |
import {Vue} from 'ui.vue';
import {ControlMode, AddressStringConverter} from 'location.core';
import {AutocompleteFeature, Factory, State} from 'location.widget';
import {ClosableDirective} from './closabledirective';
import './css/address.css';
export const AddressControlConstructor = Vue.extend({
directives: {
closable: ClosableDirective
},
props: {
name: {type: String, required: true},
initValue: {required: false},
onChangeCallback: {type: Function, required: false}
},
data()
{
return {
id: null,
isLoading: false,
value: null,
addressWidget: null,
}
},
methods: {
startOver()
{
this.addressWidget.address = null;
this.changeValue(null);
this.closeMap();
},
changeValue(newValue)
{
this.$emit('change', newValue);
this.value = newValue;
if (this.onChangeCallback)
{
setTimeout(this.onChangeCallback, 0);
}
},
buildAddress(value)
{
try
{
return new BX.Location.Core.Address(JSON.parse(value));
}
catch(e)
{
return null;
}
},
getMap()
{
if (!this.addressWidget)
{
return null;
}
for( let feature of this.addressWidget.features)
{
if(feature instanceof BX.Location.Widget.MapFeature)
{
return feature;
}
}
return null;
},
showMap()
{
let map = this.getMap();
if (map)
{
map.showMap();
}
},
closeMap()
{
let map = this.getMap();
if (map)
{
map.closeMap();
}
},
onInputControlClicked()
{
if (this.value)
{
this.showMap();
}
else
{
this.closeMap();
}
}
},
computed: {
wrapperClass()
{
return {
'ui-ctl': true,
'ui-ctl-w100': true,
'ui-ctl-after-icon': true,
}
},
addressFormatted()
{
if(!this.value || !this.addressWidget)
{
return '';
}
let address = this.buildAddress(this.value);
if (!address)
{
return '';
}
return address.toString(
this.addressWidget.addressFormat,
AddressStringConverter.STRATEGY_TYPE_FIELD_SORT
);
},
},
mounted()
{
if (this.initValue)
{
this.value = this.initValue;
}
let factory = new BX.Location.Widget.Factory;
this.addressWidget = factory.createAddressWidget({
address: this.initValue ? this.buildAddress(this.initValue) : null,
mapBehavior: 'manual',
mode: ControlMode.edit,
useFeatures:
{
fields: false,
map: true,
autocomplete: true
}
});
this.addressWidget.subscribeOnAddressChangedEvent((event) => {
let data = event.getData();
let address = data.address;
if (!address.latitude || !address.longitude)
{
this.changeValue(null);
this.closeMap();
}
else
{
this.changeValue(address.toJson());
this.showMap();
}
});
this.addressWidget.subscribeOnStateChangedEvent((event) => {
let data = event.getData();
if (data.state === State.DATA_INPUTTING)
{
this.changeValue(null);
this.closeMap();
}
else if (data.state === State.DATA_LOADING)
{
this.isLoading = true;
}
else if (data.state === State.DATA_LOADED)
{
this.isLoading = false;
}
});
this.addressWidget.subscribeOnFeatureEvent((event) => {
let data = event.getData();
if (data.feature instanceof AutocompleteFeature)
{
this.isLoading = (data.eventCode === AutocompleteFeature.searchStartedEvent);
}
});
/**
* Render widget
*/
this.addressWidget.render({
inputNode: this.$refs['input-node'],
mapBindElement: this.$refs['input-node'],
controlWrapper: this.$refs['control-wrapper'],
});
},
template: `
<div
v-closable="{
exclude: ['input-node'],
handler: 'closeMap'
}"
class="ui-ctl-w100"
>
<div :class="wrapperClass" ref="control-wrapper">
<div
v-show="!isLoading"
@click="startOver"
class="ui-ctl-after ui-ctl-icon-btn ui-ctl-icon-clear"
></div>
<div
v-show="isLoading"
class="ui-ctl-after ui-ctl-icon-loader"
></div>
<input
@click="onInputControlClicked"
ref="input-node"
type="text"
class="ui-ctl-element ui-ctl-textbox"
v-html="addressFormatted"
/>
<input v-model="value" type="hidden" :name="name" />
</div>
</div>
`
});