chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview This code supports the popup behaviour of the extension, and
   7  *               demonstrates how to:
   8  *
   9  *               1) Set the zoom for a tab using tabs.setZoom()
  10  *               2) Read the current zoom of a tab using tabs.getZoom()
  11  *               3) Set the zoom mode of a tab using tabs.setZoomSettings()
  12  *               4) Read the current zoom mode of a tab using
  13  *               tabs.getZoomSettings()
  14  *
  15  *               It also demonstrates using a zoom change listener to update the
  16  *               contents of a control.
  17  */
  18
  19 zoomStep = 1.1;
  20 tabId = -1;
  21
  22 function displayZoomLevel(level) {
  23   var percentZoom = parseFloat(level) * 100;
  24   var zoom_percent_str = percentZoom.toFixed(1) + '%';
  25
  26   document.getElementById('displayDiv').textContent = zoom_percent_str;
  27 }
  28
  29 document.addEventListener('DOMContentLoaded', function() {
  30   // Find the tabId of the current (active) tab. We could just omit the tabId
  31   // parameter in the function calls below, and they would act on the current
  32   // tab by default, but for the purposes of this demo we will always use the
  33   // API with an explicit tabId to demonstrate its use.
  34   chrome.tabs.query({active: true}, function (tabs) {
  35     if (tabs.length > 1)
  36       console.log(
  37           '[ZoomDemoExtension] Query unexpectedly returned more than 1 tab.');
  38     tabId = tabs[0].id;
  39
  40     chrome.tabs.getZoomSettings(tabId, function(zoomSettings) {
  41       var modeRadios = document.getElementsByName('modeRadio');
  42       for (var i = 0; i < modeRadios.length; i++) {
  43         if (modeRadios[i].value == zoomSettings.mode)
  44           modeRadios[i].checked = true;
  45       }
  46
  47       var scopeRadios = document.getElementsByName('scopeRadio');
  48       for (var i = 0; i < scopeRadios.length; i++) {
  49         if (scopeRadios[i].value == zoomSettings.scope)
  50           scopeRadios[i].checked = true;
  51       }
  52
  53       var percentDefaultZoom =
  54           parseFloat(zoomSettings.default_zoom_factor) * 100;
  55       document.getElementById('defaultLabel').textContent =
  56           'Default: ' + percentDefaultZoom.toFixed(1) + '%';
  57     });
  58
  59     chrome.tabs.getZoom(tabId, displayZoomLevel);
  60   });
  61
  62   document.getElementById('increaseButton').onclick = doZoomIn;
  63   document.getElementById('decreaseButton').onclick = doZoomOut;
  64   document.getElementById('defaultButton').onclick = doZoomDefault;
  65   document.getElementById('setModeButton').onclick = doSetMode;
  66   document.getElementById('closeButton').onclick = doClose;
  67 });
  68
  69 function zoomChangeListener(zoomChangeInfo) {
  70   displayZoomLevel(zoomChangeInfo.newZoomFactor);
  71 }
  72
  73 chrome.tabs.onZoomChange.addListener(zoomChangeListener);
  74
  75 function changeZoomByFactorDelta(factorDelta) {
  76   if (tabId == -1)
  77     return;
  78
  79   chrome.tabs.getZoom(tabId, function(zoomFactor) {
  80     var newZoomFactor = factorDelta * zoomFactor;
  81     chrome.tabs.setZoom(tabId, newZoomFactor, function() {
  82       if (chrome.runtime.lastError)
  83         console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
  84     });
  85   });
  86 }
  87
  88 function doZoomIn() {
  89   changeZoomByFactorDelta(zoomStep);
  90 }
  91
  92 function doZoomOut() {
  93   changeZoomByFactorDelta(1.0/zoomStep);
  94 }
  95
  96 function doZoomDefault() {
  97   if (tabId == -1)
  98     return;
  99
 100   chrome.tabs.setZoom(tabId, 0, function() {
 101     if (chrome.runtime.lastError)
 102       console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
 103   });
 104 }
 105
 106 function doSetMode() {
 107   if (tabId == -1)
 108     return;
 109
 110   var modeVal;
 111   var modeRadios = document.getElementsByName('modeRadio');
 112   for (var i = 0; i < modeRadios.length; i++) {
 113     if (modeRadios[i].checked)
 114       modeVal = modeRadios[i].value;
 115   }
 116
 117   var scopeVal;
 118   var scopeRadios = document.getElementsByName('scopeRadio');
 119   for (var i = 0; i < scopeRadios.length; i++) {
 120     if (scopeRadios[i].checked)
 121       scopeVal = scopeRadios[i].value;
 122   }
 123
 124   if (!modeVal || !scopeVal) {
 125     console.log(
 126         '[ZoomDemoExtension] Must specify values for both mode & scope.');
 127     return;
 128   }
 129
 130   chrome.tabs.setZoomSettings(tabId, { mode: modeVal, scope: scopeVal },
 131     function() {
 132       if (chrome.runtime.lastError) {
 133         console.log('[ZoomDemoExtension] doSetMode() error: ' +
 134                     chrome.runtime.lastError.message);
 135       }
 136     });
 137 }
 138
 139 function doClose() {
 140   self.close();
 141 }