CODEWITHSUNDEEP
javascriptdata-bindingpolymerpolymer-1.0
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Polymer 1.x: Defining "google" import

In this jsBin, I want to declaratively pre-load my element with a value of ['Colorado', 'South Dakota'] for the selected property.

When I open this jsBin, I expect to see the following:

  1. ✅ A successfully loaded page.
  2. ✅ An outline map of the U.S.
  3. ✅ A print of the selected variable in the upper left reading Colorado,South Dakota.
  4. ❌ The states of Colorado and South Dakota pre-selected and colored blue.
  5. ❌ No errors in the console.

Instead, I actually see the following:

  1. ✅ A successfully loaded page.
  2. ✅ An outline map of the U.S.
  3. ✅ A print of the selected variable in the upper left reading Colorado,South Dakota.
  4. ❌ The states of Colorado and South Dakota are not pre-selected or colored blue.
  5. ❌ The following console error:
console.error

google is not defined

Question

How can I get the value of google to be defined at the crucial location?

I have isolated the problem down to the following lines of code.

http://jsbin.com/zomejajibe/1/edit?html,console,output 
_drawChart: function() {
  console.log('A'); // Successfully logs to console
  // The key is to get "google" defined at the following line
  var dataTable = this.$.geochart._createDataTable(this.items); // "google" is not defined???
  console.log('dataTable: '); // Does not successfully log because crashes above
  console.log(dataTable);
  this.$.geochart._chartObject.draw(dataTable, this.$.geochart.options);
},

Upvotes: 0

Views: 67

Answers (2)

Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Specifically, @Alon added the following function:

http://jsbin.com/hulusijaje/1/edit?html,console,output 
try: function(e) {
  var self = this;
  setTimeout(function() {
    self._selectedChanged(e)
  }.bind(self), 100)
},

And the full code of the solution is as follows:

http://jsbin.com/hulusijaje/1/edit?html,console,output 
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="google-chart/google-chart.html" rel="import"> </head>

