helpers
Functions
- bindEvents(vueInst, googleMapsInst, events) ⇒
void This function helps you to bind events from Google Maps API to Vue events
- capitalizeFirstLetter(text) ⇒
string Function that helps you to capitalize the first letter on a word
- getPropsValues(vueInst, props) ⇒
Object Function that helps you to get all non nullable props from a component
- getLazyValue(fn) ⇒
function This function is a helper for return to the user the internal Google Maps promise and can wait until it is ready. This piece of code was orignally written by sindresorhus and can be seen here
- mappedPropsToVueProps(mappedProps) ⇒
Object Strips out the extraneous properties we have in our mapped props definitions
- downArrowSimulator(input) ⇒
void This function simulates a down arrow key event when user hits return (enter) on the autocomplete component selection the first occurrence in the list.
This piece of code was orignally written by amirnissim and has been ported to Vanilla.js by GuillaumeLeclerc
- twoWayBindingWrapper(fn)
When you have two-way bindings, but the actual bound value will not equal the value you initially passed in, then to avoid an infinite loop you need to increment a counter every time you pass in a value, decrement the same counter every time the bound value changed, but only bubble up the event when the counter is zero.
- watchPrimitiveProperties(vueInst, propertiesToTrack, handler, immediate) ⇒
void Watch the individual properties of a PoD object, instead of the object per se. This is different from a deep watch where both the reference and the individual values are watched.
In effect, it throttles the multiple $watch to execute at most once per tick.
- bindProps(vueInst, googleMapsInst, props) ⇒
void Binds the properties defined in props to the google maps instance. If the prop is an Object type, and we wish to track the properties of the object (e.g. the lat and lng of a LatLng), then we do a deep watch. For deep watch, we also prevent the _changed event from being emitted if the data source was external.
bindEvents(vueInst, googleMapsInst, events) ⇒ void
This function helps you to bind events from Google Maps API to Vue events
Kind: global function
| Param | Type | Description |
|---|---|---|
| vueInst | Object | the Vue instance |
| googleMapsInst | Object | the Google Maps instance |
| events | Array.<string> | an array of string with all events that you want to bind |
capitalizeFirstLetter(text) ⇒ string
Function that helps you to capitalize the first letter on a word
Kind: global function
| Param | Type | Description |
|---|---|---|
| text | string | the text that you want to capitalize |
getPropsValues(vueInst, props) ⇒ Object
Function that helps you to get all non nullable props from a component
Kind: global function
| Param | Type | Description |
|---|---|---|
| vueInst | Object | the Vue component instance |
| props | Object | the props object |
getLazyValue(fn) ⇒ function
This function is a helper for return to the user the internal Google Maps promise and can wait until it is ready. This piece of code was orignally written by sindresorhus and can be seen here
Kind: global function
Returns: function - anonymous function that returns the value returned by the fn parameter
See: [https://github.com/sindresorhus/lazy-value/blob/master/index.js](https://github.com/sindresorhus/lazy-value/blob/master/index.js)
| Param | Type | Description |
|---|---|---|
| fn | function | a function that actually return the promise or async value |
mappedPropsToVueProps(mappedProps) ⇒ Object
Strips out the extraneous properties we have in our mapped props definitions
Kind: global function
| Param | Type | Description |
|---|---|---|
| mappedProps | Object | the mapped props object |
downArrowSimulator(input) ⇒ void
This function simulates a down arrow key event when user hits return (enter) on the autocomplete component selection the first occurrence in the list.
This piece of code was orignally written by amirnissim and has been ported to Vanilla.js by GuillaumeLeclerc
Kind: global function
See: [http://stackoverflow.com/a/11703018/2694653](http://stackoverflow.com/a/11703018/2694653)
| Param | Type | Description |
|---|---|---|
| input | Object | the HTML input node element reference |
downArrowSimulator~addEventListenerWrapper(type, listener) ⇒ void
Add event listener wrapper that will replace to default addEventListener or attachEvent function
Kind: inner method of downArrowSimulator
| Param | Type | Description |
|---|---|---|
| type | string | the event type |
| listener | function | function should be executed when the event is fired |
twoWayBindingWrapper(fn)
When you have two-way bindings, but the actual bound value will not equal the value you initially passed in, then to avoid an infinite loop you need to increment a counter every time you pass in a value, decrement the same counter every time the bound value changed, but only bubble up the event when the counter is zero.
| Param | Type | Description |
|---|---|---|
| fn | function | Function to be executed to determine if the event was executed Example: Let's say DrawingRecognitionCanvas is a deep-learning backed canvas that, when given the name of an object (e.g. 'dog'), draws a dog. But whenever the drawing on it changes, it also sends back its interpretation of the image by way of the @newObjectRecognized event. <input type="text" placeholder="an object, e.g. Dog, Cat, Frog" v-model="identifiedObject" /> <DrawingRecognitionCanvas :object="identifiedObject" |
Kind: global function
Example:
Let's say DrawingRecognitionCanvas is a deep-learning backed canvas that, when given the name of an object (e.g. 'dog'), draws a dog. But whenever the drawing on it changes, it also sends back its interpretation of the image by way of the @newObjectRecognized event.
<input
type="text"
placeholder="an object, e.g. Dog, Cat, Frog"
v-model="identifiedObject" />
<DrawingRecognitionCanvas
:object="identifiedObject"
@newObjectRecognized="identifiedObject = $event"
/>
new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
this.$watch('identifiedObject', () => {
// new object passed in
increment()
})
this.$deepLearningBackend.on('drawingChanged', () => {
recognizeObject(this.$deepLearningBackend)
.then((object) => {
decrement()
if (shouldUpdate()) {
this.$emit('newObjectRecognized', object.name)
}
})
})
})
watchPrimitiveProperties(vueInst, propertiesToTrack, handler, immediate) ⇒ void
Watch the individual properties of a PoD object, instead of the object per se. This is different from a deep watch where both the reference and the individual values are watched.
In effect, it throttles the multiple $watch to execute at most once per tick.
Kind: global function
| Param | Type | Default | Description |
|---|---|---|---|
| vueInst | Object | the component instance | |
| propertiesToTrack | Array.<string> | string array with all properties that you want to track | |
| handler | function | function to be fired when the prop change | |
| immediate | boolean | false |
watchPrimitiveProperties~requestHandle() ⇒
Function in charge to execute the handler function if it was not fired
Kind: inner method of watchPrimitiveProperties
Returns: void
bindProps(vueInst, googleMapsInst, props) ⇒ void
Binds the properties defined in props to the google maps instance. If the prop is an Object type, and we wish to track the properties of the object (e.g. the lat and lng of a LatLng), then we do a deep watch. For deep watch, we also prevent the _changed event from being emitted if the data source was external.
Kind: global function
| Param | Type | Description |
|---|---|---|
| vueInst | Object | the component instance |
| googleMapsInst | Object | the Google Maps instance |
| props | Object | object with the component props tha should be synched with the Google Maps instances props |