| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 @license | |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 4 This code may only be used under the BSD style license found at http://polym
er.github.io/LICENSE.txt | |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
.txt | |
| 6 The complete set of contributors may be found at http://polymer.github.io/CO
NTRIBUTORS.txt | |
| 7 Code distributed by Google as part of the polymer project is also | |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/P
ATENTS.txt | |
| 9 --> | |
| 10 <html> | |
| 11 <head> | |
| 12 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 13 <script> | |
| 14 | |
| 15 // | |
| 16 // INK EQUATIONS | |
| 17 // | |
| 18 | |
| 19 // Animation constants. | |
| 20 var globalSpeed = 1; | |
| 21 var waveOpacityDecayVelocity = 0.8 / globalSpeed; // opacity per second. | |
| 22 var waveInitialOpacity = 0.25; | |
| 23 var waveLingerOnTouchUp = 0.2; | |
| 24 var waveMaxRadius = 150; | |
| 25 | |
| 26 // TODOs: | |
| 27 // - rather than max distance to corner, use hypotenuos(sp) (diag) | |
| 28 // - use quadratic for the fall off, move fast at the beginning, | |
| 29 // - on cancel, immediately fade out, reverse the direction | |
| 30 | |
| 31 function waveRadiusFn(touchDownMs, touchUpMs, ww, hh) { | |
| 32 // Convert from ms to s. | |
| 33 var touchDown = touchDownMs / 1000; | |
| 34 var touchUp = touchUpMs / 1000; | |
| 35 var totalElapsed = touchDown + touchUp; | |
| 36 var waveRadius = Math.min(Math.max(ww, hh), waveMaxRadius) * 1.1 + 5; | |
| 37 var dduration = 1.1 - .2 * (waveRadius / waveMaxRadius); | |
| 38 var tt = (totalElapsed / dduration); | |
| 39 | |
| 40 var ssize = waveRadius * (1 - Math.pow(80, -tt)); | |
| 41 return Math.abs(ssize); | |
| 42 } | |
| 43 | |
| 44 function waveOpacityFn(td, tu) { | |
| 45 // Convert from ms to s. | |
| 46 var touchDown = td / 1000; | |
| 47 var touchUp = tu / 1000; | |
| 48 var totalElapsed = touchDown + touchUp; | |
| 49 | |
| 50 if (tu <= 0) { // before touch up | |
| 51 return waveInitialOpacity; | |
| 52 } | |
| 53 return Math.max(0, waveInitialOpacity - touchUp * waveOpacityDecayVelocity); | |
| 54 } | |
| 55 | |
| 56 function waveOuterOpacityFn(td, tu) { | |
| 57 // Convert from ms to s. | |
| 58 var touchDown = td / 1000; | |
| 59 var touchUp = tu / 1000; | |
| 60 | |
| 61 // Linear increase in background opacity, capped at the opacity | |
| 62 // of the wavefront (waveOpacity). | |
| 63 var outerOpacity = touchDown * 0.3; | |
| 64 var waveOpacity = waveOpacityFn(td, tu); | |
| 65 return Math.max(0, Math.min(outerOpacity, waveOpacity)); | |
| 66 | |
| 67 } | |
| 68 | |
| 69 function waveGravityToCenterPercentageFn(td, tu, r) { | |
| 70 // Convert from ms to s. | |
| 71 var touchDown = td / 1000; | |
| 72 var touchUp = tu / 1000; | |
| 73 var totalElapsed = touchDown + touchUp; | |
| 74 | |
| 75 return Math.min(1.0, touchUp * 6); | |
| 76 } | |
| 77 | |
| 78 | |
| 79 // Determines whether the wave should be completely removed. | |
| 80 function waveDidFinish(wave, radius) { | |
| 81 var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp); | |
| 82 // Does not linger any more. | |
| 83 // var lingerTimeMs = waveLingerOnTouchUp * 1000; | |
| 84 | |
| 85 // If the wave opacity is 0 and the radius exceeds the bounds | |
| 86 // of the element, then this is finished. | |
| 87 if (waveOpacity < 0.01 && radius >= wave.maxRadius) { | |
| 88 return true; | |
| 89 } | |
| 90 return false; | |
| 91 }; | |
| 92 | |
| 93 // | |
| 94 // DRAWING | |
| 95 // | |
| 96 | |
| 97 function animateIcon() { | |
| 98 var el = document.getElementById('button_toolbar0'); | |
| 99 el.classList.add('animate'); | |
| 100 setTimeout(function(){ | |
| 101 el.classList.remove('animate'); | |
| 102 el.classList.toggle('selected'); | |
| 103 }, 500); | |
| 104 } | |
| 105 | |
| 106 | |
| 107 function drawRipple(canvas, x, y, radius, innerColor, outerColor, innerColorAlph
a, outerColorAlpha) { | |
| 108 var ctx = canvas.getContext('2d'); | |
| 109 if (outerColor) { | |
| 110 ctx.fillStyle = outerColor; | |
| 111 ctx.fillRect(0,0,canvas.width, canvas.height); | |
| 112 } | |
| 113 | |
| 114 ctx.beginPath(); | |
| 115 ctx.arc(x, y, radius, 0, 2 * Math.PI, false); | |
| 116 ctx.fillStyle = innerColor; | |
| 117 ctx.fill(); | |
| 118 } | |
| 119 | |
| 120 function drawLabel(canvas, label, fontSize, color, alignment) { | |
| 121 var ctx = canvas.getContext('2d'); | |
| 122 ctx.font= fontSize + 'px Helvetica'; | |
| 123 | |
| 124 var metrics = ctx.measureText(label); | |
| 125 var width = metrics.width; | |
| 126 var height = metrics.height; | |
| 127 ctx.fillStyle = color; | |
| 128 | |
| 129 var xPos = (canvas.width/2 - width)/2; | |
| 130 | |
| 131 if (alignment === 'left') { xPos = 16; } | |
| 132 | |
| 133 ctx.fillText(label, xPos, canvas.height/2 - (canvas.height/2 - fontSize +2) /
2); | |
| 134 } | |
| 135 | |
| 136 // | |
| 137 // BUTTON SETUP | |
| 138 // | |
| 139 | |
| 140 function createWave(elem) { | |
| 141 var elementStyle = window.getComputedStyle(elem); | |
| 142 var fgColor = elementStyle.color; | |
| 143 | |
| 144 var wave = { | |
| 145 waveColor: fgColor, | |
| 146 maxRadius: 0, | |
| 147 isMouseDown: false, | |
| 148 mouseDownStart: 0.0, | |
| 149 mouseUpStart: 0.0, | |
| 150 tDown: 0, | |
| 151 tUp: 0 | |
| 152 }; | |
| 153 return wave; | |
| 154 } | |
| 155 | |
| 156 function removeWaveFromScope(scope, wave) { | |
| 157 if (scope.waves) { | |
| 158 var pos = scope.waves.indexOf(wave); | |
| 159 scope.waves.splice(pos, 1); | |
| 160 } | |
| 161 }; | |
| 162 | |
| 163 | |
| 164 function setUpPaperByClass( classname ) { | |
| 165 var elems = document.querySelectorAll( classname ); | |
| 166 [].forEach.call( elems, function( el ) { | |
| 167 setUpPaper(el); | |
| 168 }); | |
| 169 } | |
| 170 | |
| 171 function setUpPaper(elem) { | |
| 172 var pixelDensity = 2; | |
| 173 | |
| 174 var elementStyle = window.getComputedStyle(elem); | |
| 175 var fgColor = elementStyle.color; | |
| 176 var bgColor = elementStyle.backgroundColor; | |
| 177 elem.width = elem.clientWidth; | |
| 178 elem.setAttribute('width', elem.clientWidth * pixelDensity + "px"); | |
| 179 elem.setAttribute('height', elem.clientHeight * pixelDensity + "px"); | |
| 180 | |
| 181 var isButton = elem.classList.contains( 'button' ) || elem.classList.contains(
'button_floating' ) | elem.classList.contains( 'button_menu' ); | |
| 182 var isToolbarButton = elem.classList.contains( 'button_toolbar' ); | |
| 183 | |
| 184 elem.getContext('2d').scale(pixelDensity, pixelDensity) | |
| 185 | |
| 186 var scope = { | |
| 187 backgroundFill: true, | |
| 188 element: elem, | |
| 189 label: 'Button', | |
| 190 waves: [], | |
| 191 }; | |
| 192 | |
| 193 | |
| 194 scope.label = elem.getAttribute('value') || elementStyle.content; | |
| 195 scope.labelFontSize = elementStyle.fontSize.split("px")[0]; | |
| 196 | |
| 197 drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAlig
n); | |
| 198 | |
| 199 | |
| 200 // | |
| 201 // RENDER FOR EACH FRAME | |
| 202 // | |
| 203 var onFrame = function() { | |
| 204 var shouldRenderNextFrame = false; | |
| 205 | |
| 206 // Clear the canvas | |
| 207 var ctx = elem.getContext('2d'); | |
| 208 ctx.clearRect(0, 0, elem.width, elem.height); | |
| 209 | |
| 210 var deleteTheseWaves = []; | |
| 211 // The oldest wave's touch down duration | |
| 212 var longestTouchDownDuration = 0; | |
| 213 var longestTouchUpDuration = 0; | |
| 214 // Save the last known wave color | |
| 215 var lastWaveColor = null; | |
| 216 | |
| 217 for (var i = 0; i < scope.waves.length; i++) { | |
| 218 var wave = scope.waves[i]; | |
| 219 | |
| 220 if (wave.mouseDownStart > 0) { | |
| 221 wave.tDown = now() - wave.mouseDownStart; | |
| 222 } | |
| 223 if (wave.mouseUpStart > 0) { | |
| 224 wave.tUp = now() - wave.mouseUpStart; | |
| 225 } | |
| 226 | |
| 227 // Determine how long the touch has been up or down. | |
| 228 var tUp = wave.tUp; | |
| 229 var tDown = wave.tDown; | |
| 230 longestTouchDownDuration = Math.max(longestTouchDownDuration, tDown); | |
| 231 longestTouchUpDuration = Math.max(longestTouchUpDuration, tUp); | |
| 232 | |
| 233 // Obtain the instantenous size and alpha of the ripple. | |
| 234 var radius = waveRadiusFn(tDown, tUp, elem.width, elem.height); | |
| 235 var waveAlpha = waveOpacityFn(tDown, tUp); | |
| 236 var waveColor = cssColorWithAlpha(wave.waveColor, waveAlpha); | |
| 237 lastWaveColor = wave.waveColor; | |
| 238 | |
| 239 // Position of the ripple. | |
| 240 var x = wave.startPosition.x; | |
| 241 var y = wave.startPosition.y; | |
| 242 | |
| 243 // Ripple gravitational pull to the center of the canvas. | |
| 244 if (wave.endPosition) { | |
| 245 | |
| 246 var translateFraction = waveGravityToCenterPercentageFn(tDown, tUp, wave
.maxRadius); | |
| 247 | |
| 248 // This translates from the origin to the center of the view based on t
he max dimension of | |
| 249 var translateFraction = Math.min(1, radius / wave.containerSize * 2 / Ma
th.sqrt(2) ); | |
| 250 | |
| 251 x += translateFraction * (wave.endPosition.x - wave.startPosition.x); | |
| 252 y += translateFraction * (wave.endPosition.y - wave.startPosition.y); | |
| 253 } | |
| 254 | |
| 255 // If we do a background fill fade too, work out the correct color. | |
| 256 var bgFillColor = null; | |
| 257 if (scope.backgroundFill) { | |
| 258 var bgFillAlpha = waveOuterOpacityFn(tDown, tUp); | |
| 259 bgFillColor = cssColorWithAlpha(wave.waveColor, bgFillAlpha); | |
| 260 } | |
| 261 | |
| 262 // Draw the ripple. | |
| 263 drawRipple(elem, x, y, radius, waveColor, bgFillColor); | |
| 264 | |
| 265 // Determine whether there is any more rendering to be done. | |
| 266 var shouldRenderWaveAgain = !waveDidFinish(wave, radius); | |
| 267 shouldRenderNextFrame = shouldRenderNextFrame || shouldRenderWaveAgain; | |
| 268 if (!shouldRenderWaveAgain) { | |
| 269 deleteTheseWaves.push(wave); | |
| 270 } | |
| 271 } | |
| 272 | |
| 273 if (shouldRenderNextFrame) { | |
| 274 window.requestAnimationFrame(onFrame); | |
| 275 } else { | |
| 276 // If there is nothing to draw, clear any drawn waves now because | |
| 277 // we're not going to get another requestAnimationFrame any more. | |
| 278 var ctx = elem.getContext('2d'); | |
| 279 ctx.clearRect(0, 0, elem.width, elem.height); | |
| 280 } | |
| 281 | |
| 282 // Draw the label at the very last point so it is on top of everything. | |
| 283 drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAl
ign); | |
| 284 | |
| 285 for (var i = 0; i < deleteTheseWaves.length; ++i) { | |
| 286 var wave = deleteTheseWaves[i]; | |
| 287 removeWaveFromScope(scope, wave); | |
| 288 } | |
| 289 }; | |
| 290 | |
| 291 // | |
| 292 // MOUSE DOWN HANDLER | |
| 293 // | |
| 294 | |
| 295 elem.addEventListener('mousedown', function(e) { | |
| 296 var wave = createWave(e.target); | |
| 297 var elem = scope.element; | |
| 298 | |
| 299 wave.isMouseDown = true; | |
| 300 wave.tDown = 0.0; | |
| 301 wave.tUp = 0.0; | |
| 302 wave.mouseUpStart = 0.0; | |
| 303 wave.mouseDownStart = now(); | |
| 304 | |
| 305 var width = e.target.width / 2; // Retina canvas | |
| 306 var height = e.target.height / 2; | |
| 307 var touchX = e.clientX - e.target.offsetLeft - e.target.offsetParent.offsetL
eft; | |
| 308 var touchY = e.clientY - e.target.offsetTop - e.target.offsetParent.offsetTo
p; | |
| 309 wave.startPosition = {x:touchX, y:touchY}; | |
| 310 | |
| 311 if (elem.classList.contains("recenteringTouch")) { | |
| 312 wave.endPosition = {x: width / 2, y: height / 2}; | |
| 313 wave.slideDistance = dist(wave.startPosition, wave.endPosition); | |
| 314 } | |
| 315 wave.containerSize = Math.max(width, height); | |
| 316 wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: w
idth, h: height}); | |
| 317 elem.classList.add("activated"); | |
| 318 scope.waves.push(wave); | |
| 319 window.requestAnimationFrame(onFrame); | |
| 320 return false; | |
| 321 }); | |
| 322 | |
| 323 // | |
| 324 // MOUSE UP HANDLER | |
| 325 // | |
| 326 | |
| 327 elem.addEventListener('mouseup', function(e) { | |
| 328 elem.classList.remove("activated"); | |
| 329 | |
| 330 for (var i = 0; i < scope.waves.length; i++) { | |
| 331 // Declare the next wave that has mouse down to be mouse'ed up. | |
| 332 var wave = scope.waves[i]; | |
| 333 if (wave.isMouseDown) { | |
| 334 wave.isMouseDown = false | |
| 335 wave.mouseUpStart = now(); | |
| 336 wave.mouseDownStart = 0; | |
| 337 wave.tUp = 0.0; | |
| 338 break; | |
| 339 } | |
| 340 } | |
| 341 return false; | |
| 342 }); | |
| 343 | |
| 344 elem.addEventListener('mouseout', function(e) { | |
| 345 elem.classList.remove("activated"); | |
| 346 | |
| 347 for (var i = 0; i < scope.waves.length; i++) { | |
| 348 // Declare the next wave that has mouse down to be mouse'ed up. | |
| 349 var wave = scope.waves[i]; | |
| 350 if (wave.isMouseDown) { | |
| 351 wave.isMouseDown = false | |
| 352 wave.mouseUpStart = now(); | |
| 353 wave.mouseDownStart = 0; | |
| 354 wave.tUp = 0.0; | |
| 355 wave.cancelled = true; | |
| 356 break; | |
| 357 } | |
| 358 } | |
| 359 return false; | |
| 360 }); | |
| 361 | |
| 362 return scope; | |
| 363 }; | |
| 364 | |
| 365 // Shortcuts. | |
| 366 var pow = Math.pow; | |
| 367 var now = function() { return new Date().getTime(); }; | |
| 368 | |
| 369 // Quad beizer where t is between 0 and 1. | |
| 370 function quadBezier(t, p0, p1, p2, p3) { | |
| 371 return pow(1 - t, 3) * p0 + | |
| 372 3 * pow(1 - t, 2) * t * p1 + | |
| 373 (1 - t) * pow(t, 2) * p2 + | |
| 374 pow(t, 3) * p3; | |
| 375 } | |
| 376 | |
| 377 function easeIn(t) { | |
| 378 return quadBezier(t, 0.4, 0.0, 1, 1); | |
| 379 } | |
| 380 | |
| 381 function cssColorWithAlpha(cssColor, alpha) { | |
| 382 var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); | |
| 383 if (typeof alpha == 'undefined') { | |
| 384 alpha = 1; | |
| 385 } | |
| 386 if (!parts) { | |
| 387 return 'rgba(255, 255, 255, ' + alpha + ')'; | |
| 388 } | |
| 389 return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha
+ ')'; | |
| 390 } | |
| 391 | |
| 392 function dist(p1, p2) { | |
| 393 return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)); | |
| 394 } | |
| 395 | |
| 396 function distanceFromPointToFurthestCorner(point, size) { | |
| 397 var tl_d = dist(point, {x: 0, y: 0}); | |
| 398 var tr_d = dist(point, {x: size.w, y: 0}); | |
| 399 var bl_d = dist(point, {x: 0, y: size.h}); | |
| 400 var br_d = dist(point, {x: size.w, y: size.h}); | |
| 401 return Math.max(Math.max(tl_d, tr_d), Math.max(bl_d, br_d)); | |
| 402 } | |
| 403 | |
| 404 | |
| 405 function toggleDialog() { | |
| 406 var el = document.getElementById('dialog'); | |
| 407 el.classList.toggle("visible"); | |
| 408 } | |
| 409 | |
| 410 function toggleMenu() { | |
| 411 var el = document.getElementById('menu'); | |
| 412 el.classList.toggle("visible"); | |
| 413 } | |
| 414 | |
| 415 | |
| 416 // Initialize | |
| 417 | |
| 418 function init() { | |
| 419 setUpPaperByClass( '.paper' ); | |
| 420 } | |
| 421 | |
| 422 window.addEventListener('DOMContentLoaded', init, false); | |
| 423 </script> | |
| 424 | |
| 425 <style type="text/css" media="screen"> | |
| 426 body { | |
| 427 background-color: #f9f9f9; | |
| 428 margin:0; padding:0; | |
| 429 font-family:sans-serif; | |
| 430 font-size:14px; | |
| 431 } | |
| 432 | |
| 433 * { | |
| 434 | |
| 435 -webkit-user-select: none; | |
| 436 cursor:default; | |
| 437 } | |
| 438 .toolbar { | |
| 439 background-color:#673AB7; | |
| 440 height:56px; | |
| 441 overflow:hidden; | |
| 442 } | |
| 443 | |
| 444 | |
| 445 #dialog { | |
| 446 width:250px; | |
| 447 height:120px; | |
| 448 opacity:0.0; | |
| 449 pointer-events:none; | |
| 450 -webkit-transform: scale(0.95) translate3d(0,100px,0);; | |
| 451 -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opa
city 0.2s ease-out, -webkit-box-shadow .5s ease-out; | |
| 452 | |
| 453 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 454 -webkit-transition-delay:0.25s; | |
| 455 | |
| 456 } | |
| 457 | |
| 458 #dialog.visible { | |
| 459 pointer-events:all; | |
| 460 opacity:1.0; | |
| 461 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 462 width:250px; | |
| 463 height:160px; | |
| 464 -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.2
2); | |
| 465 -webkit-transition-delay:0.0s; | |
| 466 | |
| 467 } | |
| 468 | |
| 469 | |
| 470 .dialog { | |
| 471 top:120px; | |
| 472 right: 0; | |
| 473 left: 50%; | |
| 474 margin-left:-125px; | |
| 475 padding:24px 16px 20px 24px; | |
| 476 position:absolute; | |
| 477 | |
| 478 background:white; | |
| 479 color:rgba(0,0,0,0.5); | |
| 480 margin-bottom:38px; | |
| 481 overflow:hidden; | |
| 482 } | |
| 483 .dialog h1 { | |
| 484 font-size:20px; | |
| 485 font-weight:normal; | |
| 486 padding:0; margin-top:0; | |
| 487 } | |
| 488 | |
| 489 .dialog .button { | |
| 490 position:absolute; | |
| 491 top:160px; | |
| 492 right:10px; | |
| 493 } | |
| 494 | |
| 495 /*#menu { | |
| 496 width:250px; | |
| 497 height:120px; | |
| 498 opacity:0.0; | |
| 499 pointer-events:none; | |
| 500 -webkit-transform: scale(0.95) translate3d(0,100px,0);; | |
| 501 -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opa
city 0.2s ease-out, -webkit-box-shadow .5s ease-out; | |
| 502 | |
| 503 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 504 } | |
| 505 | |
| 506 #menu.visible { | |
| 507 pointer-events:all; | |
| 508 opacity:1.0; | |
| 509 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 510 width:250px; | |
| 511 height:160px; | |
| 512 -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.2
2); | |
| 513 }*/ | |
| 514 | |
| 515 | |
| 516 | |
| 517 | |
| 518 .menu { | |
| 519 width:160px; | |
| 520 height:160px; | |
| 521 background:white; | |
| 522 position:absolute; | |
| 523 right:8px; | |
| 524 top: 8px; | |
| 525 padding:0; | |
| 526 | |
| 527 | |
| 528 opacity:0.0; | |
| 529 pointer-events:none; | |
| 530 -webkit-transform: scale(0.95) translate3d(0,0,0);; | |
| 531 -webkit-transition: -webkit-transform 0.3s ease-out, width 0.2s ease-out, heig
ht 0.3s ease-out, opacity 0.1s ease-out, -webkit-box-shadow .5s ease-out; | |
| 532 | |
| 533 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 534 -webkit-transition-delay:0.35s; | |
| 535 overflow:hidden; | |
| 536 | |
| 537 | |
| 538 } | |
| 539 | |
| 540 .menu.visible { | |
| 541 width:180px; | |
| 542 height:192px; | |
| 543 pointer-events:all; | |
| 544 opacity:1.0; | |
| 545 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 546 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 547 -webkit-transition-delay:0.15s; | |
| 548 | |
| 549 } | |
| 550 | |
| 551 | |
| 552 | |
| 553 .menu div { | |
| 554 height:48px; | |
| 555 padding:0; | |
| 556 | |
| 557 } | |
| 558 | |
| 559 .menu canvas { | |
| 560 height:48px; | |
| 561 width: 100%; | |
| 562 } | |
| 563 | |
| 564 | |
| 565 .button_floating { | |
| 566 width:56px; | |
| 567 height:56px; | |
| 568 color:#fff; | |
| 569 background-color:#039BE5; | |
| 570 border-radius:28px; | |
| 571 position:absolute; | |
| 572 top:388px; | |
| 573 right:40px; | |
| 574 } | |
| 575 | |
| 576 .container { | |
| 577 } | |
| 578 | |
| 579 | |
| 580 | |
| 581 | |
| 582 .button { | |
| 583 -webkit-border-radius: 2px; | |
| 584 -moz-border-radius: 2px; | |
| 585 border-radius: 2px; | |
| 586 } | |
| 587 | |
| 588 .button_menu.container { | |
| 589 margin: 0px; | |
| 590 height: 48px; | |
| 591 padding: 0; | |
| 592 } | |
| 593 | |
| 594 | |
| 595 | |
| 596 .button_menu { | |
| 597 -webkit-border-radius: 2px; | |
| 598 -moz-border-radius: 2px; | |
| 599 border-radius: 2px; | |
| 600 text-align:left !important; | |
| 601 color:rgb(100,100,100); | |
| 602 } | |
| 603 | |
| 604 .button_toolbar { | |
| 605 -webkit-border-radius: 84px; | |
| 606 | |
| 607 color: rgb(255,255,255); | |
| 608 width: 80px; | |
| 609 height: 80px; | |
| 610 float:left; | |
| 611 margin-right:-24px; | |
| 612 margin-top:-12px; | |
| 613 background-color: rgba(0, 0, 0, 0); | |
| 614 } | |
| 615 | |
| 616 #button_small { | |
| 617 color: rgb(100, 100, 100); | |
| 618 background-color: #ffffff; | |
| 619 width: 80px; | |
| 620 height: 32px; | |
| 621 | |
| 622 } | |
| 623 | |
| 624 #button_blue { | |
| 625 color: rgb(255, 255, 255); | |
| 626 background-color: #0277BD; | |
| 627 width: 80px; | |
| 628 height: 32px; | |
| 629 } | |
| 630 | |
| 631 #button_borderless_square { | |
| 632 color: #ffffff; | |
| 633 background-color: #f9f9f9; | |
| 634 border: 1px solid #f0f0f0; | |
| 635 width: 100px; | |
| 636 height: 100px; | |
| 637 background-color: rgb(255, 255, 255, 0); | |
| 638 background-image:url(http://wallpaperandbackground.com/wp-content/uploads/2014
/03/Field-Landscape.jpg); | |
| 639 background-size:cover; | |
| 640 | |
| 641 } | |
| 642 | |
| 643 #button_borderless { | |
| 644 color: #777777; | |
| 645 background-color: #ffffff; | |
| 646 width:80px; | |
| 647 height: 32px; | |
| 648 margin-right:72px; | |
| 649 content: "CANCEL"; | |
| 650 } | |
| 651 | |
| 652 #button_borderless_blue { | |
| 653 color: #4285F4; | |
| 654 background-color: #ffffff; | |
| 655 width: 64px; | |
| 656 height: 32px; | |
| 657 content:"OK"; | |
| 658 } | |
| 659 | |
| 660 #button_large { | |
| 661 color: rgb(255, 255, 255); | |
| 662 width: 100%; | |
| 663 height: 360px; | |
| 664 background-color:#81D4FA; | |
| 665 } | |
| 666 | |
| 667 #button_toolbar1 { | |
| 668 content: ''; | |
| 669 color:transparent; | |
| 670 margin-left:-4px; | |
| 671 | |
| 672 } | |
| 673 | |
| 674 #button_toolbar2 { | |
| 675 content: '★'; | |
| 676 float:right; | |
| 677 } | |
| 678 | |
| 679 #button_toolbar3 { | |
| 680 content: 'MENU'; | |
| 681 font-size: 14px; | |
| 682 width: 88px; | |
| 683 height:88px; | |
| 684 margin-top: -16px; | |
| 685 color:#7FFFFF; | |
| 686 float:right; | |
| 687 margin-right:0; | |
| 688 | |
| 689 } | |
| 690 | |
| 691 .caption { | |
| 692 z-index: 100; | |
| 693 background-color: red; | |
| 694 } | |
| 695 | |
| 696 #button_toolbar0.animate { | |
| 697 -webkit-animation: play 0.5s steps(16); | |
| 698 | |
| 699 } | |
| 700 | |
| 701 | |
| 702 .button.raised { | |
| 703 -webkit-transition: -webkit-box-shadow 0.2s; | |
| 704 -webkit-transition-delay: 0.2s; | |
| 705 -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); | |
| 706 } | |
| 707 | |
| 708 .button.raised.activated { | |
| 709 -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.19), 0px 6px 3px rgba(0,0,0,0.2
3); | |
| 710 -webkit-transition-delay: 0.0s; | |
| 711 } | |
| 712 | |
| 713 | |
| 714 .floating { | |
| 715 -webkit-transition: -webkit-box-shadow 0.2s; | |
| 716 -webkit-transition-delay: 0.2s; | |
| 717 -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23); | |
| 718 } | |
| 719 | |
| 720 .floating.activated { | |
| 721 -webkit-box-shadow: 0px 14px 14px rgba(0,0,0,0.25), 0px 10px 5px rgba(0,0,0,0.
22); | |
| 722 -webkit-transition-delay: 0.0s; | |
| 723 } | |
| 724 | |
| 725 #title { | |
| 726 color:white; | |
| 727 font-size:20px; | |
| 728 line-height:58px; | |
| 729 margin-left:24px; | |
| 730 } | |
| 731 | |
| 732 .content { | |
| 733 padding-left:72px; padding-top:24px; padding-right:144px; | |
| 734 line-height:20px; | |
| 735 color:#666; | |
| 736 } | |
| 737 | |
| 738 @-webkit-keyframes play { | |
| 739 from { background-position: 0px 0px; } | |
| 740 to { background-position: 0px -384px; } | |
| 741 } | |
| 742 | |
| 743 #button_toolbar0 { | |
| 744 pointer-events: none; | |
| 745 position:absolute; | |
| 746 top:16px; | |
| 747 left: 24px; | |
| 748 content: "\00a0"; | |
| 749 width:24px; | |
| 750 height:24px; | |
| 751 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAGACA
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
n8mZYAAAAASUVORK5CYII=); | |
| 752 } | |
| 753 | |
| 754 #button_toolbar0.selected { | |
| 755 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAGACA
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
SuQmCC); | |
| 756 } | |
| 757 </style> | |
| 758 </head> | |
| 759 | |
| 760 <body id=""> | |
| 761 <div class="toolbar"> | |
| 762 <div id="button_toolbar0" class="toolbar_icon"></div> | |
| 763 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar1" onclick="animateIcon()"></canvas></span> | |
| 764 <span id="title" style="float:left">Ripple test</span> | |
| 765 <span class="container"><canvas onClick="toggleMenu()" class="paper button_t
oolbar recenteringTouch" id="button_toolbar3"></canvas></span> | |
| 766 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar2"></canvas></span> | |
| 767 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar2"></canvas></span> | |
| 768 | |
| 769 </div> | |
| 770 | |
| 771 <div id="dialog" class="dialog visible"> | |
| 772 <h1>Press mah buttons!</h1> Lorem ipsum dolor sit amet, consectetur adipisic
ing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam. | |
| 773 <span class="container"><canvas class="paper button" id="button_borderless"
value="CANCEL"></canvas></span> | |
| 774 <span class="container"><canvas class="paper button" id="button_borderless_b
lue" onclick="toggleDialog()" value="OK"></canvas></span> | |
| 775 </div> | |
| 776 | |
| 777 <div id="menu" class="menu visible"> | |
| 778 <div class="container button_menu"><canvas class="paper button_menu" value="
Fold" style="text-align:left"></canvas></div> | |
| 779 <div class="container button_menu"><canvas class="paper button_menu" value="
Spindle" style="text-align:left"></canvas></div> | |
| 780 <div class="container button_menu"><canvas class="paper button_menu" onClick
="" value="Mutilate" style="text-align:left"></canvas></div> | |
| 781 <div class="container button_menu"><canvas class="paper button_menu" onC
lick="toggleMenu()" value="Dismiss" style="text-align:left"></canvas></div> | |
| 782 | |
| 783 </div> | |
| 784 <div class="container"><canvas class="paper button recenteringTouch" id="button_
large"></canvas></div> | |
| 785 <div class="content" style=""> | |
| 786 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. sed do eiu
smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseq
uat. | |
| 787 <p></p> | |
| 788 <span class="container" style="margin-right:8px;"><canvas class="paper button ra
ised" id="button_blue" value="ABORT"></canvas></span> | |
| 789 <span class="container" style="margin-right:8px;"><canvas class="paper button ra
ised" id="button_small" value="RETRY"></canvas></span> | |
| 790 <span class="container"><canvas class="paper button raised" id="button_small"
value="FAIL"></canvas></span> | |
| 791 | |
| 792 <p><p> | |
| 793 <canvas class="paper button" id="button_borderless_square"></canvas> | |
| 794 | |
| 795 | |
| 796 </div> | |
| 797 <div class="container"><canvas onClick="toggleDialog()" class="paper button_floa
ting floating recenteringTouch" id="button_floating" value="★"></canvas></div> | |
| 798 </body> | |
| 799 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master