core-home-page.html

<!--
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
-->

<style>

  body {
    margin: 0;
  }

</style>

<link rel="import" href="../core-layout/core-layout.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-doc-viewer/core-doc-viewer.html">

<!--

Implements the default landing page for Polymer components.

`<core-home-page>` can render an informational page for any component.
Polymer components use this component in `index.html` to provide the standard landing page.

`<core-home-page>` is _vulcanized_, which means it contains all it's dependencies baked in.
Therefore, this component is intended to be used only by itself in a page.

This *-dev package contains the raw source and the dependency manifest necessary
to reconstruct `core-home-page\core-home-page.html` via vulcanize.

`<core-home-page>` will set the page title automatically.

@group Polymer Core Elements
@element core-home-page

-->

<polymer-element name="core-home-page" attributes="moduleName sources">
<template>

  <link rel="stylesheet" href="core-home-page.css">

  <core-layout flow="v"></core-layout>

  <core-header-panel core-flex mode="Xcover">

    <core-toolbar class="tall appbar">
      <span class="bottom">{{moduleName}}</span>
    </core-toolbar>

    <column>

      <card class="shadow">
        <core-item icon="shortcut" label="Api Reference" href="components/{{moduleName}}"></core-item>
        <core-item icon="twitter" label="GitHub" href="https://github.com/polymer/{{moduleName}}"></core-item>
        <core-item icon="tag" label="Download" href="localhost:3003/archive?{{moduleName}}={{orgName}}/{{moduleName}}"></core-item>
        <!--<a target="_blank" href="components/{{moduleName}}/demo.html">Live Demo</a>-->
      </card>

      <core-header-panel class="shadow">
        <core-toolbar style="background-color: lightblue;">
          <core-item icon="shortcut" label="Demo" href="components/{{moduleName}}/demo.html"></core-item>
        </core-toolbar>
        <iframe id="frame" src="components/{{moduleName}}/demo.html" style="width: 100%; height: 300px;" on-load="{{frameLoaded}}"></iframe>
      </core-header-panel>

      <card class="shadow">
        <!--<core-item icon="tag" label="Demo" href="components/{{moduleName}}/demo.html"></core-item>
        <iframe src="components/{{moduleName}}/demo.html"></iframe>-->
        <core-doc-viewer url="components/{{moduleName}}/{{moduleName}}.html"></core-doc-viewer>
      </card>

      <!--<a class="button" target="_blank" href="components/{{moduleName}}/demo.html">Live Demo</a>
      <a class="button" target="_blank" href="components/{{moduleName}}/">Documentation</a>
      <a class="button" target="_blank" href="https://github.com/polymer/{{moduleName}}">GitHub</a>
      <a class="button" target="_blank" href="../{{moduleName}}/demo.html">Download!</a>-->
      <!--<core-doc-viewer core-flex url="{{url}}" sources="{{sources}}"></core-doc-viewer>-->

    </column>

  </core-header-panel>

</template>
<script>

  Polymer('core-home-page', {

    moduleName: '',

    created: function() {
      this.moduleName = this.moduleName || this.findModuleName();
    },

    frameLoaded: function() {
      // TODO(sjmiles): race condition can't stay
        this.$.frame.contentDocument.addEventListener('polymer-ready', function() {
          this.async(function() {
            this.$.frame.style.height = this.$.frame.contentDocument.body.offsetHeight + 8 + 'px';
          });
        }.bind(this));
    },

    moduleNameChanged: function() {
      document.title = this.moduleName;
      this.url = this.moduleName ? this.moduleName + '.html' : '';
    },

    findModuleName: function() {
      var path = location.pathname.split('/');
      var name = path.pop() || path.pop();
      if (name.indexOf('.html') >= 0) {
        name = path.pop();
      }
      return name || '';
    }

  });

</script>
</polymer-element>