| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE HTML> | |
| 2 <html i18n-values="dir:textdirection;"> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title>Slideshow</title> | |
| 6 <style> | |
| 7 | |
| 8 body { | |
| 9 overflow: hidden; | |
| 10 background: black; | |
| 11 } | |
| 12 | |
| 13 #glow { | |
| 14 left: 0; | |
| 15 right: 0; | |
| 16 bottom: 30px; | |
| 17 height: 8px; | |
| 18 opacity: .4; | |
| 19 position: absolute; | |
| 20 background: -webkit-linear-gradient(transparent, white); | |
| 21 } | |
| 22 | |
| 23 #main { | |
| 24 position: absolute; | |
| 25 left: 0; | |
| 26 right:0; | |
| 27 top: 0; | |
| 28 bottom: 30px; | |
| 29 overflow: hidden; | |
| 30 } | |
| 31 | |
| 32 #playercontrols { | |
| 33 bottom: 0; | |
| 34 left: 0; | |
| 35 z-index: 999; | |
| 36 height: 30px; | |
| 37 opacity: .9; | |
| 38 right: 0; | |
| 39 align:center; | |
| 40 -webkit-box-align: center; | |
| 41 -webkit-box-pack: center; | |
| 42 display: -webkit-box; | |
| 43 position: absolute; | |
| 44 background: -webkit-linear-gradient(#323232, #070707); | |
| 45 } | |
| 46 | |
| 47 #prevbutton > div { | |
| 48 background: url('shared/images/mediaplayer_prev.png'); | |
| 49 background-repeat: no-repeat; | |
| 50 background-position: 4px 8px; | |
| 51 width: 100%; | |
| 52 height: 30px; | |
| 53 z-index: 9999; | |
| 54 } | |
| 55 | |
| 56 .currentpicture { | |
| 57 width: 100%; | |
| 58 height: 100%; | |
| 59 position: absolute; | |
| 60 top: 0; | |
| 61 -webkit-transition-property: left; | |
| 62 -webkit-transition-duration: 1s; | |
| 63 display: -webkit-box; | |
| 64 -webkit-box-align: center; | |
| 65 -webkit-box-pack: center; | |
| 66 pointer-events: none; | |
| 67 } | |
| 68 | |
| 69 .comingfromleft { | |
| 70 left: -100%; | |
| 71 } | |
| 72 | |
| 73 .comingfromright { | |
| 74 left: 100%; | |
| 75 } | |
| 76 | |
| 77 #nextbutton > div { | |
| 78 background: url('shared/images/mediaplayer_next.png'); | |
| 79 background-repeat: no-repeat; | |
| 80 background-position: 4px 8px; | |
| 81 width: 100%; | |
| 82 height: 30px; | |
| 83 z-index: 9999; | |
| 84 } | |
| 85 | |
| 86 button { | |
| 87 z-index: 9999; | |
| 88 cursor: pointer; | |
| 89 width: 28px; | |
| 90 height: 30px; | |
| 91 webkit-appearance: none; | |
| 92 padding: 0; | |
| 93 border: 0; | |
| 94 background: transparent; | |
| 95 } | |
| 96 | |
| 97 button:hover { | |
| 98 background: -webkit-linear-gradient(#6a7eac, #000000); | |
| 99 } | |
| 100 | |
| 101 </style> | |
| 102 <script src="shared/js/local_strings.js"></script> | |
| 103 <script src="shared/js/media_common.js"></script> | |
| 104 <script> | |
| 105 | |
| 106 document.addEventListener('DOMContentLoaded', load); | |
| 107 | |
| 108 document.onselectstart = function(e) { | |
| 109 e.preventDefault(); | |
| 110 }; | |
| 111 | |
| 112 function $(o) { | |
| 113 return document.getElementById(o); | |
| 114 } | |
| 115 | |
| 116 /////////////////////////////////////////////////////////////////////////////// | |
| 117 // Document Functions: | |
| 118 | |
| 119 var currentPicture = null; | |
| 120 var prevPicture = null; | |
| 121 var currentFileOffset = 0; | |
| 122 var filelist; | |
| 123 var moveRight = false; | |
| 124 var lastimg = null; | |
| 125 | |
| 126 function loadedPicture() { | |
| 127 if (prevPicture) { | |
| 128 if (moveRight) { | |
| 129 prevPicture.style.left = '-100%'; | |
| 130 } else { | |
| 131 prevPicture.style.left = '100%'; | |
| 132 } | |
| 133 } | |
| 134 if (window.innerHeight < lastimg.height || | |
| 135 window.innerWidth < lastimg.width) { | |
| 136 if (lastimg.width > lastimg.height) { | |
| 137 lastimg.style.height = 'auto'; | |
| 138 lastimg.style.width = '100%'; | |
| 139 } else { | |
| 140 lastimg.style.width = 'auto'; | |
| 141 lastimg.style.height = '100%'; | |
| 142 } | |
| 143 } | |
| 144 setTimeout(function() { | |
| 145 currentPicture.style.left = '0'; | |
| 146 }, 10); | |
| 147 } | |
| 148 | |
| 149 function transitionTo(path, fromTheRight) { | |
| 150 if (currentPicture) { | |
| 151 if (prevPicture) { | |
| 152 $('main').removeChild(prevPicture); | |
| 153 } | |
| 154 prevPicture = currentPicture; | |
| 155 } | |
| 156 | |
| 157 currentPicture = document.createElement('div'); | |
| 158 | |
| 159 $('main').appendChild(currentPicture); | |
| 160 if (fromTheRight) { | |
| 161 currentPicture.className = 'currentpicture comingfromright'; | |
| 162 } else { | |
| 163 currentPicture.className = 'currentpicture comingfromleft'; | |
| 164 } | |
| 165 var image = document.createElement('img'); | |
| 166 lastimg = image; | |
| 167 image.onload = loadedPicture; | |
| 168 image.onerror = loadedPicture; | |
| 169 document.location.hash = path; | |
| 170 image.src = 'file://' + path; | |
| 171 currentPicture.appendChild(image); | |
| 172 moveRight = fromTheRight; | |
| 173 } | |
| 174 | |
| 175 function browseFileResult(info, results) { | |
| 176 filelist = results; | |
| 177 if (info.currentOffset) { | |
| 178 currentFileOffset = info.currentOffset; | |
| 179 } else { | |
| 180 currentFileOffset = 0; | |
| 181 } | |
| 182 transitionTo(filelist[currentFileOffset].path, true); | |
| 183 } | |
| 184 | |
| 185 function keyPressed(e) { | |
| 186 // Left Pressed | |
| 187 if (e.keyCode == 37) { | |
| 188 if (currentFileOffset > 0) { | |
| 189 currentFileOffset--; | |
| 190 transitionTo(filelist[currentFileOffset].path, false); | |
| 191 } | |
| 192 } | |
| 193 // Right Pressed | |
| 194 if (e.keyCode == 39) { | |
| 195 if (currentFileOffset < (filelist.length - 1)) { | |
| 196 currentFileOffset++; | |
| 197 transitionTo(filelist[currentFileOffset].path, true); | |
| 198 } | |
| 199 } | |
| 200 } | |
| 201 | |
| 202 function load() { | |
| 203 localStrings = new LocalStrings(); | |
| 204 | |
| 205 document.onkeydown = keyPressed; | |
| 206 if (document.location.href.indexOf('#') != -1) { | |
| 207 var currentpathArray = document.location.href.split('#'); | |
| 208 var path = currentpathArray[1]; | |
| 209 chrome.send('getChildren', [path]); | |
| 210 } | |
| 211 } | |
| 212 | |
| 213 function prevButtonClick() { | |
| 214 if (currentFileOffset > 0) { | |
| 215 currentFileOffset--; | |
| 216 transitionTo(filelist[currentFileOffset].path, false); | |
| 217 } | |
| 218 } | |
| 219 | |
| 220 function nextButtonClick() { | |
| 221 if (currentFileOffset < (filelist.length - 1)) { | |
| 222 currentFileOffset++; | |
| 223 transitionTo(filelist[currentFileOffset].path, true); | |
| 224 } | |
| 225 } | |
| 226 | |
| 227 function toggleFullscreen() { | |
| 228 chrome.send('toggleFullscreen', ['']); | |
| 229 } | |
| 230 | |
| 231 </script> | |
| 232 <body> | |
| 233 <div id="main"></div> | |
| 234 <div id="glow"></div> | |
| 235 <div id="playercontrols"> | |
| 236 <button id="prevbutton" onclick="prevButtonClick()"> | |
| 237 <div></div> | |
| 238 </button> | |
| 239 <button id="nextbutton" onclick="nextButtonClick()"> | |
| 240 <div></div> | |
| 241 </button> | |
| 242 </div> | |
| 243 </body> | |
| 244 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 8799006:
Replace the Slideshow with the Photo Editor (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src