Packages

tailwind_live_components

0.3.1
0.6.4 0.6.3 0.6.2 0.6.1 0.6.0 0.5.7 0.5.6 0.5.5 0.5.4 0.5.3 0.5.2 0.5.1 0.5.0 0.4.2 0.4.1 0.4.0 0.3.7 0.3.6 0.3.5 0.3.4 0.3.3 0.3.2 0.3.1 0.3.0 0.2.8 0.2.7 0.2.6 0.2.5 0.2.4 0.2.3 0.2.2 0.2.1 0.2.0 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Tailwind Live Components is a set of HEEX components that builds LiveView components with Tailwind 2.0+

HexDocs

Current section

Files

Jump to
Readme
45 Versions
3 Dependencies
Dependants
Files
Activity
tailwind_live_components priv static hooks address_input.js
Raw

priv/static/hooks/address_input.js 

export default {

  $valueInput: null,

  apiKey: null,

  latitude: null,

  longitude: null,

  countryCode: null,



  mounted() {

    console.log('mounted')

    this.$valueInput = this.el.querySelector('[data-tlc-ref="valueInput"]')

    this.apiKey = this.el.dataset.apiKey

    this.latitude = this.el.dataset.latitude

    this.longitude = this.el.dataset.longitude

    this.countryCode = this.el.dataset.countryCode



    window.initAutocomplete = () => {

      console.log('initAutocomplete')



      const center = {

        lat: parseFloat(this.latitude),

        lng: parseFloat(this.longitude)

      };



      new google.maps.places.Autocomplete(this.$valueInput, {

        // Create a bounding box with sides ~10km away from the center point

        bounds: {

          north: center.lat + 0.1,

          south: center.lat - 0.1,

          east: center.lng + 0.1,

          west: center.lng - 0.1,

        },

        componentRestrictions: { country: this.countryCode },

        fields: ["address_components"],

        strictBounds: false,

        types: ["address"],

      })

    }



    this.loadGooglePlaces(document, 'script', 'google-places');

  },



  loadGooglePlaces(d, s, id) {

    console.log('loadGooglePlaces')

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) { return; }

    js = d.createElement(s); js.id = id;

    js.onload = function () {

      console.log('js.onload')

      // remote script has loaded

    };

    js.src = `https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&libraries=places&callback=initAutocomplete`;

    fjs.parentNode.insertBefore(js, fjs);

  },

}