geoapp demo

components.x-option.js

import Ember from 'ember';
import XSelectComponent from './x-select';

var isArray = Ember.isArray;

/**
 * Used to wrap a native `<option>` tag and associate an object with
 * it that can be bound. It can only be used in conjuction with a
 * containing `x-select` component
 *
 * @class Ember.XOptionComponent
 * @extends Ember.Component
 */
export default Ember.Component.extend({
  tagName: 'option',
  attributeBindings: ['selected', 'name', 'disabled', 'value', 'title'],
  classNameBindings: [':x-option'],

  /**
   * The value associated with this option. When this option is
   * selected, the `x-select` will fire its action with this
   * value.
   *
   * @property value
   * @type Object
   * @default null
   */
  value: null,

  /**
   * Property bound to the `selected` attribute of the native
   * `<option>` element. It is aware of the containing `x-select`'s
   * value and will mark itself if it is the same.
   *
   * @private
   * @property selected
   * @type Boolean
   */
  selected: Ember.computed('value', 'select.value', 'select.multiple', function() {
    if (this.get('select.multiple') && isArray(this.get('select.value'))) {
      let selectValue = Ember.A(this.get('select.value'));

      return selectValue.contains(this.get('value'));
    } else {
      return this.get('value') === this.get('select.value');
    }
  }),

  /**
   * Register this x-option with the containing `x-select`
   *
   * @override
   */
  didInsertElement() {
    this._super.apply(this, arguments);
    Ember.run.scheduleOnce('afterRender', this, 'registerWithXSelect');
  },

  select: Ember.computed(function() {
    return this.nearestOfType(XSelectComponent);
  }),

  registerWithXSelect() {
    const select = this.get('select');
    Ember.assert("x-option component declared without enclosing x-select", !!select);
    select.registerOption(this);
  },

  /**
   * Unregister this x-option with its containing x-select.
   *
   * @override
   */
  willDestroyElement: function() {
    this._super.apply(this, arguments);
    let select = this.get('select');
    if(select) {
      select.unregisterOption(this);
    }
  }
});

components.x-select.js

import Ember from 'ember';

var isArray = Ember.isArray;

/**
 * Wraps a native <select> element so that it can be object and
 * binding aware. It is used in conjuction with the
 * `x-option` component to construct select boxes. E.g.
 *
 *   {{#x-select value="bob" action="selectPerson"}}
 *     {{x-option value="fred"}}Fred Flintstone{{/x-option}}
 *     {{x-option value="bob"}}Bob Newhart{{/x-option}}
 *   {{/x-select}}
 *
 * the options are always up to date, so that when the object bound to
 * `value` changes, the corresponding option becomes selected.
 *
 * Whenever the select tag receives a change event, it will fire
 * `action`
 *
 * @class Ember.XSelectComponent
 * @extends Ember.Component
 */
