bower_components/paper-ripple/raw.html - infra/third_party/npm_modules - Git at Google

 <!--
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
     Code distributed by Google as part of the polymer project is also
     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script>

 //
 // INK EQUATIONS
 //

 // Animation constants.
 var globalSpeed = 1;
 var waveOpacityDecayVelocity = 0.8 / globalSpeed;  // opacity per second.
 var waveInitialOpacity = 0.25;
 var waveLingerOnTouchUp = 0.2;
 var waveMaxRadius = 150;

 // TODOs:
 // - rather than max distance to corner, use hypotenuos(sp) (diag)
 // - use quadratic for the fall off, move fast at the beginning,
 // - on cancel, immediately fade out, reverse the direction

 function waveRadiusFn(touchDownMs, touchUpMs, ww, hh) {
   // Convert from ms to s.
   var touchDown = touchDownMs / 1000;
   var touchUp = touchUpMs / 1000;
   var totalElapsed = touchDown + touchUp;
   var waveRadius = Math.min(Math.max(ww, hh), waveMaxRadius) * 1.1 + 5;
   var dduration = 1.1 - .2 * (waveRadius / waveMaxRadius);
   var tt = (totalElapsed / dduration);

   var ssize = waveRadius * (1 - Math.pow(80, -tt));
   return Math.abs(ssize);
 }

 function waveOpacityFn(td, tu) {
   // Convert from ms to s.
   var touchDown = td / 1000;
   var touchUp = tu / 1000;
   var totalElapsed = touchDown + touchUp;

   if (tu <= 0) {  // before touch up
     return waveInitialOpacity;
   }
   return Math.max(0, waveInitialOpacity - touchUp * waveOpacityDecayVelocity);
 }

 function waveOuterOpacityFn(td, tu) {
   // Convert from ms to s.
   var touchDown = td / 1000;
   var touchUp = tu / 1000;

   // Linear increase in background opacity, capped at the opacity
   // of the wavefront (waveOpacity).
   var outerOpacity = touchDown * 0.3;
   var waveOpacity = waveOpacityFn(td, tu);
   return Math.max(0, Math.min(outerOpacity, waveOpacity));

 }

 function waveGravityToCenterPercentageFn(td, tu, r) {
   // Convert from ms to s.
   var touchDown = td / 1000;
   var touchUp = tu / 1000;
   var totalElapsed = touchDown + touchUp;

   return Math.min(1.0, touchUp * 6);
 }


 // Determines whether the wave should be completely removed.
 function waveDidFinish(wave, radius) {
   var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp);
   // Does not linger any more.
   // var lingerTimeMs = waveLingerOnTouchUp * 1000;

   // If the wave opacity is 0 and the radius exceeds the bounds
   // of the element, then this is finished.
   if (waveOpacity < 0.01 && radius >= wave.maxRadius) {
     return true;
   }
   return false;
 };

 //
 // DRAWING
 //

 function animateIcon() {
   var el = document.getElementById('button_toolbar0');
   el.classList.add('animate');
   setTimeout(function(){
     el.classList.remove('animate');
     el.classList.toggle('selected');
   }, 500);
 }


 function drawRipple(canvas, x, y, radius, innerColor, outerColor, innerColorAlpha, outerColorAlpha) {
   var ctx = canvas.getContext('2d');
   if (outerColor) {
     ctx.fillStyle = outerColor;
     ctx.fillRect(0,0,canvas.width, canvas.height);
   }

   ctx.beginPath();
   ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
   ctx.fillStyle = innerColor;
   ctx.fill();
 }

 function drawLabel(canvas, label, fontSize, color, alignment) {
   var ctx = canvas.getContext('2d');
   ctx.font= fontSize + 'px Helvetica';

   var metrics = ctx.measureText(label);
   var width = metrics.width;
   var height = metrics.height;
   ctx.fillStyle = color;

   var xPos = (canvas.width/2 - width)/2;

   if (alignment === 'left') { xPos = 16; }

   ctx.fillText(label, xPos, canvas.height/2 - (canvas.height/2 - fontSize +2) / 2);
 }

 //
 // BUTTON SETUP
 //

 function createWave(elem) {
   var elementStyle = window.getComputedStyle(elem);
   var fgColor = elementStyle.color;

   var wave = {
     waveColor: fgColor,
     maxRadius: 0,
     isMouseDown: false,
     mouseDownStart: 0.0,
     mouseUpStart: 0.0,
     tDown: 0,
     tUp: 0
   };
   return wave;
 }

 function removeWaveFromScope(scope, wave) {
   if (scope.waves) {
     var pos = scope.waves.indexOf(wave);
     scope.waves.splice(pos, 1);
   }
 };


 function setUpPaperByClass( classname ) {
   var elems = document.querySelectorAll( classname );
   [].forEach.call( elems, function( el ) {
       setUpPaper(el);
   });
 }

 function setUpPaper(elem) {
   var pixelDensity = 2;

   var elementStyle = window.getComputedStyle(elem);
   var fgColor = elementStyle.color;
   var bgColor = elementStyle.backgroundColor;
   elem.width = elem.clientWidth;
   elem.setAttribute('width', elem.clientWidth * pixelDensity + "px");
   elem.setAttribute('height', elem.clientHeight * pixelDensity + "px");

   var isButton = elem.classList.contains( 'button' ) || elem.classList.contains( 'button_floating' ) | elem.classList.contains( 'button_menu' );
   var isToolbarButton =  elem.classList.contains( 'button_toolbar' );

   elem.getContext('2d').scale(pixelDensity, pixelDensity)

   var scope = {
     backgroundFill: true,
     element: elem,
     label: 'Button',
     waves: [],
   };


   scope.label = elem.getAttribute('value') || elementStyle.content;
   scope.labelFontSize = elementStyle.fontSize.split("px")[0];

   drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAlign);


   //
   // RENDER FOR EACH FRAME
   //
   var onFrame = function() {
     var shouldRenderNextFrame = false;

     // Clear the canvas
     var ctx = elem.getContext('2d');
     ctx.clearRect(0, 0, elem.width, elem.height);

     var deleteTheseWaves = [];
     // The oldest wave's touch down duration
     var longestTouchDownDuration = 0;
     var longestTouchUpDuration = 0;
     // Save the last known wave color
     var lastWaveColor = null;

     for (var i = 0; i < scope.waves.length; i++) {
       var wave = scope.waves[i];

       if (wave.mouseDownStart > 0) {
         wave.tDown = now() - wave.mouseDownStart;
       }
       if (wave.mouseUpStart > 0) {
         wave.tUp = now() - wave.mouseUpStart;
       }

       // Determine how long the touch has been up or down.
       var tUp = wave.tUp;
       var tDown = wave.tDown;
       longestTouchDownDuration = Math.max(longestTouchDownDuration, tDown);
       longestTouchUpDuration = Math.max(longestTouchUpDuration, tUp);

       // Obtain the instantenous size and alpha of the ripple.
       var radius = waveRadiusFn(tDown, tUp, elem.width, elem.height);
       var waveAlpha =  waveOpacityFn(tDown, tUp);
       var waveColor = cssColorWithAlpha(wave.waveColor, waveAlpha);
       lastWaveColor = wave.waveColor;

       // Position of the ripple.
       var x = wave.startPosition.x;
       var y = wave.startPosition.y;

       // Ripple gravitational pull to the center of the canvas.
       if (wave.endPosition) {

         var translateFraction = waveGravityToCenterPercentageFn(tDown, tUp, wave.maxRadius);

         // This translates from the origin to the center of the view  based on the max dimension of
         var translateFraction = Math.min(1, radius / wave.containerSize * 2 / Math.sqrt(2) );

         x += translateFraction * (wave.endPosition.x - wave.startPosition.x);
         y += translateFraction * (wave.endPosition.y - wave.startPosition.y);
       }

       // If we do a background fill fade too, work out the correct color.
       var bgFillColor = null;
       if (scope.backgroundFill) {
         var bgFillAlpha = waveOuterOpacityFn(tDown, tUp);
         bgFillColor = cssColorWithAlpha(wave.waveColor, bgFillAlpha);
       }

       // Draw the ripple.
       drawRipple(elem, x, y, radius, waveColor, bgFillColor);

       // Determine whether there is any more rendering to be done.
       var shouldRenderWaveAgain = !waveDidFinish(wave, radius);
       shouldRenderNextFrame = shouldRenderNextFrame || shouldRenderWaveAgain;
       if (!shouldRenderWaveAgain) {
         deleteTheseWaves.push(wave);
       }
    }

     if (shouldRenderNextFrame) {
       window.requestAnimationFrame(onFrame);
     }  else {
       // If there is nothing to draw, clear any drawn waves now because
       // we're not going to get another requestAnimationFrame any more.
       var ctx = elem.getContext('2d');
       ctx.clearRect(0, 0, elem.width, elem.height);
     }

     // Draw the label at the very last point so it is on top of everything.
     drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAlign);

     for (var i = 0; i < deleteTheseWaves.length; ++i) {
       var wave = deleteTheseWaves[i];
       removeWaveFromScope(scope, wave);
     }
   };

   //
   // MOUSE DOWN HANDLER
   //

   elem.addEventListener('mousedown', function(e) {
     var wave = createWave(e.target);
     var elem = scope.element;

     wave.isMouseDown = true;
     wave.tDown = 0.0;
     wave.tUp = 0.0;
     wave.mouseUpStart = 0.0;
     wave.mouseDownStart = now();

     var width = e.target.width / 2; // Retina canvas
     var height = e.target.height / 2;
     var touchX = e.clientX - e.target.offsetLeft - e.target.offsetParent.offsetLeft;
     var touchY = e.clientY - e.target.offsetTop - e.target.offsetParent.offsetTop;
     wave.startPosition = {x:touchX, y:touchY};

     if (elem.classList.contains("recenteringTouch")) {
       wave.endPosition = {x: width / 2,  y: height / 2};
       wave.slideDistance = dist(wave.startPosition, wave.endPosition);
     }
     wave.containerSize = Math.max(width, height);
     wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: width, h: height});
     elem.classList.add("activated");
     scope.waves.push(wave);
     window.requestAnimationFrame(onFrame);
     return false;
   });

   //
   // MOUSE UP HANDLER
   //

   elem.addEventListener('mouseup', function(e) {
     elem.classList.remove("activated");

     for (var i = 0; i < scope.waves.length; i++) {
       // Declare the next wave that has mouse down to be mouse'ed up.
       var wave = scope.waves[i];
       if (wave.isMouseDown) {
         wave.isMouseDown = false
         wave.mouseUpStart = now();
         wave.mouseDownStart = 0;
         wave.tUp = 0.0;
         break;
       }
     }
     return false;
   });

   elem.addEventListener('mouseout', function(e) {
   elem.classList.remove("activated");

   for (var i = 0; i < scope.waves.length; i++) {
     // Declare the next wave that has mouse down to be mouse'ed up.
     var wave = scope.waves[i];
     if (wave.isMouseDown) {
       wave.isMouseDown = false
       wave.mouseUpStart = now();
       wave.mouseDownStart = 0;
       wave.tUp = 0.0;
       wave.cancelled = true;
       break;
     }
   }
   return false;
   });

   return scope;
 };

 // Shortcuts.
 var pow = Math.pow;
 var now = function() { return new Date().getTime(); };

 // Quad beizer where t is between 0 and 1.
 function quadBezier(t, p0, p1, p2, p3) {
   return pow(1 - t, 3) * p0 +
          3 * pow(1 - t, 2) * t * p1 +
          (1 - t) * pow(t, 2) * p2 +
          pow(t, 3) * p3;
 }

 function easeIn(t) {
   return quadBezier(t, 0.4, 0.0, 1, 1);
 }

 function cssColorWithAlpha(cssColor, alpha) {
     var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     if (typeof alpha == 'undefined') {
         alpha = 1;
     }
     if (!parts) {
       return 'rgba(255, 255, 255, ' + alpha + ')';
     }
     return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')';
 }

 function dist(p1, p2) {
   return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
 }

 function distanceFromPointToFurthestCorner(point, size) {
   var tl_d = dist(point, {x: 0, y: 0});
   var tr_d = dist(point, {x: size.w, y: 0});
   var bl_d = dist(point, {x: 0, y: size.h});
   var br_d = dist(point, {x: size.w, y: size.h});
   return Math.max(Math.max(tl_d, tr_d), Math.max(bl_d, br_d));
 }


 function toggleDialog() {
   var el = document.getElementById('dialog');
   el.classList.toggle("visible");
 }

 function toggleMenu() {
   var el = document.getElementById('menu');
   el.classList.toggle("visible");
 }


 // Initialize

 function init() {
     setUpPaperByClass( '.paper' );
 }

 window.addEventListener('DOMContentLoaded', init, false);
 </script>

 <style type="text/css" media="screen">
   body {
   background-color: #f9f9f9;
     margin:0; padding:0;
     font-family:sans-serif;
     font-size:14px;
 }

 * {

     -webkit-user-select: none;
     cursor:default;
 }
 .toolbar {
     background-color:#673AB7;
     height:56px;
     overflow:hidden;
 }


 #dialog {
   width:250px;
   height:120px;
   opacity:0.0;
   pointer-events:none;
   -webkit-transform: scale(0.95) translate3d(0,100px,0);;
   -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, -webkit-box-shadow .5s ease-out;

     -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
       -webkit-transition-delay:0.25s;

 }

 #dialog.visible {
   pointer-events:all;
   opacity:1.0;
   -webkit-transform: scale(1.0) translate3d(0,0,0);;
   width:250px;
   height:160px;
       -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.22);
   -webkit-transition-delay:0.0s;

 }


 .dialog {
     top:120px;
     right: 0;
     left: 50%;
     margin-left:-125px;
     padding:24px 16px 20px 24px;
     position:absolute;

     background:white;
     color:rgba(0,0,0,0.5);
     margin-bottom:38px;
     overflow:hidden;
 }
 .dialog h1 {
     font-size:20px;
     font-weight:normal;
     padding:0; margin-top:0;
 }

 .dialog .button {
     position:absolute;
     top:160px;
     right:10px;
 }

 /*#menu {
   width:250px;
   height:120px;
   opacity:0.0;
   pointer-events:none;
   -webkit-transform: scale(0.95) translate3d(0,100px,0);;
   -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, -webkit-box-shadow .5s ease-out;

     -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
 }

 #menu.visible {
   pointer-events:all;
   opacity:1.0;
   -webkit-transform: scale(1.0) translate3d(0,0,0);;
   width:250px;
   height:160px;
       -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.22);
 }*/


 .menu {
     width:160px;
     height:160px;
     background:white;
     position:absolute;
     right:8px;
     top: 8px;
     padding:0;


   opacity:0.0;
   pointer-events:none;
   -webkit-transform: scale(0.95) translate3d(0,0,0);;
   -webkit-transition: -webkit-transform 0.3s ease-out, width 0.2s ease-out, height 0.3s ease-out, opacity 0.1s ease-out, -webkit-box-shadow .5s ease-out;

     -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
   -webkit-transition-delay:0.35s;
   overflow:hidden;


 }

 .menu.visible {
   width:180px;
   height:192px;
   pointer-events:all;
   opacity:1.0;
   -webkit-transform: scale(1.0) translate3d(0,0,0);;
   -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
     -webkit-transition-delay:0.15s;

 }


 .menu div {
     height:48px;
     padding:0;

 }

 .menu canvas {
     height:48px;
     width: 100%;
 }


 .button_floating {
     width:56px;
     height:56px;
     color:#fff;
     background-color:#039BE5;
     border-radius:28px;
     position:absolute;
     top:388px;
     right:40px;
 }

 .container {
 }


 .button {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }

 .button_menu.container {
     margin: 0px;
     height: 48px;
     padding: 0;
 }


 .button_menu {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
     text-align:left !important;
     color:rgb(100,100,100);
 }

 .button_toolbar {
     -webkit-border-radius: 84px;

     color: rgb(255,255,255);
     width: 80px;
     height: 80px;
     float:left;
     margin-right:-24px;
     margin-top:-12px;
     background-color: rgba(0, 0, 0, 0);
 }

 #button_small {
    color: rgb(100, 100, 100);
     background-color: #ffffff;
     width: 80px;
     height: 32px;

 }

 #button_blue {
    color: rgb(255, 255, 255);
     background-color: #0277BD;
     width: 80px;
     height: 32px;
 }

 #button_borderless_square {
   color: #ffffff;
   background-color: #f9f9f9;
   border: 1px solid #f0f0f0;
   width: 100px;
   height: 100px;
   background-color: rgb(255, 255, 255, 0);
   background-image:url(http://wallpaperandbackground.com/wp-content/uploads/2014/03/Field-Landscape.jpg);
     background-size:cover;

 }

 #button_borderless {
   color: #777777;
   background-color: #ffffff;
   width:80px;
   height: 32px;
     margin-right:72px;
     content: "CANCEL";
 }

 #button_borderless_blue {
   color: #4285F4;
   background-color: #ffffff;
   width: 64px;
   height: 32px;
   content:"OK";
 }

 #button_large {
   color: rgb(255, 255, 255);
   width: 100%;
   height: 360px;
   background-color:#81D4FA;
 }

 #button_toolbar1 {
     content: '';
     color:transparent;
         margin-left:-4px;

 }

 #button_toolbar2 {
   content: '★';
   float:right;
 }

 #button_toolbar3 {
     content: 'MENU';
     font-size: 14px;
     width: 88px;
     height:88px;
     margin-top: -16px;
     color:#7FFFFF;
     float:right;
     margin-right:0;

 }

 .caption {
   z-index: 100;
   background-color: red;
 }

 #button_toolbar0.animate {
     -webkit-animation: play 0.5s steps(16);

 }


 .button.raised {
   -webkit-transition: -webkit-box-shadow 0.2s;
   -webkit-transition-delay: 0.2s;
   -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
 }

 .button.raised.activated {
   -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.19), 0px 6px 3px rgba(0,0,0,0.23);
   -webkit-transition-delay: 0.0s;
 }


 .floating {
   -webkit-transition: -webkit-box-shadow 0.2s;
   -webkit-transition-delay: 0.2s;
   -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
 }

 .floating.activated {
   -webkit-box-shadow: 0px 14px 14px rgba(0,0,0,0.25), 0px 10px 5px rgba(0,0,0,0.22);
   -webkit-transition-delay: 0.0s;
 }

 #title {
   color:white;
   font-size:20px;
   line-height:58px;
   margin-left:24px;
 }

 .content {
   padding-left:72px; padding-top:24px; padding-right:144px;
   line-height:20px;
   color:#666;
 }

 @-webkit-keyframes play {
    from { background-position: 0px 0px; }
      to { background-position: 0px -384px; }
 }

 #button_toolbar0 {
   pointer-events: none;
   position:absolute;
   top:16px;
   left: 24px;
   content: "\00a0";
     width:24px;
     height:24px;
   background-image: url(data:image/png;base64,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);
 }

 #button_toolbar0.selected {
   background-image: url(data:image/png;base64,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);
 }
 </style>
 </head>

 <body id="">
   <div class="toolbar">
     <div id="button_toolbar0" class="toolbar_icon"></div>
     <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar1" onclick="animateIcon()"></canvas></span>
     <span id="title" style="float:left">Ripple test</span>
     <span class="container"><canvas onClick="toggleMenu()" class="paper button_toolbar recenteringTouch" id="button_toolbar3"></canvas></span>
     <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar2"></canvas></span>
     <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar2"></canvas></span>

 </div>

 <div id="dialog" class="dialog visible">
     <h1>Press mah buttons!</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
     <span class="container"><canvas class="paper button" id="button_borderless" value="CANCEL"></canvas></span>
     <span class="container"><canvas class="paper button" id="button_borderless_blue" onclick="toggleDialog()" value="OK"></canvas></span>
 </div>

 <div id="menu" class="menu visible">
     <div class="container button_menu"><canvas class="paper button_menu" value="Fold" style="text-align:left"></canvas></div>
     <div class="container button_menu"><canvas class="paper button_menu" value="Spindle" style="text-align:left"></canvas></div>
     <div class="container button_menu"><canvas class="paper button_menu" onClick="" value="Mutilate" style="text-align:left"></canvas></div>
         <div class="container button_menu"><canvas class="paper button_menu" onClick="toggleMenu()" value="Dismiss" style="text-align:left"></canvas></div>

 </div>
 <div class="container"><canvas class="paper button recenteringTouch" id="button_large"></canvas></div>
 <div class="content" style="">
 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 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 <p></p>
 <span class="container" style="margin-right:8px;"><canvas class="paper button raised" id="button_blue" value="ABORT"></canvas></span>
 <span class="container" style="margin-right:8px;"><canvas class="paper button raised" id="button_small" value="RETRY"></canvas></span>
   <span class="container"><canvas class="paper button raised" id="button_small" value="FAIL"></canvas></span>

   <p><p>
 <canvas class="paper button" id="button_borderless_square"></canvas>


 </div>
 <div class="container"><canvas onClick="toggleDialog()" class="paper button_floating floating recenteringTouch" id="button_floating" value="★"></canvas></div>
 </body>
 </html>