Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Support intra-page URL fragment identifiers
Browse files Browse the repository at this point in the history 
Allows you to link directly to, e.g., an individual attribute or method
in a specific doc page.
Supports `<core-doc-viewer>`s with multiple `sources=` set, or with a
single `url=` set.
Maintains compatibility with using class names as the URL fragment
identifier to switch between classes when multiple `sources=` is set.
  • Loading branch information
@jeffposnick
jeffposnick committed Sep 19, 2014
1 parent 0c06903 commit fad5926
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 34 deletions.
6 changes: 5 additions & 1 deletion core-doc-viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,11 @@
validateRoute: function() {
if (this.route) {
this.classes.some(function(c) {
if (c.name === this.route) {
// The URL fragment might be just a class name,
// or it might be a class name followed by a '.' and then
// a section of the the page.
// We want to match on class names here, so split on '.'.
if (c.name === this.route.split('.')[0]) {
this.data = c;
this.route = '';
return;
Expand Down
77 changes: 44 additions & 33 deletions elements/core-doc-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,30 +44,30 @@ <h1>{{data.name}}</h1>

<template if="{{data.extends}}">
<section class="top">
<h3>Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
<h3 id="{{data.name}}.extends">Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
</section>
</template>

<template if="{{data.description}}">
<section class="box top">
<h3>Summary</h3>
<h3 id="{{data.name}}.summary">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}}">
<h3 id="{{data.name}}.attributes">Attributes</h3>
<template repeat="{{attribute in data.attributes}}">
<div class="details" horizontal layout>
<div class="details-name" flex>
<p><code>{{name}}</code></p>
<div class="details-name" flex id="{{data.name}}.attributes.{{attribute.name}}">
<p><code>{{attribute.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>
<code>{{attribute.type}}</code><span class="default" hidden?="{{!attribute.default}}">default: <code>{{attribute.default}}</code></span>
</p>
<marked-element text="{{description}}"></marked-element>
<marked-element text="{{attribute.description}}"></marked-element>
</div>
</div>
</template>
Expand All @@ -76,17 +76,17 @@ <h3>Attributes</h3>

<template if="{{data.properties.length}}">
<section class="box property-box">
<h3>Properties</h3>
<template repeat="{{data.properties}}">
<h3 id="{{data.name}}.properties">Properties</h3>
<template repeat="{{property in data.properties}}">
<div class="details" horizontal layout>
<div class="details-name" flex>
<p><code>{{name}}</code></p>
<div class="details-name" flex id="{{data.name}}.properties.{{property.name}}">
<p><code>{{property.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>
<code>{{property.type}}</code><span class="default" hidden?="{{!property.default}}">default: <code>{{property.default}}</code></span>
</p>
<marked-element text="{{description}}"></marked-element>
<marked-element text="{{property.description}}"></marked-element>
</div>
</div>
</template>
Expand All @@ -95,20 +95,20 @@ <h3>Properties</h3>

<template if="{{data.events.length}}">
<section class="box event-box">
<h3>Events</h3>
<template repeat="{{data.events}}">
<h3 id="{{data.name}}.events">Events</h3>
<template repeat="{{event in data.events}}">
<div class="details" horizontal layout>
<div class="details-name" flex>
<p><code>{{name}}</code></p>
<div class="details-name" flex id="{{data.name}}.events.{{event.name}}">
<p><code>{{event.name}}</code></p>
</div>
<div class="details-info" flex three>
<marked-element text="{{description}}"></marked-element>
<template if="{{params.length}}">
<marked-element text="{{event.description}}"></marked-element>
<template if="{{event.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 repeat="{{param in event.params}}">
<p><code>{{param.name}}</code><span> <code>( {{param.type}} )</code></span></p>
<p><span>{{param.description}}</span></p>
</template>
</div>
</template>
Expand All @@ -120,20 +120,20 @@ <h3>Events</h3>

<template if="{{data.methods.length}}">
<section class="box method-box">
<h3>Methods</h3>
<template repeat="{{data.methods}}">
<h3 id="{{data.name}}.methods">Methods</h3>
<template repeat="{{method in data.methods}}">
<div class="details" horizontal layout>
<div class="details-name" flex>
<p><code>{{name}}</code></p>
<div class="details-name" flex id="{{data.name}}.methods.{{method.name}}">
<p><code>{{method.name}}</code></p>
</div>
<div class="details-info" flex three>
<marked-element text="{{description}}"></marked-element>
<template if="{{params.length}}">
<marked-element text="{{method.description}}"></marked-element>
<template if="{{method.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 repeat="{{param in method.params}}">
<p><code>{{param.name}}</code><span> <code>( {{param.type}} )</code></span></p>
<p><span>{{param.description}}</span></p>
</template>
</div>
</template>
Expand Down Expand Up @@ -166,10 +166,21 @@ <h3>Methods</h3>
} else {
return data.homepage;
}
},

dataChanged: function() {
// Wrap in async() to delay execution until the next animation frame,
// since the <template> contents won't be stamped at the time this is executed.
this.async(function() {
var elementToFocus = this.shadowRoot.getElementById(window.location.hash.slice(1));
if (elementToFocus) {
elementToFocus.scrollIntoView();
}
});
}

});

</script>

</polymer-element>
</polymer-element>

0 comments on commit fad5926

Please sign in to comment.