| <!DOCTYPE HTML> |
| <html i18n-values="dir:textdirection;"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Slideshow</title> |
| <style> |
| |
| body { |
| overflow: hidden; |
| background: black; |
| } |
| |
| #glow { |
| left: 0; |
| right: 0; |
| bottom: 30px; |
| height: 8px; |
| opacity: .4; |
| position: absolute; |
| background: -webkit-linear-gradient(transparent, white); |
| } |
| |
| #main { |
| position: absolute; |
| left: 0; |
| right:0; |
| top: 0; |
| bottom: 30px; |
| overflow: hidden; |
| } |
| |
| #playercontrols { |
| bottom: 0; |
| left: 0; |
| z-index: 999; |
| height: 30px; |
| opacity: .9; |
| right: 0; |
| align:center; |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| display: -webkit-box; |
| position: absolute; |
| background: -webkit-linear-gradient(#323232, #070707); |
| } |
| |
| #prevbutton > div { |
| background: url('chrome://resources/images/mediaplayer_prev.png'); |
| background-repeat: no-repeat; |
| background-position: 4px 8px; |
| width: 100%; |
| height: 30px; |
| z-index: 9999; |
| } |
| |
| .currentpicture { |
| width: 100%; |
| height: 100%; |
| position: absolute; |
| top: 0; |
| -webkit-transition-property: left; |
| -webkit-transition-duration: 1s; |
| display: -webkit-box; |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| pointer-events: none; |
| } |
| |
| .comingfromleft { |
| left: -100%; |
| } |
| |
| .comingfromright { |
| left: 100%; |
| } |
| |
| #nextbutton > div { |
| background: url('chrome://resources/images/mediaplayer_next.png'); |
| background-repeat: no-repeat; |
| background-position: 4px 8px; |
| width: 100%; |
| height: 30px; |
| z-index: 9999; |
| } |
| |
| button { |
| z-index: 9999; |
| cursor: pointer; |
| width: 28px; |
| height: 30px; |
| webkit-appearance: none; |
| padding: 0; |
| border: 0; |
| background: transparent; |
| } |
| |
| button:hover { |
| background: -webkit-linear-gradient(#6a7eac, #000000); |
| } |
| |
| </style> |
| <script src="chrome://resources/js/local_strings.js"></script> |
| <script src="chrome://resources/js/media_common.js"></script> |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', load); |
| |
| document.onselectstart = function(e) { |
| e.preventDefault(); |
| }; |
| |
| function $(o) { |
| return document.getElementById(o); |
| } |
| |
| /////////////////////////////////////////////////////////////////////////////// |
| // Document Functions: |
| |
| var currentPicture = null; |
| var prevPicture = null; |
| var currentFileOffset = 0; |
| var filelist = []; |
| var moveRight = false; |
| var lastimg = null; |
| |
| function loadedPicture() { |
| if (prevPicture) { |
| if (moveRight) { |
| prevPicture.style.left = '-100%'; |
| } else { |
| prevPicture.style.left = '100%'; |
| } |
| } |
| if (window.innerHeight < lastimg.height || |
| window.innerWidth < lastimg.width) { |
| if (lastimg.width > lastimg.height) { |
| lastimg.style.height = 'auto'; |
| lastimg.style.width = '100%'; |
| } else { |
| lastimg.style.width = 'auto'; |
| lastimg.style.height = '100%'; |
| } |
| } |
| setTimeout(function() { |
| currentPicture.style.left = '0'; |
| }, 10); |
| } |
| |
| function transitionTo(filePath, fromTheRight) { |
| if (currentPicture) { |
| if (prevPicture) { |
| $('main').removeChild(prevPicture); |
| } |
| prevPicture = currentPicture; |
| } |
| |
| currentPicture = document.createElement('div'); |
| |
| $('main').appendChild(currentPicture); |
| if (fromTheRight) { |
| currentPicture.className = 'currentpicture comingfromright'; |
| } else { |
| currentPicture.className = 'currentpicture comingfromleft'; |
| } |
| var image = document.createElement('img'); |
| lastimg = image; |
| image.onload = loadedPicture; |
| image.onerror = loadedPicture; |
| image.src = filePath; |
| currentPicture.appendChild(image); |
| moveRight = fromTheRight; |
| } |
| |
| function browseFileResult() { |
| currentFileOffset = 0; |
| if (filelist.length > 0) { |
| transitionTo(filelist[currentFileOffset], true); |
| } |
| } |
| |
| function keyPressed(e) { |
| // Left Pressed |
| if (e.keyCode == 37) { |
| if (currentFileOffset > 0) { |
| currentFileOffset--; |
| transitionTo(filelist[currentFileOffset], false); |
| } |
| } |
| // Right Pressed |
| if (e.keyCode == 39) { |
| if (currentFileOffset < (filelist.length - 1)) { |
| currentFileOffset++; |
| transitionTo(filelist[currentFileOffset], true); |
| } |
| } |
| } |
| |
| function load() { |
| localStrings = new LocalStrings(); |
| |
| var views = chrome.extension.getViews(); |
| for (var i = 0; i < views.length; i++) { |
| if (views[i].g_slideshow_data) { |
| filelist = views[i].g_slideshow_data; |
| views[i].g_slideshow_data = null; |
| } |
| } |
| |
| browseFileResult(); |
| } |
| |
| function prevButtonClick() { |
| if (currentFileOffset > 0) { |
| currentFileOffset--; |
| transitionTo(filelist[currentFileOffset], false); |
| } |
| } |
| |
| function nextButtonClick() { |
| if (currentFileOffset < (filelist.length - 1)) { |
| currentFileOffset++; |
| transitionTo(filelist[currentFileOffset], true); |
| } |
| } |
| |
| </script> |
| <body onkeydown="keyPressed(event)"> |
| <div id="main"></div> |
| <div id="glow"></div> |
| <div id="playercontrols"> |
| <button id="prevbutton" onclick="prevButtonClick()"> |
| <div></div> |
| </button> |
| <button id="nextbutton" onclick="nextButtonClick()"> |
| <div></div> |
| </button> |
| </div> |
| </body> |
| </html> |
