javascript/options.js

   1 // Copyright 2011 Google Inc. All Rights Reserved.
   2
   3 /**
   4  * @fileoverview Script for the options page.
   5  * @author arunjit@google.com (Arunjit Singh)
   6  */
   7
   8 window.addEventListener('load', init, false);
   9
  10 /**
  11  * Pours the data in template string.
  12  * @param {Object} datObject The data object to be filled in template string.
  13  * @return {string} The new string created from template string and filled
  14  *     with the given data.
  15  */
  16 String.prototype.supplant = function(datObject) {
  17   return this.replace(/{([^{}]*)}/g,
  18     function(match, firstSubMatch) {
  19       var replace = datObject[firstSubMatch];
  20       return (typeof replace === 'string' || typeof replace === 'number') ?
  21           replace : match;
  22     });
  23 };
  24
  25 /**
  26  * Queries the DOM.
  27  * @param {string} selector Selector to execute.
  28  * @param {HTMLElement=} context HTMLElement to query (optional).
  29  * @return {Array.<HTMLElement>} Array of matched elements (non-live).
  30  */
  31 function $(selector, context) {
  32   if (!(context && context instanceof HTMLElement)) {
  33     context = document;
  34   }
  35   return Array.prototype.slice.call(context.querySelectorAll(selector));
  36 }
  37
  38 /**
  39  * Initializes the i18n strings.
  40  * Loads values from localStorage and applies them to the elements
  41  */
  42 function init() {
  43   // Localize strings:
  44   CONSTANTS.TIMES.forEach(function(time) {
  45     var selector = 'input[name=time][value="{t}"], .opt-label#opt-{t}'
  46                    .supplant({t: time});
  47     var elements = $(selector);
  48     time = getUnitsForTime(time);
  49     var message = (time.time === -1) ?
  50                   chrome.i18n.getMessage('optionsTimeAll') :
  51                   chrome.i18n.getMessage('optionsTime',
  52                                          [time.time, time.units]);
  53     elements[0].title = message;
  54     elements[1].innerText = message;
  55   });
  56
  57   $('[i18n-content]').forEach(function(ele) {
  58     ele.innerText = chrome.i18n.getMessage(ele.getAttribute('i18n-content'));
  59   });
  60
  61   // Bind all the callbacks
  62   $('input[type=radio]').forEach(function(e) {
  63     e.onclick = toggle;
  64   });
  65   $('input[type=checkbox]').forEach(function(e) {
  66     e.onclick = setCheck;
  67   });
  68
  69   // Load or set localStorage data
  70   var settings = [
  71     'timeStart', 'time', 'prompt', 'cookies', 'downloads', 'autoclear', 'notify',
  72   ];
  73   chrome.storage.sync.get(settings, function(s) {
  74     var timeStart = s.timeStart || CONSTANTS.YES;
  75     var time = ~~(s.time) || (s.time = CONSTANTS.DEFAULT_TIME);
  76     var showPrompt = s.prompt || (s.prompt = CONSTANTS.YES);
  77     var clearCookies = s.cookies || CONSTANTS.NO;
  78     var clearDownloads = s.downloads || CONSTANTS.NO;
  79     var autoClear = s.autoclear || CONSTANTS.NO;
  80     var notify = s.notify || CONSTANTS.YES;
  81
  82     $('input[name=timeStart][value="' + timeStart + '"]')[0].checked = true;
  83     $('input[name=time][value="' + time + '"]')[0].checked = true;
  84     $('input[name=prompt]')[0].checked = (showPrompt === CONSTANTS.YES);
  85     $('input[name=cookies]')[0].checked = (clearCookies === CONSTANTS.YES);
  86     $('input[name=downloads]')[0].checked = (clearDownloads === CONSTANTS.YES);
  87     $('input[name=autoclear]')[0].checked = (autoClear === CONSTANTS.YES);
  88     $('input[name=notify]')[0].checked = (notify === CONSTANTS.YES);
  89   });
  90 }
  91
  92 /**
  93  * Toggles the value in localStorage for the element selected
  94  * @this {HTMLInputElement} The element (radio button) that was clicked.
  95  */
  96 function toggle() {
  97   var setting = {};
  98   setting[this.name] = this.value;
  99   chrome.storage.sync.set(setting);
 100   optionSaved();
 101 }
 102
 103 /**
 104  * Sets the {@code localStorage.prompt} property when selected
 105  * @this {HTMLInputElement} The element (checkbox) that was clicked.
 106  */
 107 function setCheck() {
 108   var setting = {};
 109   setting[this.name] = this.checked ? CONSTANTS.YES : CONSTANTS.NO;
 110   chrome.storage.sync.set(setting);
 111   optionSaved();
 112 }
 113
 114 // For rapid changes/saves
 115 var isSaving = null;
 116 /**
 117  * Updates the UI to indicate save completed
 118  */
 119 function optionSaved() {
 120   var element = $('#optionsSaved')[0];
 121   element.classList.add('show');
 122   clearTimeout(isSaving);
 123   isSaving = setTimeout(function() {
 124     element.classList.remove('show');
 125   }, 1000);
 126 }