|
| 1 | +<!DOCTYPE html> |
| 2 | +<!-- |
| 3 | + Copyright 2016 Google Inc. All rights reserved. |
| 4 | + Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | + you may not use this file except in compliance with the License. |
| 6 | + You may obtain a copy of the License at |
| 7 | + https://www.apache.org/licenses/LICENSE-2.0 |
| 8 | + Unless required by applicable law or agreed to in writing, software |
| 9 | + distributed under the License is distributed on an "AS IS" BASIS, |
| 10 | + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 11 | + See the License for the specific language governing permissions and |
| 12 | + limitations under the License |
| 13 | +--> |
| 14 | +<html> |
| 15 | + <head> |
| 16 | + <meta charset="utf-8"> |
| 17 | + <title>MDC Toolbar Demo</title> |
| 18 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 19 | + <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
| 20 | + <style> |
| 21 | + .mdc-toolbar-demo { |
| 22 | + margin: 0px; |
| 23 | + } |
| 24 | + .demo-paragraph { |
| 25 | + margin: 0px; |
| 26 | + padding: 20px 28px; |
| 27 | + } |
| 28 | + .material-icons { |
| 29 | + text-decoration: none; |
| 30 | + cursor: pointer; |
| 31 | + padding: 0px 8px 0px 0px; |
| 32 | + color: white; |
| 33 | + } |
| 34 | + [dir='rtl'] .material-icons { |
| 35 | + padding-left: 8px; |
| 36 | + } |
| 37 | + @media (max-width: 599px) { |
| 38 | + .demo-paragraph { |
| 39 | + padding: 16px; |
| 40 | + } |
| 41 | + } |
| 42 | + footer { |
| 43 | + position: fixed; |
| 44 | + bottom: 20px; |
| 45 | + width: 100%; |
| 46 | + text-align: center; |
| 47 | + color: red; |
| 48 | + background-color: rgba(0, 0, 0, 0.8); |
| 49 | + } |
| 50 | + #my-flexible-header { |
| 51 | + --mdc-toolbar-ratio-to-extend-flexible: 2; |
| 52 | + background-color: rgb(255, 64, 129); |
| 53 | + } |
| 54 | + #my-flexible-header .mdc-toolbar__title { |
| 55 | + font-size: 5rem; |
| 56 | + transform: translateY(-30px); |
| 57 | + } |
| 58 | + </style> |
| 59 | + <script src="../assets/material-components-web.css.js" charset="utf-8"></script> |
| 60 | + </head> |
| 61 | + <body class="mdc-typography mdc-toolbar-demo"> |
| 62 | + <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible" id="my-flexible-header"> |
| 63 | + <div class="mdc-toolbar__row"> |
| 64 | + <section class="mdc-toolbar__section mdc-toolbar__section--align-center"> |
| 65 | + <span class="mdc-toolbar__title">Hey!</span> |
| 66 | + </section> |
| 67 | + </div> |
| 68 | + </header> |
| 69 | + <main> |
| 70 | + <div class="mdc-toolbar-fixed-adjust"> |
| 71 | + <p class="demo-paragraph"> |
| 72 | + Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. |
| 73 | + </p> |
| 74 | + <p class="demo-paragraph"> |
| 75 | + Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. |
| 76 | + </p> |
| 77 | + <p class="demo-paragraph"> |
| 78 | + Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. |
| 79 | + </p> |
| 80 | + </div> |
| 81 | + </main> |
| 82 | + <footer> |
| 83 | + <span>Flexible Expansion Ratio: <span id="ratio">0</span></span> |
| 84 | + </footer> |
| 85 | + <script src="../assets/material-components-web.js" charset="utf-8"></script> |
| 86 | + <script type="text/javascript"> |
| 87 | + (function() { |
| 88 | + var pollId = 0; |
| 89 | + pollId = setInterval(function() { |
| 90 | + var pos = getComputedStyle(document.querySelector('.mdc-toolbar')).position; |
| 91 | + if (pos === 'fixed' || pos === 'relative') { |
| 92 | + init(); |
| 93 | + clearInterval(pollId); |
| 94 | + } |
| 95 | + }, 250); |
| 96 | + function init() { |
| 97 | + var initialR = 255; |
| 98 | + var initialG = 64; |
| 99 | + var initialB = 129; |
| 100 | + var endR = 63; |
| 101 | + var endG = 81; |
| 102 | + var endB = 181; |
| 103 | + var initialFontSize = 5; |
| 104 | + var initialTransY = -30; |
| 105 | + var endFontSize = 1.25; |
| 106 | + var endTransY = 0; |
| 107 | + var ratioSpan = document.querySelector("#ratio"); |
| 108 | + var myFlexibleHeader = document.querySelector("#my-flexible-header"); |
| 109 | + var myFlexibleHeaderTitle = document.querySelector("#my-flexible-header .mdc-toolbar__title"); |
| 110 | + var toolbar = mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); |
| 111 | + toolbar.listen('MDCToolbar:change', function(evt) { |
| 112 | + var flexibleExpansionRatio = evt.detail.flexibleExpansionRatio; |
| 113 | + |
| 114 | + var currentR = Math.round(endR - (endR - initialR) * flexibleExpansionRatio); |
| 115 | + var currentG = Math.round(endG - (endG - initialG) * flexibleExpansionRatio); |
| 116 | + var currentB = Math.round(endB - (endB - initialB) * flexibleExpansionRatio); |
| 117 | + myFlexibleHeader.style.backgroundColor = `rgb(${currentR}, ${currentG}, ${currentB})`; |
| 118 | + |
| 119 | + if (flexibleExpansionRatio > 0.5) { |
| 120 | + var currentTransY = endTransY - (endTransY - initialTransY) * (flexibleExpansionRatio - 0.5) * 2; |
| 121 | + myFlexibleHeaderTitle.style.transform = `translateY(${currentTransY}px)`; |
| 122 | + } else { |
| 123 | + var currentFontsize = endFontSize - (endFontSize - initialFontSize) * flexibleExpansionRatio * 2; |
| 124 | + myFlexibleHeaderTitle.style.fontSize = `${currentFontsize}rem`; |
| 125 | + } |
| 126 | + |
| 127 | + ratioSpan.innerHTML = flexibleExpansionRatio.toFixed(2); |
| 128 | + }); |
| 129 | + toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust'); |
| 130 | + } |
| 131 | + })(); |
| 132 | + </script> |
| 133 | + </body> |
| 134 | +</html> |
0 commit comments