options: move unique functions in here

[chrome-ext/clearhistory-advance-fork.git] / javascript / options.js

// Copyright 2011 Google Inc. All Rights Reserved.

/**
 * @fileoverview Script for the options page.
 * @author arunjit@google.com (Arunjit Singh)
 */

window.addEventListener('load', init, false);

/**
 * Pours the data in template string.
 * @param {Object} datObject The data object to be filled in template string.
 * @return {string} The new string created from template string and filled
 *     with the given data.
 */
String.prototype.supplant = function(datObject) {
  return this.replace(/{([^{}]*)}/g,
    function(match, firstSubMatch) {
      var replace = datObject[firstSubMatch];
      return (typeof replace === 'string' || typeof replace === 'number') ?
          replace : match;
    });
};

/**
 * Queries the DOM.
 * @param {string} selector Selector to execute.
 * @param {HTMLElement=} context HTMLElement to query (optional).
 * @return {Array.<HTMLElement>} Array of matched elements (non-live).
 */
function $(selector, context) {
  if (!(context && context instanceof HTMLElement)) {
    context = document;
  }
  return Array.prototype.slice.call(context.querySelectorAll(selector));
}

/**
 * Initializes the i18n strings.
 * Loads values from localStorage and applies them to the elements
 */
function init() {
  // Localize strings:
  CONSTANTS.TIMES.forEach(function(time) {
    var selector = 'input[name=time][value="{t}"], .opt-label#opt-{t}'
                   .supplant({t: time});
    var elements = $(selector);
    time = getUnitsForTime(time);
    var message = (time.time === -1) ?
                  chrome.i18n.getMessage('optionsTimeAll') :
                  chrome.i18n.getMessage('optionsTime',
                                         [time.time, time.units]);
    elements[0].title = message;
    elements[1].innerText = message;
  });

  $('[i18n-content]').forEach(function(ele) {
    ele.innerText = chrome.i18n.getMessage(ele.getAttribute('i18n-content'));
  });

  // Bind all the callbacks
  $('input[type=radio]').forEach(function(e) {
    e.onclick = toggle;
  });
  $('input[type=checkbox]').forEach(function(e) {
    e.onclick = setCheck;
  });

  // Load or set localStorage data
  var settings = [
    'timeStart', 'time', 'prompt', 'cookies', 'downloads', 'autoclear', 'notify',
  ];
  chrome.storage.sync.get(settings, function(s) {
    var timeStart = s.timeStart || CONSTANTS.YES;
    var time = ~~(s.time) || (s.time = CONSTANTS.DEFAULT_TIME);
    var showPrompt = s.prompt || (s.prompt = CONSTANTS.YES);
    var clearCookies = s.cookies || CONSTANTS.NO;
    var clearDownloads = s.downloads || CONSTANTS.NO;
    var autoClear = s.autoclear || CONSTANTS.NO;
    var notify = s.notify || CONSTANTS.YES;

    $('input[name=timeStart][value="' + timeStart + '"]')[0].checked = true;
    $('input[name=time][value="' + time + '"]')[0].checked = true;
    $('input[name=prompt]')[0].checked = (showPrompt === CONSTANTS.YES);
    $('input[name=cookies]')[0].checked = (clearCookies === CONSTANTS.YES);
    $('input[name=downloads]')[0].checked = (clearDownloads === CONSTANTS.YES);
    $('input[name=autoclear]')[0].checked = (autoClear === CONSTANTS.YES);
    $('input[name=notify]')[0].checked = (notify === CONSTANTS.YES);
  });
}

/**
 * Toggles the value in localStorage for the element selected
 * @this {HTMLInputElement} The element (radio button) that was clicked.
 */
function toggle() {
  var setting = {};
  setting[this.name] = this.value;
  chrome.storage.sync.set(setting);
  optionSaved();
}

/**
 * Sets the {@code localStorage.prompt} property when selected
 * @this {HTMLInputElement} The element (checkbox) that was clicked.
 */
function setCheck() {
  var setting = {};
  setting[this.name] = this.checked ? CONSTANTS.YES : CONSTANTS.NO;
  chrome.storage.sync.set(setting);
  optionSaved();
}

// For rapid changes/saves
var isSaving = null;
/**
 * Updates the UI to indicate save completed
 */
function optionSaved() {
  var element = $('#optionsSaved')[0];
  element.classList.add('show');
  clearTimeout(isSaving);
  isSaving = setTimeout(function() {
    element.classList.remove('show');
  }, 1000);
}