Index: chrome/common/extensions/docs/examples/api/fontSettings/options.js |
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/options.js b/chrome/common/extensions/docs/examples/api/fontSettings/options.js |
index b93bc8f55c3282133b19a5b170127c3b7124cd9e..dab7f65be2e08d1b58c626a1e2b5740884b117ec 100644 |
--- a/chrome/common/extensions/docs/examples/api/fontSettings/options.js |
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/options.js |
@@ -2,16 +2,56 @@ |
// Use of this source code is governed by a BSD-style license that can be |
// found in the LICENSE file. |
+// The scripts supported by the Font Settings Extension API. |
+var scripts = [ |
+ { scriptCode: 'Zyyy', scriptName: 'Default' }, |
+ { scriptCode: 'Arab', scriptName: 'Arabic' }, |
+ { scriptCode: 'Armn', scriptName: 'Armenian' }, |
+ { scriptCode: "Beng", scriptName: 'Bengali' }, |
+ { scriptCode: "Cher", scriptName: 'Cherokee' }, |
+ { scriptCode: "Cyrl", scriptName: 'Cyrillic' }, |
+ { scriptCode: "Deva", scriptName: 'Devanagari' }, |
+ { scriptCode: "Ethi", scriptName: 'Ethiopic' }, |
+ { scriptCode: "Geor", scriptName: 'Georgian' }, |
+ { scriptCode: "Grek", scriptName: 'Greek' }, |
+ { scriptCode: "Gujr", scriptName: 'Gujarati' }, |
+ { scriptCode: "Guru", scriptName: 'Gurmukhi' }, |
+ { scriptCode: "Hebr", scriptName: 'Hebrew' }, |
+ { scriptCode: "Jpan", scriptName: 'Japanese' }, |
+ { scriptCode: "Knda", scriptName: 'Kannada' }, |
+ { scriptCode: "Khmr", scriptName: 'Khmer' }, |
+ { scriptCode: "Hang", scriptName: 'Korean' }, |
+ { scriptCode: "Laoo", scriptName: 'Lao' }, |
+ { scriptCode: "Mlym", scriptName: 'Malayalam' }, |
+ { scriptCode: "Mong", scriptName: 'Mongolian' }, |
+ { scriptCode: "Mymr", scriptName: 'Myanmar' }, |
+ { scriptCode: "Orya", scriptName: 'Oriya' }, |
+ { scriptCode: "Hans", scriptName: 'Simplified Chinese' }, |
+ { scriptCode: "Sinh", scriptName: 'Sinhala' }, |
+ { scriptCode: "Taml", scriptName: 'Tamil' }, |
+ { scriptCode: "Telu", scriptName: 'Telugu' }, |
+ { scriptCode: "Thaa", scriptName: 'Thaana' }, |
+ { scriptCode: "Thai", scriptName: 'Thai' }, |
+ { scriptCode: "Tibt", scriptName: 'Tibetan' }, |
+ { scriptCode: "Hant", scriptName: 'Traditional Chinese' }, |
+ { scriptCode: "Cans", scriptName: 'Unified Canadian Aboriginal Syllabics' }, |
+ { scriptCode: "Yiii", scriptName: 'Yi' } |
+]; |
+ |
+// The generic font families supported by the Font Settings Extension API. |
+var families = |
+ ["standard", "sansserif", "serif", "fixed", "cursive", "fantasy"]; |
+ |
// Mapping between font list ids and the generic family setting they |
// represent. |
-var genericFamilies = [ |
+var fontPickers = [ |
{ fontList: 'standardFontList', name: 'standard' }, |
{ fontList: 'serifFontList', name: 'serif' }, |
{ fontList: 'sansSerifFontList', name: 'sansserif' }, |
{ fontList: 'fixedFontList', name: 'fixed' } |
]; |
-// Ids of elements to contain the "Lorem ipsum" sample text. |
+// Ids of elements to contain the sample text. |
var sampleTextDivIds = [ |
'standardFontSample', |
'serifFontSample', |
@@ -20,7 +60,8 @@ var sampleTextDivIds = [ |
'minFontSample' |
]; |
-var defaultSampleText = 'Lorem ipsum dolor sit amat.'; |
+// Sample texts. |
+var defaultSampleText = 'The quick brown fox jumps over the lazy dog.'; |
var scriptSpecificSampleText = { |
// "Cyrllic script". |
'Cyrl': 'Кириллица', |
@@ -32,9 +73,62 @@ var scriptSpecificSampleText = { |
'Khmr': '\u1797\u17B6\u179F\u17B6\u1781\u17D2\u1798\u17C2\u179A', |
}; |
+// Definition for ScriptList. |
+cr.define('fontSettings.ui', function() { |
+ const List = cr.ui.List; |
+ const ListItem = cr.ui.ListItem; |
+ const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; |
+ |
+ function ScriptListItem(info) { |
+ var el = cr.doc.createElement('li'); |
+ el.__proto__ = ScriptListItem.prototype; |
+ el.info_ = info; |
+ el.decorate(); |
+ return el; |
+ }; |
+ |
+ ScriptListItem.prototype = { |
+ __proto__: ListItem.prototype, |
+ |
+ decorate: function() { |
+ this.textContent = this.info_.scriptName; |
+ if (this.info_.scriptCode == 'Zyyy') { |
+ this.style.marginBottom = '1em'; |
+ } |
+ } |
+ }; |
+ |
+ var ScriptList = cr.ui.define('list'); |
+ ScriptList.prototype = { |
+ __proto__: List.prototype, |
+ |
+ decorate: function() { |
+ List.prototype.decorate.call(this); |
+ var sm = new ListSingleSelectionModel(); |
+ this.selectionModel = sm; |
+ this.autoExpands = true; |
+ this.dataModel = new cr.ui.ArrayDataModel(scripts); |
+ |
+ // The list auto expands but is still just barely short enough to require |
+ // a scroll bar. This is a hack to resize it to not require the scroll |
+ // bar. |
+ this.style.height = (this.clientHeight + 4) + 'px'; |
+ }, |
+ |
+ createItem: function(info) { |
+ return new ScriptListItem(info); |
+ } |
+ }; |
+ |
+ return { |
+ ScriptList: ScriptList, |
+ ScriptListItem: ScriptListItem |
+ }; |
+}); |
+ |
function getSelectedScript() { |
var scriptList = document.getElementById('scriptList'); |
- return scriptList.options[scriptList.selectedIndex].value; |
+ return scriptList.selectedItem.scriptCode; |
} |
function getSelectedFont(fontList) { |
@@ -43,16 +137,16 @@ function getSelectedFont(fontList) { |
// Populates the font lists with the list of system fonts from |fonts|. |
function populateLists(fonts) { |
- for (var i = 0; i < genericFamilies.length; i++) { |
- var list = document.getElementById(genericFamilies[i].fontList); |
+ for (var i = 0; i < fontPickers.length; i++) { |
+ var list = document.getElementById(fontPickers[i].fontList); |
- // Add special "(none)" item to indicate fallback to the non-per-script |
+ // Add special item to indicate fallback to the non-per-script |
// font setting. The Font Settings API uses the empty string to indicate |
// fallback. |
- var noneItem = document.createElement('option'); |
- noneItem.value = ''; |
- noneItem.text = '(none)'; |
- list.add(noneItem); |
+ var defaultItem = document.createElement('option'); |
+ defaultItem.value = ''; |
+ defaultItem.text = '(Use default)'; |
+ list.add(defaultItem); |
for (var j = 0; j < fonts.length; j++) { |
var item = document.createElement('option'); |
@@ -108,22 +202,18 @@ function getFontHandler(list) { |
} |
// Called when the script list selection changes. Sets the selected value of |
-// each font list to the current font setting, and updates the document's lang |
-// so that the samples are shown in the current font setting. |
+// each font list to the current font setting, and updates the samples' lang |
+// so that they are shown in the current font setting. |
function updateFontListsForScript() { |
var script = getSelectedScript(); |
- for (var i = 0; i < genericFamilies.length; i++) { |
- var list = document.getElementById(genericFamilies[i].fontList); |
- var family = genericFamilies[i].name; |
+ for (var i = 0; i < fontPickers.length; i++) { |
+ var list = document.getElementById(fontPickers[i].fontList); |
+ var family = fontPickers[i].name; |
var details = {}; |
details.genericFamily = family; |
details.script = script; |
- // For font selection it's the script code that matters, not language, so |
- // just use en for lang. |
- document.body.lang = 'en-' + script; |
- |
chrome.fontSettings.getFont(details, getFontHandler(list)); |
} |
@@ -132,7 +222,11 @@ function updateFontListsForScript() { |
else |
sample = defaultSampleText; |
for (var i = 0; i < sampleTextDivIds.length; i++) { |
- document.getElementById(sampleTextDivIds[i]).innerText = sample; |
+ var sampleTextDiv = document.getElementById(sampleTextDivIds[i]); |
+ // For font selection it's the script code that matters, not language, so |
+ // just use en for lang. |
+ sampleTextDiv.lang = 'en-' + script; |
+ sampleTextDiv.innerText = sample; |
} |
} |
@@ -182,53 +276,76 @@ function initFontSizePref(id, sampleTexts, getter, setter, apiEvent) { |
apiEvent.addListener(getFontSizeChangedOnBrowserFunc(elem, sampleTexts)); |
} |
-function clearAllSettings() { |
- var scripts = |
- ["Afak", "Arab", "Armi", "Armn", "Avst", "Bali", "Bamu", "Bass", "Batk", |
- "Beng", "Blis", "Bopo", "Brah", "Brai", "Bugi", "Buhd", "Cakm", "Cans", |
- "Cari", "Cham", "Cher", "Cirt", "Copt", "Cprt", "Cyrl", "Cyrs", "Deva", |
- "Dsrt", "Dupl", "Egyd", "Egyh", "Egyp", "Elba", "Ethi", "Geor", "Geok", |
- "Glag", "Goth", "Gran", "Grek", "Gujr", "Guru", "Hang", "Hani", "Hano", |
- "Hans", "Hant", "Hebr", "Hluw", "Hmng", "Hung", "Inds", "Ital", "Java", |
- "Jpan", "Jurc", "Kali", "Khar", "Khmr", "Khoj", "Knda", "Kpel", "Kthi", |
- "Lana", "Laoo", "Latf", "Latg", "Latn", "Lepc", "Limb", "Lina", "Linb", |
- "Lisu", "Loma", "Lyci", "Lydi", "Mand", "Mani", "Maya", "Mend", "Merc", |
- "Mero", "Mlym", "Moon", "Mong", "Mroo", "Mtei", "Mymr", "Narb", "Nbat", |
- "Nkgb", "Nkoo", "Nshu", "Ogam", "Olck", "Orkh", "Orya", "Osma", "Palm", |
- "Perm", "Phag", "Phli", "Phlp", "Phlv", "Phnx", "Plrd", "Prti", "Rjng", |
- "Roro", "Runr", "Samr", "Sara", "Sarb", "Saur", "Sgnw", "Shaw", "Shrd", |
- "Sind", "Sinh", "Sora", "Sund", "Sylo", "Syrc", "Syre", "Syrj", "Syrn", |
- "Tagb", "Takr", "Tale", "Talu", "Taml", "Tang", "Tavt", "Telu", "Teng", |
- "Tfng", "Tglg", "Thaa", "Thai", "Tibt", "Tirh", "Ugar", "Vaii", "Visp", |
- "Wara", "Wole", "Xpeo", "Xsux", "Yiii", "Zmth", "Zsym", "Zyyy"]; |
- var families = |
- ["standard", "sansserif", "serif", "fixed", "cursive", "fantasy"]; |
- for (var i = 0; i < scripts.length; i++) { |
- for (var j = 0; j < families.length; j++) { |
- chrome.fontSettings.clearFont({ |
- script: scripts[i], |
- genericFamily: families[j] |
- }); |
- } |
+function clearSettingsForScript(script) { |
+ for (var i = 0; i < families.length; i++) { |
+ chrome.fontSettings.clearFont({ |
+ script: script, |
+ genericFamily: families[i] |
+ }); |
} |
+} |
+ |
+function clearAllSettings() { |
+ for (var i = 0; i < scripts.length; i++) |
+ clearSettingsForScript(scripts[i].scriptCode); |
chrome.fontSettings.clearDefaultFixedFontSize(); |
chrome.fontSettings.clearDefaultFontSize(); |
chrome.fontSettings.clearMinimumFontSize(); |
} |
+function closeOverlay() { |
+ $('overlay-container').hidden = true; |
+} |
+ |
+function initResetButtons() { |
+ var overlay = $('overlay-container'); |
+ cr.ui.overlay.globalInitialization(); |
+ cr.ui.overlay.setupOverlay(overlay); |
+ overlay.addEventListener('cancelOverlay', closeOverlay); |
+ |
+ $('reset-this-script-button').onclick = function(event) { |
+ var scriptName = $('scriptList').selectedItem.scriptName; |
+ $('reset-this-script-overlay-dialog-content').innerText = |
+ 'Are you sure you want to reset settings for ' + scriptName + |
+ ' script?'; |
+ |
+ $('overlay-container').hidden = false; |
+ $('reset-this-script-overlay-dialog').hidden = false; |
+ $('reset-all-scripts-overlay-dialog').hidden = true; |
+ } |
+ $('reset-this-script-ok').onclick = function(event) { |
+ clearSettingsForScript(getSelectedScript()); |
+ closeOverlay(); |
+ }; |
+ $('reset-this-script-cancel').onclick = closeOverlay; |
+ |
+ $('reset-all-button').onclick = function(event) { |
+ $('overlay-container').hidden = false; |
+ $('reset-all-scripts-overlay-dialog').hidden = false; |
+ $('reset-this-script-overlay-dialog').hidden = true; |
+ } |
+ $('reset-all-ok').onclick = function(event) { |
+ clearAllSettings(); |
+ closeOverlay(); |
+ } |
+ $('reset-all-cancel').onclick = closeOverlay; |
+} |
+ |
function init() { |
- scriptList = document.getElementById('scriptList'); |
- scriptList.addEventListener('change', |
- updateFontListsForScript); |
+ var scriptList = document.getElementById('scriptList'); |
+ fontSettings.ui.ScriptList.decorate(scriptList); |
+ scriptList.selectionModel.selectedIndex = 0; |
+ scriptList.selectionModel.addEventListener('change', |
+ updateFontListsForScript); |
// Populate the font lists. |
chrome.fontSettings.getFontList(populateLists); |
// Add change handlers to the font lists. |
- for (var i = 0; i < genericFamilies.length; i++) { |
- var list = document.getElementById(genericFamilies[i].fontList); |
- var handler = getFontChangeHandler(list, genericFamilies[i].name); |
+ for (var i = 0; i < fontPickers.length; i++) { |
+ var list = document.getElementById(fontPickers[i].fontList); |
+ var handler = getFontChangeHandler(list, fontPickers[i].name); |
list.addEventListener('change', handler); |
} |
@@ -236,26 +353,43 @@ function init() { |
updateFontListsForScript); |
initFontSizePref( |
- 'defaultFontSize', |
+ 'defaultFontSizeRocker', |
+ ['standardFontSample', 'serifFontSample', 'sansSerifFontSample'], |
+ chrome.fontSettings.getDefaultFontSize, |
+ chrome.fontSettings.setDefaultFontSize, |
+ chrome.fontSettings.onDefaultFontSizeChanged); |
+ initFontSizePref( |
+ 'defaultFontSizeRange', |
['standardFontSample', 'serifFontSample', 'sansSerifFontSample'], |
chrome.fontSettings.getDefaultFontSize, |
chrome.fontSettings.setDefaultFontSize, |
chrome.fontSettings.onDefaultFontSizeChanged); |
initFontSizePref( |
- 'defaultFixedFontSize', |
+ 'defaultFixedFontSizeRocker', |
+ ['fixedFontSample'], |
+ chrome.fontSettings.getDefaultFixedFontSize, |
+ chrome.fontSettings.setDefaultFixedFontSize, |
+ chrome.fontSettings.onDefaultFixedFontSizeChanged); |
+ initFontSizePref( |
+ 'defaultFixedFontSizeRange', |
['fixedFontSample'], |
chrome.fontSettings.getDefaultFixedFontSize, |
chrome.fontSettings.setDefaultFixedFontSize, |
chrome.fontSettings.onDefaultFixedFontSizeChanged); |
initFontSizePref( |
- 'minFontSize', |
+ 'minFontSizeRocker', |
+ ['minFontSample'], |
+ chrome.fontSettings.getMinimumFontSize, |
+ chrome.fontSettings.setMinimumFontSize, |
+ chrome.fontSettings.onMinimumFontSizeChanged); |
+ initFontSizePref( |
+ 'minFontSizeRange', |
['minFontSample'], |
chrome.fontSettings.getMinimumFontSize, |
chrome.fontSettings.setMinimumFontSize, |
chrome.fontSettings.onMinimumFontSizeChanged); |
- var clearButton = document.getElementById('clearButton'); |
- clearButton.addEventListener('click', clearAllSettings); |
+ initResetButtons(); |
} |
document.addEventListener('DOMContentLoaded', init); |