Skip to content

Migrate to VueJS 2 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xoco70 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Migrate to VueJS 2 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ec4c2a
Migrate to VueJS 2
Oct 18, 2017
153d3ff
trying to upgrade to VueJS 2
Oct 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-location-picker",
"version": "1.0.1",
"name": "vue-location-picker2",
"version": "2.0.0",
"author": "Pantelis Peslis <pespantelis@gmail.com>",
"license": "MIT",
"description": "Location Picker component for Vue.js",
Expand All @@ -22,7 +22,7 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^1.0.0",
"vue": "^2.2.6",
"babel-runtime": "^5.8.0"
},
"devDependencies": {
Expand All @@ -35,8 +35,9 @@
"css-loader": "^0.23.0",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-loader": "^11.3.3",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.2.6",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
Expand Down
14 changes: 7 additions & 7 deletions src/LocationPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="LocationPicker">
<div class="LocationPicker__map" v-el:map></div>
<input type="text" class="LocationPicker__autocomplete" v-el:input/>
<info-window class="LocationPicker__info-window" v-ref:info></info-window>
<div class="LocationPicker__map" ref="map"></div>
<input type="text" class="LocationPicker__autocomplete" ref="input"/>
<info-window class="LocationPicker__info-window" ref="info"></info-window>
</div>
</template>

Expand Down Expand Up @@ -34,7 +34,7 @@
'location-picker-init' (options) {
this.geocoder = new google.maps.Geocoder()

this.map = new google.maps.Map(this.$els.map, Object.assign({
this.map = new google.maps.Map(this.$refs.map, Object.assign({
center: { lat: 0, lng: 0 },
zoom: 3,
disableDefaultUI: true
Expand All @@ -50,10 +50,10 @@
content: this.$refs.info.$el
}, options.infoWindow))

this.autocomplete = new google.maps.places.Autocomplete(this.$els.input, Object.assign({
this.autocomplete = new google.maps.places.Autocomplete(this.$refs.input, Object.assign({
types: ['geocode']
}, options.autocomplete))
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.$els.input)
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.$refs.input)

// events
google.maps.event.addListenerOnce(this.map, 'idle', this.openInfoWindow)
Expand All @@ -74,7 +74,7 @@

geocodeLocation (e) {
this.map.panTo(e.latLng)
this.$els.input.value = ''
this.$refs.input.value = ''

this.geocoder.geocode({'latLng': e.latLng}, (response) => {
if (response && response.length > 0) {
Expand Down
51 changes: 30 additions & 21 deletions src/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,35 @@
module.exports = (app, config, options) => {
if (!config.key) {
console.error('[Vue Location Picker warn]: You should give a Google Maps API key')
return
}
import Vue from 'vue'
import LocationPicker from './LocationPicker.vue'

config.libraries = 'places'
config.callback = 'initLocationPicker'
LocationPicker.install = function (Vue, options) {
console.log(options);
if (! options || !options.key) {
console.error('[Vue Location Picker warn]: You should give a Google Maps API key')
return
}

// set the callback function
global.initLocationPicker = () => {
app.$broadcast('location-picker-init', options || {})
}
options.libraries = 'places';
options.callback = 'initLocationPicker';

// construct the url
var apiUrl = 'https://maps.googleapis.com/maps/api/js'
var params = Object.keys(config).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(config[key])}`)
var url = `${apiUrl}?${params.join('&')}`
// set the global event bus
global.vueLocationPickerEventBus = new Vue();

// create and append the script to body
var script = document.createElement('script')
script.src = url
script.async = true
script.defer = true
document.body.appendChild(script)
// set the callback function
global.initLocationPicker = () => {
global.vueLocationPickerEventBus.$emit('location-picker-init')
};

// construct the url
var apiUrl = 'https://maps.googleapis.com/maps/api/js';
var params = Object.keys(options).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(options[key])}`);
var url = `${apiUrl}?${params.join('&')}`;

// create and append the script to body
var script = document.createElement('script');
script.src = url;
script.async = true;
script.defer = true;
document.body.appendChild(script);
}
export default LocationPicker;