This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add example formatting to core-doc-viewer's own documentation
- Loading branch information
Scott J. Miles
committed
Jun 17, 2014
1 parent
ddb6775
commit 575ce9d
Showing
1 changed file
with
178 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,178 @@ | ||
| <link rel="import" href="elements/core-doc-page.html"> | ||
| <link rel="import" href="elements/core-doc-toc.html"> | ||
| <link rel="import" href="../core-icon/core-icon.html"> | ||
|
|
||
| <!-- | ||
| Displays formatted source documentation scraped from input urls. | ||
| @class core-doc-viewer | ||
| @homepage github.io | ||
| --> | ||
|
|
||
| <polymer-element name="core-doc-viewer" attributes="sources route url"> | ||
|
|
||
| <template> | ||
|
|
||
| <style> | ||
|
|
||
| core-doc-toc { | ||
| display: none; | ||
| width: 332px; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></context-free-parser> | ||
|
|
||
| <template repeat="{{sources}}"> | ||
| <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></context-free-parser> | ||
| </template> | ||
|
|
||
| <core-layout></core-layout> | ||
| <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc> | ||
| <core-doc-page core-flex data="{{data}}"></core-doc-page> | ||
|
|
||
| </template> | ||
|
|
||
| <script> | ||
|
|
||
| Polymer('core-doc-viewer', { | ||
| /** | ||
| * A single file to parse for docs | ||
| * | ||
| * @attribute url | ||
| * @type Array | ||
| * @default '' | ||
| */ | ||
|
|
||
| /** | ||
| * Class documentation extracted from the parser | ||
| * | ||
| * @property classes | ||
| * @type Array | ||
| * @default [] | ||
| */ | ||
| classes: [], | ||
|
|
||
| /** | ||
| * Files to parse for docs | ||
| * | ||
| * @attribute sources | ||
| * @type Array | ||
| * @default [] | ||
| */ | ||
| sources: [], | ||
|
|
||
| ready: function() { | ||
| window.addEventListener('hashchange', this.parseLocationHash.bind(this)); | ||
| this.parseLocationHash(); | ||
| }, | ||
|
|
||
| parseLocationHash: function() { | ||
| this.route = window.location.hash.slice(1); | ||
| }, | ||
|
|
||
| routeChanged: function() { | ||
| this.validateRoute(); | ||
| }, | ||
|
|
||
| validateRoute: function() { | ||
| if (this.route) { | ||
| this.classes.some(function(c) { | ||
| if (c.name === this.route) { | ||
| this.data = c; | ||
| this.route = ''; | ||
| return; | ||
| } | ||
| }, this); | ||
| } | ||
| }, | ||
|
|
||
| selectedChanged: function() { | ||
| this.data = this.classes[this.selected]; | ||
| }, | ||
|
|
||
| parserDataReady: function(event) { | ||
| this.assimilateData(event.target.data); | ||
| }, | ||
|
|
||
| assimilateData: function(data) { | ||
| this.classes = this.classes.concat(data.classes); | ||
| this.classes.sort(function(a, b) { | ||
| var na = a && a.name.toLowerCase(), nb = b && b.name.toLowerCase(); | ||
| return (na < nb) ? -1 : (na == nb) ? 0 : 1; | ||
| }); | ||
| if (!this.data && !this.route && this.classes.length) { | ||
| this.data = this.classes[0]; | ||
| } | ||
| if (this.classes.length > 1) { | ||
| this.$.toc.style.display = 'block'; | ||
| } | ||
| this.validateRoute(); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </polymer-element> | ||
| <link rel="import" href="elements/core-doc-page.html"> | ||
| <link rel="import" href="elements/core-doc-toc.html"> | ||
| <link rel="import" href="../core-icon/core-icon.html"> | ||
|
|
||
| <!-- | ||
| Displays formatted source documentation scraped from input urls. | ||
| Documentation can be encoded into html comments (<!-- ... -->) or using JsDoc notation (/** ... */). | ||
| When using JsDoc notation, remember that the left-margin includes an asterisk and a single space. | ||
| This is important for markdown constructs that count spaces. Code blocks for example, must be | ||
| five spaces from the first asterisk. | ||
| ## Markdown | ||
| Markdown format is supported. | ||
| ### Links | ||
| Arbitrary links can be encoded using [standard markdown format](http://daringfireball.net/projects/markdown/syntax). | ||
| [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown) is also supported. | ||
| Links to other topics can be made with hash-links [core-doc-viewer](#core-doc-viewer). | ||
| ### Code | ||
| Example | ||
| Four space indents indicate code blocks. | ||
| <code>blocks are syntax highlighted</code> | ||
| <script> | ||
| while(true) { | ||
| javascript('is highlighted also'); | ||
| } | ||
| </script> | ||
| ### Blockquote | ||
| > Blockquote is supported for long text that needs to wrap with a common left side indent. | ||
| > Blockquote is supported for long text that needs to wrap with a common left side indent. | ||
| ### Lists | ||
| 1. enumerated | ||
| 1. lists | ||
| Use - or + for bullet points: | ||
| - bullet | ||
| - lists | ||
| ### Tables | ||
| | First Header | Second Header | | ||
| | ------------- | ------------- | | ||
| | Content Cell | Content Cell | | ||
| | Content Cell | Content Cell | | ||
| ### HTML | ||
| Arbitrary HTML is also supported | ||
| <input><button>Button</button><hr/> | ||
| @class core-doc-viewer | ||
| @homepage github.io | ||
| --> | ||
|
|
||
| <polymer-element name="core-doc-viewer" attributes="sources route url"> | ||
|
|
||
| <template> | ||
|
|
||
| <style> | ||
|
|
||
| core-doc-toc { | ||
| display: none; | ||
| width: 332px; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></context-free-parser> | ||
|
|
||
| <template repeat="{{sources}}"> | ||
| <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></context-free-parser> | ||
| </template> | ||
|
|
||
| <core-layout></core-layout> | ||
| <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc> | ||
| <core-doc-page core-flex data="{{data}}"></core-doc-page> | ||
|
|
||
| </template> | ||
|
|
||
| <script> | ||
|
|
||
| Polymer('core-doc-viewer', { | ||
| /** | ||
| * A single file to parse for docs | ||
| * | ||
| * @attribute url | ||
| * @type String | ||
| * @default '' | ||
| */ | ||
|
|
||
| /** | ||
| * Class documentation extracted from the parser | ||
| * | ||
| * @property classes | ||
| * @type Array | ||
| * @default [] | ||
| */ | ||
| classes: [], | ||
|
|
||
| /** | ||
| * Files to parse for docs | ||
| * | ||
| * @attribute sources | ||
| * @type Array | ||
| * @default [] | ||
| */ | ||
| sources: [], | ||
|
|
||
| ready: function() { | ||
| window.addEventListener('hashchange', this.parseLocationHash.bind(this)); | ||
| this.parseLocationHash(); | ||
| }, | ||
|
|
||
| parseLocationHash: function() { | ||
| this.route = window.location.hash.slice(1); | ||
| }, | ||
|
|
||
| routeChanged: function() { | ||
| this.validateRoute(); | ||
| }, | ||
|
|
||
| validateRoute: function() { | ||
| if (this.route) { | ||
| this.classes.some(function(c) { | ||
| if (c.name === this.route) { | ||
| this.data = c; | ||
| this.route = ''; | ||
| return; | ||
| } | ||
| }, this); | ||
| } | ||
| }, | ||
|
|
||
| selectedChanged: function() { | ||
| this.data = this.classes[this.selected]; | ||
| }, | ||
|
|
||
| parserDataReady: function(event) { | ||
| this.assimilateData(event.target.data); | ||
| }, | ||
|
|
||
| assimilateData: function(data) { | ||
| this.classes = this.classes.concat(data.classes); | ||
| this.classes.sort(function(a, b) { | ||
| var na = a && a.name.toLowerCase(), nb = b && b.name.toLowerCase(); | ||
| return (na < nb) ? -1 : (na == nb) ? 0 : 1; | ||
| }); | ||
| if (!this.data && !this.route && this.classes.length) { | ||
| this.data = this.classes[0]; | ||
| } | ||
| if (this.classes.length > 1) { | ||
| this.$.toc.style.display = 'block'; | ||
| } | ||
| this.validateRoute(); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </polymer-element> |