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