<link rel="import" href="../components/polymer/polymer.html">

<link rel="import" href="../components/context-free-parser/context-free-parser.html">

<link rel="import" href="../components/marked-element/marked-element.html">

<polymer-element name="component-docs" attributes="elements">

<template>

<context-free-parser url="{{url}}" data="{{data}}" on-data-ready="{{dataReady}}">

</context-free-parser>

<template repeat="{{c in data.classes}}">

<doc-page id="{{c.name}}" name="{{c.name}}" data="{{c}}"

downloadable?="{{ isTopLevelElement(c.name, url) }}"></doc-page>

</template>

</template>

<script>

Polymer('component-docs', {

elementName: null,

url: null,

elements: {},

updateElementFromHash: function(e) {

var elementName = window.location.hash.slice(1);

if (this.elementName !== elementName && this.elements[elementName]) {

this.elementName = elementName;

document.body.classList.add('hide-on-hash'); // Hide on .hide-on-hash elements.

}

},

domReady: function() {

this.updateElementFromHash();

window.addEventListener('hashchange', this.updateElementFromHash.bind(this));

},

detached: function() {

document.body.classList.remove('hide-on-hash');

window.removeEventListener('hashchange', this.updateElementFromHash.bind(this));

},

elementNameChanged: function() {

this.url = '/' + this.elements[this.elementName];

window.location.hash = this.elementName;

},

dataChanged: function() {

if (this.data.classes[0].name === 'Entity') {

this.data.classes[0].name = this.elementName;

}

},

isTopLevelElement: function(name, url) {

return url.indexOf('/components/' + name + '/') == 0;

}

});

</script>

<polymer-element name="doc-page" attributes="data downloadable" assetpath="../core-doc-viewer/elements/">

<template>

<link rel="stylesheet" href="../components/highlightjs/styles/default.css">

<link rel="stylesheet" href="../css/elements/doc-page.css">

<div class="main" on-marked-js-highlight="{{prettyPrint}}">

<h1>{{data.name}}</h1>

<template if="{{data.extends}}">

<section class="top">

<h3>Extends: <a href="{{data.extends | collectionPrefix}}-elements.html#{{data.extends}}">{{data.extends}}</a></h3>

</section>

</template>

<template if="{{downloadable}}">

<p>

<component-download-button id="downloadButton"

org="Polymer" component="{{data.name}}"

label="Get {{data.name}}"></component-download-button>

<a class="badge" target="_blank" href="/components/{{data.name}}/demo.html"

on-click="{{recordDemoPageview}}">

<paper-button raised>Demo</paper-button>

</a>

</p>

</template>

<template if="{{data.description}}">

<section class="box top">

<h3>Summary</h3>

<marked-element text="{{data.description}}"></marked-element>

</section>

</template>

<template if="{{data.attributes.length}}">

<section class="box attribute-box">

<h3>Attributes</h3>

<template repeat="{{data.attributes}}">

<div class="details" horizontal layout>

<div class="details-name" flex>

<p><code>{{name}}</code></p>

</div>

<div class="details-info" flex three>

<p layout horizontal center justified>

<code>{{type}}</code><span class="default" hidden?="{{!default}}">default: <code>{{default}}</code></span>

</p>

<marked-element text="{{description}}"></marked-element>

</div>

</div>

</template>

</section>

</template>

<template if="{{data.properties.length}}">

<section class="box property-box">

<h3>Properties</h3>

<template repeat="{{data.properties}}">

<div class="details" horizontal layout>

<div class="details-name" flex>

<p><code>{{name}}</code></p>

</div>

<div class="details-info" flex three>

<p layout horizontal center justified>

<code>{{type}}</code><span class="default" hidden?="{{!default}}">default: <code>{{default}}</code></span>

</p>

<marked-element text="{{description}}"></marked-element>

</div>

</div>

</template>

</section>

</template>

<template if="{{data.events.length}}">

<section class="box event-box">

<h3>Events</h3>

<template repeat="{{data.events}}">

<div class="details" horizontal layout>

<div class="details-name" flex>

<p><code>{{name}}</code></p>

</div>

<div class="details-info" flex three>

<marked-element text="{{description}}"></marked-element>

<template if="{{params.length}}">

<div class="params">

<p>Event details:</p>

<template repeat="{{params}}">

<p><code>{{name}}</code><span> <code>( {{type}} )</code></span></p>

<p><span>{{description}}</span></p>

</template>

</div>

</template>

</div>

</div>

</template>

</section>

</template>

<template if="{{data.methods.length}}">

<section class="box method-box">

<h3>Methods</h3>

<template repeat="{{data.methods}}">

<div class="details" horizontal layout>

<div class="details-name" flex>

<p><code>{{name}}</code></p>

</div>

<div class="details-info" flex three>

<marked-element text="{{description}}"></marked-element>

<template if="{{params.length}}">

<div class="params">

<p>Method parameters:</p>

<template repeat="{{params}}">

<p><code>{{name}}</code><span> <code>( {{type}} )</code></span></p>

<p><span>{{description}}</span></p>

</template>

</div>

</template>

</div>

</div>

</template>

</section>

</template>

</div>

</template>

<script>

(function() {

function encodeHTMLEntities_(htmlStr) {

return htmlStr.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

}

Polymer('doc-page', {

downloadable: false,

recordDemoPageview: function(e, detail, sender) {

window.recordPageview && window.recordPageview(sender.href); // global pollution.

},

prettyPrint: function(e, detail, sender) {

if (window.prettyPrintOne) {

detail.code = window.prettyPrintOne(encodeHTMLEntities_(detail.code));

}

},

collectionPrefix: function(elementName) {

var match = elementName.match(/(\w+)-/);

return match ? match[1] : 'core';

}

});

})();

</script>