misc/clicks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zoom level UI support.

Browse Source
This commit is contained in:
Ian Gulliver
2015-11-21 13:37:30 -08:00
parent c539dcfbe3
commit 64df9cd117
9 changed files with 180 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/clicks.js
View File

@@ -281,6 +281,40 @@ Clicks.prototype.buildUI_ = function() {
'key': '+', 'key': '+',
}, },
], ],
[
{
'img': 'zoom-1x',
'key': '!',
},
{
'img': 'zoom-15x',
'key': '@',
},
{
'img': 'zoom-2x',
'key': '#',
},
{
'img': 'zoom-25x',
'key': '$',
},
{
'img': 'zoom-3x',
'key': '%',
},
{
'img': 'zoom-35x',
'key': '^',
},
{
'img': 'zoom-4x',
'key': '&',
},
{
'img': 'zoom-45x',
'key': '*',
},
],
], ],
}, },
{ {
@@ -540,6 +574,16 @@ Clicks.prototype.updateControls_ = function(e) {
this.setButtonActive_('rate-125x', activeRate == 1.25); this.setButtonActive_('rate-125x', activeRate == 1.25);
this.setButtonActive_('rate-15x', activeRate == 1.5); this.setButtonActive_('rate-15x', activeRate == 1.5);
this.setButtonActive_('rate-2x', activeRate == 2.0); this.setButtonActive_('rate-2x', activeRate == 2.0);
var zoomLevel = this.activePlayer_.getZoomLevel();
this.setButtonActive_('zoom-1x', zoomLevel == 1.0);
this.setButtonActive_('zoom-15x', zoomLevel == 1.5);
this.setButtonActive_('zoom-2x', zoomLevel == 2.0);
this.setButtonActive_('zoom-25x', zoomLevel == 2.5);
this.setButtonActive_('zoom-3x', zoomLevel == 3.0);
this.setButtonActive_('zoom-35x', zoomLevel == 3.5);
this.setButtonActive_('zoom-4x', zoomLevel == 4.0);
this.setButtonActive_('zoom-45x', zoomLevel == 4.5);
}; };
@@ -841,15 +885,14 @@ ClicksVideo.prototype.getZoomLevel = function() {
}; };
ClicksVideo.prototype.zoom = function(zoomLevel) { ClicksVideo.prototype.fixZoom_ = function() {
var zoomLevels = this.zoomLevels_(); var zoomLevels = this.zoomLevels_();
this.zoomLevel_ = zoomLevels[zoomLevels.length - 1]; this.zoomLevel_ = Math.min(this.zoomLevel_, zoomLevels[zoomLevels.length - 1]);
for (var i = 0; i < zoomLevels.length; i++) {
if (zoomLevels[i] >= zoomLevel) {
this.zoomLevel_ = zoomLevels[i];
break;
}
} }
ClicksVideo.prototype.zoom = function(zoomLevel) {
this.zoomLevel_ = zoomLevel;
this.resize(); this.resize();
}; };
@@ -883,6 +926,7 @@ ClicksVideo.prototype.actualZoomLevel_ = function(zoomLevel) {
ClicksVideo.prototype.resize = function() { ClicksVideo.prototype.resize = function() {
this.fixZoom_();
zoom = Math.min(this.actualZoomLevel_(this.zoomLevel_), 1.0); zoom = Math.min(this.actualZoomLevel_(this.zoomLevel_), 1.0);
this.playerScale_.style.transform = [ this.playerScale_.style.transform = [
'scale(' + zoom + ',' + zoom + ')', 'scale(' + zoom + ',' + zoom + ')',

16
static/images/zoom-15x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">1.5x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-1x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">1.0x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-25x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">2.5x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-2x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">2.0x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-35x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">3.5x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-3x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">3.0x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-45x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">4.5x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
static/images/zoom-4x.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B12126;}
.st1{font-family:'Roboto-Regular';}
.st2{font-size:15px;}
</style>
<text transform="matrix(1 0 0 1 3.8864 18.0003)" class="st0 st1 st2">4.0x</text>
<path class="st0" d="M25.9,31.9l-5.5-3.6c-0.2-0.1-0.5-0.2-0.7-0.3c0.1-0.4,0.2-0.9,0.2-1.3c0-2.9-2.4-5.3-5.3-5.3s-5.3,2.4-5.3,5.3
c0,2.9,2.4,5.3,5.3,5.3c1.3,0,2.6-0.5,3.5-1.3c0.1,0.2,0.3,0.3,0.5,0.5l5.5,3.6c0.3,0.2,0.6,0.3,0.9,0.3c0.6,0,1.1-0.3,1.4-0.8
C26.9,33.5,26.7,32.4,25.9,31.9z M14.6,30.6c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8
C18.4,28.9,16.7,30.6,14.6,30.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB