1// Copyright (c) 2011 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5cr.define('options', function() {
6  const OptionsPage = options.OptionsPage;
7  const ArrayDataModel = cr.ui.ArrayDataModel;
8
9  // The GUID of the loaded address.
10  var guid;
11
12  /**
13   * AutofillEditAddressOverlay class
14   * Encapsulated handling of the 'Add Page' overlay page.
15   * @class
16   */
17  function AutofillEditAddressOverlay() {
18    OptionsPage.call(this, 'autofillEditAddress',
19                     templateData.autofillEditAddressTitle,
20                     'autofill-edit-address-overlay');
21  }
22
23  cr.addSingletonGetter(AutofillEditAddressOverlay);
24
25  AutofillEditAddressOverlay.prototype = {
26    __proto__: OptionsPage.prototype,
27
28    /**
29     * Initializes the page.
30     */
31    initializePage: function() {
32      OptionsPage.prototype.initializePage.call(this);
33
34      this.createMultiValueLists_();
35
36      var self = this;
37      $('autofill-edit-address-cancel-button').onclick = function(event) {
38        self.dismissOverlay_();
39      }
40      $('autofill-edit-address-apply-button').onclick = function(event) {
41        self.saveAddress_();
42        self.dismissOverlay_();
43      }
44
45      self.guid = '';
46      self.populateCountryList_();
47      self.clearInputFields_();
48      self.connectInputEvents_();
49    },
50
51    /**
52     * Creates, decorates and initializes the multi-value lists for full name,
53     * phone, fax, and email.
54     * @private
55     */
56    createMultiValueLists_: function() {
57      var list = $('full-name-list');
58      options.autofillOptions.AutofillValuesList.decorate(list);
59      list.autoExpands = true;
60
61      list = $('phone-list');
62      options.autofillOptions.AutofillValuesList.decorate(list);
63      list.autoExpands = true;
64
65      list = $('fax-list');
66      options.autofillOptions.AutofillValuesList.decorate(list);
67      list.autoExpands = true;
68
69      list = $('email-list');
70      options.autofillOptions.AutofillValuesList.decorate(list);
71      list.autoExpands = true;
72    },
73
74    /**
75     * Updates the data model for the list named |listName| with the values from
76     * |entries|.
77     * @param {String} listName The id of the list.
78     * @param {Array} entries The list of items to be added to the list.
79     */
80    setMultiValueList_: function(listName, entries) {
81      // Add data entries, filtering null or empty strings.
82      var list = $(listName);
83      list.dataModel = new ArrayDataModel(
84          entries.filter(function(i) {return i}));
85
86      // Add special entry for adding new values.
87      list.dataModel.splice(list.dataModel.length, 0, null);
88
89      var self = this;
90      list.dataModel.addEventListener(
91        'splice', function(event) { self.inputFieldChanged_(); });
92      list.dataModel.addEventListener(
93        'change', function(event) { self.inputFieldChanged_(); });
94    },
95
96    /**
97     * Clears any uncommitted input, resets the stored GUID and dismisses the
98     * overlay.
99     * @private
100     */
101    dismissOverlay_: function() {
102      this.clearInputFields_();
103      this.guid = '';
104      OptionsPage.closeOverlay();
105    },
106
107    /**
108     * Aggregates the values in the input fields into an array and sends the
109     * array to the Autofill handler.
110     * @private
111     */
112    saveAddress_: function() {
113      var address = new Array();
114      address[0] = this.guid;
115      var list = $('full-name-list');
116      address[1] = list.dataModel.slice(0, list.dataModel.length - 1);
117      address[2] = $('company-name').value;
118      address[3] = $('addr-line-1').value;
119      address[4] = $('addr-line-2').value;
120      address[5] = $('city').value;
121      address[6] = $('state').value;
122      address[7] = $('postal-code').value;
123      address[8] = $('country').value;
124      list = $('phone-list');
125      address[9] = list.dataModel.slice(0, list.dataModel.length - 1);
126      list = $('fax-list');
127      address[10] = list.dataModel.slice(0, list.dataModel.length - 1);
128      list = $('email-list');
129      address[11] = list.dataModel.slice(0, list.dataModel.length - 1);
130
131      chrome.send('setAddress', address);
132    },
133
134    /**
135     * Connects each input field to the inputFieldChanged_() method that enables
136     * or disables the 'Ok' button based on whether all the fields are empty or
137     * not.
138     * @private
139     */
140    connectInputEvents_: function() {
141      var self = this;
142      $('company-name').oninput = $('addr-line-1').oninput =
143      $('addr-line-2').oninput = $('city').oninput = $('state').oninput =
144      $('postal-code').oninput = function(event) {
145        self.inputFieldChanged_();
146      }
147
148      $('country').onchange = function(event) {
149        self.countryChanged_();
150      }
151    },
152
153    /**
154     * Checks the values of each of the input fields and disables the 'Ok'
155     * button if all of the fields are empty.
156     * @private
157     */
158    inputFieldChanged_: function() {
159      // Length of lists are tested for <= 1 due to the "add" placeholder item
160      // in the list.
161      var disabled =
162          $('full-name-list').items.length <= 1 &&
163          !$('company-name').value &&
164          !$('addr-line-1').value && !$('addr-line-2').value &&
165          !$('city').value && !$('state').value && !$('postal-code').value &&
166          !$('country').value && $('phone-list').items.length <= 1 &&
167          $('fax-list').items.length <= 1 && $('email-list').items.length <= 1;
168      $('autofill-edit-address-apply-button').disabled = disabled;
169    },
170
171    /**
172     * Updates the postal code and state field labels appropriately for the
173     * selected country.
174     * @private
175     */
176    countryChanged_: function() {
177      var countryCode = $('country').value;
178      if (!countryCode)
179        countryCode = templateData.defaultCountryCode;
180
181      var details = templateData.autofillCountryData[countryCode];
182      var postal = $('postal-code-label');
183      postal.textContent = details['postalCodeLabel'];
184      $('state-label').textContent = details['stateLabel'];
185
186      // Also update the 'Ok' button as needed.
187      this.inputFieldChanged_();
188    },
189
190    /**
191     * Populates the country <select> list.
192     * @private
193     */
194    populateCountryList_: function() {
195      var countryData = templateData.autofillCountryData;
196      var defaultCountryCode = templateData.defaultCountryCode;
197
198      // Build an array of the country names and their corresponding country
199      // codes, so that we can sort and insert them in order.
200      var countries = [];
201      for (var countryCode in countryData) {
202        // We always want the default country to be at the top of the list, so
203        // we handle it separately.
204        if (countryCode == defaultCountryCode)
205          continue;
206
207        var country = {
208          countryCode: countryCode,
209          name: countryData[countryCode]['name']
210        };
211        countries.push(country);
212      }
213
214      // Sort the countries in alphabetical order by name.
215      countries = countries.sort(function(a, b) {
216        return a.name < b.name ? -1 : 1;
217      });
218
219      // Insert the empty and default countries at the beginning of the array.
220      var emptyCountry = {
221        countryCode: '',
222        name: ''
223      };
224      var defaultCountry = {
225        countryCode: defaultCountryCode,
226        name: countryData[defaultCountryCode]['name']
227      };
228      countries.unshift(emptyCountry, defaultCountry);
229
230      // Add the countries to the country <select> list.
231      var countryList = $('country');
232      for (var i = 0; i < countries.length; i++) {
233        var country = new Option(countries[i].name, countries[i].countryCode);
234        countryList.appendChild(country)
235      }
236    },
237
238    /**
239     * Clears the value of each input field.
240     * @private
241     */
242    clearInputFields_: function() {
243      this.setMultiValueList_('full-name-list', []);
244      $('company-name').value = '';
245      $('addr-line-1').value = '';
246      $('addr-line-2').value = '';
247      $('city').value = '';
248      $('state').value = '';
249      $('postal-code').value = '';
250      $('country').value = '';
251      this.setMultiValueList_('phone-list', []);
252      this.setMultiValueList_('fax-list', []);
253      this.setMultiValueList_('email-list', []);
254
255      this.countryChanged_();
256    },
257
258    /**
259     * Loads the address data from |address|, sets the input fields based on
260     * this data and stores the GUID of the address.
261     * @private
262     */
263    loadAddress_: function(address) {
264      this.setInputFields_(address);
265      this.inputFieldChanged_();
266      this.guid = address['guid'];
267    },
268
269    /**
270     * Sets the value of each input field according to |address|
271     * @private
272     */
273    setInputFields_: function(address) {
274      this.setMultiValueList_('full-name-list', address['fullName']);
275      $('company-name').value = address['companyName'];
276      $('addr-line-1').value = address['addrLine1'];
277      $('addr-line-2').value = address['addrLine2'];
278      $('city').value = address['city'];
279      $('state').value = address['state'];
280      $('postal-code').value = address['postalCode'];
281      $('country').value = address['country'];
282      this.setMultiValueList_('phone-list', address['phone']);
283      this.setMultiValueList_('fax-list', address['fax']);
284      this.setMultiValueList_('email-list', address['email']);
285
286      this.countryChanged_();
287    },
288  };
289
290  AutofillEditAddressOverlay.clearInputFields = function() {
291    AutofillEditAddressOverlay.getInstance().clearInputFields_();
292  };
293
294  AutofillEditAddressOverlay.loadAddress = function(address) {
295    AutofillEditAddressOverlay.getInstance().loadAddress_(address);
296  };
297
298  AutofillEditAddressOverlay.setTitle = function(title) {
299    $('autofill-address-title').textContent = title;
300  };
301
302  // Export
303  return {
304    AutofillEditAddressOverlay: AutofillEditAddressOverlay
305  };
306});
307