Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
​
<head>
  <title>Markdown Service Test</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
  <link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-scroll-header-panel/core-scroll-header-panel.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-selector/core-selector.html">
  <link rel="import" href="http://www.polymer-project.org/components/paper-tabs-custom/paper-tabs.html">
  <link rel="import" href="http://www.polymer-project.org/components/paper-dialog/paper-dialog.html">
  <link rel="import" href="http://www.polymer-project.org/components/paper-dialog/paper-dialog-transition.html">
  <!-- <link rel="import" href="post-card.html"> --> <!-- step 2 -->
  <link rel="import" href="http://jsbin.com/hovija/1/edit"> <!-- markdown-embedded.html -->
  <link rel="import" href="http://jsbin.com/qifuxi/1/edit"> <!-- markdown-service.html -->
​
​
  <style>
  html,body {
     -webkit-transform: translateZ(0);
      transform: translateZ(0);
    height: 100%;
    margin: 0;
    background-color: #E5E5E5;
    font-family: 'RobotoDraft', sans-serif;
  }
  .container {
    width: 80%;
    margin: 50px auto;
  }
  @media (min-width: 481px) {
    #tabs {
      width: 200px;
    }
    .container {
      width: 90%;
    }
  }
  core-header-panel {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; 
  }
  
  core-pages {
    width: 100%;
    height: 100%;
  }
  #tabs {
    width: 60%;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
​
    p {
      margin-bottom: 0;
    }
​
    paper-dialog {
      width: 50%;
      min-width: 430px;
    }
​
    core-scroll-header-panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    /* background for toolbar when it is at its full size */
    core-scroll-header-panel::shadow #headerBg {
      background-image: url(/images/sap-header.png);
    }
    
    /* background for toolbar when it is condensed */
    core-scroll-header-panel::shadow #condensedHeaderBg {
      background-color: white;
    }
    
    core-toolbar {
      color: white; /* teal */ 
      fill: #f1f1f1;  /* grey */
      background-color: transparent;
​
    }
    
    .title {
      -webkit-transform-origin: 0;
      transform-origin: 0;
      font-size: 40px; 
    }
    
    .content {
      width: 90%;
      margin: 50px auto;
    }
​
  </style>
</head>
​
<body unresolved touch-action="auto"> <!-- ng-app="Lab"> -->
  <core-scroll-header-panel condenses>
​
    <core-toolbar class="tall">
      <div flex></div>
      <paper-tabs id="tabs" selected="markdown-embedded" self-end>
        <paper-tab name="markdown-embedded">Embedded Markdown</paper-tab>
        <paper-tab name="markdown-service">Markdown Service</paper-tab>
      </paper-tabs>
      <div class="bottom indent title">Markdown Test</div>
    </core-toolbar>
​
    <!-- main page content will go here --> 
    <div class="content" layout vertical center>
      <!-- <post-list show="all"></post-list> -->
      <core-pages selected="0">
        <div>
          <markdown-embedded-page show="all"></markdown-embedded-page>
        </div>
        <div>
          <!--<post-list show="all"></post-list>-->
          <markdown-service-page show="all"></markdown-service-page>
        </div>
      </core-pages>
​
    </div>
​
  </core-header-panel>
  
​
  <script>
    var tabs = document.querySelector('paper-tabs');
    var pageIndexObj = {"markdown-embedded":"0","markdown-service":"1"}
​
    tabs.addEventListener('core-select', function() {
      //list.show = tabs.selected;  // switch views in  <post-list> when the user switches tabs
      var pages = document.querySelector('core-pages');
      pages.selected = pageIndexObj[tabs.selected];
    });
​
    // custom transformation: scale header's title
    var titleStyle = document.querySelector('.title').style;
    addEventListener('core-header-transform', function(e) {
      var d = e.detail;
      var m = d.height - d.condensedHeight;
      var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
      titleStyle.transform = titleStyle.webkitTransform = 
          'scale(' + scale + ') translateZ(0)';
    });
​
  </script>
​
</body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ferrisargylepro
0viewers