<body>
  <dom-module id="x-element"> <template>
      <style>
        google-chart {
          width: 100%;
        }
      </style>
      <button on-tap="_show">Show</button>
      <div>[[selected]]</div>
      <google-chart
        id="geochart"
        type="geo"
        options="{{options}}"
        data="{{items}}"
        xon-google-chart-select="_onGoogleChartSelect"></google-chart>
    </template>
    <script>
      (function() {
        Polymer({
          is: 'x-element',
          /** /
           * Fired when user selects chart item.
           *
           * @event us-map-select
           * @param {object} detail Alpabetized array of selected state names.
          /**/
          properties: {
            selected: {
              type: Array,
              notify: true,
              //reflectToAttribute: true,
            },
            items: {
              type: Array,
              notify: true,
              reflectToAttribute: true,
              value: function() {
                return [
                  ['State', 'Select'],
                  ['Alabama', 0],
                  ['Alaska', 0],
                  ['Arizona', 0],
                  ['Arkansas', 0],
                  ['California', 0],
                  ['Colorado', 0],
                  ['Connecticut', 0],
                  ['Delaware', 0],
                  ['Florida', 0],
                  ['Georgia', 0],
                  ['Hawaii', 0],
                  ['Idaho', 0],
                  ['Illinois', 0],
                  ['Indiana', 0],
                  ['Iowa', 0],
                  ['Kansas', 0],
                  ['Kentucky', 0],
                  ['Louisiana', 0],
                  ['Maine', 0],
                  ['Maryland', 0],
                  ['Massachusetts', 0],
                  ['Michigan', 0],
                  ['Minnesota', 0],
                  ['Mississippi', 0],
                  ['Missouri', 0],
                  ['Montana', 0],
                  ['Nebraska', 0],
                  ['Nevada', 0],
                  ['New Hampshire', 0],
                  ['New Jersey', 0],
                  ['New Mexico', 0],
                  ['New York', 0],
                  ['North Carolina', 0],
                  ['North Dakota', 0],
                  ['Ohio', 0],
                  ['Oklahoma', 0],
                  ['Oregon', 0],
                  ['Pennsylvania', 0],
                  ['Rhode Island', 0],
                  ['South Carolina', 0],
                  ['South Dakota', 0],
                  ['Tennessee', 0],
                  ['Texas', 0],
                  ['Utah', 0],
                  ['Vermont', 0],
                  ['Virginia', 0],
                  ['Washington', 0],
                  ['West Virginia', 0],
                  ['Wisconsin', 0],
                  ['Wyoming', 0]
                ];
              },
            },
            color: {
              type: String, // '#455A64'
              value: function() {
                return 'blue';
              }
            },
            options: {
              type: Object,
              notify: true,
              reflectToAttribute: true,
              computed: '_computeOptions(color)',
            },
            itemIndices: {
              type: Object,
              computed: '_computeItemIndices(items)',
            },
          },
          observers: [
            // '_selectedChanged(selected.*)',
            'try(selected.*)'
            //'_drawChart(items.*, options)',
          ],
          ready: function() {
            var _this = this;
            this.$.geochart.addEventListener('google-chart-select', function(e) {
              this._onGoogleChartSelect(e)
            }.bind(_this));
          },
          _computeItemIndices: function(a) {
            var out = {},
              i = a.length;
            while (i--) {
              out[a[i][0]] = i;
            }
            return out;
          },
          _onGoogleChartSelect: function(e) {
            var s = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
              temp = [],
              a = this.items,
              index = this.itemIndices[s], // e.g. 35
              i = a.length;
            this.set('items.' + index + '.1', a[index][1] ? 0 : 1);
            while (i-- - 1) {
              /** /
              if(s === a[i][0]){
                this.set('items.' + i + '.1', a[i][1] ? 0 : 1);
                //this.items[i][1] = a[i][1] ? 0 : 1;
              }
              /**/
              if (a[i][1]) {
                temp.push(a[i][0]);
              }
            }
            temp.sort();
            this.set('selected', temp);
            this._drawChart();
            //console.log(this.selected);
          },
          /**/
          _redrawChart: function() {
            var j = 1, // iterations
              s = 1, // delay in seconds
              _this = this;
            while (j--) {
              try {
                //  console.log(j);
                _this._drawChart();
                //return;
              } catch (e) {
                //   console.log(e.message);
                setTimeout(function() {
                  //console.log(j);
                  console.log(_this.selected); // undefined
                }, (s * 1000));
                _this._drawChart();
              }
            }
          },
          /**/
          _drawChart: function() {
            console.log('A'); // Successfully logs to console
            // The key is to get "google" defined at the following line
            try {
              var dataTable = this.$.geochart._createDataTable(this.items); // "google" is not defined???
              console.log('dataTable: '); // Does not successfully log because crashes above
              // console.log(dataTable);
              this.$.geochart._chartObject.draw(dataTable, this.$.geochart.options);
            } catch (e) {}
          },
          doAll: function(verb) {
            verb = verb || 'clear'; // verb: 'clear'(default)|'select'
            verb = (verb === 'select') ? 'select' : 'clear';
            this._doAll(verb);
            this._drawChart();
          },
          _doAll: function(verb) {
            var resetSelect = (verb && verb === 'some') ? false : true;
            verb = verb || 'clear'; // verb: 'clear'(default)|'select'|'some'
            verb = (verb === 'select') ? 'select' : 'clear';
            var temp = [];
            var items = this.items,
              i = items.length;
            switch (verb) {
              case 'select':
                while (i-- - 1) {
                  items[i][1] = 1;
                  temp.push(items[i][0]);
                }
                break;
              case 'clear':
                while (i-- - 1) {
                  items[i][1] = 0;
                }
                break;
              default:
                break;
            }
            this.set('items', items);
            if (resetSelect) {
              temp.sort();
              this.set('selected', temp);
            }
          },
          try: function(e) {
            var self = this;
            setTimeout(function() {
              self._selectedChanged(e)
            }.bind(self), 100)
          }, ////
          _selectedChanged: function(e, k) {
            console.log('selected');
            if (k === undefined) {
              console.log(e);
              ////  return
            } else {
              console.log(k);
            }
            var a = e.base,
              i = a.length;
            this._doAll('some');
            while (i--) {
              var index = this.itemIndices[a[i]];
              this.set('items.' + index + '.1', 1);
            }
            this._redrawChart();
            this.fire('us-map-select', this.selected);
            // console.log(this.selected);//
            //  console.log(this.items);
          },
          _computeOptions: function(s) {
            return {
              region: 'US',
              displayMode: 'regions',
              resolution: 'provinces',
              legend: 'none',
              defaultColor: 'white',
              colorAxis: {
                colors: ['#E0E0E0', s],
                minValue: 0,
                maxValue: 1,
              }
            }
          },
          _show: function() {
            //this.set('selected', ['Ohio', 'New Mexico']);
            this.doAll();
            //console.log(this.itemIndices);
          },
        });
      })();
    </script>
  </dom-module>
  <x-element xcolor="#455A64" selected='["Colorado", "South Dakota"]'></x-element>
</body>

</html>

Upvotes: 0

Alon
Alon

Reputation: 2929

So you have problem that the select changed trigger before the element ready.

I added timeout on the function _selectedChanged of 10 milisec so it push to the end of the event loop. You can change it to 0 milisec..

look http://jsbin.com/quzuyuwaha/1/edit?html,console,output

Upvotes: 1

Related Questions