felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 06:48:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #113 from DarKFlameS/tabs-zoom-api

Browse Source 
Added zoom api example to tabs-tabs-tabs
This commit is contained in:
wbamberg
2016-10-20 09:54:31 -07:00
committed by GitHub
parent 9c64e1b6ef 8e94e8d65f
commit 2891f53dac
4 changed files with 90 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tabs-tabs-tabs/manifest.json
View File

@@ -6,6 +6,7 @@
}
},
"browser_action": {
"browser_style": true,
"default_title": "Tabs, tabs, tabs",
"default_popup": "tabs.html"
},

9
tabs-tabs-tabs/tabs.css
View File

@@ -1,3 +1,12 @@
html, body {
width: 350px;
}
a {
margin: 10px;
display: inline-block;
}
.panel {
margin: 5px;
}

35
tabs-tabs-tabs/tabs.html
View File

@@ -7,13 +7,34 @@
</head>
<body>
<a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
<a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
<a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
<a href="#" id="tabs-reload">Reload active tab</a><br>
<a href="#" id="tabs-remove">Remove active tab</a><br>
<a href="#" id="tabs-create">Create a tab</a><br>
<a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
<div class="panel">
<div class="panel-section panel-section-header">
<div class="text-section-header">Tabs-tabs-tabs</div>
</div>
<a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
<a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
<div class="panel-section-separator"></div>
<a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
<a href="#" id="tabs-reload">Reload active tab</a><br>
<a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
<div class="panel-section-separator"></div>
<a href="#" id="tabs-create">Create a tab</a><br>
<a href="#" id="tabs-remove">Remove active tab</a><br>
<div class="panel-section-separator"></div>
<a href="#" id="tabs-add-zoom">Zoom in</a><br>
<a href="#" id="tabs-default-zoom">Reset zoom</a><br>
<a href="#" id="tabs-decrease-zoom">Zoom out</a>
</div>
<script src="tabs.js"></script>
</body>

52
tabs-tabs-tabs/tabs.js
View File

@@ -1,3 +1,9 @@
// Zoom constants. Define Max, Min, increment and default values
const ZOOM_INCREMENT = 0.2;
const MAX_ZOOM = 3;
const MIN_ZOOM = 0.3;
const DEFAULT_ZOOM = 1;
function firstUnpinnedTab(tabs) {
for (var tab of tabs) {
if (!tab.pinned) {
@@ -70,5 +76,51 @@ document.addEventListener("click", function(e) {
});
}
else if (e.target.id === "tabs-add-zoom") {
callOnActiveTab((tab) => {
chrome.tabs.getZoom(tab.id, function(zoomFactor){
//the maximum zoomFactor is 3, it can't go higher
if (zoomFactor >= MAX_ZOOM) {
alert("Tab zoom factor is already at max!");
} else {
var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
//if the newZoomFactor is set to higher than the max accepted
//it won't change, and will never alert that it's at maximum
newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
chrome.tabs.setZoom(tab.id, newZoomFactor);
}
});
});
}
else if (e.target.id === "tabs-decrease-zoom") {
callOnActiveTab((tab) => {
chrome.tabs.getZoom(tab.id, function(zoomFactor){
//the minimum zoomFactor is 0.3, it can't go lower
if (zoomFactor <= MIN_ZOOM) {
alert("Tab zoom factor is already at minimum!");
} else {
var newZoomFactor = zoomFactor - ZOOM_INCREMENT;
//if the newZoomFactor is set to lower than the min accepted
//it won't change, and will never alert that it's at minimum
newZoomFactor = newZoomFactor < MIN_ZOOM ? MIN_ZOOM : newZoomFactor;
chrome.tabs.setZoom(tab.id, newZoomFactor);
}
});
});
}
else if (e.target.id === "tabs-default-zoom") {
callOnActiveTab((tab) => {
chrome.tabs.getZoom(tab.id, function(zoomFactor){
if (zoomFactor == DEFAULT_ZOOM) {
alert("Tab zoom is already at the default zoom factor");
} else {
chrome.tabs.setZoom(tab.id, DEFAULT_ZOOM);
}
});
});
}
e.preventDefault();
});