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