export default Ember.Component.extend({
  tagName: "select",
  classNameBindings: [":x-select"],
  attributeBindings: ['disabled', 'tabindex', 'multiple', 'form', 'name', 'autofocus', 'required', 'size', 'title'],

  /**
   * Bound to the `disabled` attribute on the native <select> tag.
   *
   * @property disabled
   * @type Boolean
   * @default null
   */
  disabled: null,

  /**
   * Bound to the `multiple` attribute on the native <select> tag.
   *
   * @property multiple
   * @type Boolean
   * @default null
   */
  multiple: null,

  /**
   * Bound to the `tabindex` attribute on the native <select> tag.
   *
   * @property tabindex
   * @type Integer
   * @ default 0
   */
  tabindex: 0,

  /**
   * The collection of options for this select box. When options are
   * inserted into the dom, they will register themselves with their
   * containing `x-select`. This is for internal book-keeping only and should
   * not be changed from outside.
   *
   * @private
   * @property options
   */
  options: Ember.computed(function() {
    return Ember.A();
  }),

  /**
   * When the select DOM event fires on the element, trigger the
   * component's action with the current value.
   */
  change(event) {
    this._updateValue();

    this.sendAction('action', this.get('value'), this);
    this.sendAction('onchange', this, this.get('value'), event);
  },

  /**
   * When the click DOM event fires on the element, trigger the
   * component's action with the component, x-select value, and the jQuery event.
   */
  click(event) {
    this.sendAction('onclick', this, this.get('value'), event);
  },

  /**
   * When the blur DOM event fires on the element, trigger the
   * component's action with the component, x-select value, and the jQuery event.
   */
  blur(event) {
    this.sendAction('onblur', this, this.get('value'), event);
  },

  /**
   * When the focusOut DOM event fires on the element, trigger the
   * component's action with the component, x-select value, and the jQuery event.
   */
  focusOut(event) {
    this.sendAction('onfocusout', this, this.get('value'), event);
  },

  /**
   * Updates `value` with the object associated with the selected option tag
   *
   * @private
   */
  _updateValueSingle: function(){
    var option = this.get('options').find(function(option) {
      return option.$().is(':selected');
    });

    if (option) {
      this.set('value', option.get('value'));
    } else {
      this.set('value', null);
    }
  },

  /**
   * Updates `value` with an array of objects associated with the selected option tags
   *
   * @private
   */
  _updateValueMultiple: function() {
    var options = this.get('options').filter(function(option) {
      return option.$().is(':selected');
    });

    this.set('value', Ember.A(options).mapBy('value'));
  },

  /**
   * A utility method to determine if the select is multiple or single and call
   * its respective method to update the value.
   *
   * @private
   * @utility
   */
  _updateValue: function() {
    if (this.isDestroying || this.isDestroyed) {
      return;
    }
    
    if (this.get('multiple')) {
      this._updateValueMultiple();
    } else {
      this._updateValueSingle();
    }
  },

  /**
   * If no explicit value is set, apply default values based on selected=true in
   * the template.
   *
   * @private
   */
  _setDefaultValues: function() {
    if (this.get('value') == null) {
      this._updateValue();
    }
  },

  /**
   * @override
   */
  didInsertElement() {
    this._super.apply(this, arguments);

    this.$().on('blur', (event) => {
      this.blur(event);
    });
  },

  /**
   * @override
   */
  willDestroyElement: function() {
    this._super.apply(this, arguments);

    // might be overkill, but make sure options can get gc'd
    this.get('options').clear();
    this.$().off('blur');
  },

  /**
   * If this is a multi-select, and the value is not an array, that
   * probably indicates a misconfiguration somewhere, so we error out.
   *
   * @private
   */
  ensureProperType: Ember.on('init', Ember.observer('value', function() {
    let value = this.get('value');

    if (value != null && this.get('multiple') && !isArray(value)) {
      throw new Error(`x-select multiple=true was set, but value ${value} is not enumerable.`);
    }
  })),

  /**
   * @private
   */
  registerOption: function(option) {
    this.get('options').addObject(option);
    this._setDefaultValues();
  },

  /**
   * @private
   */
  unregisterOption: function(option) {
    this.get('options').removeObject(option);

    // We don't want to update the value if we're tearing the component down.
    if (!this.get('isDestroying')) {
      this._updateValue();
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('demo');
});

export default Router;

routes.demo.js

import Ember from 'ember';
var google = window.google; // jshint ignore:line

export default Ember.Route.extend({

  // this is what will provide the model to your .hbs file
  model() {
    var prepopulatedCounties = Ember.A();
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Collier" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Hillsborough" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Lee" }));
    // snip...

    return Ember.Object.create({
      counties       : prepopulatedCounties,
      selectedCounty : undefined,
      address        : undefined,
      email          : undefined,
      latitude       : undefined,
      longitude      : undefined,
    });
  },

  actions: {
    codeAddress() {
      var geocoder = new google.maps.Geocoder();
      var address  = this.get('currentModel.address');
      alert("Address entered:" + address);

      geocoder.geocode( {'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        { 
          var latitude  = results[0].geometry.location.lat();
          var longitude = results[0].geometry.location.lng();

          this.set('currentModel.latitude', latitude);
          this.set('currentModel.longitude', longitude);
        }
        else
        {
          alert("Geocode was not successful for the following reason: " + status);
        }
      }); 
    },

    setEmail() {
      var dataValue = this.get('currentModel.selectedCounty');

      if(dataValue==="1"){
          this.set('currentModel.email', "[email protected]");
      }
      else if(dataValue==="2"){
          this.set('currentModel.email', "[email protected]");
      }
      else if (dataValue==="3"){
          this.set('currentModel.email', "[email protected]");
      }
      else{
          this.set('currentModel.email', "None Selected");
      }
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
Go to the {{#link-to 'demo'}}demo{{/link-to}}.

{{outlet}}
<br>
<br>

templates.components.x-select.hbs

{{yield
  (hash
    option=(component "x-option" select=this)
  )
}}

templates.demo.hbs

{{!-- find me in app/templates/demo.hbs --}}
<form name="myform">
    <div>
        Address:
        <br>
        {{input type="text" name="address" value=model.address}}
        <button class="button" {{action "codeAddress"}}>Code Address</button>
    </div>
    <div>
        <br>
        Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
        <br>
        {{input type="text" value=model.latitude readonly='readonly'}}
        {{input type="text" value=model.longitude readonly='readonly'}}
    </div>
    <br>
    <div>
        <br>
        Email:
        <br>
        {{input type="text" value=model.email readonly='readonly'}}
    </div>
    <div>
        <br>
        Counties:
        <br>

        {{!-- in order for this to work you must install emberx-select --}}
        {{!-- ember install emberx-select --}}
        {{#x-select value=model.selectedCounty as |xs|}}
          {{#xs.option value="0"}}Choose One{{/xs.option}}
          {{#each model.counties as |county|}}
            {{#xs.option value=county.value}}{{ county.display }}{{/xs.option}}
          {{/each}}
        {{/x-select}}
    </div>
</form>

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}