Improvements to the Google News extension

chrome/common/extensions/docs/examples/extensions/news/javascript/options.js

Index: chrome/common/extensions/docs/examples/extensions/news/javascript/options.js
===================================================================
--- chrome/common/extensions/docs/examples/extensions/news/javascript/options.js	(revision 0)
+++ chrome/common/extensions/docs/examples/extensions/news/javascript/options.js	(revision 0)
@@ -0,0 +1,395 @@
+/**
+ * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
+ * source code is governed by a BSD-style license that can be found in the
+ * LICENSE file.
+ */
+
+/**
+ * @fileoverview Includes the country selection, topics selection and
+ * selection of no. of news stories to be shown. Include default settings also.
+ * @author navneetg@google.com (Navneet Goel).
+ */
+
+/**
+ * Stores number of selected topics on the options page.
+ */
+var checkCount = 0;
+
+/**
+ * Stores maximum count of custom topics.
+ */
+var MAX_CUS_TOPICS = 10;
+
+/**
+ * Stores temporary added custom topics which are not yet saved.
+ */
+var tempCusTopics = [];
+
+/**
+ * Checks whether ENTER key is pressed or not.
+ */
+function addCustomTopic() {
+  if (window.event.keyCode == 13) {
+    addCusTopic();
+  }
+}
+
+/**
+ * Retrieves and sets last saved country from local storage(if found),
+ * else sets country retrieved from feed.
+ */
+function setCountry() {
+  var country = window.localStorage.getItem('country');
+
+  // If country is not found in localstorage or default value is selected in
+  // drop down menu.
+  if ((!country) || country == 'noCountry') {
+    // XMLHttpRequest object that tries to load the feed for the purpose of
+    // retrieving the country value out of feed.
+    var req = new XMLHttpRequest();
+    req.onload = handleResponse;
+    req.onerror = handleError;
+    req.open('GET', DEFAULT_NEWS_URL, true);
+    req.send(null);
+
+    // Sets country to default Country in dropdown menu.
+    function handleError() {
+      $('countryList').value = 'noCountry';
+    };
+
+    // Handles parsing the feed data got back from XMLHttpRequest.
+    function handleResponse() {
+      // Feed document retrieved from URL.
+      var doc = req.responseXML;
+      if (!doc) {
+        handleError();
+        return;
+      }
+      var imageLink = doc.querySelector('image link');
+      if (imageLink) {
+          // Stores link to set value of country.
+          var newsUrl = imageLink.textContent;
+      }
+
+      // Stores country value
+      $('countryList').value = newsUrl.substring(newsUrl.indexOf('&ned=') + 5,
+          newsUrl.indexOf('&hl='));
+    };
+  } else {
+    $('countryList').value = country;
+  }
+}
+
+/**
+ * Displays various messages to user based on user input.
+ * @param {String} id Id of status element.
+ * @param {Number} timeOut Timeout value of message shown.
+ * @param {String} message Message to be shown.
+ */
+function showUserMessages(id, timeOut, message) {
+  $(id).style.setProperty('-webkit-transition',
+      'opacity 0s ease-in');
+  $(id).style.opacity = 1;
+  $(id).innerText = chrome.i18n.getMessage(message);
+  window.setTimeout(function() {
+    $(id).style.setProperty(
+        '-webkit-transition', 'opacity' + timeOut + 's ease-in');
+    $(id).style.opacity = 0;
+    }, 1E3
+  );
+}
+
+/**
+ * Sets options page CSS according to the browser language(if found), else sets
+ * to default locale.
+ */
+function setOptionPageCSS() {
+  if (chrome.i18n.getMessage('direction') == 'rtl') {
+    document.querySelector('body').className = 'rtl';
+  }
+}
+
+/**
+ * Initializes the options page by retrieving country, topics and count of
+ * stories from local storage if present, else sets to default settings.
+ */
+function initialize() {
+  setOptionPageCSS();
+  setCountry();
+  setCountAndTopicList();
+  setLocalizedTopicList();
+
+  // Adds a custom topic on press of Enter key.
+  $('newKeyword').onkeypress = addCustomTopic;
+}
+
+/**
+ * Retrieves locale values from locale file.
+ */
+function setLocalizedTopicList() {
+  var getI18nMsg = chrome.i18n.getMessage;
+
+  $('top').innerText = getI18nMsg('1');
+  $('nation').innerText = getI18nMsg('n');
+  $('world').innerText = getI18nMsg('w');
+  $('business').innerText = getI18nMsg('b');
+  $('science').innerText = getI18nMsg('t');
+  $('entertainment').innerText = getI18nMsg('e');
+  $('sports').innerText = getI18nMsg('s');
+  $('health').innerText = getI18nMsg('m');
+  $('most').innerText = getI18nMsg('po');
+  $('select_country').innerText = getI18nMsg('country');
+  $('topic').innerText = getI18nMsg('topic');
+  $('save_button').innerText = getI18nMsg('save');
+  $('story_count').innerText = getI18nMsg('storyCount');
+  $('logo').innerHTML = $('logo').innerHTML + getI18nMsg('newsOption');
+  $('custom_text').innerHTML = getI18nMsg('customText') + '<br/>' +
+    getI18nMsg('maximumTopics',[MAX_CUS_TOPICS]);
+  $('submit_button').value = getI18nMsg('submitButton');
+}
+
+/**
+ * Sets topic list and number of stories retrieved from localstorage(if any)
+ * otherwise sets to default.
+ */
+function setCountAndTopicList() {
+  var topicLists = document.getElementsByClassName('checkBox');
+
+  // Retrieves topics list from localStorage.
+  var topics = JSON.parse(window.localStorage.getItem('topics'));
+
+  // Runs if retrieved topic list from local storage contains topics.
+  if (topics) {
+    for (var x = 0, topicList; topicList = topicLists[x]; x++) {
+
+      // Saves whether checkbox is checked or not.
+      var isPresent = false;
+      for (var y = 0; y < topics.length; y++) {
+        if (topics[y] == topicList.value) {
+          topicList.checked = true;
+          isPresent = true;
+          checkCount++;
+          break;
+        }
+      }
+      if (!isPresent) {
+        topicList.checked = false;
+      }
+    }
+  }
+
+  // Retrieves list of custom topics from localstorage(if any) and shows it
+  // in option page.
+  var keywords = JSON.parse(window.localStorage.getItem('keywords'));
+  if (keywords) {
+
+    // Template to store custom topics in a table.
+    var template = [];
+    var title = chrome.i18n.getMessage('deleteTitle');
+    for (var i = 0; i < keywords.length; i++) {
+      checkCount++;
+
+      template.push('<tr style = "height: 22px;">');
+      template.push('<td id = "keyword_value" class = "cusTopicsClass">');
+      template.push('<textarea class="noborder" readonly>');
+      template.push(keywords[i]);
+      template.push('</textarea>');
+      template.push('<td class = "suppr" onclick = "delCusTopic(this)" ');
+        template.push('title="');
+        template.push(title);
+        template.push('">');
+      template.push('</td>');
+      template.push('</tr>');
+    }
+    $('custom_topics').innerHTML = template.join('');
+    if (keywords.length == MAX_CUS_TOPICS) {
+      $('submit_button').disabled = true;
+      $('newKeyword').readOnly = 'readonly';
+    }
+  }
+  // Check all checkboxes(default settings) if no custom topic list and
+  // checkbox topic list from local storage is found.
+  if (!keywords && !topics) {
+    for (var x = 0, topicList; topicList = topicLists[x]; x++) {
+      topicList.checked = true;
+      checkCount++;
+    }
+  }
+
+  // Retrieves saved value of number of stories.
+  var count = window.localStorage.getItem('count');
+
+  // Sets number of stories in dropdown.
+  if (count) {
+    $('storyCount').value = count;
+  }
+}
+
+/**
+ * Saves checked topic list(if any), Custom topics(if any), number of
+ * stories and country value in local storage.
+ */
+function saveTopicsCountry() {
+  var country = $('countryList').value;
+  var topicLists = document.getElementsByClassName('checkBox');
+
+  // Contains selected number of stories.
+  var count = $('storyCount').value;
+
+  // Stores checked topics list.
+  var topicArr = [];
+  for (var i = 0, topicList; topicList = topicLists[i]; i++) {
+    if (topicList.checked) {
+      topicArr.push(topicList.value);
+    }
+  }
+  var keywords = JSON.parse(window.localStorage.getItem('keywords'));
+
+  // Saves custom topics to local storage(if any).
+  if (tempCusTopics.length > 0) {
+    if (keywords) {
+      keywords = keywords.concat(tempCusTopics);
+      window.localStorage.setItem('keywords', JSON.stringify(keywords));
+    } else {
+      window.localStorage.setItem('keywords', JSON.stringify(tempCusTopics));
+    }
+    tempCusTopics.splice(0, tempCusTopics.length);
+  }
+
+  // Saves checkbox topics(if any).
+  if (topicArr.length > 0) {
+    window.localStorage.setItem('topics', JSON.stringify(topicArr));
+  } else {
+    window.localStorage.removeItem('topics');
+  }
+
+  window.localStorage.setItem('count', count);
+  window.localStorage.setItem('country', country);
+
+  showUserMessages('save_status', 0.5, 'saveStatus');
+  $('save_button').disabled = true;
+}
+
+/**
+ * Disables the save button on options page if no topic is selected by the user.
+ * @param {String} id Id of checkbox checked or unchecked.
+ */
+function manageCheckCount(id) {
+  checkCount = ($(id).checked) ? (checkCount + 1) : (checkCount - 1);
+  $('save_button').disabled = (checkCount == 0) ? true : false;
+}
+
+/**
+ * Enables save button if at least one topic is selected.
+ */
+function enableSaveButton() {
+  if (checkCount != 0) {
+    $('save_button').disabled = false;
+  }
+}
+
+/**
+ * Adds new entered custom topic.
+ */
+function addCusTopic() {
+  // Retrieves custom topic list from local storage(if any), else create new
+  // array list.
+  var keywords = JSON.parse(window.localStorage.getItem('keywords') || "[]");
+
+  // Adds topic only if total number of added custom topics are less than 10.
+  if (keywords.length + tempCusTopics.length <= (MAX_CUS_TOPICS - 1)) {
+
+    // Stores new entered value in input textbox.
+    var val = $('newKeyword').value;
+    if (val) {
+      val = val.trim();
+      if (val.length > 0) {
+        var pattern = /,/g;
+
+        // Runs if comma(,) is not present in topic entered.
+        if (val.match(pattern) == null) {
+          checkCount++;
+          tempCusTopics.push(val);
+
+          // Template to store custom topics in a table.
+          var template = [];
+          var title = chrome.i18n.getMessage('deleteTitle');
+
+          template.push('<tr style = "height: 22px;">');
+          template.push('<td id = "keyword_value" class = "cusTopicsClass">');
+          template.push('<textarea class="noborder" readonly>');
+          template.push(val);
+          template.push('</textarea>');
+          template.push('<td class = "suppr" onclick = "delCusTopic(this)" ');
+            template.push('title="');
+            template.push(title);
+            template.push('">');
+          template.push('</td>');
+          template.push('</tr>');
+
+          $('custom_topics').innerHTML += template.join('');
+          enableSaveButton();
+        } else {
+          showUserMessages('invalid_status', 2.5, 'invalidChars');
+        }
+      }
+      $('newKeyword').value = '';
+    }
+  }
+
+  if ((keywords.length + tempCusTopics.length) == (MAX_CUS_TOPICS)) {
+    $('submit_button').disabled = true;
+    $('newKeyword').readOnly = 'readonly';
+  }
+}
+
+/**
+ * Delete custom topic whenever users click on delete icon.
+ * @param {HTMLTableColElement} obj HTML table column element to be deleted.
+ */
+function delCusTopic(obj) {
+  // Deletes only if total number of topics are greater than 1, else shows
+  // error message.
+  if (checkCount > 1) {
+    var value;
+
+    // Extract custom topic value.
+    value = obj.parentNode.querySelector('.cusTopicsClass textarea').value;
+
+    // Removes custom topic element from UI.
+    $('custom_topics').removeChild(obj.parentNode);
+
+    // Removes custom topic element either from temporary array(if topic is
+    // not yet saved) or from saved topic list and saves new list to
+    // local storage.
+    var flag = 0;
+    for (var i = 0; i < tempCusTopics.length; i++) {
+      if (tempCusTopics[i] == value) {
+        tempCusTopics.splice(i, 1);
+        flag = 1;
+        break;
+      }
+    }
+
+    if (flag == 0) {
+      var keywords = JSON.parse(window.localStorage.getItem('keywords'));
+      for (i = 0; i < keywords.length; i++) {
+        if (keywords[i] == value) {
+          keywords.splice(i, 1);
+          break;
+        }
+      }
+      if (keywords.length > 0) {
+        window.localStorage.setItem('keywords', JSON.stringify(keywords));
+      } else {
+        window.localStorage.removeItem('keywords');
+      }
+    }
+
+    checkCount--;
+    $('submit_button').disabled = false;
+  } else {
+    showUserMessages('save_status', 2.5, 'noTopic');
+  }
+  $('newKeyword').readOnly = false;
+}