rewrite options page to be more chrome-like

[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);

/**
 * 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',
  ];
  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;

    $('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);
  });
}

/**
 * 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);
}